デザインで確実に覚えておきたい、20の基本原則まとめました。allWeb制作フローが変わる!便利な最新オンラインツール43個まとめ【2020年版】2020年2月21日ずっと使える、デザインの基本まとめました。改訂版2和風デザイン攻略!商用可な毛筆フリーフォント厳選27個まとめ【2019年版】3Homeウェブ制作ウェブ考察デザインで確実に覚えておきたい、20の基本原則まとめました。Pinciples」より許可をもらい、日本語抄訳しています。デザインはなんとも難解で複雑な、楽しくて面白いビジネスと言えます。デザインをはじめたばかりのときは、覚えることも多く、やらなければいけないこともたくさんあり、色々と検討しなければけないでしょう。同時に、テクノロジーの進化によって、新しいソフトウエアが発売されたり、次から次へと変化するデザイントレンドも意識する必要があるでしょう。すべてを同時に学ぶとなると参ってしまいます。この記事では、デザインをするときに覚えておきたい、20個の基本原則をまとめてご紹介します。前半となる今回は、まず10個のデザインテクニックを見ていきましょう。デザインテクニックはこちらより。【後半】デザインで確実に覚えておきたい、20の基本原則まとめました。Lines)とは何か知っていると思いますが、ここで言うラインとは、すべての線で描かれた箇所を指します。今読んでいるこの文章も、いくつもの曲線と直線で描かれています。ラインは、デザインに特定のアイデアを盛りこむこともできます。Excitement)を含むことができます。Lines)」と呼ばれ、「視線をリード、誘導」する役割があります。Point)に視線を移動させることができます。リーディングラインをウェブデザインに採用した、いくつかのサンプルを見てみましょう。以下のウェブページは、対角線ラインを利用することで、とても強力なリーディングラインを作成し、ページ下にジグザグ状で並んだ各コンテンツへと、視線を誘導しています。イラストを並べるときにも、ラインを利用したテクニックが有効です。以下サンプルでは、すべてのイラストをシンプルな白ラインで描くことで、デザイン全体の統一感を出し、より覚えやすいスタイルに仕上げています。イラスト内のラインを強調して、面白いエフェクトを作成してみましょう。Scale)は、大きな意味を持っています。基本的な定義として、縮尺とは個別のデザイン要素ごとによく考えられたサイズ調整を指します。象のとなりにネズミを描くとしましょう。ネズミは象よりもとても小さく描くことで、読み手がイラストを理解する手助けをしてくれます。このように縮尺を利用することで、うまく物事を理解することができますが、実際のサイズをベースにする必要はありません。デザイン要素のサイズを極端に大きくしたり、小さくすることで、素晴らしいエフェクトを実現し、デザインのどの部分がもっとも重要か示してくれます。Driveのポスターデザインです。ここでは、主人公を大きく描くことで、まず彼に注目をあつめ、他の登場人物へと視線が移動するように工夫されています。人の顔における縮尺は、実生活のリアリティーをベースにしているわけではなく、ダイナミックなサイズ拡大や縮小は、映画における登場人物の重要度を知るのに、効果的なデザインと言えるでしょう。以下のサンプルでは、統計図や数値などを大きく表示することで、注目を集めるようにデザインされています。Colour)は、特定のムードや雰囲気、感情などを表現することができ、各色毎に特別な意味合いを含んでいます。簡単にいえば、デザインを良くも悪くもしてしまうでしょう。以下は、お肌のアンチエイジング効果を狙った女性向けの商品です。軽やかでソフトな印象に、パステルカラーを使用し、白やライトグレーなどのソフトな色合いと、銅/金箔の組み合わせによって、落ち着いたエレガントで女性的なデザインを表現しています。上記サンプルと異なり、こちらではよりコントラストが強く、鮮やかでエネルギッシュな楽しいデザインに仕上げています。配色は、ブランディングにだけでなく、写真を含むすべてのデザインに活用することができます。フィルター機能を利用することで、写真の明るさや色合いを、無限に調整することもできます。洗練されたモダンな雰囲気のデザインを作成するときは、単色フィルターをイメージ写真に重ねてみましょう。写真のコントラストをすこし下げ、色合いをを中和することで、ソフトで落ち着いた印象に仕上げることができます。コカ・コーラやGoogle、Apple、Nikeなどの大企業を連想すると、まずは一般的な配色やコンセプトを含んだ、ロゴを連想するでしょう。Repetition)」です。反復は、ブランディングにおいて重要な要素で、統一感を演出し、各アイテムをまとめることができます。以下のサンプルでは、統一感のある配色に、統一感のあるロゴを利用しています。実は、マージン幅も揃えている点にも注目です。「反復」テクニックがブランディングに大事なように、デザイン作成にも重要な意味をなしています。パターンやテクスチャデザインにとっても、鍵となる要素となります。以下のサンプルでは、反復テクニックを利用した、美しいパターンデザインが特長です。決まったデザインスタイルもないので、楽しく効果的なパターンを作成してみましょう。ブランディングに美しいパターンを採用したデザインインスピレーションは、こちらのエントリーも参考にどうぞ。ネガティブ・スペースを利用しよう。ざっくばらんに言うと、ネガティブ・スペースとは、デザイン、アートの分野において、「対象の間に存在する空間」という意味を表し、空間自体がシェイプとなります。だまし絵で有名なM.C.エッシャーの作品は、一度は目にしたことがあるかもしれません。Tessellation)を残しており、以下は、波うつ水面を境に魚と鳥のパターンが交錯する「空と水」という木版画です。エッシャーがどのように空間スペースを利用して、鳥から魚に変化しているか注目してみましょう。デザイン要素のまわりをすべて考慮することで、新しい何かを作成することこそ、ネガティブ・スペースの本質と言えるでしょう。ネガティブ・スペースを戦略的に利用することで、魅力的な作品に仕上げることができます。以下の動物をあしらったアイコンデザインでは、ネガティブ・スペースを使ったシンプルな描写がポイントです。左右の対称を利用しよう。人間は、左右対称のものに惹かれるということは、科学的に証明されています。Symmetry)」は一般的に、魅力的で美しいデザインとされています。調和したバランスの取れたデザインを作成するために、対称テクニックはロゴデザインで多く利用されています。マクドナルドやシャネル、スターバックス、ターゲットなどは良いサンプル例と言えるでしょう。対称テクニックは、すべてのデザインに適しているわけではありません。バランスの取れたデザインと、片側をコピーしたような対称デザインは紙一重です。完全な左右対称デザインではなく、デザインの中にいくつか対称となる要素を加えると良いでしょう。以下のサンプルは、左右対称を意識した結婚式の招待状デザインですが、完全に対称というわけではありません。その代わりに文字テキストやメッセージを調整することで、バランスよく並べるだけでなく、デリケートでロマンチックな雰囲気を演出しています。対称テクニックは、いつもはっきりと分かるわけではなく、時にはあやふやで、気づかないことさえあります。エディトリアル・デザイン、特に文字テキストは、見えない対称デザインを利用している良い例です。雑誌に掲載されている、長文の記事などを見てみると、可読性の良さを保ち、スッキリとさせるために、通常同じサイズでボディーコピーを、カラムごとに分割しています。同時に、ビジュアルを魅力的に仕上げるのにも役立っています。以下のサンプルでは、両ページのレイアウトを鏡のように合わせた、対称テクニックを利用することで、読み手の注目を集めるように工夫されています。レイアウトに少しだけ対称テクニックを採用することで、バランスの良さや順序をうまく作成することができます。雑誌などの出版物や、文字数の多いデザインを制作するときは、対称テクニックを意識してみましょう。Opacity)」としても知られ、透明はどのように要素が透けて見えるかを指します。不透明度が低いと、明るくあまり気づかない要素となり、不透明度が高いとより濃く表示されます。以下のサンプルでは、不透明度をうまく利用しています。色やサイズ、不透明度の異なるシェイプを重ねて、調整することで透明エフェクトを実現し、レイヤーの形を面白い方法で強調しています。透明テクニックは、静的な画像に動きを加えるときにも効果的です。以下のサンプル例では、異なる透明度のイメージ写真を重ねることで、動きのあるエフェクトを実現しています。透明テクニックは、デジタル・グラフィックの世界以外にも活用されています。以下のサンプルは、ニューヨークにあるガラス美術館の招待状で、透明のガラスに文字をプリントした、ユニークなエフェクトに仕上がっています。テクスチャを利用しよう。清潔感のあるデザインも素晴らしいですが、テクスチャを利用したラフな質感も忘れてはいけません。Tactility)や奥行き感を表現でき、デザインにユニークなエフェクトを追加することができます。このテクニックも、節度を守って利用するべきで、あまり考えずに利用すると、すぐに使いすぎてしまいがちです。Shabby)は紙一重ということを覚えておきましょう。テクスチャを利用するほど、文字やその他のデザイン要素も見づらくなってしまうので、こちらも注意が必要です。以下のサンプルでは、テクスチャを利用してビンテージ・スタイルをうまく強調しています。テクスチャがデザインの邪魔をしないだけでなく、より手作り感やビンテージスタイルを強調し、デザイン全体を素敵に仕上げています。以下のサンプル例では、等高線をモチーフにしたテクスチャを、名刺に直接エンボス加工を施すことで、感触をうまく表現しています。バランスを利用しよう。Balance)は、人生の多くで重要なように、デザインの世界でも同じようにとても大切です。Weight)」があると考えてみましょう。文字テキストやイメージ写真、配色の他に、サイズや形などを元に、他のデザイン要素と比べて、どれくらいの重さがあるか検討してみましょう。以下のロゴサンプル例は、美しくバランスがとれています。3Dプリンターでこのロゴを印刷すると仮定すると、きちんと直立で立てることができ、バランスがうまくとれているのが分かります。Balance)」があり、左右や上下を鏡のようにコピーするのではなく、サイズや要素を整列することで、よりデザイン要素の「重さ」を表現することができます。以下のサンプルでは、縮尺テクニックを一緒に利用し、デザイン要素をうまく分配した、バランスのよいデザインと言えます。各要素のサイズを調整することで、バランスを整えている点に注目しましょう。Hierarchy)は、普段生活している文化的な階層にも近い、アイデアが基本となっています。階層の一番上には、もっとも重要な要素が配置されます。これらの要素は、過剰にスタイリングすることで、注目を惹くように工夫されています。以下のサンプル例では、文字テキストを大きく太字にすることで、見出しタイトルの重要性をうまく示しています。見た人も、何も考えずにどれが見出しタイトルなのか、指を指すことができるでしょう。次の階層には、重要だけど、見出しほど注目を集める必要がない要素を配置しましょう。一般的に、小見出しや引用文、追記情報などがこれにあたります。見出しタイトルほど、目立たないように注意しましょう。Grant」より目立たないように仕上げています。階層の最後には、あまり重要では要素を並べましょう。通常、ボディコピーや重要度の低い情報、リンクなどが含まれます。以下のサンプルでは、すぐにタイトルや小見出し、日時などが分かるようになっており、一番下にはあまり重要ではない追加情報が、もっとも小さな文字サイズで記載されています。階層は文字テキスト以外にも利用されています。縮尺テクニックでも触れましたが、イメージ写真の場合、より大きく、よりカラフルで、よりイメージ写真の中心にある要素は、高い階層に配置され、重要度が増します。目次へ戻るでは次回は、デザインの基本原則の後半を見ていきましょう。【後半】デザインで確実に覚えておきたい、20の基本原則まとめました。【後半】デザインで確実に覚えておきたい、20の基本原則まとめました。2015/12/14デザイナーにおすすめ!写真に文字をうまく入れる、6個の秘訣テクニック完全ガイド2016/01/062015-2016年対応!流行トレンド配色カラーの使い方、テクニック10個まとめ2015/09/10"ウェブ考察"の最新記事はこちらずっと使える、デザインの基本まとめました。