【要約】「デザイン力の基本」で素人のデザイン力の向上を目指す
こんにちは。ハヤです。
現在、転職活動しながらブログを書いてます。
今回は、
「デザイン力の基本」 著：ウジトモコ
本書は７７個のルールがあるのですがたくさんの方に読んでほしいので
ずっと使えそうなデザインの知識を紹介したいと思います。
ぜひ最後までご覧ください！
この本との出会い
ブログのデザイン力を上げたいなと思って探していたらこの本に出会いました。
昔から私服の配色にこだわったり、身の回りの配色をじっくり見ることが好きでした。
しかも現在ブログもしているということでデザインが自由です。（３つ運営してます）
つまり私のセンスがブログにも出てくるということです。
デザインはほぼ限りなくあるからこそ、デザインを学び、
よりよいブログのデザインができればいいなと思いました。
さっそく本題に入ろうと思います。
デザインとは
デザインの意味を確認してみましょう！
「デザイン」とは、単に文字や写真、イラストを並べたり何かを飾り建てる技術のことではありません。
と思ったらもっと深い意味がありそうです。
デザインとはもともとラテン語で「ある方向性をもって計画を進める」という意味があり「設計」と訳されます。またそれによって「新しい意味を生み出す」というような、哲学的な示唆もその中に含まれています。
デザインが「設計」は、かなりかっこいいですね。
デザイナーという職種の人ではなくても、自ら課題を発見し、最適化して新しい形に組み替え、そして新しい意味を見出し、解決策を見出すためにデザインを活用できます。これはまさに「デザイン力」です。
なるほど。全然デザイナーじゃなくても知っておいて損はない知識だとわかります。
ＰＤＣＡのサイクルに似たような世界がデザインにもある気がしました。
さらに、優れた良いデザインは、最初に定められた課題の解決はもちろん、複数の課題を包括的かつスピーディーに解決し、期待を超えた飛躍を呼び起こすこともあります。つまり、コスパがよく、創造性も高く、成果も上がる・・・、「デザインによるイノベーション」と呼ばれるものです。
良いデザインはさらに期待以上の飛躍をする可能性があるということですね。
次に私たちに向けてこんなことを述べていました。
最近ではデザインのツールも大きく進化し、誰もがデザインに関わる時代、ビジネスシーンをはじめ、すべての人にとってますます「デザイン力」は重要視され、求められているのです。
私みたいなデザイン素人にも「デザイン力」は求められていることがわかります。
仕事でもプライベートにも活かせる場面があることがわかります。
いきなり手を動かさない
プロはいきなりデザインを始めるのではなく「調査」と「準備」をするそうです。
デザインを作り始めるタイミングはデザイン以外は迷いがない状態ができたらです。
何を得るか
「しっかりと伝える」ためには、視覚伝達のしくみを理解し、伝える内容を、シンプルに絞る必要があります。
人間の目のしくみ
デザインはできるだけ「１か所に目を向けてもらう必要」があります。
「人間の目は１つのことをしっかり見る」機能に重視しているからです。
「たくさんものを同時に見る」ようにはできていません。
よって、
視覚の伝達で効果を上げたければ、伝えたいことはなるべくシンプルに絞ります。
難しければテキストで伝え、ビジュアルとコピーで相乗効果があるように分担します。
伝えるゴールをしっかり把握する
以下の３つの伝える目的によってゴールが変わってきます。
告知：内容を印象的に伝える（インパクト重視）
集客：買いたくなるように伝える（動線設計重視）
啓蒙：趣味や考えに共感するよう伝える（テーマ重視）
伝えるゴールによって最適な表現手段を選びましょう。
誰が見るかを考える（ペルソナ）
ペルソナとは対象を具体的に、明確にしていくことです。
マーケティング用語で「ペルソナ」と言います。
「何を伝えるか」と同じくらい「誰が見るか」を考えることも大事です。
そのペルソナに沿ったデザインを作っていきます。
⇩余談ですけど文章術でもペルソナを意識した記事を書いてます。
第１印象に２度目はない
「第一印象に、二度目はない。」その言葉の通り、商品のパッケージは価値を伝える最初の媒介と考え、手に取りたくなり、かつ中身にふさわしいものにしておく必要があります。
なんでも第一印象に二度目はないですね。
ほんと第一印象てどこにいても大切になってきますよね。
新学期のクラス、就職先、好きな子など
第一印象で目に留まるようなことを意識してみましょう。
- 自分を知らない人に見せる （意識）
- 誤解されないように注意する （戦略）
- 自分の価値を正しく伝える （戦略）
- 物語や由来も最初から伝える （工夫）
目立つが売れるわけではない
デザインは目立てば売れると思っていたんですけど、そうではなさそうです。
第一印象はたしかに大切ですが、ただ目立てば良いかというとそんなことはありません。ポスターや商品を見た人の心を動かす必要があります。「人の心を動かす」から「実際に行動に移す」までを整理して考えます。
目立つことが売れるわけではないポイントを紹介しますね。
実感するから、行動する
見た人にデザインのゴールに合った実感をしてもらう事が大切です。
嫌がる人に無理矢理何かさせるのは難しいです。
なら、体験価値や共感がデザインのキーワードで見る人を動かすようにします。
デザインを見た人に望んで行動してもらうよう、
デザインで体験価値や共感を呼び起こしましょう。
共感するから、心が動く
派手なグラフィックがなくても十分見た人を「共感」させることができます。
目指すゴールによって、
むしろ目立たない静かな表現の方がインパクトを与えることがあります。
次のアクションを、起こしやすいか
サイトを見て次のアクションにつなげてもらうためのポイントが書かれています。
心を動かすことができれば、そこから先に進んでもらうアクションにつながります。
見る人の心が動かすことができれば、次のアクションにつながることがわかります。
お客さんにしてほしい行動の道のりをつくっておくことを「動線設計」と言います。
この 「道デザイン」がよくないとモノは売れないし、ヒットもしません。
このブログのデザインによってアフィリエイトの成果も上がる可能性がありますね笑
世界のデザイナーたちはこの動線設計に関わっていて、
心が動かされて購買までの「道筋のデザイン」をしています。
欲張らない
いらないものを捨てる
デザインを自分のイメージに近づけるコツは、引き算にあります。いらないもの・かぶっているものは捨てましょう。また、一定のスペースに情報量を入れ過ぎると、かえって伝わりにくくなるので、分けるか、捨てましょう。
ゴチャゴチャしたデザインはよくないことがわかります。
増えすぎたら減らす。
大事なほうを残す
要素がかぶっているな、と感じたら、迷わず大事なほうを残します。また、「迷うくらいだったら、取る」ことを第一に心がけてみましょう。
写真やイラストは１枚勝負
「写真やイラスト１枚で勝負する」
シンプルにすることを心がけるようにします。
写真とイラストは文字と分ける
テキストはテキストに分けて、いらないものを外します。
コンテンツはよりシンプルになり、伝えたいことが引き立ち、視線を誘導しやすくなり、結果読んでもらえることになります。これが「情報がデザインされた状態」です。
要素が少なければ、レイアウトはカンタンで楽しくなる
さきほど人間の目の動きを説明しました。
たくさんものがあちこち散らばっているより、まとまりがある方が見やすくなります。
ワンキャッチ・ワンビジュアル
ビジュアルとコピーのスペースを分けて確保します。
文字は白字に打ち、文字情報もわかりやすくレイアウトもカンタンです。
「目に見える順番」と「情報の優劣」を一致させる
ここではワンキャッチ・ワンビジュアルからもう一歩踏み込んで、視線誘導の流れをデザインしてみます。魅力的な小説はコンセプトや構成が優れていますが、これは、デザインにも言えます。ただし、デザインはコンセプトや構成をビジュアルで伝えます。
視線誘導の流れの話になります。ブログにも使えそうなので紹介します。
１．アイキャッチ（イメージ、印象）➡興味喚起
多くの広告は読んでもらえず、興味がない人には、見てもらうことさえままならないこと念頭に置きましょう。そのような状況でも、人の記憶は「画像と感情」がセットになることで、より強い印象を与えます。そういった意味で、アイキャッチには感情に届くものを選びます。
残念ながら万人受けする広告はないそうです。確かにブログもそうだなと思いました。
ブログなら見た瞬間のアイキャッチの画像が大切そうですね。
しかも画像と感情がセットにのっていることで強い印象を与えることができそうです。
２．コピー（概要、概念）➡説得、約束
イラストや写真では伝えきれない、コンセプトや概要を伝えます。
３．ロゴや詳細情報➡詳細情報
広告主や問い合わせ先、期限、日程など重要な情報をまとめます。
余白を活かす（映えるためのテク）
「映え」の基本はずばり、主役をいかに引き立てるかということです。遠景と近景でつくる、主体と余白でつくる、主役を目立たせる、などさまざまな方法があります。
背景はあくまで脇役、主役をいかに際立てるかのテクニックが必要ということですね。
では具体的にどんなテクニックがあるか確認してみましょう！
視線誘導の王道は「引き算で目立つ」
視線の誘導の王道は引き算で目立つことです！
余白は、探すものではなく、つくるものです。
確かに余白を効果的につくることで、視線の誘導がしやすくなりますよね！
余談です。文章術の勉強をしていたときにも「余白をつくる」ことを勉強しました。
こういうブログのなかでも余白をつくることの視覚効果によって、読み手も見やすくなります。なのでスペースやひらがなと漢字の割合を気を付けるなどを心掛けてます。
ぼかして、視覚的な情報量を減少させる
メインの被写体以外のピントをぼかします。
メイン以外のものピントがぼけてて被写体が見やすいと思ったのは、
このテクニックのおかげでした。
焦点を被写体のみに合わせることで効果的な「映え」をつくりながら、周辺の雰囲気や空気感を伝えることができます。
無意識に見る写真にもこのようなテクニックが盛り込まれてたのでびっくりです。
周辺を暗く落とす
メインの被写体以外のライトを落とします。
周りは真っ暗ということですね。
被写体以外を暗くする効果は、
被写体にライトが当たらないことで、
視点を誘導し、強い印象をつくることができます。
黒背景の状態で人が写ると圧倒的強者感がでてくるのがわかります。
空気を作る
どんな雰囲気にしたい？
デザインをする際に「こんな雰囲気にした」という思いはとても大切です。
良いイメージを持てないまま「こうしろといわれたから」「前もこんな感じだったから」といった受け身の姿勢でデザインを続けると、心を動かす魅力やメッセージはどんどん失われていき、本来の威力を発揮できない、力のないデザインになってしまいます。
構成は変えずに、雰囲気だけ変える
イメージは、言葉よりも、ビジュアルやデザインを使うことで、早く確実に伝えることができます。
クールなイメージ、かわいいイメージなどででビジュアルも変わってきます。
なんとなくを計画的に
普段の生活で「なんとなく良い感じ」で買ってしまった商品や「なんとなく気になって」覚えてしまった広告などはありませんか？
たしかにあります。
普段財布のひもは固い方なのですが、理由もなくなんとなく買ったことがありました。
この「なんとなく」が大事だったようです。
「なんとなく」は人の行動原理を左右するとても大きな要因で、集客や売上にも密接に関係しています。
「なんとなく○○」という一見、曖昧でフワフワした「雰囲気」「空気感」について、
計画的に全体戦略をつくるクリエイティブ手法を広告業界用語で、
「トーン・アンド・マナー」と言います。（略してトンマナ）
このトンマナを上手く使っていく方法は、
これから作ろうとするデザインは何でできているかを知る必要があります。
「雰囲気」「空気感」はデザインから最初から取り入れます。
要はデザインを作り始める段階から「なんとなく」は計画的に意識しておきましょう。
カジュアルに見せたいとき
全体の雰囲気を見せたいときは次のようにします。
カジュアルなデザインにすると、リラックスした雰囲気によって見えない壁を取り払い、人を引き寄せることができます。また、面白い表現やマンガチックな表現にすることで、敷居を下げてターゲット層を広げることもできます。
具体的にカジュアルにする方法は、
カジュアルな感じにしたければ、
「動きのあるレイアウト」や「手描き風のタッチ」を使うのも手です。
集客の基本
一般的に集客、周知であれば明るい色や動きがあるレイアウトは、
目を引きやすいです。
特にＳＮＳなどは寒色系よりも暖色系が有効とされています。
完全に色で印象を決めてしまっていますが、
寒色系、暖色系のどちらかでその人の印象も決めてる気がします。
フォーマルに見せたいとき
カジュアルと対照的にフォーマルにみせたいときのアプローチです。
デザインで「品格」を出したければ余白や文字そろえに現れます。
どんな場面で使うというと結婚式の案内状、投資向けの事業計画書などです。
特別感をデザインしたいときは、メインの情報にたどり着くまでの心理的および物理的な空間や距離間を大切にします。基本はシンプルで丁寧に。
とにかく無駄な内容は省いて、シンプルに仕上げることです。
例えば、薄紙を１枚足す、厚い紙を使う、良い封筒に入れる、クリアファイルに入れるなど効果もあります。
「掴むデザイン」と「引き寄せるデザイン」
視覚における「押す」と「引く」を意識
恋愛のテクニックで「押し」「引き」があるようにデザインにもあるらしいです。
ターゲットを掴んでいこうとする勢いをデザインに盛り込む（プッシュ型）
控えめな表現がかえって心を揺さぶり、自分から少しずつ近づいていきたくなるような惹きつけるデザイン（プル型）が効果的な場合があります。
そのどちらが正しいということではなく、ケースごとにどちらがいいかを戦略的に意識して使用することが大切です。これらも「なんとなく○○」と感じるデザイン手法の１つです。
デザインの一貫性
一貫性のあるデザインのルール作りのポイント
デザインやルール作りで最も大切なことは、それをつくる人や使う人が便利であり、使うことで助かったり、創作を楽しめることです。何のためのルール化なのか必ず確認しておきましょう。
一貫性のあるデザイン、ガイドラインのつくり方
- 目的をはっきりさせる
- 作業が効率化され、使う人が楽になることを目指す
- 守るべきところと、自由にしてもいいところを作る
色数戦略と王道の３色ルール
色数戦略
色を選ぶのは認知度や売上に関わるとても大切な視覚要素のため、
なにも考えずにいきあたりばったりだと、あとで大変です。
つまり、成り行きで色を選ぶのはアカンということがわかります。
１色戦略 メインカラーを中心に、印象を訴求する
「１色訴求」とはメインの色を中心にしたイメージ戦略でその世界観のすべてをメインカラーの印象に委ねます。しかし難易度が高いです。
なぜなら、大手の会社のロゴが「１色訴求」を独占しているからです。
例えば「ソフトバンク」「コカ・コーラ」「ａｕ」「ポカリスエット」「ＪＲ」です。
（文字の色は数に含めません）
１色だけの市場はもう飽和状態なので、
色を増やすことで新しい市場を開拓する必要がありそうです。
それが次の戦略です。
バズカラー特徴的な２～３色の組み合わせ
２～３色の印象的な配色で、キーカラーに対して異なる色相のサブカラーを組み合わせてインパクトを出す訴求表現です。
例えば、「ＩＫＥＡ」「サーティワン」「タリーズ」「バーガーキング」などです。
（イメージは載せられません。）
単体の色はオーソドックスでも、組み合わせ次第で独特な世界観が演出できます。
らくちん・センス良く「王道の３色ルール」
色選びは難しく考えすぎたり、逆にいい加減にしたりしてもまとまりがつかなくなりそうですが、「王道の３色選び」で考えれば、簡単にセンス良く、自分らしさも表現できます。
「王道の３色選び」とは、
①地色（紙色・地色）＋➁文字色（特別な事情がなければ黒、あるいは濃いグレー）＋③ポイント色（差し色・アクセント）の３色で構成する方法です。
改めて分解してみると以下の３つの合計が「王道の３色選び」と言います。
①地色（紙色・地色）
➁文字色（特別な事情がなければ黒、あるいは濃いグレー）
③ポイント色（差し色・アクセント）
この３色を上手くつかいこなせばシンプルなデザインが出来そうです。
「シンプルで美しい配色」を目指す
色は「シンプルで見やすく、美しく」を目指します。
私が尊敬してやまない
レオナルドダヴィンチの言葉で、
「シンプルさは究極の洗練である」
と残しています。
色でも同じことが言えると思いました。
落ち着きを感じさせる「大人の配色」
全体を落ち着いた大人の雰囲気を出したければ、
「深みのある」「彩度の低い」ポイント色を使うようにしましょう。
まとまりを出す方法
色にまとまりを出す方法は、色数を絞ることです。
特にビジネスシーンに登場するグラフや表など色数は少なく絞った方がまとまります。
ポイント色に「ビタミンカラー」を取り入れるのもアリです。
⇩参考にビタミンカラーの一覧のサイトです。
印象的を残すなら
もし印象的なデザインをしたければ「地色」をユニークにします。
地色を「濃いグレー」にしたり、文字色を「白」「薄いグレー」にするとより
グローバルなデザインカンファレンスでみかけるような印象深いものになります。
主役カラーの決め方
キーカラーの選び方
キーカラーの選び方は、
自分がいつも掲げている「ビジョン・コンセプト」から選びます。
戦略の立て方
プロに相談しなくてもうまくキーカラーを選ぶ方法は
色の戦略を立てるときに「色見本帳」を眺めてイメージすることです。
もしどこかの場面でカラー戦略を考える場面があったら、
色見本帳を眺めて自分のビジョンなどを照らし合わせてみるといいかもしれません。
＊オススメ本
リンク
＊世界版の色見本帳もあります
リンク
キーカラーが決まったら？
キーカラーが決まったら次は「サブカラー」を決めます。
キーとなる色が決まったら、サブカラーを選びましょう。キーカラーは「世界観」や「ビジョン」の可視化だったのに対し、サブカラーは「視認性」「補色」などのように機能的に選びます。
この場合サブカラーは「王道の３色ルール＋１色」になるので実質４色ですね。
見やすさ・わかりやすさが最優先の「地色・文字色」
キーカラーに対して、サブカラーを選ぶ際も、必ず最初に地色①と文字色④を決めます。サブカラーは、見やすさ、わかりやすさを最優先して選びましょう。
キーカラーを補完する色は、明度に合わせて、色相をずらすのがポイントです。
キーカラーの補色、あるいは色相をずらして明度を揃えると、
全体としてまとまりやすくなる効果があります。
「王道の３色ルール」のシンプルさにサブカラーをプラスしたら、
さらに印象的な表現が可能になります。
カラーパレットの作り方
色はそれ単体で考えるよりも、
環境や組み合わせを意識するとより効果的に使うことができます。
色は単体より、組み合わせを意識するとうより効果があがるということですね。
一般的に「カラーパレット」と言うと、色見本帳など「意識づけやカテゴリを持たない色の羅列」を思い浮かべる人も少なくないようですが、デザインの実務では、印象や哲学としてのキーカラーと、それを支える機能的な配色の組み合わせを示します。
すこし難しい話ですけど要は大体実務だとキーカラーが決まっていてそれプラスそのキーカラーを支える配色の組み合わせがあるということです。
最も簡単なカラーパレットとして、
①キーカラー
➁ベース色
③文字色
④サブカラー⑴（キーカラーと明度は同じ。色相は違う色）
⑤サブカラー⑵（キーカラーと明度は同じ。彩度の低い色）（NEW！）
の５色をベースに、応用・発展させると良いです。
カラーパレットは「哲学➡機能➡補完」の順に選びます。
⇩色の組み合わせの参考になるサイトを載せておきました。
まとめ
めちゃくちゃ長くなっちゃいました。
文字だけだと少しわかりにくい部分もあったと思います。
今回はデザインについて紹介しました。
ただ他にも使えるテクニックがあるので気になった方は手に取ってください！
また必要な知識があったらこの本からアウトプットしたいと思います。
デザインはセンスの問題だと思っていましたが、デザインにもしっかり原理があり方法があることがわかりました。なので努力次第で少しはマシになることがわかります。
私の同じデザイン初心者の方にはおすすめです。
というわけで今回は以上です。ありがとうございました。
＊参考図書
リンク
◆関連記事◆
■まとめ記事■
