ワイヤーフレームとは、サイトの設計図の様なものだと前回のレッスンで学びました。
このレッスンでは実際の作り方・書き方などについて学んでいきます。
まずはワイヤーフレーム作成にあたってのポイントからおさえましょう。
ユーザーの視線の動きを考慮した配置
デザインの４原則のレッスンで、視線は「F型」や「Z型」に動いていくということを学びました。この視線の動きはサイト内コンテンツによって決めると良いでしょう。視線の動きの種類が決まったら、その線上に重要コンテンツを配置するという事ですね。
Z型
「Z型」は画像が多いサイトなどで使われています。
また、そのサイトを訪れるのが初めてのユーザーは、サイト概要を把握するために「Z型」に視線が動くといわれています。
F型
「F型」はコンテンツ量が多いサイトでよく使われます。
この動きは、まず左から右に横方向に進みます。そして左に戻り下に動きます。そしてまた右に、とだんだん下がっていきます。
サイト概要を把握済みの場合にこの動きになることが多い傾向にあります。
この「F型」の視線の動きを想定し、コンテンツを配置されていると思われるサイトには「Googleニュース」などがあります。
重要なコンテンツは目立たせる
こちらはデザインの４原則でいう「コントラスト」に該当します。
テキスト量の多いサイトでは、すべてのテキストを読んでもらえる可能性は高くないでしょう。たとえば小さな文字が沢山並んでいるだけだと、ユーザーは読み進める気をなくし離脱してしまいます。
その対策として、重要なコンテンツを目出させるという方法があります。
下記では目立つように見出しを大きく太く設定しています。
このようにすることで、ユーザーは見出しを見て、気になった部分の詳細を読んでくれやすくなるでしょう。知りたい情報がどこに書かれているかも分かりやすくなります。
結果として、ユーザーの離脱を防ぐことに繋がるでしょう。
１つのページに載せるコンテンツを選ぶ
１つのページにコンテンツを沢山載せると情報量が多く、ユーザーは読み進めるのをやめてしまいます。
ですので、重要なコンテンツはトップページ、それ以外は他のページにと分けて載せましょう。
実際に使用するテキストを使う
ワイヤーフレームを作成するときには、サンプルテキストを使用することもあります。
下図を見てください。テキスト部分が「△△」「〇〇」というサンプルテキストとなっています。これには問題点があります。
それは、ワイヤフレームでの設計が実際のサイト制作の際に崩れてしまうことです。
たとえば、テキストがサンプルテキストよりも長くなればレイアウトが崩れてしまいますね。
上図のはみ出した部分を「省略せずに全文載せたい」とクライアントからの要望があったとしましょう。
そうなると一度は完成したレイアウトを直すというような、無駄な作業が増えてしまいますね。このような事を防ぐために、可能な限りワイヤーフレームの段階から実際に使用するテキストを使いましょう。
ワイヤーフレームの作成例と使用ツール
以下は美容室のサイトのワイヤーフレームの例です。
※ワイヤーフレームの段階ではアイコンを入れない、フォントサイズを設定しない場合もあります。
ワイヤーフレーム作成ツール
ワイヤーフレーム作成の際の使用ツールをいくつか紹介していきます。
まず、Adobeの「Illustrator」や「Photoshop」「XD」などのソフトです。
上図もillustratorで作成したものです。次章からワイヤーフレームやデザインを作成しながらWEBデザインを学習していただきますが、こちらもIllustratorでの作業をベースに紹介しています。
illustrator用のテンプレートを配布してくれているサイトもあります。
上図でもhttps://design-tera.com/blog/archives/1570/のテンプレートを一部使用させて頂いていますよ。
そして他にも、とても良いツールがあるのでみていきましょう。
以下は「cacoo」というサイトです。これはウェブ上でサイトマップやワイヤーフレームを作成できるサービスです。
また、Macユーザーの場合は「Sketch」も人気があります。
その他にも様々なグラフィックツールがあります。いくつか試してみて、自分に合ったものを探してみても良いでしょう。