Webサイト制作時に作成する「ワイヤーフレーム」。デザイナーの方は、ディレクターからワイヤーフレームを受け取り、それを元にデザインに着手することが多いと思います。
では、デザイナーの方がディレクターにステップアップし、実際にワイヤーフレームを作成する側の立場になった際、どのような点を押さえておくべきでしょうか。“デザインのラフ案”のように作成してしまうと、トンマナを確認するものなのか、構成を確認するものなのかとクライアントが困惑してしまい、本来確認すべきポイントがかすんでしまうなどという事態に陥ります。
ワイヤーフレームの役割をきちんと理解した上で、プロジェクトの内容に応じて最適なワイヤーフレームを作成できるよう、基本的なポイントについて紹介します。
ワイヤーフレームはチーム全員のイメージを共有するツール
そもそもワイヤーフレームとは、これから作り上げるWebサイトの設計図としてクライアントやチーム内で視覚的に確認し、認識を合わせるためのものです。決して「デザインの方向性を確認するもの」ではありません。ここをきちんと理解していないと、クライアントとのミーティングの場でもデザインの話に終始してしまい、このタイミングで確認すべきポイントを見落としてしまいます。
制作フェーズの前に確認すべきポイントをワイヤーフレーム上で押さえておく事ができれば、それだけ制作フェーズでの抜け漏れを防ぎ、後々「思っていたものと違う」というようなクライアントからのフィードバックや、制作のやり直しで慌てるというような状況を回避できます。
ワイヤーフレーム作成時で気をつけるべき６つのポイント
＜ワイヤーフレームに取り掛かる前に＞
1. ターゲットを理解する
Webサイトには必ずコンテンツを届ける相手、すなわち「ユーザー」が存在します。ワイヤーフレームを作成する際は、そのコンテンツをどのようなユーザーに、どのようなコミュニケ―ションで届けるべきかを意識しましょう。
そのためには、プロジェクトの全体像を理解し、数あるタッチポイントの中での“Webサイト”の役割を理解しておくことがとても重要です。そしてWebサイトに対して、どのような経路で、どのようなターゲットが訪れるのかを踏まえ、作成を進める必要があります。
FICCでは必ず、プロジェクト全体の「パーセプションフロー」を作成し、Webサイトに訪れるユーザーがどのような“パーセプション”でサイトを訪問し、どのような“刺激”を受け、“行動”を起こすかを定義しています。このように、効果的なWebサイトを目指すには、ワイヤーフレームの作成前の段階からプロジェクト全体の戦略を理解しておく必要があります。
※パーセプションフローに関するブログ記事はこちら
2. ワイヤーフレームの役割を確認する
ワイヤーフレームの役割は、プロジェクトのタイプによって微妙に異なります。例えば、新製品を大々的に告知するためのキャンペーンページなのか、それともマイナーチェンジをした新製品を紹介するページなのか、それだけでもページの完成形は異なり、ワイヤーフレームの時点で確認すべきポイントにも少なからず影響してきます。
ビジュアルを大きく見せる、インタラクションを多用する、しっかりとテキストを読ませるなど、提案内容がクライアントやチームに分かるように作成しなくてはいけません。
また、確認ポイントをしっかり盛り込んだワイヤーフレームでも、クライアント担当者によっては情報過多な印象を受け、確認が億劫に感じられてしまうかもしれません。プロジェクトの進行状況やクライアント担当者のリテラシーによって、確認すべきポイントを絞り込むなどし、臨機応変にワイヤーフレームの形を変える必要があります。
＜ワイヤーフレーム作成時に＞
3. 一度情報を頭の中で整理する
まず基本的なポイントとして、クライアントから提供された情報をきちんと読み、自身の中で理解しておきましょう。もし資料の内容やクライアントの意向がユーザーにとって分かり辛いと感じた場合は、より分かり易くなるよう提案することも大切です。
自分の中で咀嚼できていないままワイヤーフレームに着手すると、何を伝えたいのかがしっかり表現できない上に、制作フェーズの段階で構成から見直す事態にもなりかねません。また、いきなりイラストレーターなどを使って描き始めるのではなく、一度紙に書くなどして頭の中でイメージをまとめてから着手すると良いでしょう。
4. プライオリティを明確にする
製品ビジュアル、リードテキスト、ボタンなど、ページの目的を踏まえ、何が一番に目立つべきなのかを明確にしましょう。ワイヤーフレームの段階で、誰が見てもそのページの目的やメッセージがはっきりと理解できるように作成しておくと、デザインの段階でのクライアントやデザイナーとの齟齬が少なくなります。
5. Call to Actionを明確にする
プロジェクトの戦略に基づいて、キャンペーン応募、会員登録、シェアなど、ページでユーザーにどのようなアクションをさせたいのかを定義し、Call to Action（CtA）を明確にします。
もしそれがボタンクリックなのであれば、ユーザーの行動を喚起できるような位置にボタンを配置します。ここをワイヤーフレームの段階できちんと定義しておくことで、デザイナーもデザイン時の参考にしやすくなります。
6. インタラクションの箇所を明確にする
Lightboxでのコンテンツ表示、パララックスサイトのスクロール、その他JSで構築できるインタラクションなど、Webサイトによってはインタラクティブな要素を多く盛り込むことも多々あります。さらにスマホサイトの場合、スワイプやタップをさせるなどのスマートフォン特有のインタラクションもあります。
こうしたインタラクションは、結果的にはモックアップで検証することが多いですが、ワイヤーフレーム作成時に予め考慮しておくことで、ユーザーアクションやシステムに関連する懸念点を洗い出す機会に繫がります。また、制作メンバーから技術的な意見を引き出すきっかけにもなり、Webサイトの精度を高めていくことができます。
まとめ
以上の点からもお分かりの通り、ワイヤーフレームを作成する上で求められるのは、Webサイトの目的を踏まえてコンテンツ設計を行う点、そして、プロジェクトのタイプや状況を踏まえてワイヤーフレームで担うべき役割をきちんと理解しておく点です。そして作成時の基本的なポイントを抑えることで、目的に応じた、より意義のあるワイヤーフレームを作成できるはずです。