TOP集客施策ヘッダー画像作成②
最終更新日 : 2026/06/02

ヘッダー画像作成②

3,テキスト

▪️書体
日本語の書体は「明朝体」と「ゴシック体」に大別されます。
ヘッダ画像のイメージに合わせて書体を選ぶとよいでしょう。

明朝体のイメージ:
メンズファッションやビジネスアイテムに多い。クラシック、高級感、大人っぽい、落ち着いたイメージ

スクリーンショット 2026-06-02 15.48.22.png

ゴシック体のイメージ:
ガジェット系に多い。近未来的、カジュアル、若々しい、ポップなイメージ

スクリーンショット 2026-06-02 15.48.48.png

使用する書体はできるだけ明朝体かゴシック体のどちらかに統一すると、画面全体がまとまりやすくなります。
なお、明朝体はゴシック体よりも若干読みづらいため、コピーライトなどの小さい文字はゴシック体にすると読みやすくなります。

スクリーンショット 2026-06-02 15.49.18.png

▪️フリーフォント(著作権フリーのフォント)
フリーフォントを使用する際は、商用利用可(クレジット表記不要)のものをご使用ください。
有償フォントの場合は購入が必要です。
また、有償無償に関わらず、フリーフォントをご利用の際は、各フォントの利用規約をご確認ください。

▪️テキストの装飾
白フチやシャドウなどの文字の効果はつけすぎず、シンプルにした方が見栄えが良くなります。派手にして目立たせるよりも、スッキリおしゃれなバナーを目指しましょう。

スクリーンショット 2026-06-02 15.50.43.png

▪️文字の色と背景
テキストの色と背景色の色味や明るさが近いと、読みづらい場合があります。適宜テキストと背景色のコントラストをつけて読みやすくしましょう。

スクリーンショット 2026-06-02 15.51.16.png

背景の写真と文字が重なると読みづらい場合は、文字の背景に色をしく、文字の下に影をつけるなどで読みやすくしましょう。

また、文字や文字背景の色は、バナー内の写真などから拾うと画面がまとまりやすくなります。

例えば、下記の画像の文字色の水色は、バナー内の左の男性のネクタイの色を抽出しています。文字色の明るさや濃さなどは、適宜調整するとよいでしょう。

スクリーンショット 2026-06-02 15.52.48.png

5,まとめ

プロジェクトページのヘッダ画像は、凝ったデザインでなくても、「商品の特徴が伝わる写真やキャッチコピーが見やすく配置」されていれば、購入に繋がりやすくなります。

逆に、著しくバランスを欠いてしまったり、サイトのユーザーさんの嗜好にそぐわなかったりする場合は、プロジェクトページから離脱されてしまう原因にもなり得ます。

ヘッダ画像を作成する際、まずは「要素が適切か(必要なテキスト情報が載っているか)」「可読性(読みやすさ)が担保されているか」を意識しましょう。