Webサイトの制作においてユーザーにイメージ、情報を正しく伝えるためには、レイアウトの持つ効果を考え全体設計を行うことが大切です。
近年ではWebサイトがスマートフォンやタブレットとなど、さまざまなデバイスで閲覧されるようになってきています。
ユーザーが扱いやすく、見やすいレイアウトにするには、どのようなことに気をつけていけば良いでしょうか。
今回はWebサイトを魅力的により見やすく見せるために欠かせないレイアウトのの考え方についてご紹介します。もくじ
◆「近接（グループ化）」と「コントラスト（強弱）」
WEBデザインレイアウトにおける「近接」と「コントラスト」について説明します。
・「近接（グループ化）」
見出しと文章のように関連性のある要素同士を近く配置することで、閲覧者に対して関連性を示す技術です。
近接のポイントとされる点は、Webサイトの訪問者に違和感を抱かせない距離で配置を行うことです。
Webサイトを全体として見たときに、関連する要素同士が１つの固まりとしてわかるよう距離感を留めることが近接のポイントです。
デザインレイアウトのメリットとして、使われる色やデザインを必要最小限に留めつつも、情報をグループ化して伝えることができます。
近接（グループ化）によるレイアウトは文字情報に限らず、画像や写真にも応用できます。
・「コントラスト（強弱）」
レイアウトデザインの考え方の基本的な原則とされるのが「コントラスト（強弱）」です。
コントラストはWebサイト内の要素同士の違いを強調するための方法で、Webデザインにメリハリを付けることができます。
色や異なるフォントを盛り込むことで要素の対比を実現させます。
具体的な方法としては、色相や明度に差のある色を使用することで目立たせるための要素とあまり目立たせない要素とを色で区別することです。
フォントサイズの大小によるメリハリ、丸や三角、四角といった形によっても識別性を高める効果としてコントラストを使用します。
「タイポグラフィ（文字の書体や配置などの構成や表現）」では、見出しと本文の文字サイズに変化をつける「ジャンプ率」と呼ばれる技法があります。
詳しくは https://forthewin.co.jp/it_blog/web_typography より。
◆「整列」と「反復」、「余白」
情報の構造化と統一性の効果は、Webサイトのイメージをより良いものとしてアピールする際に欠かせません。
Webサイトに載せたい情報量が多い場合、重要となるのが「整列」と「反復」です。
・「整列」
整列は複数の要素を上下または左右にまとめて並べることで情報に対して統一感を持たせます。
要素との間に意図的に余白を作ることで近接と同様、関連する情報同士間にグループ化を生み出すことができます。
見た目の印象のみならず、可読性を高める為にも効果的です。
・「反復」
反復は、Webサイト内で決まったデザインを繰り返すことで、Webサイト内の情報に一貫性を持たせる方法になります。
同じパターンとなる見出しやボタン、アイコンなどを繰り返し入れることで、Webサイトの持つイメージを演出し、統一感を伝えることができます。
識別性や見やすさにつながるため、ユーザビリティにもつながる重要な方法です。
次に「整列」の内容で説明した「余白（ホワイトスペース）」についてその効果メリットをより詳しく説明します。
・内容が把握しやすくなる
「余白（ホワイトスペース）」を用いてバランスのとれた配置を取ることで、全体としての見通しが改善されWebサイトの内容としてすっきりとわかりやすいものになります。
ユーザー側は、欲しい情報を容易に見つけることができストレスの軽減につながります。
・読みやすさの向上につながる
行間や字間を適切に整えることで、内容がより読みやすいものになります。
読みにくさや見辛さの多いコンテンツはユーザーの離脱にも繋がる為、適度な余白をつくることはデザインにおいて大事なポイントになります。
・ユーザーインターフェイスの改善
不要な要素を減らし整理することでユーザーインターフェイスの向上につながります。
余白（ホワイトスペース）を生み出すひとつとして、迷惑メールやポップアップ、バナーのように不必要な視覚効果を取り除くなどの方法があります。
・エレガントな印象を与える
要素が多いWebサイトでは、チープな印象や重苦しい印象をもたせてしまいますが、ホワイトスペースの使用で、Webサイトを軽く、エレガントに魅せることができます。
◆「グリッド レイアウト」
グリッド レイアウト(グリッドデザイン、グリッドシステム)はWebサイトのデザイン手法の一つになります。
画面やページを縦横に格子状に分断、分割し、これを組み合わせてブロック内の要素の大きさや配置を決める方法です。
このレイアウト手法は、新聞や雑誌などの印刷物でよく見られます。
文章や画像、余白など、内部の構成要素の境界線が必ず格子状の線に合うように配置し、いろいろな大きさの要素を複雑に配置してもすっきりした見やすい構成にすることができます。
◆まとめ
レイアウトデザインの基本原則とされる内容はWebサイトに個性を与え、より良いデザインとして制作する際の基本となります。
ユーザーに印象として残すためにもポイントとなる技術になります。
レイアウトデザインの基本原則を元に、洗練された質の高い、より魅力あるWebサイト制作に役立てて見てください。