そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル

Post on:2014年8月8日

使用するデザイン

フラットなスタイルを使ったモダンなデザインのサイトを例に、デザインの原則とそれらをどのように使用するのか説明します。

それぞれのキャプチャは、大きい画像で見られます。

1. Hierarchy -階層

階層（ヒエラルキー）とはレイアウトだけと思われがちですが、カラーや形などのあらゆるデザイン要素に使用することができます。まずはレイアウトにフォーカスしてみましょう。

デザインにおいて、階層はビジターにメッセージを意図的に伝える手段です。階層が効果的に使われていると、ビジターはページを見て、どこが重要で、どこが重要でないか、的確に判断することができます。階層がおかしいと、デザインを気持ち悪く感じたり、情報がうまく伝わらず、サイトやプロダクトの信頼性を損なうことになるかもしれません。

人間の目は、最上部から下部へ、左から右へ、と視線を移動させる傾向があります（西洋文化で）。この目の流れを意識して、レイアウトすることは非常に重要です。

人間の目は、上から下へ、左から右へ、と流れます。

Webデザインにおける階層の使い方

下記のWebデザインは5つのカラムと6つのグリッドを使用してレイアウトをしています。グリッドはこのレイアウトに利点をもたらします。

第一にグリッドはエレメントに規則性を与えます。第二に使うカラムの数で重要度を定義できます、カラム一つだとそれほど重要ではないコンテンツ、カラム全部使うと重要なコンテンツ。またエリア内で、カラーやコントラストなど他のデザインの原則を使うことで、更に階層をより明確にすることができます。

情報の重要度によって、割当てられているカラム数の違いに注目。

ビジターは目に見えるコンテンツの階層を意識します。

階層は個別のセクションの中でも適用できます。

2. Repetition -反復

反復とは、カラー、形、サイズなどエレメントのさまざまな要素を繰り返して利用することです。適切にデザインで使うとリズムが生まれ、快適な印象を与えます。しかし使いすぎると単調になってしまい、デザインがつまらなくなるので注意してください。

Webデザインにおける反復の使い方

水平方向にカラーの背景色を使い、そのエリアに一体感をもたせ、セクションの区切りを明確にしています。また繰り返し使うことで、全体的に統一感をもたせる役割も果たしています。

水平方向にカラーで区切り、反復することで統一感をもたせます。

デザインの原則を複数もたせることもできます。

水平の形の反復、本箱と本の反復を使用しています。

よく見かけるWebデザインに応用してみます。

画像とテキストを反復させ、レイアウトにリズムを与えます。

3. Contrast -対照

対照（コントラスト）とは、2つまたはそれ以上のエレメントによる相違です。カラーが違う、形が違う、フラットと3Dのようにスタイルが違うなど、その相違はさまざまです。

Webデザインにおけるコントラストの使い方

コントラストの効果を見るために、サークルを使ったサンプルを作成しました。サークルには水平のストライプが加えてあります。

より小さいサークルを配置することで、大きいサークルとのコントラストが生まれ、イラストにより多くの面白みを与えています。

コントラストは形だけでなく、カラーやテキストのサイズでもOKです。

イラストのサークルとテキストのとがったラインが、いい感じのコントラストになっています。

4. Shape -形

形は、デザインの原則の中で最もあいまいかもしれません。確かにカテゴリの一つとして独立していますが、他の原則にも適用されます。言い換えれば、あなたが作るものは何でも形です。

Webデザインにおける形の使い方

下記ページのアイコンはすべて、うまく機能しているように見えます。
これは偶然うまくいっているのではなく、形を使ったデザインです。

アイコンだけにすると、それがよく分かります。

カーブと対になっているストレートなラインはお互いに影響を与え、機能しています。

アイコンを作っているパーツを見てみましょう。

パーツは全てシンプルな形で、これらを結合し、一つのアイコンができています。

5. Color -色

色はまず、文化や歴史など基本的な価値観によって異なる意味をもちます。例えばアジアでは花嫁はレッドを身につけますが、アメリカではホワイトを身につけます。また19世紀にはピンクが男性らしく、ブルーが女性らしいとされていました。

現在の話しに戻しましょう。
例えばそのブルーは、エンターテインメントからソーシャルメディアまで、さまざまな業種で最も多く使われているカラーの一つです。ブルーをカラーセオリーで考えると、信頼、平穏、知性などがイメージされます。

ブランドカラーにブルーを使用している例。

Webデザインにおける色の使い方

デザインにおいて色を考える時、色の明るさと彩度を変えることでその印象は大きく異なります。用途が広い色の一つ、ブルーで試してみます。

ブルーをベースに、アクセントとしてイエロー、オレンジ、グリーン、タンを使用しています。アクセントカラーは、ビジターに影響を与える感情を定義するのに役立ちます。

このカラーパレットから、色を限定して使ってみます。

アクセントに使われているイエローとオレンジがイラストをよりよくしています。

シンプルなイラストですが、孤立した要素に使われているグリーンがいいアクセントになっています。

6. Texture -質感

質感（テクスチャ）は、オブジェクトの表面あるいは触感を意味します。Webデザインではこのテクスチャを使ってデザインすることが多いです。

Webデザインにおける質感の使い方

下記のページでは、モダンな印象を与えるために、フラットデザインを採用しています。シンプルな見た目にするために、テクスチャと余計なものを省いたデザインが効果をだしています。

右側のエンピツのような要素には暗いシャドウを少なくし、明るさを与えて、クリーンな見た目にしています。

中央のブラウザの枠のデザインは、コンテンツとメッセージに注目がいくよう、シンプルにしています。

デザインを見る

デザインを実際のページで見てみましょう。

Prosperent

7. そのデザインには理由がある

あらゆるデザインの要素において、なぜそうなるのか理由があることは重要です。デザインの決定とは常に、目的を実現するための手段であるべきです。
しかしながら、クライアントの一声で決定してしまうことがあるかもしれません。そんな時でもなぜデザインがそうなるのか明確な理由があれば、クライアントへの説明もうまくいくでしょう。

ここで紹介したデザインの原則は、あなたの今後のデザインの基礎として役立たせてください。良いデザインとはその構成と機能が密接に結びつけられたものであることを覚えていてください。
デザインのルールはあなたがデザインの経験を重ねるごとに、いつ従うべきか、いつ壊すべきかを学ぶことになるでしょう。

さぁ、デザインを楽しみましょう！

そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル

使用するデザイン