アイキャッチ制作の流れ【使える小技も紹介】

こんにちは、デザイナーのにしだです。

「アイキャッチのデザインを作りたいけれどどんなふうに作っていけばいいのかわからない…」そんな方も多いのではないでしょうか。

今回は、入社以来アイキャッチをデザインし続けている私なりの「制作の流れ」や「コツ」をまとめてみました。

この記事を読めば、デザイナーがどのような手順でアイキャッチを作っているのかがわかります。

記事の後半では、アイキャッチ作成にすぐ使える小技を、実績とあわせて紹介しています。最後までぜひご覧ください！

アイキャッチを作成するポイントについては、以下の記事でもまとめています。より効果のあるアイキャッチを作りたい方は、ぜひ本記事とあわせてチェックしてみてくださいね。

関連記事

【今すぐ実践できる！】目を引くアイキャッチをつくるコツ

アイキャッチとは？役割と重要性

以前執筆されたアイキャッチについての記事がわかりやすかったので引用すると、

アイキャッチはその名の通り、「見る人の注意を引きつけること」です。

数ある記事の中で、いかにその記事を開いてもらえるか、興味をもってもらえるかを考えてアイキャッチをつくります。

とあります。

直感的に読んでみたいと思わせるような「心を掴む」アイキャッチを作るために、手順を追ってデザインを進めていきましょう！

記事のクリック率（CTR）を高める「看板」の役割

アイキャッチは、記事の内容を一瞬で伝える「看板」のような役割を担っています。

検索結果や一覧ページ、SNSのタイムラインに並んだとき、読者が「この記事を読むかどうか」を判断する材料になるのが、タイトルとアイキャッチです。

どれだけ中身が良くても、「何について書いてあるのか」「自分に関係がありそうか」が伝わらなければ、クリックされることはありません。

• 内容がひと目で想像できるか
• 視線を止める要素があるか
• 他の記事に埋もれないか

アイキャッチは、こうしたポイントを担い、CTR（クリック率）を大きく左右する重要な要素なのです。

SNS拡散時の見え方（OGP）への影響

SNSで記事がシェアされた際、表示されるのが「OGP画像」です。このOGPに使われるのも、基本的にはアイキャッチ画像。

つまりアイキャッチは「誰かがシェアしたときに、初めて見る人への名刺」のような存在でもあります。

• 内容が伝わらずスルーされる
• 文字が小さくて読めない
• デザインが古く見えてしまう

こうした状態だと、拡散のチャンスを逃してしまいます。

逆に、パッと見て内容が伝わり、記事の価値が感じられるアイキャッチは、「ちょっと読んでみようかな」という次の行動につながります。

データ形式と容量の注意点（JPG・PNG・WebPの違い）

アイキャッチは見た目がよければOK、と思われがちですが、実は「画像の形式」や「データ容量」も、Webでは大切なポイントです。

代表的な画像形式とその特徴を押さえ、用途に合った形式を選びましょう。

• JPG
  写真など色数が多い画像に向いている形式です。
  データ容量を軽くしやすい一方で、文字や線の輪郭はややにじみやすいため、写真メインのアイキャッチにおすすめです。
• PNG
  文字やイラスト、ロゴなどをくっきり見せたい場合に適した形式です。
  画質が劣化せず、透明背景にも対応していますが、
  写真を使うとデータが重くなりやすい点には注意が必要です。
• WebP
  近年注目されている画像形式で、JPGやPNGよりも高画質・軽量に書き出せるのが特徴です。
  Googleも表示速度の観点からWebPの使用を推奨していますが、初心者の場合は必ずしもWebPにこだわる必要はありません。
  まずはJPG・PNGの特徴を理解して正しく使い分けることが大切です。（使用するデザインソフトによっては、WebPでの書き出しに対応していない場合あり）

デザイナーが教えるアイキャッチ制作の3ステップ

ここからは、私が実際にアイキャッチを作るときの思考プロセスを、3つのステップに分けてご紹介します。

いきなりデザインソフトを触るのではなく、「どう見せるか」を考えるところから始めるのがポイントです。

アイキャッチ制作の流れがつかみやすくなると思うので、順番に見ていきましょう！

STEP1：アイデアを出す

まずは、アイキャッチの方向性を決めるためのアイデア出しから始めます。

記事の内容を理解しながら、さまざまな角度からヒントを集めていきます。

まずはその記事が伝えたいことは何か、キーワードをタイトルから拾います。（記事を作成した人がキーワードをまとめてくれていることも）

拾い出したキーワードを、ユーザーに効果的に伝えるには、どんな見せ方がよいかを考えていきます。

シンプルにググる

先ほど出したキーワードを検索し、内容理解を深めたり、表現のヒントを探ったりします。

キーワードが専門用語の場合もあるため、この段階で理解を深めておきます。

また、Googleの画像検索も行い、関連記事のサムネイルが並んでいる場合は、似た雰囲気になりすぎないよう意識して差別化を考えます。

画像素材サイトでキーワード検索してみる

pixtaなどの画像素材サイトで、使えそうな素材にざっくりと目星をつけておきます。

写真とイラスト、どちらを使おうか悩んでみたり。

素材を眺めているうちにインスピレーションが生まれることもあります。

参考になるデザインを観察する

参考として、さまざまなデザインを見てアイデアを広げます。

私は他社のブログや、Pinterest、Eagleなどのデザインストックを見ることが多いです。

Eagleは有料ですが買い切り型で、デザインの参考をまとめるのにとても便利なのでおすすめです！

文字組やあしらい、配色など、今回作ろうとしているアイキャッチとマッチしているデザインがないか探します。

一工夫するポイントを考えてみる

最後に、少しだけ「ひとひねり」できそうなポイントを考えます。

「この見せ方がよさそうだから取り入れてみよう」

「以前見たデザインの小技が合いそうだから使ってみよう」など、さまざまなアイデアを試してみます。

（工夫すること自体が目的にならないよう、要注意です！）

STEP2：構図を決める

アイデアがある程度そろったら、次は構図を決めていきます。

この段階では、いきなり色をつけず、モノトーンで作成するのがポイントです。

文字の大きさや配置、余白の取り方などを意識しながら、どこに視線が集まるかを考えてレイアウトしていきます。

キーワードとなる文字は大きくしたり、あしらいを加えたりすることで、モノトーンの状態でも自然に視線が誘導されるよう工夫します。

構図がしっかり決まっていれば、このあとの工程で色をつけても、デザインが破綻しにくくなります。

STEP3：色をつける

モノトーンの時点でいい感じの見た目になったら、色をつけ始めます。

色が与える印象を意識する

今回のアイキャッチでどんな印象を与えたいかを考えながら配色を選びます。

「空調がテーマだから、風通しのよさを出すために爽やかなブルーにしようかな」

「夜の内容の記事だから、全体をネイビーなどの暗い色にしよう」など。

参考としたデザインで素敵だと感じた配色も、そのまま真似するだけでは意図がうまく伝わらないことがあります。「なぜこの色なのか」を自分なりに考えることが大切です。

配色ジェネレーターを使う

配色に迷ったときは、配色ジェネレーターを使ってイメージを膨らませることもあります。

「配色ジェネレーター」で検索すると便利なツールがたくさん出てくるので、お気に入りのものを見つけてみましょう。

私はAdobeColorにお世話になることが多いです！

素人っぽさを脱却！デザインの使える小技4選

ここからは実際に作ったアイキャッチを具体例に出して小技を紹介していきます。

私の作成しているアイキャッチは、だいたいこの小技を組み合わせていることが多いです。（あまり意識していなかったのですが、この記事を書き始めて気がつきました）

奥行きを意識する

要素と要素の重なりを意識するだけで、デザインに深み・奥行きがでます。私はデザインがのっぺりしがちなのでここは特に気をつけています・・！

いいなと感じるデザインはだいたい要素の重なりがあるので、奥行きに注目して参考を見てみると面白い発見がありますよ！

背景を活用する

テキストの情報量が多いときは画像を配置するのが難しいことも。

そんなときは思い切って、背景全面に画像を敷いて、アイキャッチ全体で何の記事なのかを伝えることもあります。

デザインに物足りなさを感じるときは、パターンやテクスチャを配置して質感をプラスするのもおすすめです！

実績解説：マンスリーバイク様

タイトル周りだけでなく、背景にも虫のパターンを敷くことで虫満載なアイキャッチにしました。

虫除けの記事ということで、「虫」の嫌な感じや気持ち悪さをだしたいと思い、色合いやタイトルを囲うギザギザなどの工夫もしています。

テキストで遊んでみる

• 袋文字
• 影をつける
• 線のみ
• 版ずれ
• 囲む（まる、しかく、ふきだし、特徴的な形など）
• ワープ効果などを使って変形させる
• テキストの一部をキーワード関連のモチーフに変える

などなど、文字の加工を工夫することでデザイン性をもたせることができます。

実績解説：ストレージ王様

梅雨の湿気を表現したく、文字の一部を水滴に置き換えています。

背景やイラストとの相乗効果で、梅雨っぽさたっぷりのアイキャッチになりました。

フレームで囲んでみる

アイキャッチそのものへの視線誘導効果がUPしたり、画面が華やかになる効果があります。

全体を囲うだけでなく、上下や左右につけてみることも。

枠の形状を工夫するだけで、アイキャッチに個性が生まれますね！

実績解説：警備ドットコム様

少し変わりダネですが、誘導灯を振る写真を切り抜いてシンメトリーに配置し、フレームのように使ってみました。

文字そのものも光らせて、誘導灯らしさをだしながら視線誘導しています！

アイキャッチ作成におすすめのツール3選

実際に「アイキャッチはどんなデザインソフトを使って作るの？」と悩んでいる方に向けて、デザイン経験に合わせたおすすめのツールを紹介します。

初心者の方から、業務で制作する方まで、それぞれに合ったツールを選ぶ参考にしてみてください。

【初心者向け】テンプレートが豊富な「Canva」

Canvaは、デザインの知識がなくても直感的に使えるツールです。

無料で利用でき、アイキャッチやSNS投稿用のテンプレートが豊富に用意されています。

「YouTubeサムネイル」など、用途ごとにサイズがあらかじめ設定されているため、サイズ選びに迷わず作成できる点も魅力です。

スマホで編集もできるため、とにかく手軽にアイキャッチを作りたい方におすすめです。

【プロ・中級者向け】自由自在な「Photoshop / Illustrator」

PhotoshopやIllustratorは、弊社をはじめとした制作会社で使われているプロ向けのデザインツールです。

文字装飾や写真・イラストの編集も自由に表現できるため、デザインにしっかりこだわりたい場合に力を発揮します。

業務でアイキャッチを制作する方や、表現の幅を広げたい方に向いています。

商用利用OK！おすすめフリー素材サイト

アイキャッチのクオリティは、実は「素材選び」で8割決まると言っても過言ではありません！

デザインを頑張っても、素材が合っていないとチープな印象になってしまうことも。

ここでは、アイキャッチ作成にすぐ使える、商用利用OKのフリー素材サイトを紹介します。

フリー素材サイトを利用する際は、「商用利用が可能か」「クレジット表記が必要かどうか」を必ず事前に確認するようにしましょう。

O-DAN（オーダン）：海外のおしゃれな写真を一括検索できる

O-DANは、複数の海外フリー素材サイトをその名の通り「横断」して検索できるサービスです。

一度の検索でさまざまなサイトの写真をチェックできるため、効率よく素材を探したいときに重宝します。

海外サイトならではのおしゃれな雰囲気の写真が多く、デザイン性の高いアイキャッチを作りたい場合におすすめです。

Unsplash（アンスプラッシュ）：高品質でアーティスティックな写真が豊富

Unsplashは、高解像度でクオリティの高い写真がそろっているフリー素材サイトです。

風景やライフスタイル系の写真が多く、少しアーティスティックな雰囲気のアイキャッチを作りたいときに向いています。写真1枚で世界観を伝えたい場合にも使いやすいサイトです。

イラストAC / 写真AC：日本人素材が探しやすい定番サイト

イラストAC・写真ACは、日本のフリー素材サイトで、日本人の人物写真や、ビジネスシーンの素材が豊富にそろっています。

国内向けのサービスや、日本の読者を想定した記事では特に使いやすいです。イラスト素材も充実しているため、写真とイラストを使い分けたい場合にも便利です。

まとめ

今回は、アイキャッチ制作の流れやデザインのコツをご紹介しました。

ここで紹介した手順や考え方は、あくまで私なりのやり方ではありますが、「いきなり作り始めないこと」や「何をどう伝えたいかを考えること」は、どんなアイキャッチを作る場合でも役立つポイントだと思っています。

すべてを一度に取り入れようとせず、まずはできそうなところから、少しずつ試してみてください。この記事が、アイキャッチ制作に悩んだときのヒントになれば嬉しいです！

具体的なデザイン表現のコツを知りたい方は、こちらの記事もあわせてご覧ください。↓

【今すぐ実践できる！】目を引くアイキャッチをつくるコツ

ノベルティでは、このようなアイキャッチ制作をはじめ、ウェブサイト全体のデザイン・制作まで幅広く対応しています。

「自社で作るのが難しい」「デザインをプロに相談したい」と感じたときは、ぜひお気軽にご相談ください。

▶︎お問い合わせはこちらから