デザインで確実に覚えておきたい20の原則【Part1】

こんにちはルーツ八王子です！

デザインを始めたばかりのときは、覚えることも多く、やらなければいけないこともたくさんあり、色々と検討しなければけないでしょう。また同時に、テクノロジーの進化によって、新しいソフトウエアが発売されたり、次から次へと変化するデザイントレンドも意識する必要があるでしょう。しかし、すべてを同時に学ぶとなると何から手をつけてたらいいのか分からなくなったりして、いろいろ大変ですよね。

 

 

そんなデザイン初心者の方向けに今回はデザインをするときに覚えておきたい、20個の基本原則をまとめてご紹介します。前半となる今回は、まず10個のデザインテクニックを見ていきましょう。

 

 

 

 

目次

1. ライン
2. 縮尺、スケール
3. 配色、カラー
4. 反復
5. ネガティブ・スペース
6. 左右対称
7. 透明度
8. テクスチャ
9. バランス
10. 階層

 

01. ラインを利用しよう。

 

 

 

だれもがライン（英: Lines）とは何か知っていると思いますが、ここで言うラインとは、すべての線で描かれた箇所を指します。今読んでいるこの文章も、いくつもの曲線と直線で描かれています。

 

 

ラインは、デザインに特定のアイデアを盛りこむこともできます。直線ラインは、順序（英: Order）や整然さ（英: Neatness）を表現し、波型ラインは動き（英: Movement）を、ジグザグラインは、緊張（英: Tension）や興奮（英: Excitement）を含むことができます。

 

 

写真撮影でよく利用されるテクニックが、「リーディングライン（英: Leading Lines）」と呼ばれ、「視線をリード、誘導」する役割があります。うまくリーディングラインを取り込むことで、デザイン全体または特に注目して欲しい、フォーカル・ポイント（英: Focal Point）に視線を移動させることができます。

 

リーディングラインをウェブデザインに採用した、いくつかのサンプルを見てみましょう。以下のウェブページは、対角線ラインを利用することで、とても強力なリーディングラインを作成し、ページ下にジグザグ状で並んだ各コンテンツへと、視線を誘導しています。

 

 

 

 

イラストを並べるときにも、ラインを利用したテクニックが有効です。以下サンプルでは、すべてのイラストをシンプルな白ラインで描くことで、デザイン全体の統一感を出し、より覚えやすいスタイルに仕上げています。イラスト内のラインを強調して、面白いエフェクトを作成してみましょう。

 

 

 

 

02. 縮尺を利用しよう。

 

 

 

デザインにおける縮尺、スケール（英: Scale）は、大きな意味を持っています。基本的な定義として、縮尺とは個別のデザイン要素ごとによく考えられたサイズ調整を指します。

 

たとえば象のとなりにネズミを描くとしましょう。ネズミは象よりもとても小さく描くことで、読み手がイラストを理解する手助けをしてくれます。

 

 

このように縮尺を利用することで、うまく物事を理解することができますが、実際のサイズをベースにする必要はありません。デザイン要素のサイズを極端に大きくしたり、小さくすることで、素晴らしいエフェクトを実現し、デザインのどの部分がもっとも重要か示してくれます。

 

 

以下は、Gabz Grzegorz Domaradzkiが作成した映画 Driveのポスターデザインです。ここでは、主人公を大きく描くことで、まず彼に注目をあつめ、他の登場人物へと視線が移動するように工夫されています。

 

 

 

 

人の顔における縮尺は、実生活のリアリティーをベースにしているわけではなく、ダイナミックなサイズ拡大や縮小は、映画における登場人物の重要度を知るのに、効果的なデザインと言えるでしょう。

 

 

以下のサンプルでは、統計図や数値などを大きく表示することで、注目を集めるようにデザインされています。

 

 

 

 

03. 配色を利用しよう。

 

 

 

配色（英: Colour）は、特定のムードや雰囲気、感情などを表現することができ、各色毎に特別な意味合いを含んでいます。簡単にいえば、デザインを良くも悪くもしてしまうでしょう。

 

 

以下は、お肌のアンチエイジング効果を狙った女性向けの商品です。軽やかでソフトな印象に、パステルカラーを使用し、白やライトグレーなどのソフトな色合いと、銅/金箔の組み合わせによって、落ち着いたエレガントで女性的なデザインを表現しています。

 

 

 

 

上記サンプルと異なり、こちらではよりコントラストが強く、鮮やかでエネルギッシュな楽しいデザインに仕上げています。

 

 

 

 

配色は、ブランディングにだけでなく、写真を含むすべてのデザインに活用することができます。フィルター機能を利用することで、写真の明るさや色合いを、無限に調整することもできます。

 

 

洗練されたモダンな雰囲気のデザインを作成するときは、単色フィルターをイメージ写真に重ねてみましょう。また写真のコントラストをすこし下げ、色合いをを中和することで、ソフトで落ち着いた印象に仕上げることができます。

 

 

 

04. 反復を利用しよう。

 

 

 

コカ・コーラやGoogle、Apple、Nikeなどの大企業を連想すると、まずは一般的な配色やコンセプトを含んだ、ロゴを連想するでしょう。見たらすぐに覚えてしまう理由は、「反復（英: Repetition）」です。

 

反復は、ブランディングにおいて重要な要素で、統一感を演出し、各アイテムをまとめることができます。

 

 

以下のサンプルでは、統一感のある配色に、統一感のあるロゴを利用しています。実は、マージン幅も揃えている点にも注目です。

 

 

 

 

「反復」テクニックがブランディングに大事なように、デザイン作成にも重要な意味をなしています。たとえば、パターンやテクスチャデザインにとっても、鍵となる要素となります。

 

 

以下のサンプルでは、反復テクニックを利用した、美しいパターンデザインが特長です。特に決まったデザインスタイルもないので、楽しく効果的なパターンを作成してみましょう。

 

 

 

 

 

 

 

 

 

05. ネガティブ・スペースを利用しよう。

 

 

 

ざっくばらんに言うと、ネガティブ・スペースとは、デザイン、アートの分野において、「対象の間に存在する空間」という意味を表し、空間自体がシェイプとなります。

 

 

特にだまし絵で有名なM.C.エッシャーの作品は、一度は目にしたことがあるかもしれません。彼は、ネガティブスペースに特化した、数多くのモザイク細工（英; Tessellation）を残しており、以下は、波うつ水面を境に魚と鳥のパターンが交錯する「空と水」という木版画です。

 

 

 

 

エッシャーがどのように空間スペースを利用して、鳥から魚に変化しているか注目してみましょう。デザイン要素のまわりをすべて考慮することで、新しい何かを作成することこそ、ネガティブ・スペースの本質と言えるでしょう。

 

 

ネガティブ・スペースを戦略的に利用することで、魅力的な作品に仕上げることができます。以下の動物をあしらったアイコンデザインでは、ネガティブ・スペースを使ったシンプルな描写がポイントです。

 

 

 

06. 左右の対称を利用しよう。

 

 

 

人間は、左右対称のものに惹かれるということは、科学的に証明されています。「対称（英: Symmetry）」は一般的に、魅力的で美しいデザインとされています。

 

 

調和したバランスの取れたデザインを作成するために、対称テクニックはロゴデザインで多く利用されています。マクドナルドやシャネル、スターバックス、ターゲットなどは良いサンプル例と言えるでしょう。

 

 

 

もちろん対称テクニックは、すべてのデザインに適しているわけではありません。バランスの取れたデザインと、片側をコピーしたような対称デザインは紙一重です。完全な左右対称デザインではなく、デザインの中にいくつか対称となる要素を加えると良いでしょう。

 

 

たとえば以下のサンプルは、左右対称を意識した結婚式の招待状デザインですが、完全に対称というわけではありません。その代わりに文字テキストやメッセージを調整することで、バランスよく並べるだけでなく、デリケートでロマンチックな雰囲気を演出しています。

 

 

 

 

対称テクニックは、いつもはっきりと分かるわけではなく、時にはあやふやで、気づかないことさえあります。エディトリアル・デザイン、特に文字テキストは、見えない対称デザインを利用している良い例です。

 

雑誌に掲載されている、長文の記事などを見てみると、可読性の良さを保ち、スッキリとさせるために、通常同じサイズでボディーコピーを、カラムごとに分割しています。同時に、ビジュアルを魅力的に仕上げるのにも役立っています。

 

 

以下のサンプルでは、両ページのレイアウトを鏡のように合わせた、対称テクニックを利用することで、読み手の注目を集めるように工夫されています。

 

 

 

レイアウトに少しだけ対称テクニックを採用することで、バランスの良さや順序をうまく作成することができます。雑誌などの出版物や、文字数の多いデザインを制作するときは、対称テクニックを意識してみましょう。

 

07. 透明を利用しよう。

 

 

 

「不透明度（英: Opacity）」としても知られ、透明はどのように要素が透けて見えるかを指します。不透明度が低いと、明るくあまり気づかない要素となり、不透明度が高いとより濃く表示されます。

 

 

以下のサンプルでは、不透明度をうまく利用しています。色やサイズ、不透明度の異なるシェイプを重ねて、調整することで透明エフェクトを実現し、レイヤーの形を面白い方法で強調しています。

 

 

 

透明テクニックは、静的な画像に動きを加えるときにも効果的です。以下のサンプル例では、異なる透明度のイメージ写真を重ねることで、動きのあるエフェクトを実現しています。

 

 

 

透明テクニックは、デジタル・グラフィックの世界以外にも活用されています。以下のサンプルは、ニューヨークにあるガラス美術館の招待状で、透明のガラスに文字をプリントした、ユニークなエフェクトに仕上がっています。

 

 

 

08. テクスチャを利用しよう。

 

 

 

すっきりと清潔感のあるデザインも素晴らしいですが、テクスチャを利用したラフな質感も忘れてはいけません。テクスチャを利用することで感触（英: Tactility）や奥行き感を表現でき、デザインにユニークなエフェクトを追加することができます。

 

 

しかしこのテクニックも、節度を守って利用するべきで、あまり考えずに利用すると、すぐに使いすぎてしまいがちです。味があり使い古されていて、品や優雅さがある（英: Shabby-chic）と、古くてみすぼらしい（英； Shabby）は紙一重ということを覚えておきましょう。

 

 

 

またテクスチャを利用するほど、文字やその他のデザイン要素も見づらくなってしまうので、こちらも注意が必要です。

 

 

以下のサンプルでは、テクスチャを利用してビンテージ・スタイルをうまく強調しています。テクスチャがデザインの邪魔をしないだけでなく、より手作り感やビンテージスタイルを強調し、デザイン全体を素敵に仕上げています。

 

 

 

 

以下のサンプル例では、等高線をモチーフにしたテクスチャを、名刺に直接エンボス加工を施すことで、感触をうまく表現しています。

 

 

09. バランスを利用しよう。

 

 

 

バランス（英: Balance）は、人生の多くで重要なように、デザインの世界でも同じようにとても大切です。

 

バランステクニックをマスターするひとつの方法として、各デザイン要素に「重さ（英: Weight）」があると考えてみましょう。文字テキストやイメージ写真、配色の他に、サイズや形などを元に、他のデザイン要素と比べて、どれくらいの重さがあるか検討してみましょう。

 

 

以下のロゴサンプル例は、美しくバランスがとれています。もし3Dプリンターでこのロゴを印刷すると仮定すると、きちんと直立で立てることができ、バランスがうまくとれているのが分かります。

 

 

 

バランステクニックの種類のひとつに、「非対称バランス（英：Asymmetrical Balance）」があり、左右や上下を鏡のようにコピーするのではなく、サイズや要素を整列することで、よりデザイン要素の「重さ」を表現することができます。

 

 

以下のサンプルでは、縮尺テクニックを一緒に利用し、デザイン要素をうまく分配した、バランスのよいデザインと言えます。各要素のサイズを調整することで、バランスを整えている点に注目しましょう。

 

 

10. 階層を利用しよう。

 

 

 

デザインにおける階層（英: Hierarchy）は、普段生活している文化的な階層にも近い、アイデアが基本となっています。階層の一番上には、もっとも重要な要素が配置されます。これらの要素は、過剰にスタイリングすることで、注目を惹くように工夫されています。

 

 

以下のサンプル例では、文字テキストを大きく太字にすることで、見出しタイトルの重要性をうまく示しています。はじめて見た人も、何も考えずにどれが見出しタイトルなのか、指を指すことができるでしょう。

 

 

 

次の階層には、重要だけど、見出しほど注目を集める必要がない要素を配置しましょう。一般的に、小見出しや引用文、追記情報などがこれにあたります。見出しタイトルほど、目立たないように注意しましょう。

 

 

以下のサンプルでは、「Save the Date」という文字はより大きく太字で表示されていますが、メインとなる「Audrey and Grant」より目立たないように仕上げています。

 

 

 

階層の最後には、あまり重要では要素を並べましょう。通常、ボディコピーや重要度の低い情報、リンクなどが含まれます。

 

以下のサンプルでは、すぐにタイトルや小見出し、日時などが分かるようになっており、一番下にはあまり重要ではない追加情報が、もっとも小さな文字サイズで記載されています。

 

 

 

もちろん、階層は文字テキスト以外にも利用されています。縮尺テクニックでも触れましたが、イメージ写真の場合、より大きく、よりカラフルで、よりイメージ写真の中心にある要素は、高い階層に配置され、重要度が増します。