LIGPR WEB

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

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

こんにちは、デザイナーの佐藤タカアキ(@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. ストーリーがにじみ出るデザイン

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

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

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

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

z1

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

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

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

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

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

5862

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

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

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

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

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

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

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

z119

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

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

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

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

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

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

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

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

eyecatch2-655x437

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

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

1073

この写真一枚でさえ、何枚も撮影して選び出した渾身の作品です。やればできるけど誰もやらないようなこと、一見無駄に見えること、それを一生懸命やることでLIGらしさを表現しています。

このように僕が「らしさ」にこだわる理由は、その会社やそのメディアのブランディングにつながるからです。アイキャッチ1枚を見ただけで、「ああ、これはLIGの記事だな」と気づいてもらうことを目指しています。

その上で、自分「らしさ」も追求したい

たとえ時間や手間がかかっても、伝えたいことはとことんこだわってデザインをしていきたいです。こだわって作るからこそ自分のデザイナーとしての力量が上がりますし、そのデザインに「自分らしさ」も見えてくるとも思っています。たった1枚の絵とはいえ、それは自分の作品ですから。

こだわったデザインを生み出すために必要なこと

こんなこだわりをもって日々デザインと向き合っている僕ですが、そのこだわりを具現化するためにはそれなりのスキルやツールも必要だと思います。

限られた時間の中で、考えることに時間を割く

こだわりをもってデザインするには、実作業に入る前にしっかりと考えることが大切です。しかし何事にも締め切りがあります。限られた時間の中で考える時間を確保するには、作業をできるだけ効率化することが大切です。

ツールを使いこなして効率よく具現化する

イメージができても、そもそもイメージを具現化するスキルとツールがないと当然実現することはできません。
まずは世の中にどんなツールがあり、そのツールでどんなことができるのか、知ることが第一歩です。その上で自分にあったツールを探し出し、それを使いこなすスキルを身につけましょう。

おすすめは「Adobe CC」

1062

僕が使っているのは「Adobe CC」です。以前にも記事で書いたように、デザイナーが仕事をする上でとても便利で使いやすいツールになっています。僕がこだわりのデザインを具現化する上で、幅広い表現を可能にしてくれる不可欠な存在です。

Adobe CCの主要機能

みなさんご存知のAdobeは、PhotoshopやIllustrator、Lightroomなどデザインであらゆる表現を可能にするソフト。従来は個々でバラバラに販売されていたAdobeのソフトが、クラウド上で簡単に最新バージョンにアップロードできたり、無料素材を簡単に検索・利用することができたりと非常に便利になったのが「Adobe CC」なのです。

▼「Adobe CC」の詳しい機能はこちら

「Adobe CC」をお得に入手するには?

AdobeCC
https://www.webdirect.jp/adobecc/

便利な「Adobe CC」ですが、申し込み方法、利用方法はさまざまです。

大塚商会経由なら、各ソフトを単体で申し込むとそれぞれ月額3,200円(税抜)。すべてのAdobe製品のCC版が手に入るコンプリート版なら7,500円(税抜)ですので、3つ以上のソフトを利用する場合はコンプリートプランがお得です。

さらに、大塚商会なら2016年3月23日(水)まで限定でお得なキャンペーンも実施中です。CS6を利用中の一般企業であれば、コンプリートプランが通常価格から40%OFF! たったの月額4,500円(税抜)で利用できるので、とてもおすすめです。

※キャンペーン期間の終了が2016年3月23日(水)まで延長されました!
※掲載画像は記事執筆時点のものです

 

【2016年3月23日(水)まで】キャンペーン開催中
■ 一般企業向け:CS6所有ユーザ限定で40%OFF

  • コンプリートプラン 7,500円 ⇒ 4,500円(税抜)
  • 単体プラン     3,200円 ⇒ 2,350円(税抜)

 
■ 官公庁向け:CS6所有ユーザ限定

  • コンプリートプラン 7,500円 ⇒ 5,400円(税抜)
  • 単体プラン     3,200円 ⇒ 2,350円(税抜)

※どちらも2016年3月23日(水)まで限定です
※キャンペーンには変更・延長の可能性もございます。詳しくはWebサイトよりご確認ください

期間限定のキャンペーンですので、気になる方はぜひこの機会にチェックしてみてくださいね。

>>「Adobe CC」のお得なキャンペーンを見てみる<<

おわりに

人の心をつかむデザインは、きちんと情報が整理されつつも、どこかに斬新性や奇抜性のある新しいデザインであることが求められます。
そして新しいデザインを生み出すためには、考える時間や細部にこだわること、またそのためのスキルが不可欠。そのためにも、自分にあったツールを見つけ、スキルを磨いていきましょう!

次回は、実際に使いたいデザインナレッジをご紹介いたします!
それでは、また。

この記事を書いた人

佐藤タカアキ
佐藤タカアキ デザイナー 2014年入社
3年目に突入したのですが、デザイナー兼カメラマン的なフワフワした立ち位置で、良くも悪くも毎日多忙な日々を送っているフリをしています。