横浜のホームページ制作ならデザイン事務所セーノへ

受付時間:10:00~18:00(土日祝休み)

045-550-4769

ホームページ運営サポート

Support blog

ホームページの"キャッチコピー"を効果的に引き立たせるデザインとは?

更新日:2019-09-11

img01.jpg

ホームページの顔となるメインビジュアル。同じように、キャッチコピーもそのサイトの印象を決める大事な要素となります。

せっかく良いキャッチコピーを思いついても、ホームページを訪れた人の目に留めてもらえなければ意味がありませんよね。

いくつかのホームページをチェックしてみたところ、「キャッチコピーのみ」「写真とキャッチコピーを組み合わせる」「動画とキャッチコピーを組み合わせる」という、大きく分けて3つの傾向が見えてきました。

それぞれのホームページのキャッチコピー周りのデザインを調査し、キャッチコピーをより効果的に引き立たせるデザインについて考察していきたいと思います。

 

 

キャッチコピーのみの場合

まずはキャッチコピーのみを配置しているものをご紹介します。
こちらは難易度が高そうですが、どのサイトもサイトの雰囲気を生かしつつうまく工夫されています。

 

Teen Spirit.png

 

キャッチコピー以外の要素がほとんどないため寂しい印象を与えそうですが、背景にアニメーションを取り入れることでシンプルでスマートな印象になっています。

フォントサイズはそこまで大きくないですが、キャッチコピーにしっかりと目が行くデザインとなっています。

 

 

STRIVE.png スマレジ.png

 

グラデーション+アニメーションをうまく活用して、シンプルながらシャープな雰囲気。キャッチコピーのフォントサイズも大きめで、インパクトも大きいです。

画面が表示されるまでの動きもかっこいいです。

 

 

小島国際法律事務所.png

 

キャッチコピー周りは白背景に黒一色というシンプルさ。キャッチコピー部分のみで考えると一見シンプルすぎる見た目になってしまいそうですが、直下の画像で中和されています。

また、ブラウザサイズの高さを変更しても画像が敢えて見切れる仕様になっているようです。

自然とキャッチコピーが目に入ってくるよう工夫されています。

 

 

写真とキャッチコピーを組み合わせている場合

写真とキャッチコピーを組み合わせているホームページは特に多く見られますが、その分デザインも様々でした。

 

(1)写真とキャッチコピーを重ねる

 

01-J&Jグループ.png 01-sansan.png

01-ナイル株式会社[Nyle Inc.].png 01-京都プラテック.png

 

まずは、写真にキャッチコピーを重ねているもの。

写真にテキストを重ねると、写真によってはキャッチコピーが見えにくくなってしまう場合がありますが、上の4サイトは画像にオーバーレイを重ねることで可読性が上がっています。

 

 

02-WAVE.png 02-yappli.png

 

こちらの2サイトは、キャッチコピーのフォントカラーとの明暗がはっきりした部分に配置することで違和感なく読み取ることができます。

 

 

03-株式会社 喜信.png 03-黒木テック工業株式会社.png

キャッチコピーにテキストシャドウを加え、背景画像との差を出すことで可読性を上げる方法もあります。

キャッチコピーが浮きすぎてしまわないよう、シャドウは目立ちすぎない程度にかけるのがポイント。可読性を上げつつも、後ろの画像とうまく馴染んでいます。

 

 

(2)写真とキャッチコピーを重ねる

 

04-長崎大学.png 04-LOGI Terminal/ロジ・ターミナル.png

 

キャッチコピー自体は白背景に配置されているので読みやすいですね。

写真とキャッチコピーを敢えてずらして重ねることで、スタイリッシュさも演出できます。

 

 

05-日建設計コンストラクション・マネジメント.png

 

こちらは画像と画像の間にキャッチコピーを配置しているため、テキスト要素が際立って見えます。

 

 

06-福田交易株式会社.png

 

キャッチコピーを写真の横に配置しています。フォントサイズも大きめで、自然とキャッチコピー→メインビジュアルの流れを誘導されるかのような配置にもなっています。

 

 

動画とキャッチコピーを組み合わせている場合

 

動画は目を惹くコンテンツとして大変有効ですが、キャッチコピーを引き立たせる要素としてどのような工夫がなされているのか見てみましょう。

株式会社 青空木材.png

 

背景として動画を活用しています。キャッチコピーと同時に会社の雰囲気も伝わってきます。

また、動画がキャッチコピーの意味をぐっと深めてくれる印象もあります。

 

 

タルタルガ.png

 

こちらはファーストビューでキャッチコピーを見せず、動画下に配置しています。

動画→キャッチコピーの順番で思わず二度目を留めてしまうようなデザインです。

 

 

まとめ

キャッチコピーのみの場合は、背景やテキスト要素に一工夫加えることで、シンプルながらスタイリッシュなデザインを実現できることが分かりました。アニメーションやグラデーションをうまく活用すると、サイトの雰囲気もグッと演出できます。

写真とキャッチコピーの組み合わせに関しては人気の組み合わせな分表現方法が多様で、配置などで雰囲気も大きく変わりますね。また、キャッチコピーを写真に重ねる場合は可読性を意識したデザインをしていく必要がありそうです。

そして、写真や動画と組み合わせる際は、キャッチコピーとのバランスが大切です。

「キャッチコピーを際立たせるための背景としても活用したいのか?」「動画もキャッチコピーもしっかり見てもらいたいか?」、ホームページでの目的によってデザインを考えていきましょう。

あなたにおすすめの記事

新旧ロゴ比較&リニューアル後のロゴデザインを徹底調査!

  経営理念や志など、その企業の想いが込められたロゴは、企業の成長や発展に伴いロゴも新た...

ホームページの"キャッチコピー"を効果的に引き立たせるデザインとは?

ホームページの顔となるメインビジュアル。同じように、キャッチコピーもそのサイトの印象を...

化粧品ブランド比較!海外で好まれるWEBデザインのテイスト調査

普段私たちが何気なく目にしているサイトですが、同じ業種でも国が変わるとテイストにも違い...