Basic Design Note

見やすい・使いやすいレイアウトの為に考えるべき事。

Categories|デザイン tags| ,
post_key_2012_07_05

WEBサイトの制作をしていく時に様々な情報を取り扱うのですが、それらの情報をページ内に掲載していく時、どの位置に掲載して、どういう風にユーザーに見せれば「見やすいか?」「使いやすいか?」を考え無いといけません。今回はそういった「レイアウト」についてのお話です。

■レイアウトの意味と目的をまずは知っておこう。

ともかく、まずは「レイアウト」という言葉の意味を知ることから始めましょう。

レイアウト(英語: layout, lay-out)とは
デザイン(紙、ウェブ等)、建築設計、インテリア(展示会場・展覧会場設計、ショールーム設計などを含む)、書籍・雑誌・新聞などの編集等々において、何をどこにどのように配置(割り付け)するかということ、また、そのような配置(割り付け)をする行為も意味する。
レイアウト – Wikipedia

レイアウトとは「配置」という意味です。この配置を上手に行うことによって、ユーザーはサイト内の情報を効率良く閲覧することができるようになるという訳です。また、WEBサイトは情報を閲覧するだけでなく、クリックすることで別のページへ移動したり、情報を入力したりといった「動作」を行いますね。

つまり、WEBサイトのレイアウトが果たす目的とは「情報の閲覧や動作がスムーズに行えるための配置設計を行うこと。」なんですね。

■見やすい配置をする上で考えるべき事

一つのページの中にもいろいろな情報が掲載されていますね。特にTOPページはサイト内の情報をたくさん掲載しているので、サイトによってはかなりの情報量になっていると思います。

扱う情報量はサイトによって異なりますが、たくさんの情報があるとユーザーは「なにから見ていいのかわからない。」「いちいち探すのが面倒。」という事があるのではないでしょうか?見ていく順番はユーザーの自由ですが、「効率良く見たい!」と考えるのもユーザーの心理と言うものでしょう。

そこで、情報を見やすくするために考えておく必要があることとして、以下の要素が挙げられます。

情報を見やすくするために考えておく事

サイトの設計としては他にも気をつけないといけない箇所がまだまだあるのですが、上記の内容はあくまでも「情報の配置」という部分に焦点をあてて考えています。

では、これらの要素について一つづつ考えて行きましょう。

■情報の「整理整頓」の方法と「優先順位」の決め方。

掲載する情報は決まっている。しかし、どういう順番、どれぐらいの大きさでページ内に掲載するのかがイマイチよくわからない・・・。

情報が増えれば当然悩みます。情報を発信する側からすれば掲載する情報全てを見て欲しいと思っても、ユーザーにはそれ程時間も無ければ、全ての情報に興味があるわけでは無いです。

それら情報の「整理整頓」と「優先順位」の決め方について、順を追って考えてみましょう。例としては前回記事からの引き続きで、「太陽光パネルのサイト」の「TOPページレイアウト」についてです。

[1.] サイトで掲載予定のコンテンツ情報をまとめる。

まずは、箇条書きでもなんでもいいので、ざっとまとめてみましょう。

サイトに掲載する予定のコンテンツ

[2.] まとめた情報を「性質ごとにグループ分け」する。

挙げた情報は全て同じ意味合いの情報という訳ではありません。それぞれを分類しましょう。

性質ごとにグループ分け

[3.] グループ分けした情報の「優先順位」を決める。

グループ分けができた次は、各グループの「優先順位」を決めます。この優先順位によって、TOPページ内の「掲載位置」「情報の大きさ」などが大体見えてきます。

グループ分けした情報の「優先順位」を決める。

この優先順位を決める基準は、サイトの「目的と見せるターゲット」にもとづいて考えるのが基本ですね。

なので、今回は「商品の導入をしてもらう。」がサイトの目的なので、ユーザーに商品をPRし、導入へ結びつけるためのコンテンツの優先度が高くなっています。

もし、目的が「会社の事を広く知ってもらいたい。」事であったなら、盛り込むコンテンツと優先度は上記の様な並びとは違ってくると思います。

[4.] 情報の「掲載位置」と「サイズ」を決める。

情報の整理整頓と優先順位が決まったら、ページ内での「掲載位置」と「サイズ」を決めていきます。

WEBサイトは基本「上から下」へ情報を見ていくので、ページの上部に来る情報ほど人目につきやすくなりますね。そう考えると、優先度の高い情報は「ページの上部」に持ってきてあげるのが理想です。また、サイズについても優先度が高い情報は大きく扱うのが良いでしょう。

新聞の紙面などを見てもらうとよくわかりますが、トップニュースは紙面の中でも大きく扱い、あまり注目度の高くないニュースは小さく表示されていると思います。

このように、「優先度の強弱」をつけることで、見せたい情報に早く注目してもらえる様になります。

優先順位に則ったレイアウトサンプル

■ユーザーの視線をうまく「誘導」する。

上の項目でも記載しましたが、WEBサイトは通常「上から下」へ順番に情報を見ていくと思います。

視線誘導でよく出てくるキーワードとして、「Zの法則」とか「Fの法則」という言葉がありますが、この言葉は「人の視線移動」をアルファベットの形に置き換えたものなんですね。両方の法則に共通して言える事は、「人の視線は「左上」から始まる。」ということ。そこから、視線は右上→左下→右下へ流れ、ページ全体をくまなく見ていくという流れです。

Zの法則・Fの法則

こういった「基本的な視線の動き」を理解して、情報の配置をしていくと、見せたい情報を効率良く見せていくことが出来ると言うことです。

それ以外にも、視線を誘導するにあたって用いられる手法が以下の手法です。

視線誘導の手法

人は大きさの大小、隣合う情報、共通性のある色や形、矢印の指す方向を目で追います。数字については順番に見ていくなどの「習慣」があります。

特に矢印には強い「誘導性」があります。また、共通性のある形(丸や星型など)の「シンボル化」された形には「誘目性」もありますので、それらを項目の始めに共通して配置することで、ユーザーの視線誘導を行うことができます。

また、「アイキャッチ」として、ビジュアルを用いて一点に視線を集中させ、アイキャッチ付近に情報を配置し閲覧してもらうことで、ユーザーに次のアクションを起こさせるといった事も視線誘導を行う事になります。

アイキャッチとしてよく用いられるもの

人の視線は「人物の表情」をつい見てしまうものです。そういった「強く注目を集めるもの」を利用して、情報を見始める「始点」を作る事はWEBに限らず、古くから用いられています。

■よく見られるナビゲーションの位置

WEBサイト内の、それぞれのページに移動するためには「ナビゲーション」の設置は必須です。ナビゲーションは「サイト内の案内表示」なので、先の項目の「視線移動」に配慮しながら、「わかりやすい場所」「使いやすい場所」にナビゲーションを設置する事が望ましいですね。

また、ナビゲーションは基本的にサイト内の「共通の場所」に設置されます。その為、ページを移動しても配置が変わらない(変わりにくい)エリアに設ける事が重要です。

なので、ナビゲーションを設置してもコンテンツのエリアが確保しやすい、ページ上部(ヘッダー付近)やサイドバー(ナビエリアとして独立)を利用するケースが多いんですね。

よく見られるナビゲーションの位置

また、視線移動から考えると、人の視線の先にナビゲーションが設置されているので、こういった部分からも、上記の位置のナビゲーションは「見つけやすい位置」にあると考えられますね。(※特に「Fの法則」が当てはまりますね。)

WEBサイトでよく見かけるナビゲーション位置の例 補助的なナビゲーション

■作成するサイトにとって最適なナビゲーションの位置とは?

では、作成するWEBサイトにとって、最適なナビゲーションの位置はどこなのか?作るサイト毎に要件が違うのでどういったナビゲーションがいいのか?

考え方としては、作成するサイトの「情報量」を見極めて考えるのも一つの方法です。

サイトの情報量から考えた位置

上記はあくまでも考え方の一例です。制作上の条件によっては当てはまらない事があるかも知れません。

また、上部にナビゲーションを設定する場合の注意点として、「ページの横幅(コンテンツ全体の幅)によって、ボタンサイズや数が左右される。」ということです。

たくさんのページへのリンクボタンを上部のナビゲーションだけに頼ると、ボタン1つ分の大きさが小さくなり、表示出来る文字数も少なく、文字サイズも小さくなるので、結果的に使いにくくなってしまう事があります。
(単純に「5分割」の場合のボタンサイズと「10分割」の場合では、後者の方のサイズは前者の半分になりますね。)

ですが、そういった場合の「工夫」として、「ドロップダウンメニュー」や「メガメニュー」を取り入れるなどの方法で、コンテンツが多いサイトや、将来的にコンテンツが増えた場合の対応が出来るので、ナビゲーションの設計を考える時は選択肢として取り入れたい所ですね。

■情報と情報の「間(ま)」について

WEBサイトの情報を掲載するエリアも、ある程度の大きさが決まっています。サイズが限られているのだから、なるだけ有効的に使いたいと考えるのが普通です。

だからと言って、情報を詰め込み、間がほとんどない状態だと、画面全体が情報で圧迫されてしまい「息苦しさ」を覚える事もあるのではないでしょうか。(賑やかさを演出する時は意図的に情報を詰め込んだりもしますが・・・。)

また、先の項目で情報の「整理整頓」を行ったと思いますが、情報もそれぞれに「意味」が異なる訳です。それにコンテンツ部分とナビゲーション部分でも目的が異なります。

そういった「画面内の息苦しさ」を抑えたり、意味合いの違う情報を「区分け」する役割として、ある一定の「間(ま)」が必要です。

こういった「間(ま)」の事を「ホワイトスペース」や「余白」とも言います。ある一定の大きさの「空白」を利用して異なる情報同士を「分断」したり、一つの情報を際立たせる為に「意図的」に対象の周りに「空間」を生み出したりします。

レイアウトでは、意味合いの同じか近い情報同士を近づけて配置して、「関連性」をわかりやすくする訳ですが、内容が違う場合はこれとは逆に「離す」事で、違う情報であるということを表現したりもします。

ホワイトスペースの活用例

■今回のまとめ

今回は「情報の配置」に焦点をあてて書いてみました。ユーザーの使いやすさにも配慮しつつ、見せたい情報を上手く見せて行く為には、「情報の整理整頓」「視線誘導」が不可欠でもあるんですね。

いろいろなサイトを見ていると、ページレイアウトはどんどん「配置の自由度」が増している様にも感じます。自由度が増すと言うことは、それだけレイアウトの選択肢が増え、「表現の幅も広がる」ということになります。

しかしながら、表現の幅が広がる事で見た目の部分だけが先行してしまうと、レイアウトの本質的な「見やすい・使いやすい」ということがどこまで盛り込めるかが曖昧になってしまうと感じた部分もあります。

レイアウトの自由度が増しても、レイアウトに関するルールや知識は知っておく必要があるのでしょう。

また、記事では書きませんでしたが、ユーザーが閲覧するメディアもPCだけでなく、スマートフォンやiPadなどのタブレット端末の登場によって、「一定の固定レイアウト」以外の設計も考えないといけない場合が出てきています。

数年前(僕がWEBの仕事を始めた頃)と比べても、新しい閲覧方法がメジャーになってきているので、レイアウト設計の難易度は上がってきていると感じました。

Pocket
LINEで送る

コメントはこちらから

Page top