Webサイトのヘッダーは重要な役割を持ちます。ヘッダーは映画のイントロの役割があり、ユーザーが一番最初に目にするところだからです。ECサイトにおいては、Webサイト全体の売上にも影響します。

本稿では、トップページや下層のセールスページのヘッダーのコピーについてTCDのデモサイトを事例にして解説します。ヘッダーの見た目を良くするだけでなく、売上につながる効果的なライティングについても解説していますので参考にしてください。

まずはシュミレーションしてみます

まずはヘッダーが変わることによるECサイトの売上の変化をシュミレーションします。前提条件として商品価格は15,000円、広告費を100万円でクリック単価は100円（つまり、10000ユーザーを集客できる）とします。

ヘッダー変更前のデータを次のとおりとします。

＜改善前＞
ユーザー数 10000（100万円/100）
購入率 1%
売上 150万円（15000円x10000人x0.01）

ヘッダーを変更したことで、購入率が1%→1.5%にアップしたとします。

＜改善後＞
ユーザー数 10000（100万円/100）
購入率 1.5%
売上 225万円（15000円x10000人x0.015）

ここからさらに第二段階。上記で得た売上をすべて広告に使ったとする。予算は改善前が150万円、改善後225万円。

＜改善前＞
ユーザー数 15000（150万円/100）
購入率 1%
売上 225万円（15000円x15000人x0.01）

＜改善後＞
ユーザー数 22500（225万円/100）
購入率 1.5%
売上 506万円（15000円x22500人x0.015）

購入率（CVR）がたった0.5%変わるだけで、これだけ大きな結果の差が生まれます。事業の視界・可能性が変わると言っても過言ではありません。広告を積極的に使う人にとって、CVR向上を意識することは常識ですが、一般的にこの効用はあまり知られていません。

解説をわかりやすくするため、シンプルな前提条件にしています。現実には直帰率やリピート率などの数値が複雑に絡んできます。

CVRがいかに重要であるかと同時に、CVRに大きく影響するヘッダーの重要性もここから分かります。

ヘッダーの役割を考える

ヘッダーの目的はこの2つ要素から成り立っています。

印象づける

ヘッダーはユーザーが最初に目にするところなので、意識すべきところは「印象づけ」です。見る人の心に残すことを目的にして、ヘッダーをつくります。「印象づけ」を構成する要素は、ビジュアルとコピーです。この2つが一体となって機能します。

ビジュアル面では背景に目を引く動画やスライダーを表示することが有効です。コピーは端的に目的を伝えることですが、次の項で説明します。

目的を伝える

何のWebサイト（商品）であるかを伝えます。例えば、サーフィンショップであれば、取り扱っている商品が「サーフボード」であることをイメージやコピーで瞬間的に伝えることが重要です。ひと目で何のサイトかを分からせる役割がヘッダーにはあります。

なぜ、このような当たり前のことを書くのか。規模が小さいWebサイトほどこの点が出来ていないことがあるからです。よく「何の宣伝なのか分からない」というコマーシャルを見かけますが、そのようなWebサイトは少なくありません。

ヘッダーを作成する時のチェックポイント

キーワードをすべて書き出す

「目的を伝える」で解説した、ページの目的を伝えるためのキーワードをすべて書き出しましょう。例えば、不動産デベロッパー企業をイメージしたWordPressテーマ「FAKE」だとこうなります。

  • まちづくり
  • 都市・都市開発・都市計画
  • 不動産
  • タワーマンション・レジデンス
  • オフィスビル
  • ホテル・リゾート
  • モール・ショッピングセンター
  • すまい・くらし

メモ書きで構いませんので、思いつくキーワードをすべて書き出しましょう。

キーワードに形容詞をつけて訴求力を高める

前項で書き出したキーワードを文章にします。その際に適切な形容詞を盛り込みましょう。形容詞を盛り込むことで、正確にWebサイトや商品の価値を伝えることに繋がり、購買意欲を掻き立てます。

メインコピー：豊かなまちづくりを形にする不動産デベロッパー「FAKE」
サブコピー：オフィス・マンション・モール、壮大な都市計画を未来に実現します。

これはレゴブロックを組み立てる作業に近いでしょう。

コピーを削ぎ落とす

不動産デベロッパー
コピーライティングに必要なこと。それは削ぎ落とすことです。前項でも不要なキーワードは削ぎ落としましたが、さらに削ぎ落とせるかを再考する作業が必要です。

意味が伝わる、頭にスッと入ってくる。そんなコピーを目指すため、極力不要なキーワードは削ぎ落としましょう。シンプルなコピーがもっとも伝わりやすいからです。

ヘッダーサイズと文字量のバランスをチェックする

ヘッダーサイズには限りがあります。ヘッダー領域にフルでキャッチコピーが入っていると、詰まって汚く見えることがあります。もっとも美しく見えるようにヘッダーとキャッチコピーのバランスを整えましょう。

PC/タブレットでチェック

キャッチコピーが長すぎる

上のコピーを見て、何を思うでしょう。ブサイクなヘッダーになってしまってますね。これではいくらコピーの内容がよくても、効果は半減です。

  • 2行目が長すぎて、2列になっている
  • 全体的にコピーの領域が場所を取りすぎている

それを次のようにコピーを短くし、フォントサイズを小さくしました。フィットしていますね。実際のバランス感はこちらから確認できます。

適切なボリュームのコピー

スマホでもチェック

スマホでのキャッチコピー

PCとスマホでは表示領域が大きく異なりますので、キャッチコピーのフォントサイズや文量の調整が必要です。キャッチコピーはどう見せるかも重要だからです。端的に言うと、美しく見せた方がいいのです。

TCDテーマではパーフェクトなモバイルデザインを突き詰めているため、最近のWordPressテーマではPCとスマートフォンでは異なるキャッチコピー・フォントサイズ・イメージを設定することが可能です。つまり、PCとスマホでは異なるコンテンツを見せられるのです。

業種によってはモバイルユーザーが大半を締める昨今、単なるレスポンシブウェブデザインの時代は終わりました。

キャッチコピーは長すぎても短すぎてもダメ。最適な分量に文字量やフォントサイズを調整しましょう。

ビジュアルでコピーをサポートする

ビジュアルとキャッチコピー
もう1つ重要なこと。それはビジュアル面です。言葉（キャッチコピー）だけで伝えるのではなく、ビジュアルの力を借りるのもヘッダー作りに欠かせないポイントです。

例えば、次のキャッチコピー。この言葉だけでは何のウェブサイトかよくわかりません。

単なるテーマではない、世界観を創造する。
参考： WordPressテーマ「ANTHEM」

ですが参考サイトでは、ビジュアルがコピーの意味を補足することで商品の性質を説明しています。広告デザインの世界ではキャッチコピーとビジュアルが一体になって、意味を成立させています。むしろ、ビジュアルによってコピーが引き立つ。だから、ビジュアルは重要な要素なのです。

いいヘッダーでお出迎えしよう

キャッチコピーが単なる言葉の羅列ではないこと、ビジュアルが重要な役割を担っていることを解説してきました。ヘッダーと言えどやるべきことが多いことがわかりましたが、いいヘッダーをつくるには必要なことです。

たかがヘッダー、されどヘッダー。いいヘッダーをつくり、洗練されたWebサイトへの第一歩としてください。