デザインを考える時に大切なこと
こんにちは！
新人WEBデザイナーの市川と申します。
まったくの未経験で、Photoshopのテキスト追加すらできなかった初心者です(大汗)
新人WEBデザイナーさんや、デザインに興味がある方、デザインの勉強を始めたばかりの方など、みなさんと一緒に学びや気付きを共有出来たら嬉しいな、と思っています♪
私が日々、ガーディアンで学んでいるデザインの経験をアウトプットし、皆さんとシェアをしたく、実際の例と共に書かせていただきます(＾＾)
まずは
「デザインってどうやって考えてるの？」
考えるポイントは、3つあります。
今回は、私が初めて担当させていただいたデザインを例として、この3つのポイントをシェアしたいと思います♪
CASE STUDY
【WEB学校のバナーを作る】
WEB学校のテーマ：「ホームページの改善手法を学ぼう！」
※WEB学校とは
弊社で無料開催している、WEB勉強会のことです。
下記は専用ページになりますので、ご興味のある方はご覧ください(＾＾)
https://guardian.jpn.com/service/web_school/
では、早速この 3つのポイント をご紹介いたします！
Point1.「コンセプトを明確に確認しましょう！」
まず最初に必ず確認しなければならないこと、それが「コンセプト」です。
うーん、コンセプトとはなんでしょう？
辞書で調べてみると
①概念。
②企画・広告などで、全体を貫く統一的な視点や考え方。
と出てきました。なるほど、よくわからないですね。
ビルで例えてみましょう。
基盤がしっかりしているビルは真っすぐ建ちますが、基盤をまったく作らずにビルを建てると、どうなりますか？
当然、崩れてしまいますよね。
そして、依頼者はマンションとして考えていたのに、建築会社はオフィスビルを建ててしまったらどうでしょうか？
一から建て直しになります。
つまり、コンセプトとは「芯」であり「軸」、そして依頼者とデザイナーが同じ認識をしている、ということが大切になります。
なので、ここがブレてしまうと、無駄なデザインが出来上がってしまうのです。
そうすると、ターゲットに伝えたいことが伝わらなく、さらにせっかくのデザインが使えず、再作成することになってしまいます。
時間もかかりますし、モチベーションも下がってしまいますよね。
今回の、WEB学校のテーマのコンセプトは
「WEB担当者やホームページを持っている人に、WEBについて気軽に改善手法を学んで活用してほしい」
また、ターゲットとしては「WEBについて気軽に学びたいと思っている方」なので、「かっちりした雰囲気」よりも「やわらかい雰囲気」なイメージのデザインになる、ということがわかると思います。
Point2.「依頼者視点、閲覧者視点から考えてみよう！」
依頼者に、コンセプトやターゲット、求めてる成果(ゴール)を聞き、デザイナーと依頼者の完成イメージに違いがないかを確認します。
ただ、依頼者の要望を受け入れすぎると、閲覧者視点で見たときに伝わらないデザインになってしまう可能性が出てきます。
閲覧者は、デザインを見にきているわけではなくて、得たい情報があるから見ているはずです。
(私はこれを初めて聞いたとき「…..ホンマや！」と感動しました。普段なんとなくやっていることって、意識して考えてみると奥深いですね。)
何か検索するときを思い出してみましょう。
例えば、安くヘアカットをしたいと思って、「ヘアカット 安い 渋谷」というキーワードでインターネット検索をしたとします。
この閲覧者にとって、実際は条件ぴったりのサロンであっても、そのページの中に欲しい情報(値段)を見つけられなければ、予約をしないと思いませんか？
上記の場合、ニーズ(安い)に合わせて値段を目立たせるように、デザインすべきですね。
閲覧者のニーズに合致したデザインでないと、成果を得られません。
なので、依頼者と閲覧者の両方の視点から制作することが大切です。
今回の、WEB学校のバナー作成の場合は
依頼者の要望：テーマのわかりやすさ、バナーを通して会話のきっかけにする、集客
閲覧者のニーズ：気軽に参加できそう！わかりやすそう！→参加してみよう
上記二点を明確にヒアリングしたうえで、デザインを進めました。
Point3.「見やすく、わかりやすく、アウトプットしましょう！」
実際のデザインをするために、まずは全体のラフを書きます(アウトプット)。
ここで、重要なのが「見やすい」「パッと見でわかりやすい」です。
また、目線の動き方として、左上→右上→左下→右下と「Z」のように
動くのが一般的なので、それに合わせた目線の誘導をすると尚良しです。
・今回の制作過程を見てみましょう。
(講師の画像を入れて、テーマを指差している)
シンプルすぎて、どこに注目したらいいのかわかりません。
目立つものがないと、そもそも目を引かないですよね。
(外国の子供が手を広げている画像を入れて、目を引くようなイラストを周りに散らばせる)
今度は、足し算をしすぎてパッと見の情報が多く、どこを見たらいいのかわかりません。
伝えたいテーマが埋もれてしまい、果たしてテーマを読んでくれるかすら疑問です。
(外国の赤ちゃんの画像を入れて、吹き出しを追加)
引き算をして、ブラッシュアップしたものが出来上がりました。
フォントは丸くて、色味は暖かいイメージです。
↓実際のバナーがこちらです。↓
画像：初心者(＝赤ちゃん)にもわかるように、をイメージ。
フォント：丸みのあるゴシック体で、優しさをイメージ。
配色：暖色であたたかさを表現し、目立たせたい情報は寒色にして目を引くように。
吹き出し：学ぼう！という前向きな気持ちを表現。
このような過程を経て、デザインは完成します。
この記事を読んで、少しでもデザインにご興味をお持ちいただけたら幸いです♪
また、WEB学校は毎月開催し、毎回テーマが変わります。
↓こちらもご興味のある方は、ぜひご参加ください(＾＾)↓
https://guardian.jpn.com/service/web_school/
