ワイヤーフレームの作り方・書き方のコツ

ワイヤーフレームとは、サイトの設計図の様なものだと前回のレッスンで学びました。このレッスンでは実際の作り方・書き方などについて学んでいきます。

 

• ユーザーの視線の動きを考慮した配置
• 重要なコンテンツは大きさやカラーで目立たせる
• １つのページに載せるコンテンツを選ぶ
• 実際に使用するテキストを使う
• 作成
• まとめ

ユーザーの視線の動きを考慮した配置

レイアウトの章で視線がアルファベットの「Z」のように動いていくということを学びました。この「Z型」の他にもパターンがあります。この視線の動きはサイト内コンテンツによって決めると良いでしょう。視線の動きの種類が決まったら、その線上に重要コンテンツを配置するという事ですね。

「Z型」

この「Z型」は画像が多いサイトなどで使われています。また、そのサイトを訪れるのが初めてのユーザーは、サイト概要を把握するために「Z型」に視線が動くといわれています。

「F型」

「F型」はコンテンツ量が多いサイトでよく使われます。この動きは、まず左から右に横方向に進みます。そして左に戻り下に動きます。そしてまた右に、、とだんだん下がっていきます。こちらはサイト概要を把握済みの場合にこの動きになることが多いそうです。

この「F型」の視線の動きを想定して、コンテンツが配置されていると思われるサイトの例が以下です。

https://news.google.com/news/

「Googleニュース」です。１つ１つのニュースを上から順に読み進めていくのではないでしょうか。

重要なコンテンツは大きさやカラーで目立たせる

テキスト量の多いサイトでは、すべてのテキストを読んでもらえる可能性は高くないかと思います。たとえば小さな文字が沢山並んでいるだけだと、ユーザーは読み進める気をなくし離脱してしまいます。その対策として、サイズや太さなどで目立たせた見出しを付けたりします。

このようにすることで、ユーザーは見出しだけを見て行き必要な部分のみ読み進めることも可能となります。これはユーザーの離脱を防ぐ目的ですね。

１つのページに載せるコンテンツを選ぶ

１つのページにコンテンツを沢山載せると情報量が多く、ユーザーは読み進めるのをやめてしまいます。ですので、重要なコンテンツはトップページ、それ以外は他のページにと分けて載せましょう。また、タブ等を使うのもよいでしょう。

ワイヤーフレームでも実際に使用するテキストを使う

前項目のイメージ図をみてみましょう。詳細ページの住所など「〇〇」というサンプルテキストとなっています。これには問題点があります。それは、ワイヤフレームでの設計が実際のサイト制作の際に崩れてしまうことです。たとえば、テキストがサンプルテキストよりも長くなればレイアウトが崩れてしまいますね。

上記の様に実際にのサイト制作の際に問題が発生したとします。そうなると作って問題に気づき直すというような、無駄な作業が増えてしまいますね。このような事を防ぐ意味でも、ワイヤーフレームの段階から実際に使うコンテンツを出来るだけ使いましょう。

ワイヤーフレームの作成例

以下は美容室のサイトのワイヤーフレームの例です。テキストは実際のテキストを使用しています。また、ボタンや画像は図形で表しています。

ワイヤーフレーム作成の際の使用ツール

ワイヤーフレーム作成の際の使用ツールをいくつか紹介していきます。まず、Adobeの「Illustrator / Photoshop」というソフトですね。上記は「illustrator」で作成したものです。そして他にもとても良いツールがあるのでみていきましょう。

以下は「cacoo」というサイトです。これはウェブ上でサイトマップやワイヤーフレームを作成できるサービスです。

https://cacoo.com/ja/

また、手書きでも良いかもしれません。自分に合ったものを使っていきましょう。

まとめ

今回のレッスンでは、ワイヤーフレームの作成について学びました。ワイヤーフレーム作成時のポイントを抑えて作成していきましょう。

まず、サイトに初めて訪れるユーザーには「Z型」、サイト概要を把握しているユーザーには「F型」が有効だとされています。

サイトがあまり縦長にならないように(１ページのコンテンツ量が多すぎないように)優先順位をもとに各ページに分け、重要なコンテンツは目立たせるよう意識して作成しましょう。