アイキャッチ画像

アイキャッチ画像は、コンテンツをより魅力的にみせ、ユーザーの直感的なクリックを促す役割があります。効果的な画像を制作する際の参考にしてください。

アイキャッチ制作時に配慮する観点

コンテンツの要点をシンプルに分かりやすく表現し、ユーザーの興味を惹くアイキャッチにします。

原則テキストは使用せずシンプルさ、明瞭さを意識する

アイキャッチにコンテンツの要素を詰め込むことは推奨しません。原則アイキャッチ内で文字による説明を行ったり、複数の画像や図を組み合わせたコラージュを多用することは避けてください。最も重要な要素や絵的に見栄えのする要素を厳選し、要点を絞ることを意識してください。

テキストや画像を補足する図を省いたシンプルなイメージ

さまざまな要素を組み合わせてたイメージ

コラージュせず、できるかぎり1枚か2枚の画像で内容が伝わるように

ビジュアルを１枚で表現したイメージ

ビジュアルを複数枚で表現したイメージ

アイキャッチの表示領域を明確にする

• Webページの背景色とアイキャッチ領域の区別をはっきりさせることで、ユーザーのクリック、選択領域を明確にすることができます。
• 特別な意図が無い場合にはアイキャッチの背景色はブランドカラー、サブカラー、グレーを優先的に利用してください。例えばウェブサイトのニュース一覧などで複数のアイキャッチが並んだ際に統一的な印象となります。ブランドカラー、サブカラーなどの具体的な値に関してはカラーシステムを参照ください。

ブランドカラー#e8eaf1を背景色にしたイメージ

ブランドカラー以外を背景色にしたイメージ

トリミング

伝えたいメッセージをよりフォーカスできるトリミングを検討しましょう

全体像を見せる場合

より内容にフォーカスする場合