実例から学ぶアイキャッチ作成のコツとは？初心者デザイナーにプロが公開フィードバック【勉強会レポート】

インターネット上で、記事や広告をクリックしてもらうための入口として非常に重要な役割を果たすアイキャッチ。感覚に任せて作っていませんか？　「記事を読みたい」と思わせるアイキャッチを作るには、ロジカルな視点が欠かせません。

そこで今回は、オンラインアウトソーシング(※)「HELP YOU」で2023年12月に実施された、初心者デザイナー向けのアイキャッチ作成勉強会をピックアップ。受講者が事前に作成したアイキャッチに対して、本職のデザイナーやメディア運用のプロが感覚に頼らない視点からフィードバックをしました。勉強会のレポートを通じて、デザインを論理的に考える技術を身につけましょう。

※オンラインアウトソーシングとは在宅でインターネットを活用し、業務サポートを行うサービス

目次

• 経験豊富なプロの視点を知ることでスキルアップを目指す
• スキルアップにつながる他の人の作品の見方とは？
• OK案とボツ案を見比べて特徴を言語化しよう
• 初心者とプロのデザインを見て比べて学ぼう
• まとめ

ライター

こまこ

福岡県在住。大学卒業後、接客業・経理事務を経て、2022年にHELP YOUにスタッフとしてジョイン。
転勤族の夫と4年半の遠距離生活を経て、現在は二人暮らし。フリーランスとして主に事務の代行に携わる。

経験豊富なプロの視点を知ることでスキルアップを目指す

今回進行役を務めたのは、HELP YOUでコミュニティマネージャーとして組織活性に取り組む西出裕貴です。

コメンテーターは、メンバー育成を中心としたHS（ヒューマンサクセス）業務に取り組む傍ら、デザインの仕事も豊富にこなす阿久津春菜さん。SEOの知見を生かしながら、HELP YOUが運営するメディア「くらしと仕事」編集部で活躍するaratakeさん。そして、本職のデザイナーとして本サイトのアイキャッチを含む多数の制作実績があるImaizumi Kaoriさんの3名です。

3名のコメンテーターが受講者に対してフィードバックを行うだけではなく、コメンテーター自身も受講者と同じお題に沿ってアイキャッチを作成し、意識したポイントを紹介しました。プロと初心者のデザインを見比べて違いを学べる点も見どころです。

スキルアップにつながる他の人の作品の見方とは？

本題に入る前に、他の人の作品を見る上で意識すると良い4つのポイントを押さえておきましょう。

ただ眺めるのではなく、これらを意識して作品を見ることで、スキルアップにつながる新たな気付きにきっと出会えるはずです。

「良い」アイキャッチとは？4つの判断基準

では、そもそも「良い」アイキャッチとはどのようなものを指すのでしょうか？　デザインの良し悪しを判断する上でのチェックポイントを、本サイトに掲載されているアイキャッチを例に紹介します。

以下の記事では、海外在住でありながら、複数の日本企業から業務を請け負うフリーランスメンバーの経験談をご紹介しています。

関連記事：海外在住で叶ったフリーランスという生き方。どこにいてもキャリアは築ける

それぞれのポイントで、このアイキャッチを見てみましょう。

①目を引く仕掛けはあるか？

インターネット上にはたくさんの情報が溢れる中で、まずは注目してもらうことが重要です。画像やイラストを活用したり、目立たせたい文字を装飾で強調したりすることが、目を引くきっかけとなります。

②記事の内容が視覚的に伝わるか？

パッと見ただけで記事のテーマや概要が伝わるような素材選びやテキスト表現ができているか確認しましょう。このアイキャッチでは、海外在住のメンバーの記事であることが地球儀や飛行機のイラストからひと目でわかります。

③読者の「共感」を呼び、「知りたい欲」を引き出せるか？

「もっと知りたい」「内容が気になる」と思ってもらうためには、読者自身の属性や置かれた状況、悩み・理想などとの共通点を感じてもらうことが重要です。例えば、エッセイやインタビュー記事の場合は、ライターやインタビュイー自身の画像を使用することで、年齢や性別、服装などの共通点から記事に興味を持ってもらいやすくなります。

④「気持ち悪い」を生んでいないか？

「ついカラフルになってしまった！」そんな時はないでしょうか？　使用する色の種類が多すぎたり、色の組み合わせに違和感があったりすると、内容が頭に入ってこないので注意が必要です。画像も記事内容に合ったものを選ぶようにしましょう。

OK案とボツ案を見比べて特徴を言語化しよう

上記で紹介した観点を踏まえ、実際にプロが作成した2つのアイキャッチを見比べ、どの点が良いのかを考えてみましょう。

こちらはコメンテーターを務めるImaizumiさんの作品で、本サイト「くらしと仕事」で実際に使われたアイキャッチです。

いかがでしょうか？　甲乙付け難かったようですが、コメンテーター陣が選んだのはA。以下、各人の選定理由を紹介します。

• Bは装飾の濃淡がはっきりしており、「秘訣」というキーワードがパッと目に入ってきた。一方で、言葉の選び方については、読者の気持ちになって考えると、Aの「稼げる」という言葉を強調した方が刺さるように思う。色の明度も高いAの方が印象が良い。（阿久津さん）
• とても迷ったが、Aの方が色使いが軽やかで、「くらしと仕事」のサイトのポップなイメージにも合っていると思う。「稼げる」というキーワードが目立っているのも良い。ただ、Bも濃い色使いと「秘訣」というキーワードから、すごいノウハウを伝授してくれそうな雰囲気があって良い。(aratakeさん）

実は、記事で実際に採用されたのは、Bでした。ライターから「和」の雰囲気を出したいという要望があり、インタビュイーの雰囲気にも合っている、という理由で決定したそう。

このワークで伝えたいのは「正解がない」ということ。正解がないからこそ、自分の頭で考え、どの点が良いと思ったのか、言葉にすることが大切です。

特に仕事でデザインを制作する場合は、デザインの意図を自分なりに言語化しておくことで、依頼者とのすり合わせもスムーズに進み、より満足度の高い作品を作ることができるでしょう。

※今回取り上げたアイキャッチについて、制作の裏話をImaizumiさんへのインタビュー記事でご紹介しています。ぜひご覧ください。

関連記事：完全在宅でデザイナーデビュー！　5年間で学んだ、フリーで食べていく秘けつとは

初心者とプロのデザインを見て比べて学ぼう

では、いよいよ本題です。受講者が事前に提出した3つの作品を見て、どのアイキャッチのどんなところが良いのか考えてみましょう。

ワーク「Feed Back」：初心者へのアドバイスからプロの視点を知ろう

事前課題のお題は、本サイト「くらしと仕事」のアイキャッチ画像を作成すること。本記事をご覧の方も、作品やフィードバックを見る前にぜひチャレンジしてみてください。

3名のコメンテーターから、それぞれのアイキャッチの良いところ、もっと良くするにはどうすればいいかをフィードバックしていきました。

Aさんの作品：バランス◎！強調したい部分や視線の流れを意識することで、よりインパクトのあるアイキャッチに

使用ツール：CANVA

• バランスが取れすぎているがゆえに、どこを先に見るかが、ややわかりにくい。視線の流れを意識するだけでだいぶ違ってくるのではないか。（阿久津さん）
• とてもまとまりが良く、色使いも綺麗だが、何を強調したいのか、優先順位が少しわかりにくい印象。例えば、もう少し絵を小さくして文字を大きくしたり、逆に文字を小さくして絵を小さくするなど、強弱をつけることでさらに良くなると思う。（aratakeさん）

Bさんの作品：視認性・可読性が高く、まとまりの良いデザイン。装飾を引き算し、余白を作るとさらに良くなりそう

使用ツール：CANVA、 Photoshop

• 良くまとまっているが、少し装飾が多いため、装飾を引き算して余白を作ると、よりすっきりとバランスが良くなると思う。（阿久津さん）
• タイトルがバンっと目に入ってきて良いが、装飾が多いがゆえに、差し色の効果が弱くなってしまっている。例えば、一番上の「男性育児×フルリモート」の部分は、装飾を取り、文字だけにしても良いかも。また、一つのアイキャッチの中で使う図形の形状（丸や四角）は合わせることで統一感が出て、プロっぽくなる。吹き出しの中の画像を吹き出しの形に合わせてくり抜いてみる、といったテクニックもある。（Imaizumiさん）

Cさんの作品：文字と写真が重なるときの見せ方や色の強弱、スマホでの見え方を意識するとさらに◎

使用ツール：Photoshop

• 写真に文字が被っている箇所や吹き出しの中のテキストが、少し見えづらく感じる。水色と黄色で色のトーンをそろえてあるが、全体で見ると黄色の方が強く見えて水色がかすんでいる印象がある。スマホでの見え方、他の要素と並んだときの見え方を意識すると良いのでは。（aratakeさん）
• Bさんへのアドバイスでも触れたが、「リアルな課題」が丸で、「フルリモート」が四角なので、統一してみるのもおすすめ。余白を上手に使えているので、強調したいキーワードがしっかり目立つようにフォントの装飾をもう少し工夫すると、もっと良くなると思う。（Imaizumiさん）

デザイン未経験者の筆者からすると力作ぞろいでしたが、プロの視点から見ると「ここをこうすればもっと良くなる！」という改善点がたくさんありました。余白の使い方やフォントの色使い、図形の形状の合わせ方など、テクニック面でのフィードバックはすぐにでも使えるものばかり。そして、実際に見る人の目にはどのように映るのか、相手目線を常に意識したいですね。

ワーク「見る」：プロの作品に込められた意図を見つけよう

最後のワークでは、事前課題に対して3名のコメンテーターが作成したアイキャッチを教材に、アイキャッチ作成においてプロが意識しているポイントを学びました。

阿久津さん：使う色は最小限に。何が一番読者の興味を引くのかを考え、最も強調するポイントを選ぶ

使用ツール：Illustrator

(阿久津さんコメント)
特に意識したのは①色合い、②最も強調したいポイント選びです。①については、「くらしと仕事」のサイト内で使われている色を参考に、明るめのトーンの色を使うことにしました。ステレオタイプな表現ではありますが、「男性育児」というイメージに合わせた青色、イラストで使われている黄色、アクセントカラーとしてオレンジの3色にしています。②については、「何が一番キャッチーなキーワードか」を考えてみると、「男性育児」と「フルリモート」の掛け合わせが珍しい部分なので、そこが一番目立つようにしています。

aratakeさん：真っ黒の文字は使わない！内容を漏れなく表現する素材を選ぶ

使用ツール：CANVA

（aratakeさんコメント）
いつも気を付けているのは、「真っ黒の文字を使わない」ことです。少し薄めにすることで、他の色ともなじみ、読みやすくなります。今回は、「男性育児」というテーマに合わせて、育児に悩んでいる様子と楽しんでいる様子のコントラストを表現できる素材選びに力を入れました。

Imaizumiさん：タイトルテキストはキーワードのみ残し、詳細はイメージで補う。色使いで心情を表現

使用ツール：Illustrator

（Imaizumiさんコメント）
他のお2人がイラストを選ぶのでは、と考え、差別化するために写真を使ったアイキャッチを作ることにしました。タイトルの「パパ1年生」という言葉を入れる代わりに、同じ内容がひと目でわかる写真を選んだのが工夫した点です。

また、仕事をしながら育児もしているパパが背負っているプレッシャーを表現するために、あえて重めの色を選んでいます。配色については、デザイナーになったばかりの頃は、既存の作品を見たり、先輩からフィードバックをもらったりして学んできましたが、最近は、お守り代わりに持っている配色に関する本を参考にすることが多いです。「Pinterest」なども時間があるときに眺めて、デザインの引き出しを増やすように心がけていますね。

ロゴの取り扱いは慎重に

（参考）本サイト「くらしと仕事」のロゴのガイドライン

最後に、ロゴやマスコットキャラクターについては、企業が使用のガイドラインを定めていることがあります。アイキャッチに使う際は、必ずガイドラインを確認し、それに沿った使い方をするように注意しましょう。

まとめ

いくつもの実例やプロによる丁寧なフィードバックには、すぐに使えそうなコツがたくさんありました。技術面のノウハウに加え、相手の目線に立って情報に優先順位を付け、デザインに落とし込んでいくプロの頭の中が垣間見えたのではないでしょうか。今回ご紹介したプロの視点はほんの一部ですが、これまで意識していなかったところがあれば、ぜひ積極的に取り入れてみてください。

メディア記事だけではなく、イベントの募集ページや動画のサムネイルなど、アイキャッチ作成のニーズは限りがありません。「これからデザインの実績を積みたい！」「デザインスキルを活かし、在宅で報酬を得たい！」という方は、HELP YOUへのジョインをお待ちしています。

▷自分のスキルを活かして家にいながら働ける、HELP YOUへのエントリーはこちら