メインビジュアルとは？｜トップページ上部の構成と役割を整理する

メインビジュアルとは

メインビジュアルとは、
トップページを開いたときに、最初に目に入る表示エリアのことです。

サイト名やメニューのすぐ下に表示され、
訪問した人に向けて、

• ここはどんなサイトなのか
• どんな雰囲気の場所なのか

を、ひと目で伝える役割を持っています。

いわば、
ホームページの「顔」になる部分です。

「ここがメインビジュアルです」

メインビジュアルにあたるのは、
トップページ上部の、このエリア全体です。

いくつかの表示要素が組み合わさっていますが、
このページでは、
トップページ上部のこのエリア全体を
まとめて「メインビジュアル」と捉えています。

このサイトでは、
主に次のような要素で構成されています。

メインビジュアルを構成する全体像

メインビジュアルは、
複数の表示要素が組み合わさって構成されています。

このサイトでは、主に次のような要素で構成されています。

メインビジュアルの設定は、ここから行います

メインビジュアルに関する設定は、管理画面＜外観設定から行います。

🛠️　WordPress管理画面＜外観＜カスタマイズ＜トップページ

メインビジュアルを構成する主な要素の説明

🟩 お知らせバー

お知らせバーは、
トップページのいちばん上に表示される、
シンプルなお知らせ用のエリアです。

サイトからのちょっとした案内や、
補足的なお知らせを表示する目的で使われます。

メインビジュアル全体の中では、
主役になる要素ではなく、
必要な情報をさりげなく伝えるための
補助的な役割を持つパーツです。

お知らせバーの具体的な設定方法や、
実際に使っている内容については、
別記事にまとめています。

🟨 ピックアップバナー

ピックアップバナーは、
トップページの上部に表示される、
注目してほしい情報をまとめて伝えるためのエリアです。

・サイト内の案内
・今、特に見てほしい記事
・あらかじめ用意した導線

などを、視覚的に分かりやすく表示する役割があります。

メインビジュアルの中では、
文章だけでは伝えきれない情報を補い、
訪問者を次の行動へつなげるための要素として使われます。

ピックアップバナーの設定方法や、
実際にどのように使っているかについては、
別記事にまとめています。

🟥 メインビジュアル（背景・色・高さなど）

背景画像や背景色、高さや余白など、
メインビジュアル全体の雰囲気を決める部分です。

ここで設定する内容によって、

・やさしい印象
・落ち着いた印象
・情報が読みやすいかどうか

といった、サイト全体の空気感が大きく変わります。

そのため、
メインビジュアルの中でも、
サイトの「土台」になる要素といえます。

---

メインビジュアルの背景画像や高さなど、
具体的な設定方法については、
別記事でまとめています。

🟧記事スライダー（ピックアップスライダー）

記事スライダー（ピックアップスライダー）は、
おすすめの記事や、読んでほしい記事を
スライド形式で表示する機能です。

トップページの入口として、
訪問者を自然に記事へ誘導する役割を持っています。

記事スライダーは、
見た目の印象づくりと、記事への導線づくりの
両方を担う要素でもあります。

ただし、
・どの記事を出すか
・どの順番で見せるか
・スライダーを使うか、使わないか

については、
今も試しながら調整している段階です。

---

▶ 関連記事
記事スライダーを使い始めた頃、
「記事タイトルの表示位置」が分からず、少し戸惑いました。

当時試した設定や考え方を、別記事に記録しています。

ここまでで、メインビジュアルを構成する要素と、役割を整理できました。

ここからは、実際の設定画面で「どこを触ると、どこが変わるのか」を確認していきます。

このあとは、
トップページの各設定を実際に触りながら、
ひとつずつ確認していきます。

まずは「メインビジュアル」から。
ここはホームページの印象を決める大切な部分なので、
少し丁寧に見ていくことにしました。