初心者向け講座早見表
前回のWeb系コラムでは、同じデザインを規則的に配置することで、情報量が多いWebページであってもすっきりと表示することが可能であるというお話をしました。今回も簡単にできるデザインの基本的なコツについて説明したいと思います。
通常の紙面と比較して、Webページの場合は比較的短時間で必要な情報を取得しやすいレイアウトが好まれる傾向にあることは押さえておきたいポイントです。伝えたい情報を短時間で理解してもらうには、複数の情報の関連性をすっきりとさせることが重要です。情報の関連性をすっきりと表示するには基本的なデザインのコツを押さえることが大切になります。
今回のお話のキーポイントは、複数の情報の関連性を吟味して、関連の高いものは近い場所にレイアウトし、関連の低いものは離れた場所にレイアウトすることとなります。
言い換えれば、情報の関連性の強弱によって、余白を含めたレイアウトの設定に差を設けることが重要となります。複数の情報の関連性を見極めてデザインへ反映することは、読み手のストレスが少ない、より説得力のあるデザインの実現に繋がります。
以下の簡単な例を見てみましょう。
左側のレイアウトでは4つの文章が規則的に整列しています。見た目はきれいかもしれませんが、タイトル1と下の文章がワンセットかどうか迷ってしまう場合があると思います。一方で、右側のレイアウトではタイトルとすぐ下の文章との余白を狭くする一方で、タイトル2との余白を広くしました。これによって2つの大きなまとまりを一目で把握することができます。このように情報の関連性を余白の差で表現することによって、読み手が短時間で必要な情報を把握しやすいレイアウトを実現することが可能となります。
もう一つの例を見てみましょう。
前回のコラムにてお話した方法と今回の方法を組み合わせることで、さらにWebページが読みやすくなり、結果として短時間での情報取得が容易になります。上記のボタンの例を見ますと、4つそれぞれのタイトルと文章の間の余白が他と比べて狭くレイアウトされ、情報の関連性が一目で分かりやすくなっています。さらに、同じ4つのデザインを繰り返して並べることで情報をすっきりと伝えることも可能となっています。
文章を読むことで情報の関連性を初めて理解できるレイアウトは、ストレスフリーなデザインとは程遠いイメージとなってしまいます。従ってユーザーが文章の読解へ進む前に、情報の関連性をデザイン上の工夫によって伝えることが大切です。
今回は理解しやすいデザインの基本的なコツの一つとして「情報の関連性を余白の距離差で表現する」方法をお話しました。今後のご参考としていただければ幸いです。
（担当：斉藤 万幾子）
