LP用ヘッダーの改善ポイント、企業の事例を紹介【2024年最新版】

LP（ランディングページ）を構成する要素として、より効果的なページにするために重要なのが、最初にユーザーが目にするヘッダーです。
そこでこの記事では、営業・バックオフィスなど、さまざまな分野の発注先を比較検討できる「アイミツ」が、ヘッダーの改善に向けたポイントや参考にできる事例をご紹介していきます。

【関連ページ】
ホームページ制作にかかる費用・相場感や、あなたの目的別にホームページ制作会社をお探しいただけます。
LP制作（ランディングページ）の費用・相場
LPデザインに強いホームページ制作会社一覧

ヘッダーとは、ホームページなどの各Webページ上部に固定表示される部分です。例えば企業のホームページでよく見られる、社名・ロゴ・ページメニューといった、サイト全体を閲覧しやすくする案内板のような役割を持っています。

複数のページで構成されるサイトの場合、ヘッダーはどこにアクセスしても同じように表示させるのが一般的です。ページをスクロールしたときにも、画面上に残したまま表示しておくパターンもあります。ユーザーにとって目に入りやすい要素でもあり、重要なリンクや情報を入れておくのにも適したパーツです。

LP（ランディングページ）でも同様に、最上部に表示させるパーツがヘッダーです。LPの場合は、例えば特定の商品やサービスなどの専用窓口として、単一ページのみで構成されるパターンもよく見られます。その際には、同一ページ内の各コンテンツに飛べるメニューや、問い合わせフォームへのリンクなどを配置するケースが多く見られます。

またLPを含むサイトであれば、ほかのページと同じヘッダーを使用することも。ただしLPはほかのページと異なり、よりユーザーアクションを重視した役割を持つこともあり、ヘッダーを含めてオリジナルにカスタマイズする場合もあります。

LPによる効果をさらに高めていくためには、ユーザーの目に入りやすいヘッダーを見直してみるのも大切です。では以下からは、LPのヘッダーにおける具体的な改善方法を見ていきましょう。

ヘッダーに欠かせないのが、まず何のサイトかを示す意味もある社名やロゴです。ヘッダーは、いわばページのタイトルにもなる部分なので、より分かりやすくすることが重要です。

例えば屋号自体が「○○専門店」というように、何をする会社なのか明確であれば、それをそのままシンプルに載せるだけでも問題ありません。ただし第三者から見て、社名やロゴだけでは、具体的な商品やサービスを判断しづらい場合も。そうしたケースでは、「△△メーカー」など一言添えるだけでも印象は変わります。

例えば企業サイトでは、デザイン性やブランド性の統一感などから、ナビゲーションメニューもおしゃれな表現にしているケースが見られます。例えば「商品紹介」を「product」、「問い合わせ」を「contact」といった英語に置き換えていることも多いでしょう。

ただユーザーにとっては初見で分かりにくいと感じるケースもあり、見たい情報がすばやく見つけられず、ページの離脱につながってしまう可能性も。LPのヘッダーでは、なるべくシンプルに読みやすくしておくのがベストです。

CTAとは「行動喚起」を示す言葉で、ユーザーに取ってほしい反応を促すデザインやテキストなどを指します。LPのヘッダーでは、問い合わせ・申し込みページへのリンクや、電話番号といった表示が該当します。

CTAについても、例えば「24時間受付中」「相談無料」など、ユーザーがどう行動できるのか分かりやすく提示することが大切。またCTAに関わる部分は、ほかの要素よりも目立つようにするなど、視認性を改善するのも効果的です。

先ほども出てきたように、ヘッダーは画面スクロール時にも変わらず表示するように固定させるパターンもあります。ヘッダーにはCTAに関わる要素が含まれていることも多いため、固定させておくと、ユーザーにとってもすばやく重要な情報や行動にたどり着きやすくなります。

ヘッダーが最上部にあると、例えばLPを見ている途中で問い合わせ方法を確認しようと思ったとき、わざわざ最初の位置まで戻らなければなりません。ユーザーの手間を省くためにもおすすめの改善方法です。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるホームページ制作会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。  

では実際にLPのヘッダーを改善したいときのお手本にできる、具体的な参考事例をご紹介。LPのヘッダーとして、どのようなポイントが押さえられているのか、それぞれの事例ごとに解説します。

こちらは、スマートフォンアプリと専用カメラによる、家庭用セキュリティシステム「leafee」のLPです。製品の紹介と購入の申し込みができるページになっています。

商品ロゴに合わせて、ヘッダーのナビゲーションメニューは英語にしつつ、薄めのカラーで日本語も併記しているのがポイント。デザイン性を保ちながらも、分かりやすい表示になっています。さらに「よくある質問」や「無料トライアル」といった、ユーザーが確認したいと感じやすい重要情報のみ、ボタン風の見た目でほかのリンクと差を付けているのもポイントです。

こちらは、企業向けのアウトソーシングを手がけるイー・ブレインによる、PowerPointでの資料作成を定額発注できるサービス「イケポ」のLPです。主にWebからの問い合わせと、サービス内容を確認できるページになっています。

ヘッダーでは、料金プランやルールといった、具体的な使い方が判断しやすいコンテンツをピックアップして表示。固定ヘッダーなので、そのほかの情報と見比べながら検討できる仕組みになっています。デザイン自体はかなりシンプルですが、その分「お問い合わせ」のリンクが引き立っているのが特徴です。

こちらは、主にシロアリ対策サービスを提供している、ヤマトシロアリ研究所のLPです。会社案内とサービス紹介が一体となったページになっています。

ヘッダーでは分かりやすいナビゲーションメニューに加えて、電話・メール・LINEによる2パターンの問い合わせ方法を提示。また電話番号下の受付時間など、CTAに効果的な細かい追加情報も押さえられています。すぐに連絡手段が判断できて、なおかつユーザー自身で選びやすく、幅広い層に訴求できるヘッダーになっています。

つづいては、ホームページ制作にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下の通りです。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

さまざまなサイトにおけるヘッダーには、各コンテンツを見てもらいやすくするための役割があり、LPでも同様のメリットが見込めます。特にLPでは、ページの離脱を防いだりユーザーのアクションにつなげたり、集客や販促にも関係する部分でもあります。

またヘッダーの改善に向けたデザインや修正が難しい場合には、Web制作などの専門会社に依頼するのも1つの方法です。アイミツでは、Web分野の外注先選びのサポートができますので、お困りであればぜひお問い合わせください。

【相談前にまずは会社一覧を見たいという方はこちら】
ランディングページ（LP）に強いホームページ制作会社一覧
【費用感を知りたいという方はこちら】
LP制作（ランディングページ）の費用・相場