WordPressのヘッダーを作る前に考える3つのポイント

WordPressでサイトを運営していて、どんなヘッダーにすればよいか迷ったことのある人も多いのではないでしょうか。ヘッダーは、サイトにアクセスした際に一番初めに目に飛び込んでくる場所なので、その役割は重要です。また、ヘッダーに設置されているグローバルメニューは、サイトのユーザビリティにも影響しますし、どう設定するかでコンバージョンの数も変わってくるでしょう。この記事では、ヘッダーの役割やプラグインでの作成方法を紹介します。

ヘッダーとは？

一般的なサイトの場合、各ページの一番上に表示されているのがヘッダーです。WordPressサイトでは、ヘッダーの内容は「header.php」に記載され、すべてのページで同じ内容が表示されます。ヘッダーに掲載される情報としては、サイトのロゴやタイトル、キャッチフレーズ、問い合わせ先、主要コンテンツにリンクしたグローバルメニューなどが挙げられます。ヘッダーは一番初めに目にする場所であるため、ヘッダーでユーザーにどんな印象を与えるのかが決まると言っても過言ではありません。

どんなにサイトのコンテンツが充実していても、ヘッダーがみすぼらしいものであれば、好印象を持ってもらうのは難しいでしょう。コンテンツやサイトの価値を下げてしまうことにもなりかねません。ヘッダーはアイキャッチ的な効果もあり、ブランディングのためのロゴや画像が使われることが多いのも特徴です。ヘッダーにはグローバルメニューを配置するのが一般的ですが、サイトのレイアウトによっては左もしくは右カラムに配置されることもあるので、必須というわけではありません。

どのページを開いてもユーザーに連絡先がわかるように、電話番号やメールアドレスなどを掲載したり、すぐにフォローできるようにSNSのボタンを設置したりすることもあります。また、メインコンテンツの邪魔にならないように、天地のサイズを大きくしないのもヘッダーの特徴です。ヘッダーの天地サイズが大きいと、スクロールしなければメインコンテンツを見られなくなってしまうので、ユーザビリティを下げてしまいます。そのため、ヘッダーの内容だけでなく大きさへの配慮も必要になります。

ヘッダーの役割

ヘッダーの役割としては、大きく3つが挙げられます。1つ目の役割がサイトブランディングです。サイトや自社が扱っている商品・サービスにポジティブなイメージを持ってもらうためにブランディングは欠かせません。「信頼できる」「品質にこだわっている」「誠実」などのイメージを持ってもらうことができれば、サイトのコンテンツをしっかり見てもらうことができます。サイトの回遊率が上がって、ページビュー数も増えるでしょう。当然、コンバージョンアップも期待できます。ヘッダーに表示されているロゴやキャッチフレーズなどをとおして、ブランドイメージを訴求することが重要なのです。

2つ目の役割がユーザーのナビゲーションです。グローバルメニューから主要なページにリンクし、検索窓を設けてユーザーが探している情報を見つけやすくすることで、サイトの回遊率を高めることもできます。コンバージョンへの導線を踏まえて効果的にナビゲーションすれば、売り上げ増や集客増にもつながります。また、サイトのロゴはトップページにリンクするのが一般的です。どのページにいても、ロゴをクリックすればトップページに戻れるようになります。

3つ目の役割が、ユーザーがコンタクトする連絡先の案内です。電話番号やメールアドレス、問い合わせフォームへのリンクなどを掲載することで、ユーザーからのコンタクトを促します。ヘッダーに連絡先を配置すれば、どのページを見ていても連絡先が表示されますので、ビジネスチャンスを失うこともありません。成果につながるWordPressサイトにするためには、この3つの役割を踏まえてヘッダーを最適化することが重要です。

ヘッダーに配置する情報の優先順位

ヘッダーに配置する情報の優先順位は、サイトによっても違ってきます。まず、よく利用されるコンテンツや機能を優先して配置するのがよいでしょう。特に重要視したいのがグローバルメニューの内容ですが、ユーザーの導線を踏まえてリンクするページを決めることが大切です。グローバルメニューを設置する場合、「商品案内」や「会社概要」のように、どうしても他サイトと同じようなものになりがちです。そのようなものにこだわらず、ユーザーに見てほしいページがあったら、必ず導線を作り、積極的に誘導しましょう。

見てほしいページを見てもらえなければ、サイトそのものの意味がなくなってしまいます。ユーザーが情報を探していても、それをすぐに見つけられるとは限りません。見つけられないと、イライラしてすぐにサイトを離脱してしまうでしょう。探している情報を見つけやすいように、サイトマップページを設けてヘッダーからリンクすれば、ユーザーもサイト全体の構造を俯瞰して見られるようになります。サイトのユーザビリティが向上し、サイトの滞在時間を伸ばすことにもつながります。

また、ヘッダーの役割のなかで何を優先したいのかを踏まえて、配置する方法もおすすめです。たとえば、あまり知名度の高くない企業のロゴを大きくアピールしても、あまり意味がないでしょう。キャッチフレーズが他社と差別化できる秀逸なものであれば、それをアピールしたほうがより効果的ですし、ブランディングにもつながります。定型的なヘッダーのスタイルにこだわらず、成果につながる独自のヘッダーを作成しましょう。

テーマでヘッダーを製作する方法

WordPressのテーマによっては「カスタマイズ機能」が設置されており、WordPressの管理画面にログインして、ヘッダーの設定を行うことができます。この機能を使うと、サイトロゴの設定や紹介文、住所や電話番号、リンク先などが簡単に設定できます。サイトロゴなど設置できる画像のサイズは、上限・下限が決められていることも多いため注意が必要です。特に上限を超える画像を設置すると、全体のレイアウトなどが崩れることにもつながりかねません。事前に上限サイズをチェックしておきましょう。

テーマのカスタマイズ機能を使ってヘッダーを設定する場合は、あらかじめ決められた場所に入力した情報を掲載する方式が一般的です。そのため、カスタマイズの自由度は高くなく、さまざまな制限があります。住所や電話番号は表示できても、フォントのサイズやカラーは変えられないこともあります。ヘッダーに設置できる項目もテーマに依存しますので、追加で設置したい項目がある場合には対応できません。

また、ヘッダー内のレイアウトを変更したいような場合も、テーマの機能だけでカスタマイズするのは難しいでしょう。ヘッダーを希望どおりに細かくカスタマイズしたい場合は、header.phpやCSSファイルの編集が必要になります。ただし、ヘッダーを作成できるプラグインもありますので、これを利用すれば専門的なスキルがなくても、オリジナルのヘッダーを作成することができます。

ヘッダーを設置することのメリット

上述のように、ヘッダーはサイトブランディングの役割も果たしています。そのため、デザイン性の優れた魅力的なヘッダーを設置すれば、ブランディングの強化にもつながるのです。ユーザーに好意的なブランドイメージを持ってもらうことができれば、商品購入を考えた際に、真っ先に思い起こしてもらうことができます。ブランディングによって顧客をファン化できれば、リピート購入も期待でき、競合サイトと大きく差別化することも可能です。売り上げが増加するだけでなく、収益率も大きく伸ばせるでしょう。

ブランディングに効果的なヘッダーにするためには、どんなヘッダー画像を使用するかも重要です。画像を選ぶにあたっては、まずユーザーにどんなブランドイメージを持ってほしいのかを明確にすることが大切になります。「親しみやすさ」をイメージしてほしい場合と、「先進性」をイメージしてほしい場合とでは、使用する画像も違ってきます。安易に「かっこいいから」「おしゃれだから」と使用する画像を選んでしまうと、ブランディングに効果を発揮できません。プランドイメージに最適な画像を選択して、デザイン性の高いヘッダーにしましょう。

【おすすめプラグイン】1. Elementor & Elementor Header Footer

「Elementor & Elementor Header Footer」は、簡単にサイトのヘッダーとフッターを作成できるプラグインです。テーマのカスタマイズ機能では、カスタマイズの自由度が低く、思うようにヘッダーを設定できません。しかし、Elementor & Elementor Header Footerには、さまざまな配置オプションが設定されており、ショッピングカートのアイコンを埋め込んだり、検索機能を追加することも可能です。header.phpのコードを書き換える必要もありませんので、PHPなどのスキルがなくても、オリジナルのヘッダーを作成できます。Elementor & Elementor Header Footerで、ヘッダーを作成する手順は次のとおりです。Elementor & Elementor Header Footerをインストールして有効化すると、WordPress管理画面の「外観」に「Header Footer Builder」と表示されます。

ここをクリックして「新規追加」を選択し、テンプレートに名前をつけます。ヘッダーにするかフッターにするか選択できますので、ヘッダーを選択しましょう。次に「Elementorで編集」に進み、ヘッダーのテンプレートを作成します。左カラムに表示された要素を右側のインターフェースにドラッグ＆ドロップすればヘッダーを作成できます。ヘッダーの作成が終了したら、「更新」ボタンをクリックして完了です。これで、テンプレートで作成した内容が自動的にヘッダーとして、すべてのページに適用されます。新規追加の際にフッターを選択すれば、同じ手順でフッターを作成することが可能です。

【おすすめプラグイン】2.Fixed And Sticky Header

「Fixed And Sticky Header」は、ページをスクロールしても常に表示される追従型のヘッダーを作れるプラグインです。追従ヘッダーはポータルサイトなどでも使用されており、常に会社名やサイト名を表示させておくことができるため、認知度を上げる効果が期待できます。また、ユーザーが別のページに移動したくなったときに、いちいちページの上部まで戻らなくても、すぐにグローバルメニューをクリックできるので、サイトの回遊率アップにもつながります。

Fixed And Sticky Headerで、追従ヘッダーを作成する手順は次のとおりです。Fixed And Sticky Headerをインストールして有効化すると、WordPress管理画面の「設定」に「Fixed And Sticky Header」と表示されます。これをクリックすると、「PLUGIN SETTINGS」画面が開きますので、ここで背景色やスクロール設定を行います。「Add Fixed Header (Class or Id)」で追加するヘッダーのクラスまたはIDを指定しましょう。さらに、「Background Color」で背景色、「Text Color」で文字色、「Fixed Header Height」でヘッダーの高さなどを指定します。そのうえで、「Fixed Header Scroll」でスクロール値を指定すると、ページをスクロールしてもヘッダーが追従して表示されます。

【おすすめプラグイン】4.WonderPlugin Slider Lite

「WonderPlugin Slider Lite」は、ヘッダーにスライダーを挿入できるプラグインです。複数の画像を登録してスライド表示させたり、YouTubeやVimeoの動画（再生画像）をスライド表示させたりすることができます。また、投稿したアイキャッチ画像をスライド表示にして、記事にリンクするようなことも可能です。ヘッダーにスライダーを導入すると、サイトに動きがでて注目率が高くなるだけでなく、より効果的にブランドイメージが伝えられるようになります。

WonderPlugin Slider Liteで、スライダーを挿入する手順は次のとおりです。WonderPlugin Slider Liteをインストールして有効化すると、WordPress管理画面の「設定」に「WonderPlugin Slider」と表示されます。ここをクリックしたうえで、「Create A New Slider」ボタンをクリック。すると、「PLUGIN SETTINGS」画面が開きますので、ここで背景色やスクロール設定を行います。「New Slider」画面が開いたら、スライダーのサイズを指定し、「Designing」の「Add Image」ボタンをクリックします。（動画を追加する場合は、ここで「Add Video」ボタンをクリック）

「Add Image」画面で表示する画像をアップロードしたら、「Skins」ボタンをクリックして、スライダーのスタイルを決定しましょう。「Save & Publish」ボタンをクリックすると、ショートコードが表示されますので、それをWordPressに貼り込んで完了です。3Dやシャドーなどのイフェクト機能も充実していますので、デザイン性の高いスライダーを作ることができます。

まとめ

WordPressサイトにおいて、ヘッダーは大きな役割を果たします。ブランドイメージをアピールし、ユーザビリティを高め、ユーザーをコンバージョンへと導きます。この記事で紹介したプラグインなども活用して魅力的なヘッダーを作成すれば、売り上げ増加も期待できるでしょう。WordPressには、この記事で紹介した以外にも高機能なプラグインが多数あります。