発注をもらったら、ワイヤーフレーム作成に入りましょう。
ワイヤーフレームとは、簡単に言うと画面のレイアウトです。
デザインではありません。
図形や文字で「画面のレイアウト」を簡単に作ります。
出来れば全ページの構成を作ってください。
最初は手書きでも構いません。
慣れてきたらXDやPhotoshopなどでレイアウトを作ってみてください。
パワーポイントなどでワイヤーフレームを作る人も多いです。
予算があればパソコン版とスマートフォン版、両方作ります。
ただ、予算が無い場合はスマホだけ作りましょうという提案をします。
つい数年前まではパソコン重視でしたが、状況はすっかり変わりましたね。
では、さっそくワイヤーフレームの本体を見てみましょう。
まずはワイヤーフレームのサンプルを御覧ください。
このようなニュアンスです。
テキストやレイアウト、出来れば画像も入れると良いでしょう。
ざっくりした画面構成を作り、必要な要素が入っているかを確かめます。
最初からツールを使って構成を作るのが難しい場合、手書きで書いてみてください。
手書きで書いた画面構成を、そのままツールで再現してみましょう。
ワイヤーフレームで気をつけること
画面構成を作る上で、大事なことがいくつかあります。
次のポイントを押さえながら、ワイヤーフレームを作ってみましょう。
重要なコンテンツ優先になっているか
コンテンツに優先順位をつけてください。
何が一番大事で、何を後回しにしていいのか。
どんな内容を目立たせるべきで、見てほしいのか。
全てのコンテンツを目立たせることは出来ません。
コンテンツの重要度には、優先順位があります。
何を伝えるべきかを認識して、レイアウトを作りましょう。
人の心理に沿っているか
WEBサイトを見に来るのは人です。
情報を得る度に、心理的にも影響を受けながらコンテンツを見ていきます。
例えば悩みを解決してくれるキャッチコピーを見たらどうでしょう。
もっと深く知りたいと思いますよね。
読み進めていった結果、思ったよりも安く手に入ると知ったらどうでしょう。
もちろん、購入を検討するはずです。
購入を検討している最中に、思い当たりそうな細かな疑問は何でしょう。
Q＆Aで全て解決してあげてください。
このように、興味や心理の動きにあわせて構成を作っていきます。
人は、そのコンテンツを見た時、どう心が動くでしょうか。
一体次に、何の情報を求めるでしょう。
常に求めるものと流れを考えながら要素を配置していきましょう。
分かりやすくシンプルか
何を伝えたいかを明白にし、すぐ伝わらなければNGです。
基本的な原則は、伝えたいものがすぐ伝わること。
そのためには、シンプルで分かりやすい必要があります。
目安としては、視線を向けて0.5秒で言いたいことが認識できることです。
つまり目を向けた瞬間、伝えたいことが伝わること。
それくらい分かりやすくシンプルで無ければ、人の目を止められません。
分かりやすくシンプルであること。
伝えたいことがしっかり伝わること。
これはWEBサイトを作る上で最低条件となります。
規則性があるか
例えば、どのページを見ても、レイアウトがバラバラだったら。
それは果たして使いやすいWEBサイトでしょうか。
いいえ、そんなことはありません。
一定のルールをレイアウトに持たせたほうが、より使いやすくなります。
1度見たレイアウトは、2度目、見た時に把握が早くなります。
つまり、すぐに使いこなせるし情報も把握できるということです。
レイアウトに一定の規則性をもたせることで、より効率的に情報を伝えられます。
よく「無駄に」全ページバラバラのレイアウトを作ることがあります。
なんとなく「同じだと手を抜いた感じがしてしまうから」なのでしょう。
しかし、実際は全てのページを一定の規則性の元に作り上げるべきです。
ボタンの配置や文章の位置。
画像の使い方やデザインの方法。
一貫性やルールを取り入れることで、より分かりやすくなります。
クライアントと確認しよう
ワイヤーフレームを全ページ作ったら、いよいよクライアントに提出です。
しかし、よほど理解のあるクライアントじゃなければ渡すだけだと不十分。
返ってくる言葉は決まって「これだけだと分からない」なのです。
クライアントは基本的に、促されるまで真剣に考える気がありません。
要素だけ見ても、本当にそれがベストか判断する労力を「使わない」のです。
中には「構成」だと説明しても「デザインが悪い」と見当違いに不満を言う人もいます。
説明不足もありますが、構成とデザインの違いを理解していないのですね。
だからこそ、ワイヤーフレームで「判断して欲しいことを明確に」伝えましょう。
今回は「希望の要素が全て入っているか確認してくれ」ということ。
そして「要素の優先順位は間違いなく叶えられているか」ということ。
そもそも「入れ忘れている要素が無いか」ということ。
デザインイメージは頭から外し、純粋に内容を判断してもらうのです。
目的をメールや電話で促さなければ、クライアントは勘違いしがちです。
一番上手くいくのは、直接説明しにいくことでしょう。
対面した上で、一緒に考えながらレイアウトを決めていきます。
それこそ、もっとも素早く効率的にレイアウトを確定まで持っていく方法です。
基本的にディレクションは、相手任せにすると何も進まないのです。
ディレクターが相手のタスク完了を待つのではなく、自ら進めていく必要があります。
その意識1つで、クライアントのタスクもまた、スムーズに消化されるようになります。