ホームページデザインを考える①～デザインの基本原則
ホームページを作るとき、見た目の美しさだけを意識してはいませんでしょうか。
本来デザインとは「課題を解決する仕組み」であり、訪問者にとって使いやすく、目的を果たせることが重要です。
本記事では、ホームページを訪問者にとってより使いやすく、分かりやすくするため「ホームページのデザインを考える」として、デザインやレイアウトについて解説していきます。
今回はそもそもデザインとは何か？その基礎知識と、誰でも取り入れやすい「デザイン基本4大原則」を解説します。
１．そもそもデザインとは
「デザイン」と聞くと装飾やセンスを思い浮かべる方も多いですが、デザインとは実はもっと広い意味を持っています。
ここでは、デザインの本質について考えてみましょう。
１-１．デザインとは「課題の解決」
最初に、そもそもデザインとは何を指すのでしょうか？
「デザイン」とは「視覚的な印象を操作すること」「見た目を良くすること」と考えられがちですが、そうではありません。
本来デザインとは「目的の達成、問題の本質を理解し解決するために設計すること」なのです。
これは、アートとデザインの違いを考えれば分かりやすいでしょう。
アートは「自己表現」であり、あくまで制作者の主観で自己表現として行われます。
主観的であり、自身の感情や体験を表現し創造されるものです。
それらは大衆に理解される必要はなく、ユーザー側がアートにおいて担う要素は少ないでしょう。
これに対し、デザインは「課題解決」です。
客観的視点によって考えられ、何か達成したい目的や目標の実現のために、より多くの人に理解してもらい使いやすくするために行われます。
１-２．ユーザーファーストを考えよう
デザインはユーザーファーストを考える、ユーザーの視点に立って考える必要があります。
ユーザーファーストとは「ユーザーの満足度を何よりも優先する」考え方です。
良いデザインの前提は「使う人」を中心に考えます。
特にホームページの場合は、利用者の行動や目的に沿った設計を行い、見る側にとって見やすい、読みやすいホームページにすることが最優先です。
例えば、このような要素が考えられるでしょう。
- 文章が分かりやすく読みやすい
- 色やレイアウトが統一されている
- 違和感なく操作できる
- 情報が見つけやすい
- スマートフォンでも見やすい
これらは一例ですが、自分が作成したホームページがこれらユーザーの利便性を考えて作られているか、一度客観的視点で評価してみてはいかがでしょうか。
２．デザイン基本4大原則とは？
ではユーザーにわかりやすいデザインにするために、何が必要なのでしょうか？
ここでは、広く一般に言われている「デザインの基本4大原則」といわれるものをご紹介します。
誰でも取り入れやすい4大原則を理解することで、見やすく使いやすいデザインが実現できます。
２-１．近接
「近接」は、関連のある要素同士を近づけてグループ化することで、まとまりをよくする手法です。
グループにしたい要素同士が離れていると、一目で関連しているかどうか判断ができません。
そのため、デザインを見て瞬時に理解できるように、同じ要素は近づけておく必要があります。
逆に、異なるグループ同士は余白を設けると、規則性が出て見やすくなります。
２-２．整列
「整列」は関連のある要素同士にルールを設けて統一する手法です。
例えば、
- サイズ・色を統一する
- 揃えを右・中央・左のいずれかに統一
- 上下は上揃え・中央揃え・下揃えのいずれかに統一
などがあります。
整列を意識すると、近接でまとめたグループがより洗練された見た目になります。
ホームページをデザインする際は合わせて意識するとよいでしょう。
２-３．反復
「反復」は、関連する要素ごとに設けたルールを繰り返す手法です。
反復を用いれば、直観的にページ内で関連したグループが複数あることを認識できます。
もし反復を使わなかった場合、同じカテゴリの商品であるにも関わらず、統一感がないため違うものと誤認されてしまうかもしれません。
近接・整列に加えて反復を組み込めば、ユーザーが興味を引きやすいデザインを作れます。
２-４．対比
「対比」はコントラストとも呼ばれ、要素のデザインルールに差をつけて優先度を明確にさせる手法です。
要素に差が生まれると、パッと見て情報が伝わりやすくなります。
最も訴求すべき要素と、さほど優先ではない要素を同じ文字サイズや色でレイアウトすると、どちらも目立たなくなってしまいます。
しかし、対比を取り入れて情報の優先度ごとに大きさや色を変更すると、それらを見たユーザーに効率よく訴求できるのです。
今回はデザインについての基礎知識と、基本の４大原則「近接」「整列」「反復」「対比」について解説しました。
これらを意識するだけでも、ユーザーに見やすく分かりやすく情報を訴求することが可能です。
次の記事では、さらに「カラーとタイポグラフィ」について解説します。
色の三属性とその与える印象の違い、タイポグラフィと呼ばれる文字の取扱い方について見ていきましょう。
次記事：ホームページデザインを考える②～カラーとタイポグラフィ