デザインを作るための5つステップ STEP4|デザイン表現

STEP1
デザイン表現

デザインをつくる5ステップ

STEP1.情報収集

STEP2.読ませる情報と見せる情報(情報の取捨選択)

STEP3.トンマナの決定

ここまで来たら、やっとデザイン制作です!

STEP1〜3で整理してきた情報や目的に沿って実際にデザインの作業をしていきます。

反応取るために必要なデザイン表現のテクニックを駆使してデザイン制作を進めていきましょう!

1点注意点は、デザイン表現は「理解」が進むだけでは不十分です。

理解に伴って「スキルアップ」が必ず必要になってくるので、それは手を動かし、各課題や実践課題を重ねることで解決していきましょう。

反応を取るためのデザイン表現テクニック

デザイン表現のルールをまとめていきます

コピーデザインテクニック                     

キャッチのタイトルは読みやすく、大きく
キャッチ部分に来るコピー、タイトルは読みやすいフォントで大きくが基本です。

脱素人感の文字組み
字間・行間を均等に。与えたい印象によって調整します。

例)高級感リラックス:字間を広めに取る

例)親近感お得感:字間を狭めにする など

長い文章の中の1部を目立たせる
比較的長い文章(4行以上が目安)になると、そのすべてをユーザに呼んでもらうのは大変難しくなります。

とびとびで読んでも意味が通じるように、長文の1部を強調します。

強調する箇所:長文を読まなくても、強調した文字のみを読めば、意味が通じる
文字強調する方法↓

・線を引く
・黄色のマーカーなどをつける
・文字の上に手をつける
・外線をつける
・フォントサイズを変更する
・フォントウェイト(文字の太さ)を変更する
など

段落には見出しをつける
クライアントから比較的長い文章の原稿をもらった際には、それをそのままデザインするのではなく、文章の中で最も重要な一文を取り出してきて、タイトルをつけましょう

 

余白の取り方
印刷物の場合、裁断線よりも5から8ミリメートル程度、内側にコンテンツが入るように余白を取りましょう。また余白を作って間を持たせ、ゆったりとした印象や高級感女性らしさを表現することができます。

 

 

配色テクニック
配色を工夫して、意図的に視線を集める。彩度の低いものと、サイドの高いものが、並べば彩度の高いものに目が行きます。

明度の低いものと明度が高いものを並べば、モノクロの場合、明度の低いものに目が行きます。

カラーの場合、原色に近いものそして明度が低い=色が濃いものに目が行きます。

全体の配色を考えるときに、目立たせたいところに目立つ色を持ってくる
この場合、何色であっても、周りにある色より強い色目立つ色を持ってくるのです。

 

 

統一感の出る配色テクニック
トーンを合わせた色を使うようにします。

トーン配色表の同じ縁の中、または近くの縁の中にある色同士を組み合わせると比較的調和の取れた配色になります。

 

黒は特別な色(黒の扱い方)
デザインに黒を使うときの注意点。
ウェブカラーの真っ黒(他の色が全く混ざらない黒)の数値は#000000です。
しかしこの100%の黒は非常に強い色なので扱いに注意が必要です。

意図的に力強く見せたいと言う場合には、純正の黒を使用することがありますが、読ませたいための黒はウェブカラー#333333 (若干グレーかかる)位が好ましいでしょう。

ウェブデザイン・グラフィックデザイン問わずに他の色を殺さないようにするため、100%の黒ではなく、一見黒に見せたいが他の色との調和や可読性を上げるためなら90%から80%の黒を使用するのがオススメです。

レタッチのコツ 写真は明るめが基本
クライアントから提出のあった写真素材は基本的に明るさを調整して使います。
そのほとんどが若干明るいかなくらいに設定してちょうど良いと言うものです。写真が暗いと印象が悪いので、必ず明るめの写真を使用しましょう。

Photoshop課題の色調補正でも説明をしていますが、被写体に合わせて色調補正の具合を調整します

食べ物は赤みを若干強く、暖色系で明るくまとめると良いでしょう。

ペットは白ぼかしや周りを若干ぼかすことで柔らかく感じるので可愛さを強調できます。

 

 

 

トリミングは意図を持って
クライアントから提出された写真、素材、フリー素材撮影した写真、素材などいろいろあると思いますが、写真をそのまま使うと言う事はほとんどありません。

デザインの意図に合わせて写真をトリミングして使うようにしましょう。

 

上記の2枚について左は写真素材をそのまま使用しています。
お届け物やバス用品詰め合わせなどの素材としては使えますが、この中のどれがメインの写真なのか曖昧です。

一方右の写真は左と同じ写真ですが、トリミングを変更しています。シャンプーにフォーカスしていますこのように何を伝えたいかによって写真のトリミング範囲を変更しましょう。

人の入っている写真素材を使うときは、ターゲットに合わせて選ぶ
人物が入っている写真をランニングページやチラシに使用する場合、写真に写っている人物は、ターゲット像に近い人物が写っている写真を使用しましょう

ターゲットが30代女性OLなら、そのような人物が

ターゲットが70代夫婦ならそのような人物が写っている写真を使用します

 

 

 

その他デザイン表現について解説している動画です。チェックしてみてください。

・配色を考えるときには、白黒で置き換えてみる
・季節の配色について
・何を伝えるか、ユーザにとって行動を起こすほどのメリットになるものは
・コピーの並べ方と装飾について
・予約殺到と言う表現について、誇大表現
・制作物のゴールの考え方

 

 

コメント