Webデザインの原則〜20%をマスターして80%の結果を出す！

Webサイトのデザインを習得するにはどうすればいいのでしょうか？

描画力や美的センスがないとデザインができない
と思っている方も多いと思います。

しかし、
まず最初にご理解いただきたいことは
+*デザインやレイアウトの根底にある原理原則を習得すれば、
良いデザインを作ることができる*+
という点です。

+*２０％のキーポイントをマスターしたら、
８０％の結果を出すことができる、*+
ということがテーマです

結果を出す為には、
すべてのスキルや知識を身につける必要はありません。
２０％のスキルや知識でも、立派なサイトやサービスを
作ることができると思います。

デザインの原理原則をまとめましたので参照してください。

デザインの原則をマスターしよう

Webデザインもデザインの一つであり、
デザインの原理原則が適用されます。

Webデザインを行う際に最も重要である５つの原則を紹介します。

① グルーピング（近接の原則）

まずはグルーピングです。

+*同じグループのものは、視覚的、デザイン的には近くに配置して、
関係の薄いものは離して配置する*+

このように
似たような情報を近づけることを
近接の原則と言います。

なぜ近接の原則の適用が必要なのでしょうか？

下の例を見てください。

左はどの写真がどの文字と関連しているかが
解りにくいですよね。

一方で右は写真と文字が近接していてわかりやすいですね

Webサイトは”わかりやすさ”が命です。

サイトの訪問者は訪問したページが
少しでも判りにくかったら直ぐに離脱してしまいます。

グルーピングをしていないとコンテンツがわかりにくくなり
ページの離脱率は高まってしまいます。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

② 揃える（整列の原則）

ページ要素は揃えて配置する必要があります。

これを整列の原則と言います。

下のレイアウトのイメージを見てください。

左側は違ったサイズの箱がランダムにならんでいて、
箱とはこの間のスペースも一定ではないので、
何か統一感がない印象を受けますね。

一方で右側は、グリッド上に箱が並んでおり、
箱の大きさや、間のスペースが統一されており
すっきりとした印象を受けますね。

整然としたレイアウトに情報を入れると
情報が組織化されてサイトが分かりやすくなります。

結果として、サイトの離脱率が下がるでしょう。

WEBユーザビリティ研究者ニールセン博士の研究によると、
サイト内の文章は、平均で全文章量の２８％しか読まれていない。

つまり、人はボディコンテンツの文章を一字一句読むのではなく
全体を流し読みしようとする。

この視線の動かし方を”Fの法則”と“Eの法則”と言います

レイアウトが整然としていると、
視線の先が混乱せずに
流し読みをすることができまね。

それがサイトの読みやすさにつながり、
結果として、離脱率が下がります。

③ 対比させる（対比の原則）

+*対比とは、強弱をつけることによって、
情報の濃淡をつけて、コンテンツを読みやすくすることです。*+

下のイメージを見てください。

上のコンテンツは、色も一緒で、サイズも同じ、
何か単調な感じで、読みにくいですよね。

一方で下のコンテンツは色分けとヘッダーサイズを大きくしていて
読みやすくなっています。

コントラストをつけると強調する部分とそうでない部分を
わけることができ、+*サイトの可読性が高まります。*+

結果として離脱率が下がります。

④ 繰り返す (反復の原則)

情報が整理されていないと
サイトの可読性（読みやすさ）が下がる
ということを上で述べました。

要素が１つ独立している場合や
または２つだけ並んでいるだけだと、
情報がまとまっている感じがしません。

3つ、4つ、５つと繰り返して行くとルールがはっきりしてきます。

デザインの中の視覚的な特徴のある何かを繰り返すことで、
ページ全体が整理され、”まとまり感”がでてきます。

これを反復の原則といいます

上はキッコーマンのサイトですが、
同じレベルの要素が並んでおり、
まとまり感がありますね。

以上のデザインの原則をふまえた上で、
Webデザイン独特のレイアウトの原則に
関して紹介したいと思います。

⑤ 黄金比を活用しよう

整然として読みやすいウェブデザインは
黄金比を活用していると言われています。

黄金比とは自然界でもっとも安定した美しい比率と言われているものです。
ピラミッドやパルテノンなどが黄金比を活用しています。
その比率は1：1.618、整数に直すと5：8とされています。

上のイメージはTwitterのレイアウトです。
画像を見てわかる通り、意識するとはっきりと
1:1.618が使われていることがわかる設計です。

+*Webデザインのレイアウトを行う時も、
この黄金比の割合（１：１.６１８）を参考にしながら、
設計しましょう*+

いかがでしたでしょうか。
Webデザイン・レイアウトに関して、
必要最低限な２０％のスキル・知識を網羅しました。

この２０％の知識を実際に自分のスキルにするには実践をやるしかありません。

スキルハブの実践講座を受講してWebデザインをマスターしよう！

我々が提供する教育サービススキルハブでも、
これらの必須スキル20%にフォーカスを置いた実践的なレッスンを提供しています。

最短距離でWebスキルを身につけたい人は
是非受講してみてください。(下の画像をクリック！）

最短距離で最大の成果を上げたい人のためのブログ

最短距離でWebデザイナーになる８０：２０の法則
HTMLの必須20%をマスターする
CSSの必須20%をマスターする
デザインスキルの必須20%をマスターする
UX設計の必須20%をマスターする