デザインの法則を学ぶ

デザインの為の法則には様々なものがあります。今回はそれらについて学んでいきましょう。

• ミラーの法則
• ヒックの法則
• フィッツの法則
• アイコン
• 三分割法
• まとめ

ミラーの法則

アメリカの心理学者であるジョージ・ミラー氏は、1956年に「マジカルナンバー」という論文を発表しました。この論文では、「人間が一度に短期記憶できる情報数には限りがある。その情報数は５～９個である。」とされています。この場合の短期記憶とは、１５秒～３０秒間覚えていられるという意味です。

この法則の場合の、情報数とは「かたまり(チャンク)」の中の情報の数を指します。そして、情報はそれぞれ意味を持ちます。ですので、「かたまり」とは同じ意味を持つ情報の「かたまり」といえます。

たとえば、「0314283567」という10桁の数字で形成された、電話番号があるとします。

この例の場合だと、数字のかたまり(チャンク)が１つあると考えます。一つ一つの数字は、「情報」にあたります。ですので「情報数＝桁数」となります。今回の例だと、電話番号という意味を持つ情報１０個のかたまりが１つある、と捉えます。

ミラーの法則から言えば、この電話番号はユーザーにとって覚えにくいものとなりますね。では、法則に沿って表示の仕方を変えてみましょう。

１つのかたまり内の数字(情報)を、更に３つのかたまりに分けています。たとえば「03」は、電話番号の市外局番にあたる情報ですね。このように１かたまり内の情報数が５～９になるように、細分化する事で情報を認識しやすくなるのです。

また、この３つのかたまりは「電話番号」という１つのかたまり内に存在します。この関係を表すために３つのかたまりを「-」で繋げて表示します。「03-1428-3567」となり、わかりやすいですね。

このようにミラーの法則に従えば、覚えづらいものでも見やすくなるのがお分かりいただけたと思います。

ヒックの法則

ヒックの法則とは「選択肢が少ない方が決定に至るまで時間がかからない」という法則です。例えば10の選択肢を一度に用意するよりも5つ用意して、その後にまた選択肢を作るほうが「決定」するのに時間がかからないということです。では、Appleサイトの例でみてみましょう。

上記は「グローバルナビゲーション」です。ユーザーは、商品を見たい時にMac、iPad、iPhoneなどから選びます。そうするとサブメニューのような形で商品が出てきます。

ミラーの法則でもそうでしたが、選択肢が多いと一つ一つの選択肢を認識するのに時間がかかります。認識に時間がかかると「決定」までなかなか辿りつけません。そうなるとユーザーは「決定」する事をあきらめサイトから離脱してしまいます。

このAppleのサイトは最初に少ない選択肢を用意しておいて（Mac、iPad、iPhoneなど）、目的の商品を選びやすくしている好例だと言えます。

もし、これがたくさんのメニューで埋め尽くされていたら目的までたどり着くのにとても時間がかかりそうですね。ヒックの法則にしたがってメニューを少なくすることで、目的までたどり着きやすくなっているのがお分かりいただけたと思います。

フィッツの法則

フィッツの法則とは、現在位置から目的へたどり着くまでにかかる時間と、目的の場所の大きさや距離の関係性を示した法則です。この法則は、webサイトで使われるボタンやリンクに対して使われます。以下イメージを見てみましょう。

テキストリンクとボタン型リンクです。それぞれ、赤線部分がクリック可能範囲となります。この２つがある場合、ユーザーがクリックしやすいのはボタン型リンクの方です。これは、クリック可能範囲の大きさが関係しています。

範囲が大きいと、マウスを動かすスピードが多少速くても、クリック可能範囲にポインタが留まるでしょう。しかし、範囲が狭いと目的地に正しくポインタを置くため、マウスの動きが遅くなりますね。

このように、リンクの範囲の大きさにより、ユーザーが容易かつ早くクリック出来るかが決まります。また、ナビゲーション部分等でリンクが並んでいる場合がありますね。

このグローバルナビゲーションの例では、リンク同士の間に区切り部分に線を引いています。そして下の例の方は、線内部分全てがリンクとなっています。このように、リンク部分を分かりやすく示す必要があります。

上の例は、テキスト部分のみがリンクとなっています。しかし、線が引いてあることにより、線内全てがリンクだと勘違いしてしまうかもしれません。

勘違いしたまま、テキスト外をクリックすると何も起こらず、ユーザーは分かりにくいと感じるでしょう。リンクを置く際は、リンク部分を分かりやすく示す必要があります。

距離と方向

リンク範囲の他にも重要点があります。それは、現在地からリンクまでの距離と方向です。当然ですが、現在地から目的地までの距離が短い方が、早くたどり着けますね。

また、上記イメージ内には２つポインタがあります。ポインタからリンク範囲までの距離を、それぞれ赤線で示しています。この２つの距離は同一です。

しかし、この２つは横方向の方が早くクリックする事が出来ます。それは、先ほどのリンク範囲の大きさによるものです。ボタンを見ると、縦幅より横幅の方が大きいですね。ですので、横方向から移動とすると、リンク範囲が大きいのでクリックしやすいとなるのです。

では、以下イメージを見てみましょう。

これは「Firefox」というブラウザ画面です。右上に「バツ印」の閉じるボタンがあります。このように、一番端に配置されているボタンは、小さくてもクリックしやすいものです。ポインタが移動しすぎてしまう恐れがないからですね。

アイコン

アイコンとは、機能などの意味を持ったイラストです。では、アイコンの例をいくつか見てみましょう。

それぞれ、意味を表すイラストになっていますね。このアイコンを使用することで、機能などを分かりやすくユーザーに伝えることが出来ます。

また、テキストで示すよりも、ユーザーの目を引くことが出来るでしょう。webサイトでも頻繁に使われています。たとえば、以下は「Amazon」というサイトの検索フォーム部分のアイコンです。

https://www.amazon.co.jp/

虫眼鏡のアイコンが使われています。このアイコンを押して「検索」を行うという意味ですね。

この「虫眼鏡」や「バツ印」などは、様々なサイトやアプリで頻繁に使われています。ですので、意味を説明するテキストがなくても、アイコンのみでユーザーに伝わるかと思います。しかし、以下のようなアイコンはどうでしょうか。

アイコンのみだと、機能や意味が分かりませんね。このように意味が伝わりにくいアイコンには、テキストも表示しましょう。たとえば、「GU」というサイトでは以下のようにテキストとアイコンの表示になっています。

https://www.gu-japan.com/jp/pc/

配色

アイコンのカラーと配置の決定には、注意点があります。たとえば、グローバルナビゲーションでアイコンを使うとします。そうすると、狭い範囲内に複数のアイコンが存在することになりますね。

その際に、様々な色を使ってカラフルにしてしまうとユーザーの気が散ってしまいます。重要な情報を認識しづらくなる恐れがありますね。ですので、グローバルナビゲーションなどでは配色を統一したほうがよいでしょう。

配置

配置というのは「テキスト＋アイコン」という組み合わせの場合の、それぞれの位置についてです。これは、アイコンとテキストの関係性などから決めると良いでしょう。では、例を通し詳しく学んでいきましょう。以下イメージは「nifty」というサイトです。

https://www.nifty.com/

「ログインする」という意味の「鍵」のアイコンと、「ログイン」というテキストがあります。また、ブックマーク一覧部分では「サイトイメージ」のアイコンと「サイト名」のテキストがあります。

この「ログイン」というテキストは、アイコンの意味を説明しています。アイコンとテキストの意味が同じだと言えるでしょう。ブックマーク一覧部分もそうですね。

「アイコンとテキスト」のかたまりを見るとき、視線の流れはどのようになるでしょう。横方向であれば左から右に向かいます。縦なら上から下ですね。

このパターンを踏まえると、上記２つは「アイコン」が先に置かれていると考えられます。つまり「nifty」では、アイコンとテキストの意味が同じ場合は「アイコン→テキスト」の順で統一しているのではないでしょうか。

それに対し、「ニュースランキング」という項目内では、アイコンが右にあります。このテキストは、リンク先のニュースのタイトルを示しています。そして、アイコンは「そのニュースの順位の変動」を表しています。アイコンとテキストの意味が異なりますね。この場合は、アイコンが後と統一されています。

では、「話題」という部分を見てみましょう。テキストは話題のキーワードを意味しています。アイコンは「順位」ですね。意味が異なるという点は「ニュースランキング」と同じです。

しかし、アイコンが先に置かれています。これは、先ほどの視線の流れが関係しています。以下イメージは「ニュースランキング」と「話題」においての、並び方のパターンです。

「話題」は、アイコンとテキスト、「アイコン＋テキスト」のかたまり、この両方が横並びです。このパターンには、ある問題点があります。

横並びの場合、ユーザーは左から順に見ていきます。この時、テキストの右にアイコンを置いてしまうと、どのテキストと、どのアイコンが紐づいているのか分かりづらくなってしまうのです。

このように、並び方によっては見づらくなってしまうことを考慮する必要があります。その上で、アイコンとテキストの関係性でグループ分けをして、配置パターンの統一をするという事です。

三分割法

三分割法とは、レイアウトの方法の１つです。ユーザーの視線が、コンテンツ内の重要ポイントに向きやすくなると言われています。画像作成の際や、サイト全体のレイアウトで役立ちます。

https://line.me/ja/

対象に縦横２本づつ、等間隔で線を引きます。対象が９つにブロック分けされていますね。そして、線が交差している部分が４つあります。この交差部分に、注目してほしいものを置きます。

上記は「LINE」の公式サイトです。ファーストビュー部分に線を入れると、交差部分に重要コンテンツが配置されていることが分かります。では、画像の例を見てみましょう。

 https://www.jalan.net/

上記は「じゃらん」の特集部分のバナーです。黄色い丸が交差部分です。バナーを作る際も三分割法を意識して制作することで、よりユーザーに要点が伝わりやすくなるでしょう。

まとめ

デザインの為の法則には様々なものがあります。今回は以下の法則を学びました。

• ミラーの法則
• ヒックの法則
• フィッツの法則
• アイコン
• 三分割法

デザインの法則を知り、ユーザーにとって使い勝手がよいデザインを追及していきましょう。