心をつかむアイキャッチ・バナーの作り方とは？僕がデザインでこだわる5つのこと

佐藤タカアキ

2016.02.08

こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。

僕はこれまでにLIGのアイキャッチ・バナーを1,000個以上作ってきました。毎日膨大なアイキャッチ・バナーを制作する中で「どうすれば、たった一枚の絵で人の心をつかむデザインを作れるのか？」ということを考えてきました。

まだ未熟な僕ではありますが、これからデザイナーを目指すかたや駆け出しデザイナーに向けて、僕が見出した人の心をつかむデザインのポイントをご紹介したいと思います。

人の心をつかむために！僕がデザインでこだわる5つのこと

1.　情報をちゃんと伝えてあげるデザイン

デザインの基本ではありますが、まず最初に伝えたい情報をきちんと整理して、それが相手に伝わるために設計することが何よりも大切です。

2秒で情報を伝えきれるか

なぜなら人は、広告やアイキャッチを見ると「たった2秒間でその情報が自分に関係するかどうかを判断する」といった研究結果が出ているほど、一瞬でその人の心をつかむ必要があるからです。

「秋のビール祭り！2015年オクトーバーフェスト開催情報」という記事のアイキャッチを例にすると、

10362

ドイツ国旗の背景に加え、ビールのアイコンと「OKTOBERFEST」という文字をデザインしました。色もドイツ国旗の三色で構成し、パッと見ても無駄な情報がなく、シンプルなデザインを意識しています。

どこから見せたいかを意識する

他にも、「BBCのショートコメディで使われていた英語表現がカッコいい」という記事では、

8089e50294910c6cb163e5cb54ad137b1

イギリスのメディアがテーマだったので、イギリス国旗に英語の文章を埋め込んだ背景の上に、 “言葉” を連想する唇のアイコンを中心に置きました。
さらに、見た人が最初に唇に目がいくように、画像の四隅には影をつけ唇が浮き出ているかのようなデザインにしました。デザインの中でも見せたい順番を意識して強弱をつけています。

デザインの基本とはいえ、世の中には情報設計ができていないデザインも多くあるのが実情です。情報をすべて盛り込むのでもなく、単にすっきりオシャレなデザインにするのでもなく、2秒で情報が伝わるようなデザインを心がけましょう。

2.　細部までこだわったデザイン

情報設計の次のステップで大切なのは、情報がきちんと見た人に伝わるように細部までこだわってデザインをすることです。

ターゲットの誰もが理解できる要素を

例えば、「音楽業界で活躍するアーティストのWebデザインが気になるサイトまとめ」のアイキャッチでは、

5422

“音楽アーティスト”であることが伝わるようCDをモチーフにしたデザインにし、“まとめ記事”であることがわかるように16枚もの画像を合成したデザインに。さらに“思わずクリックしたくなる”よう、クリックボタンのようなアイコンを置きました。

一見丁寧すぎるデザインかもしれません。しかし先輩デザイナーにこんなことを言われたことがあります。「自分の知識だけを基準にして『みんなわかるだろう』と思うな」。そこでこのアイキャッチでは、アーティストの知識がなかったり、そもそもCD自体を知らないような人でもわかるように音符マークを入れています。

写真一枚にもとことんこだわる

その他にも、1枚の写真にこだわったアイキャッチも作りました。

9221

「LINEユーザーの実態を調査しました」というタイトルの記事だったため、潜入捜査をイメージした非常階段で、実際にスマホの画面にLINEを表示させて撮影しました。これは合成は一切なしの1枚写真です。写真1枚でも伝えられることがたくさんあるということです。

大量の画像を一枚の中にまとめることも、写真自体をこだわって撮影することも時間がかかります。でもその時間や手間を惜しまずに細部までこだわることこそ、良いデザインを生み出す秘訣だと思っています。

3.　ストーリーがにじみ出るデザイン

情報を設計して細部までこだわってデザインした先に目指すべきものは、その記事のストーリーがにじみ出るデザインだと考えています。

ストーリーの世界観を一発で伝える

記事の中にはもちろんストーリーがあるわけですが、その世界観が一目で伝わるようなアイキャッチを作ることを目指しています。僕がよくイメージするのは映画のジャケットです。

ストーリーを特に意識して制作した実際のアイキャッチがこちら。

「イラスト風の劇画タッチも表現できるオススメ無料Photoshop絵の具ブラシ10選」という記事のアイキャッチですが、まさしくある映画のジャケットのパロディーを制作してしまいました。

ストーリーは、“にじみ出す”のがポイントです。アイキャッチ自体に答えは載せません。そこでネタバレするのではなく、「そこになにか良いストーリーがあるんだろう」と期待させるような世界観を作り込むことが大切だからです。

「この記事にはどんなストーリーがあるんだろう？　中が見てみたい！」と思わせる、つまり、行動を起こさせる（＝クリックさせる）ためのデザインとも言えますね。

自分の中でストーリーを膨らます

もう一つご紹介したいのは「【Photoshop加工チュートリアル】写真に雨を降らせよう！」のアイキャッチです。

5862

「雨」というキーワードから連想していきました。まずターゲットは主にPhotoshopを利用する方だったので、ほとんどが室内でPCを触っている人ということになります。そこで部屋の中から見る雨をイメージしました。窓の外に降っている雨や、窓に滴っている雨、湿気で曇った窓などイメージを膨らませていきます。その結果、窓に滴る雨と、曇った窓に指でなぞったようなデザインで「Rain」の文字を入れました。

文字だけの記事からイメージを膨らませ、ときには自分の中でストーリーを作り上げることも必要です。そうすることで、ありきたりなデザインから一歩飛び出して、自分ならではのデザインができるようになるのだと思います。

4.　「おっ」と想像を越えるデザイン

ここまでご紹介してきたのは、デザイナーなら当然やるべき最低限のレベルともいえます。ただ要望に合わせてデザインするだけでなく、プラスαのアウトプットができるようになることが本物のデザイナーです。

目指すは「クリエイティブ・ジャンプ」

クライアントやユーザーの想像を越えるようなデザインができてこそ、一人前のデザイナーになれると僕は思っています。難しいことではありますが、難しいからこそ、デザイナーが力を発揮する部分です。このことを「クリエイティブ・ジャンプ」と呼びます。

手前みそながらご紹介させていただくと、「WordPressの記事内の画像をData URIで扱ってサイトを高速化させる方法」というエンジニア向けの記事で、こんなアイキャッチを作りました。

z119

エンジニア向けにノウハウやナレッジを提供する記事は、基本的にその分野の人が読むものであって、エンジニアでない人にはなかなか読まれづらいものです。でも、「良い記事がエンジニアの人にしか届かないなんてもったいない！」と思い、真面目なタイトルとはギャップのある、遊び心のある斬新的で印象的なアイキャッチを作りこもうと考えました。ここでは“意外性”で人の心をつかむことを狙ったわけです。

人の感情を動かすデザインを

「おっ」と想像を越えるというのは、喜怒哀楽のどれかの感情に人の心を動かすことだと考えています。思わず嬉しくなる成功体験をイメージできるデザインや、「あれ？」と意外性に目が留まるデザインなど、人の心を動かすことを僕は目指しています。

とはいえ僕自身、「おっ」と想像を越えるようなデザインができているとは思っていません。「おっ」と思わせるデザインを、これからも追求し続けていきたいと思っています。

5.　「らしさ」があるデザイン

最後に僕がこだわっていることは、その企業、そのメディアの「らしさ」があるデザインにすることです。

アイキャッチだけでどのメディアの情報かがわかる

例えば、「LIGのハロウィン物語」のアイキャッチ。

eyecatch2-655x437

まず目がいくのは真ん中の女の子。社員のうららです。こちらは社員を登場させるだけで「LIGらしさ」を表現できるのですが、後ろにもう一人いることに気が付きましたか？
無駄といえば無駄かもしれません。デザイン上、必要ないものかもしれないのですが、そんな無駄に見えることも思い切ってやるという遊び心が「LIGらしさ」なんです。

似たような例として、「仕事の進捗を確認するときに便利な英語表現「So far so good?」の使い方」があります。

1073