非デザイナー必読！デザインの基本を知ろう #03 プロにクリエイティブ修正をお願いしてみた

田代

カトウさんには、事前に「マーケの強化書」編集部が過去に制作した記事用サムネイル画像のデータをお渡ししていましたね。

カトウ

僭越ながら、それぞれ拝見いたしました。

田代

カトウさんにサムネイル画像を見ていただいた上で、気になる箇所を実際に修正してもらいました。BeforeとAfterを見比べて、プロの視点が入るとどう変わるかをみなさんにご覧いただきたいです。私たちも初めに見た時、「ああ、良くなったな」と思い知りました。

ちなみにエクスキューズではないですが、弊社のサムネイルなどちょっとしたクリエティブは社内の担当が隙間時間を見つけて作成しています。

カトウ

いえいえ恐れ入ります（笑）。ご自身でなかなかうまくクリエティブが作れないなあと思ったことがある方にとっても、過去2回の記事中で触れた基本ポイントと言いますか、押さえておきたいツボを意識できると、だいぶ変わると思います。バナーデザインはじめ、限られたスペースのクリエイティブを作る場合、改めて以下を参考にしてもらえるとイメージが湧くかもしれません。

カトウ

いざ「デザイン作業！」となると、慣れていない人ほど、どうしても頭の中は配色やイメージ、雰囲気をどうするか、でいっぱいになるのではないでしょうか。どうしても、センスの良い何かを作らなければならない、と思ってしまう人も多いでしょう。

繰り返しますが、クリエイティブには必ず「目的」があります。目的を達成するために、どう表現すべきか。感覚でなく理詰めで判断し、表現していくことが第一歩ですね。

田代

いよいよ見ていきましょう！　1点目が、「マーケの強化書」で2018年10月に公開した記事用に作ったサムネイル画像になります。Before（「マーケの強化書」編集部作成）とAfter（カトウヒカルさん修正）を並べて比べてみると、Afterのものは全体の要素がスッキリ見やすくなって、伝えたい言葉が目に飛び込みやすくなっている印象を受けます。

田代

実際に記事を読まれていない方も多いと思いますので、意図を少しお話ししますと、記事内容は、消費者が購買行為をする際の決定要素について解説した内容でした。そこで、消費者が何かを選んでいるイメージ画像を背景に使い、記事の内容を想起させやすくなるのでは？と考えました。さらに複数のイメージを並べて、Instagramなどの画像共有サービスのようにカッコよく見せられれば、とも考えて作ったのがBeforeの状態です。

カトウ

Beforeのサムネイル画像の場合、広告ではないにしろ広告と同様、きちんと文字を見せて意図を伝える役割を果たすのが役割だなと。その役割を果たすために画像があると。つまり、きちんと文字で記事の狙い＝編集部の狙いを伝えられるか、加えて、見たユーザーが瞬間的に理解できるように作れるかが勝負、と僕は考えました。

今回は元画像の要素だけで判断していますが、実際のコンテンツで伝えたい目的を表す（だろう）言葉について、優先順位高くメリハリをつけました（ここでは、「顧客の購買行為」が最も引きになるワードと設定しています）。背景のピンナップのイメージは、使うのは構いませんが、なかなか理想のイメージに結びつくものを探して配置するのは難しいです。

田代

なるほど、あくまで補助的な位置づけで考えた方がよろしいでしょうか。

カトウ

おっしゃる通りですね。ここでは、目的の魅力が詰まった言葉の見せ方を優先的に意識しましょう。その上であまり黒文字が続くと、実際より文字が多く見えて印象がよくありません。言葉の重要度にあわせて、配置にメリハリをつけます。例えば、メインタイトルは大きく、サブ要素は吹き出しや帯を用意してエリアを分けます。白文字も入れると、黒文字の羅列を避けられます。

田代

Afterはエリアを分けたことで、瞬時に情報が伝わりやすくなりましたね。

カトウ

「この記事を読まなければ」とユーザーに思ってもらうために、いかに瞬間で理解してもらえるか、を意識して構成しましょう。

田代

BeforeとAfterで使っている言葉や文字数は同じですからね。Afterは、言葉の取捨選択やエリアの使い分けがいかに大事か、が証明された仕上がりになっています。

田代

2つ目は「マーケの強化書」で展開中の「「行動デザイン」を学ぶ」シリーズより、2022年8月に公開した第21回のサムネイル画像をレビューしてもらいました。

行動デザインという言葉をご存じでない方でも、「行動デザイン」という言葉から抱く諸要素の集まりを各種アイコンで表して、背景画像としています。この背景画像は、連載としての統一性を考慮して毎回同じにしています。

カトウ

パッと見て文章の長さの不揃いが気になりました。文章の長さを揃えるか、行頭を揃えると、グッと読みやすくなります。その上でメリハリをつけましょう。あとは先ほどと同様で、エリアを分ける意識ですね。

田代

修正後（After）は、全体が締まって見えます。メリハリを効かせながら、行ごとの長さをおおよそ揃えたことで、目線が右往左往しない構成がいいですね。率直に2点とも、素材は同じなのに、仕上がりの雰囲気がかなり違います。

カトウ

どちらのAfterも置きにいったデザインですが、2例目で言えば、帯を敷くだけでなく、帯の色を背景の画像にある色から抽出し、色を揃えて使うと全体が締まります。配色は、色を揃える意識で選びましょう。思いつきの配色はNG！　仕上がりが散漫になってしまいます。

田代

数字の扱いも意識したほうがよさですね。

カトウ

今回は連載回数に重きがあるという前提で、メリハリをつけて大きくしました。

田代

数字に重きを置く必要がなければ、特に大きくしなくて大丈夫ですか？

カトウ

はい。小さく載せるか、サムネイル画像には無理に載せない判断もアリです。

田代

最後にうかがいます。ここまでにうかがってきたアドバイスを意識して作っても、実際にはうまくいかない人もいらっしゃいます。非デザイナーだと、日頃よく手を動かすわけではないので、満足のいく仕上がりにならないかもしれません。

カトウ

これはよくわかります。僕もデザイナー1年目の頃は、1日12時間以上、案件と格闘しながらずっと作っていても、なかなかしっくりくるものが作れませんでしたから（苦笑）。率直に「経験」は必要です。ただし、デザインを組む上で押さえておくべき要点や要所はありますし、知らないより知っていると、だいぶ有利に事を運べるのも確かなことです。

田代

たしかに“何から手をつけていいかわからない”状況も避けられます。

カトウ

そこで僕がお勧めしたいのは、もちろん僕の本でなくていいので、体系的に基礎から書かれたデザイン書籍を読むことです。薄い本でOKですので、一通り読むと、デザインに対する自分の視野を広げてくれます。

むやみやたらにやり続けても、なかなか壁を突破するのは難しいものです。自らを視野が広がった状態に変えて、改めて取り組むと、以前の自分より納得しやすいデザインが作れると思います。

田代

「マーケの強化書」としては、ぜひカトウさんの書籍を推したいところです。3回にわたってお付き合いいただき、本当にありがとうございます！