グラフィックデザインが苦手。
私の会社の後輩デザイナーもそうだし、UI/UXからキャリアをはじめたジュニアデザイナーからよく聞く言葉です。

私は元々大学でグラフィックデザイン(正確にはコミュニケーションデザイン)を専攻しており、実務としても2年以上グラフィックデザイナーとして経験を積んでいるので言わばグラフィック上がりのUI/UXデザイナーです。そのためグラフィックデザインが苦手ということはありません。

UI/UXデザイナーであったとしても事業会社にいるとちょっとしたイベントのバナーやフライヤーを作ったり、資料の見栄えを良くしたりとグラフィックデザインのスキルが要求されることが多々あるかと思います。そんなときに苦しんでしまうようなデザイナーに向けてグラフィックデザインの上達へのアプローチ方法とトレーニング方法を今回はまとめてみました。

私が全くグラフィックデザインのスキルがなかった頃から今までで得られた経験をベースとした切り口で解説していきます。

グラフィックを構成する要素(変数)

まずグラフィックがグラフィックとして成立し、見た人に対してコミュニケーションを発生させる上で考えるべき要素があると考えています。グラフィックを通じてどういうコミュニケーションがなされるか決定する変数と言っていいかもしれません。

・タイポグラフィー
・レイアウト
・色
・装飾
・ビジュアルタイプ(写真orイラスト)
・媒体特性(紙orデジタル, 静的or動的)

1つのグラフィックはこれらの要素をかけ算したものであるので、各要素に対してどれだけ知識と経験があるかが自分のグラフィックデザインの引き出しの多さと言えます。

今回は各要素について上のチラシを基本サンプルとして具体的な例を見ていきます。

タイポグラフィー

タイポグラフィーは和文・欧文で何を使うかにより与える印象が異なります。スタンダードにゴシックを使うもよし、より親しみやすい印象を与えるために丸ゴシックを使ったり、高級感や格式高い印象を与えるために明朝体を使ったり、ポップな印象を与えるためにデザイン書体を使ったりと文字だけで印象を大きく操作することができます。

同じゴシック体やサンセリフ体という狭いくくりの中でも非常にたくさんの書体があり、グラフィックデザインをしていく上でどんな書体が存在しており、それぞれどんな印象を与えることに長けてて、見出し向きor本文向きなのかなどについて深い知識を身につける必要があります。

レイアウト

レイアウトは即ち領域に対してどう余白を取るかと言うことができます。上の例のようにテキストの組み方を変えて余白の持たせ方を変えるだけでも印象が変わります。

もちろんその他にも写真を細長くトリミングしたり領域に対して全て覆うようにしてもまた印象は違ってきますし、テキストをきっちり余白へ配置せず写真とまたがるように配置しても抜け感が出たりします。

レイアウトの最適解はどんな情報を載せるかとその情報量によって決まります。そして「これくらいの情報量のときに適切なレイアウトはこれだな」という勘所はひたすら世の中に存在するあらゆるグラフィックの観察と実際にレイアウトを組む経験からヒントを得るしかないと思います。

色

色は心理学においてよく研究されているようにコミュニケーションにおいて与える印象を大きく変えうる要素のひとつです。

上の例はかなりミクロな視点ではあるのですが、文字色を単なるK100%ではなくちょっとグレーにすることで強い印象を和らげることができたり、Y5%の背景色を敷くだけで柔らかい印象になったりとほんの少しの色の変化が大きな印象の変化をもたらします。全く異なる色にすることでその色が持つ特性に従って印象をガラッと変えることも可能です。

色の良い組み合わせ方については別途書籍等で学んだり、ある1色を指定したらそれに対していい感じのコンビネーションを提案してくれるツールもあるのでそれらを活用しましょう。

装飾

装飾がグラフィックデザインにおいてもっとも人により得意不得意やできるスタイルが異なってくるポイントです。

線やシェイプ、あるいはもっと具象的なモチーフなどを配置することを装飾と呼んでいますが、上の例のようにちょっとした線やモチーフを置くだけでも印象は異なってきます。

おそらく一般的にグラフィックデザインができるできないと言う時のグラフィックデザインはこの装飾の扱いがうまいかどうかということを指している気もします。また、イラストも装飾の一部なので自分でイラストレーションができるひとはかなり大きな武器を持っていることになります。

ビジュアルタイプ(写真orイラスト)

ほぼ装飾に入るのですがビジュアルとして写真をメインで置くのかイラストをメインで置くのかでも大きく印象は異なります。同じ写真というくくりでも違う写真を使えば全く異なる印象を与えられます。

媒体特性(紙orデジタル, 静的or動的)

実際に印刷する紙のフライヤーやWEB・アプリで表示するようなバナーでは、そもそも媒体が違うため根本的に与えうる印象が異なります。紙は特色印刷により金・銀や蛍光などを表現できますし、デジタルの場合は動画やGIFといったモーションでの表現ができます。媒体特性を考慮したグラフィックデザインという視点も必要です。

グラフィックデザインのトレーニング方法

上述したようにグラフィックにはグラフィックを構成する要素がいくつかあり、それらがグラフィックとして見た人に与える印象を決定するので各要素への知識と経験を深めることが重要です。

では知識と経験を深めるためにはどうすればいいでしょうか？
私は以下のインプットとアウトプットをずっと続けてきました。

インプット
・フォントを判別できるようになる、色特性を学ぶ、その媒体特有の表現をストックするなど各要素に関する知識を深める
・自分が良いなと思ったグラフィックについて何の要素がどんな印象を与えて良いなと思ったのか言語化して抽象化・蓄積する
アウトプット
・言語化された良いと思った理由に則って自分でグラフィックを作ってみる

特にインプットであるグラフィックに対する印象の言語化とその蓄積は重要です。具体例として以下のサンプルをもとに印象の言語化をしてみます。

・写真を領域の上部50%使うことでダイナミックさと安定感が出ている
・写真のトーンが上質+果物がいい感じに差し色として効いてる
・イベントタイトルのフォントがスタンダードな明朝体でなく筑紫Aオールド明朝Boldで抜け感が出てる
・欧文に使っているBaskerville 10 ProのItalicの特徴的なグリフが上質感と面白さを演出している
・中央寄せテキスト+レイアウトで安定感がある
・文字間の余裕の持たせ方が高級感を演出している
・テキストをちょっとアーチ状にすることでアクセントになる
・余計な装飾がないところに上質さを感じる

などとぱっと見ただけでもこれだけ言語化することができます。ポイントとしては自分の主観に対して要素のあり方を結びつけているだけなので「言語化に絶対的な正解はない」ことです。あまり難しく考える必要はありません。そしてこの言語化がどれだけ解像度高くでき、自分の中に引き出しとして定着するかがグラフィックデザインのスキル向上の鍵と言えます。

いざグラフィックを作ろうとしたときこのように何の要素がどんな印象を与えるか言語化してストックしてあれば、そのままグラフィックを組むときの汎用的なロジックとして転用することができるのです。

そして上の言語化したものの中で筑紫Aオールド明朝BoldであるとかBaskerville 10 ProのItalicであるとか述べていますが、このように解像度が高い状態で言語化するには前提とする知識が必要となります(今回の場合はタイポグラフィーに関する知識)。そのため言語化をするだけでなくグラフィックを構成する要素に関してそもそもの知識を身につける必要があります。

今は便利な世の中なのでPinterestや良いグラフィックデザインを集めた書籍から言語化するための材料はいくらでも探すことができます。わざわざ探さなくても身の回りにある広告や書籍、パッケージに対して言語化するだけでもだいぶトレーニングになります。

アウトプットとセットではじめて身につくインプット

インプットとして知識を身に着けたりグラフィックの言語化をしたりするときに大事なのは必ず言語化したことをベースに自分で実際にグラフィックを作ることです。

ただ言語化しただけでは「あ、そうか」ぐらいの腹落ち感しかなく、また実際に手が動いて作れることは理解することとは全く別だからです。そしてアウトプットすることで言語化したことが仮説として本当に正しかったのか確認できるという側面もあります。必ずアウトプットまでして自分の中でグラフィックの引き出しとして定着させることをおすすめします。

センスの正体は知識と経験

グラフィックデザインは往々にしてセンスだ、なんて言われますがその正体は今まで述べてきたような知識と実際に作るという経験だと私は考えています。確かにある一定以上まで行くとセンス(正確にはオリジナリティと要素の掛け合わせの卓越さ)の領域になりますが、事業会社で求められるようなグラフィックデザインスキルは地道な知識の積み重ねと経験で十分だと思います。

グラフィックデザインができるようになるための簡単な魔法のメソッドなどありません。ひたすら考えて手を動かした人だけが身につく、ただそれだけです。