Apuraには、トップページに大きなビジュアルを表示できるヒーローセクションが標準搭載されています。画像はもちろんMP4形式の動画も背景に設定でき、キャッチコピーやCTAボタンを自由に配置できます。
この記事では、カスタマイザーの「Front Page」パネルを使ったヒーローセクションの設定方法を、画面の場所から順番に解説します。
ヒーローセクションとは
ヒーローセクションとは、トップページの最上部に表示される、画面の大部分を占める大きなビジュアルエリアのことです。サイトの第一印象を決める部分であり、訪問者に「このサイトが何を提供しているか」を一目で伝える役割を持ちます。
Apuraのヒーローセクションでは、背景に画像または動画を設定し、その上にタイトル・説明文・CTAボタンを重ねて表示できます。背景の色味やテキストの見やすさも、オーバーレイ色やテキスト色の設定で調整できます。
設定画面を開く（カスタマイザー → Front Page）
ヒーローセクションの設定は、すべてカスタマイザーから行います。
- WordPress管理画面で 外観 → カスタマイズ を開きます。
- Front Page パネルをクリックします。
- Hero Area セクションを開きます。
- 一番上にある Enable Hero Area をオンにすると、トップページにヒーローセクションが表示されます。
Hero Areaセクションの設定項目は、ヒーローセクションを有効化すると操作できるようになります。プレビュー画面でトップページを表示しながら設定を進めると、変更内容を確認しやすくなります。
背景に画像を設定する
背景に画像を使う場合は、Hero Area Type で Image を選択します。すると Hero Area Image 項目が表示されるので、メディアライブラリから画像を選択するか、新しい画像をアップロードします。
ヒーローセクションは画面の大部分を占めるため、表示サイズに対して十分な解像度の画像を使うと、引き伸ばしによるぼやけを防げます。
背景に動画（MP4）を設定する
背景に動画を使う場合は、Hero Area Type で Video を選択します。すると Hero Area Video 項目が表示されるので、メディアライブラリから動画ファイルをアップロードします。
動画形式はMP4を中心に、WebMやOGVにも対応しています。動画は自動再生・ループ再生される背景として使われるため、ファイルサイズが大きくなりすぎないように、あらかじめ圧縮・最適化した動画を用意することをおすすめします。
タイトル・説明文・CTAボタンを設定する
背景の設定が終わったら、ヒーローセクションに表示するテキストとボタンを設定します。Hero Area Contents Settings 以下にある項目が対象です。
| 項目 | 内容 |
|---|---|
| Contents Position | テキストやボタンの位置を「Start」「Center」「End」から選択 |
| Title | ヒーローセクションに表示するキャッチコピー（見出し） |
| Description | キャッチコピーの下に表示する説明文 |
| Button Text | CTAボタンに表示するテキスト |
| Button URL | CTAボタンのリンク先URL |
| Open in new tab | CTAボタンのリンクを新しいタブで開くかどうか |
TitleとDescriptionは未入力のままでも問題ありませんが、何かを入力するとヒーローセクション上に表示されます。Button TextとButton URLの両方を設定すると、CTAボタンが表示されます。
オーバーレイ色・テキスト色を調整する
背景画像や動画の上にテキストを重ねる場合、背景の明るさによって文字が読みにくくなることがあります。そのようなときは、次の2つの設定で調整します。
- Overlay Color: 背景画像・動画の上に重ねる色（半透明の色を指定すると、背景を暗くしたり色味を加えたりできます）
- Text Color: タイトルや説明文の文字色
明るい背景画像には濃いオーバーレイ色と明るいテキスト色、暗い背景画像には薄いオーバーレイ色と濃いテキスト色を組み合わせると、文字の視認性を保ちやすくなります。
デバイスごとに表示高さを調整する（PC／タブレット／モバイル）
Height では、ヒーローセクションの高さをデバイスごとに個別設定できます。デスクトップ・タブレット・モバイルのタブを切り替えて、それぞれに合った高さを指定します。
単位は px em rem vh dvh vmin から選べます。画面の高さに対する割合で指定したい場合は vh や dvh が便利です。
モバイル画面ではPCよりも縦長の比率になりやすいため、PCで設定した高さのままだとテキストやボタンが画面外に収まらない場合があります。モバイルプレビューを表示しながら、デバイスごとに高さを微調整してください。
設定例：ビジネスサイト・サービス紹介サイトでの使い方
ビジネスサイトやサービス紹介サイトでは、ヒーローセクションを次のような構成で使うと、訪問者に伝えたい内容を整理しやすくなります。
- Title: サービス名やキャッチコピー（「〇〇でビジネスをもっと簡単に」など）
- Description: サービスの概要を1〜2文で簡潔に説明
- Button Text / Button URL: 「お問い合わせ」「サービス詳細を見る」など、次のアクションへ誘導するリンク
背景には、サービス内容を象徴する画像や、操作画面のスクリーンショットを使った動画を設定すると、テキストだけでは伝えにくいイメージを補えます。Contents Positionを「Center」にすると、テキストとボタンが画面中央にまとまり、シンプルで分かりやすいレイアウトになります。
まとめ
Apuraのヒーローセクションは、カスタマイザーの Front Page → Hero Area から、画像・動画の背景設定、テキストやCTAボタンの配置、オーバーレイ色やテキスト色の調整、デバイス別の高さ設定までをまとめて行えます。
まずは背景となる画像または動画を設定し、次にタイトル・説明文・ボタンを入力して、最後にプレビューで色合いと表示高さを調整するという流れで進めると、迷わず仕上げられます。