「Webサイトを作ってみたけど、
素人っぽさが出ている…」
「魅力的なデザインにするには
何から手をつければいいの？」
駆け出しフリーランスとしてWebデザインを始めたばかりの頃は、そんな悩みを抱える方も多いはず。実は、プロのデザイナーが作るWebサイトには、共通する「基本原則」が存在します。
センスが必要だと思われがちなデザインですが、基本原則を理解し、意識して取り入れるだけで、あなたのWebデザインは驚くほど素敵になること間違いなし！
この記事では、Webデザインのクオリティを格段に向上させるための、特に重要な基本原則の中から、まず押さえるべき2つの原則「近接」「整列」を分かりやすく解説します。
これらの原則をマスターすれば、クライアントにも自信を持って提案でき、成果につながるWebサイト制作をあなたの手で実現するのも夢ではありません。
デザインの基本を学んで、次のレベルへステップアップしていきましょう。
1. 近接（Proximity）：関連する情報は仲良くグループ化をする
近接の原則とは？
Webデザインにおける「近接」の原則とは、関連性の高い情報や要素同士を物理的に近づけて配置し、逆に関連性の低いものは離して配置するという手法です。
近接を行う事により、情報は視覚的にグループ化され、ユーザーは何が関連しているのかを直感的に理解しやすくなります。
人は無意識のうちに、近くにあるものを「仲間」だと認識する傾向があります。この傾向を利用して、情報を整理することでユーザーにとって分かりやすいレイアウトを作成できます。
なぜ近接が重要？
近接の原則が重要な理由は主に2つ！
【近接が重要な理由①】
情報が整理される： 情報を整理することによって、ユーザーは散らばった情報の中から関連性を見つけ出す手間が省け、情報を効率的に理解できるようになります。その結果、コンテンツを通して伝えたい内容をスムーズに伝達することができます。
【近接が重要な理由②】
視線の流れがスムーズになる： どこに何の固まりの情報があるか一目で分かる事でユーザーは目的の情報を見つけやすくなります。視線が迷うことなく、自然と求めている関連情報へとたどり着くことが可能になります。
近接の実践方法は？
近接の原則を実践する上で最も大切なのは、要素間の「余白」を調整することです。関連する要素同士は余白を少なくして近づけて配置を行います。逆に関連の薄い要素グループとの間には十分な余白を取ります。
お問い合わせフォームの場合
お問い合わせフォームのデザインにおいても近接でデザイン作成をすることが大切です。
各入力項目（例：「お名前」というラベルと名前を入力するテキストボックス）は近接させ、次の入力項目（例：「メールアドレス」のラベルとテキストボックス）とは少し間隔を空けることで、ユーザーはフォームの構造を直感的に理解することができ、スムーズに適切なテキストボックスへと入力作業を進めることができます。
ECサイトの商品詳細ページの場合
「商品の画像」「商品名」「価格」「商品説明文」などの同一商品の情報は、近くに配置することでどの商品についての情報なのかが分かりやすくなります。そして、この商品情報のグループと、別の商品情報や、おすすめ商品のような他のセクションとは、明確な余白によって区別する必要があります。
【✕悪い例】
もし近接の原則を無視してデザインを作成していまうと、ユーザーの混乱を招きます。
例えば、商品Aの画像が提示された直後に、商品Bの商品名が現れ、その次に商品Aの価格が表示される…という状態だとすると、ユーザーは何が何の情報なのかを理解するのに余計な時間と労力を費やすことになります。ユーザーにとってはストレスとなり、サイトからの離脱を招く原因にもなりかねません。商品のおすすめをして商品購入を促していきたいのに適切に情報が伝わらないことで購入にいたるどころかユーザーを遠ざけてしまう事になります。
【◎良い例】
対照的に、近接の原則が適切に適用されたデザインでは、商品Aの画像、商品名、価格が一つのまとまりとして集まっています。その隣には適度な余白を挟んで、同様に商品Bの画像・商品名・価格がもう一つのまとまりとして配置されています。このように情報をグループ化することで、ユーザーは各商品の情報を明確に区別し、比較検討することが容易になり、結果として購入にいたる確率も上がります。
2. 整列（Alignment）：見えない線で美しく整える
整列の原則とは？
「整列」の原則は、テキスト、画像、ボタンなどの各要素を、目に見えない線（垂直線や水平線）に沿って配置するというデザインの基本テクニックです。一般的に用いられる整列には、左揃え、中央揃え、右揃え、そして要素の上端や下端を揃える上下揃えなどがあります。
整列を意図的に使用することで、デザインに秩序と安定感が生まれます。
なぜ整列が重要？
整列がWebデザインにおいて重要な理由！
【整列が重要な理由①】
秩序が生まれる： 要素が整然と配置されることで、デザイン全体に安定感が生まれ、プロフェッショナルで洗練された印象のデザインを作成できます。雑然とした配置は、ユーザーに不安感や安っぽい印象を与えてしまいます。
【整列が重要な理由②】
視覚的なつながり： 目に見えない線によって要素同士の関連付けができ、視覚的なつながりが生まれます。これにより、ユーザーは情報を追いやすく、コンテンツの構造を理解できるのです。
整列の実践方法は？
整列を効果的に実践するためのポイントをご紹介していきます。意識せずに要素を配置すると、人の目では気づきにくい微妙なズレが生じがちです。この微妙なズレを防ぐために、多くのデザインツールが標準で備えているガイド機能やグリッドシステムを積極的に活用することがおススメです。ガイドやグリッドを使用することで正確な整列を行う事が出来ますしデザインプロセスも効率化できます。
具体的な実践例
例えば以下の場合に整列の原則を使用します。
- テキストブロック（見出し、本文、キャプションなど）の左端を一本の垂直線に揃える
- 複数の画像を配置する際に天辺（上端）または底辺（下端）を水平線に揃える
- ナビゲーションメニューの各アイテムを均等な間隔で中央に配置する
情報の整理をした上で、作成の前にWebサイト全体をみて基準となる仮想線を設定し、それに沿って要素を配置していくことを癖付けましょう。
【✕悪い例】
整列の原則に基づいて作成されていないデザインは、すぐに素人っぽさが露呈してします。
例えば、見出しの位置が本文ブロックの開始位置と微妙にずれていたり、並んでいるはずの画像の上端がガタガタだったり、ボタンの配置が不揃いだったりすると、雑然とした印象を与えてしまう事に繋がります。ユーザーは無意識のうちにこのような不整合を察知し違和感を感じます。サイトの信頼性や品質に疑問を抱くことにもつながりかねないので気をつけましょう。
【◎良い例】
整列の原則がきちんと守られたデザインは、見た目も美しく、情報が整理されています。Webサイト全体を通して、主要な要素が左端のライン、中央の軸、あるいはグリッドの線に沿ってきれいに配置されていることで、すっきりと見やすいデザインが出来上がります。ユーザーは安心してコンテンツに集中でき、プロフェッショナルな印象からサイトや企業への信頼感も高まります。
整列は地味な作業ではありますが、デザインの質には欠かせない重要な要素です。
まとめ：近接と整列はデザインには欠かせない原則
この記事では、Webデザインのクオリティを向上させるための、特に重要な基本原則の中から、まず押さえておくべき2つの原則「近接」「整列」をについて解説いたしました。
これからデザインを始められる方も、今すでに作成をしている方もすぐに実践できる内容となっていますので是非取り入れてみてください。
引き続き他の原則についてもブログで解説していきますので、あなたのデザインをクラスアップしていただく手段としてお使いいただけますと幸いです。ユーザーに分かりやすい美しいWebデザインを作成していきましょう！
