COLUMN コラム

 

Webデザインを行う人を”デザイナー”と呼ぶため、なにか芸術的なデザインを創り出すアーティストのようなイメージを持つ方も少なくないかと思います。
しかし、Webデザインは「コンテンツ（情報）をいかに分かりやすく適確に伝えるか」がベースとなります。

 

それゆえ抽象的であったり、解釈が見る人によって変わってしまうようなデザインでは、情報伝達の目的を達成しているとは言えません。

 

また、コンテンツや目的・伝えたいことが定まらない状態でデザインだけを先に進めることも困難です。コンテンツや目的が揃って、はじめてデザインに取り掛かることができます。

 

これらを踏まえてWebデザインを作成するには、分かりやすくなる理由(=理論・統計)を知り実践していくことが大事です。

 

そこで今回は、より良いデザインにするために役立つであろう法則を紹介します。

①「5ハットラックス　The Five Ultimate Hatracks/LATCH」

情報デザインや情報アーキテクチャ分野における先駆者、リチャード・ソール・ワーマン氏が提唱した情報の整理方法です。

情報を分かりやすく表現する術を知る

１. ロケーション
場所と情報を組み合わせて表示することで分かりやすくなる。
例）電車の路線図、ショッピングモールのフロアマップ

 

２. アルファベット
数が多い時に利用すれば探しやすくなる。
例）あいうえお順に表示された都道県や国名など

 

３. 時間
時系列に沿って情報を表示し、見つけやすくする。
例）ニュースサイトでの新着順記事や、twitterやfacebookの投稿

 

４. カテゴリ
サイズ別・色別などカテゴリで情報の表示を分別する。
例）家電量販店サイトの製品別ページなど

 

５. ヒエラルキー
階層をもたせて表示する。
例）人気ランキングやよく使う順など

 

②「ミラーの法則　Miller’s Law」

プリンストン大学の認知心理学者、ジョージ・A・ミラー氏が発見した法則。

情報を覚えやすい設計にする

「マジカルナンバー7±2」という論文で、人間が短期的(15秒〜30秒)に記憶できる量には限りがあり、その情報の量は７±２であると発表しました。

 

この数字は「かたまり」の数を意味しており、そのかたまりを「チャンク」と呼びます。
人間は、情報を幾つかの「かたまり（チャンク）」にして記憶しているというものです。

 

誤った見解として、ナビゲーションの項目やカルーセルの数は最大7±2個までにするべきだと思われがちですが、あくまでこの法則は、認知しやすい・覚えておく必要がある項目に対しての量を示しています。

 

例えば、電話番号のように「0363654475」とそのまま10桁並べられた状態で把握しようとしても、なかなか覚えることができません。
ですが、「03-6365-4475」のように３つのかたまり(チャンク)に分けて表記することで認識・記憶しやすくなります。

 

③「ヒックの法則　Hick’s Law」

選択肢が二つ以上ある場合など、選択肢の数が増えるほど、ユーザーの意思決定にかかる時間も相対的に増えてしまうという法則。

過剰な選択肢の提供は、選択すること自体を放棄されかねない

単純な法則ですが、意外と活用できていないことが多いです。選択肢の多さは自由であるとともに悩む原因を増やすことでもある、と心に留めておく必要があります。
ユーザーに自由な選択肢を与えれば与えるほど良い環境かと思えば、実際は意思決定を遅らせ、結局何も選ばれないという結果に終わってしまうからです。

 

この法則を実証した有名な実験に、ジャムの法則というものがあります。
24種類のジャムと6種類のジャムをそれぞれ並べたとき、どちらが売れるか比較したものです。

 

試食の割合だけで見れば、24種類のジャムは60%、6種類のジャムは40%と、
24種類のジャムの方が多くの人に興味を持たれ試食されました。

 

しかし実際に購入した人の割合は、24種類のジャムが60%中の3%、6種類のジャムは30%となり、選択肢の数を減らした方の売り上げが10倍になるという結果が出ました。

 

参考：n(選択肢の数)が多ければ多いほど意思決定までの所要時間がかかってしまう。

 

公式　T=a+b log2(n+1)

 

T=所要時間
a=意思決定を除く所要時間
b=実験から得られた平均的意思決定時間
n=選択肢の数

④「フィッツの法則　Fitts’s Law」

人間工学における人間の行動をモデル化したもので、対象への移動にかかる時間と距離やサイズの相関関係を予測します。

人間の行動モデルを考慮しデザインへ適用する

デザインを考える際にフィッツの法則を活用することで、標準的な人間の行動をもとに快適で使いやすいインターフェイスを作れるようになります。

 

例えば「画面上部のメニューバーなど、画面端にあるボタンは押しやすい」のように、クリックしやすい場所に配置すること、クリックしやすい大きさのボタンにすることで選ばれやすくします。

 

参考：ターゲットまでの通達時間は、ターゲットの大きさと距離によってかわる。

 

公式　T=a+blog2(1+D/W)

 

T=ターゲットまでの時間
a=ポインターの移動開始時間と停止時間
b=ポインターの速度
D=開始ポイントとターゲットの中心までの距離
W=ターゲットの大きさ(動きの方向に測った対象物の幅)

 

おわりに

直感的に使いやすいデザインを作成するためにも、人間工学やデザイン理論を知っておくことは有益です。

 

今回はその一部を簡単にご紹介しましたが、いかがでしたでしょうか。興味を持つきっかけとなったり、何かのお役に立てれば嬉しく思います。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。

 

 

DOLに制作を相談する