ファーストビュー（FV）ブロック — 詳細マニュアル

> こんな質問に答えます:
> - トップのメイン画像を設定したい
> - ファーストビューのデザインを変えたい
> - ページの一番上に大きな画像を入れたい
> - FVブロックの種類と違いが知りたい
> - トップ画像の推奨サイズは？
> - FVの高さは？背景画像のサイズは？

> 別名・よくある呼び方: トップの画像、メイン画像、ヘッダー画像、一番上の画像、ヒーロー画像、メインビジュアル、FV、トップ画像のサイズ、背景画像の推奨サイズ

> このページのURL: https://lite-word.com/manual/blocks-firstview/
> ページ上部に表示される大きなヒーロー画像エリア。全19種（無料7 + プレミアム5 + 有料5 + テンプレート2）。

このブロックを使う場面: 固定ページの最上部に配置するヒーローセクション。トップページには「トップ用」、サービスや会社概要などのサブページには「下層用」を選ぶ。動画背景でインパクトを出したい場合はFV-7/13/15/16を検討する。

設定手順🔊

FVブロックの基本的な使い方を以下の手順で説明します。

1. 固定ページの編集画面を開く

   • WordPress管理画面 → 固定ページ → 編集したいページを開く（または「新規追加」で新しいページを作成）

2. FVブロックを挿入する

   • エディタ上部の「＋」（ブロック挿入）ボタンをクリック
   • 検索バーに「固定ページタイトル」と入力するか、カテゴリ「LiteWord」→「固定ページタイトル」から探す
   • 使いたいFVブロック（FV-1〜FV-17）を選んでクリックして挿入

3. テキストを直接編集する

   • 挿入されたブロック上で、タイトル・サブタイトル・説明文などを直接クリックして編集する
   • テキストはそのまま上書き入力が可能

4. 右サイドバーで詳細設定を行う

   • ブロックを選択した状態で、右サイドバーの「ブロック」タブを開く
   • 背景画像: 「背景画像（PC）」「背景画像（SP）」に画像をアップロードまたはメディアライブラリから選択
   • フィルター: 「フィルター色」と「フィルター透過度」で画像の上に重ねるオーバーレイを調整
   • 高さ: 「最小高さ（PC/TB/SP）」でデバイスごとの表示高さを設定
   • 色: テキスト色・ボタン色など、各ブロックの設定に応じて変更

5. ボタンを設定する（ボタン付きFVの場合）

   • ボタンテキスト・リンクURL・新しいタブで開くかどうかを設定
   • FV-1のみボタンの背景色・文字色・枠線・角丸を細かく調整可能

6. プレビューで確認して公開する

   • エディタ右上の「プレビュー」→「新しいタブでプレビュー」で実際の表示を確認
   • PC・タブレット・スマホそれぞれの表示をチェック
   • 問題がなければ「公開」または「更新」をクリック

無料 FVブロック（7種）🔊

FV-1 — 固定ページタイトル 01（トップ用）

LP全般向けFV。中央テキスト+背景画像+CTAボタン。信頼感重視の業種に最適。

特徴: 唯一ボタンのスタイル（背景色/文字色/枠線/角丸/透過度）を細かく設定できるFV。

FV-2 — 固定ページタイトル 02（下層用）

下層ページ用FV。中央にタイトルのみ。シンプルで軽量。フィルター透過度がデフォルト0.9のため、色ベタ塗り背景としても使える。

特徴: h1AfterColorで見出し下にアクセントラインを表示。フィルター透過度がデフォルト0.9で画像がほぼ隠れる（色ベース背景としても使える）。

FV-3 — 固定ページタイトル 03(画像のみの場合)

画像のみのFV。テキスト属性なし。デザイナーが作った画像をそのまま表示する用途。画像を見切れずに表示したい場合はこれを使う。

PC用とスマホ用で別々の画像を設定できる。 画面幅800pxを境にPC画像とスマホ画像が自動で切り替わる。

特徴: 設定5つのみ。背景画像ではなく画像そのものを表示するため、最小高さの設定はない（画像のサイズがそのまま高さになる）。画像を見切れさせたくない場合はこのFVを選ぶ。

FV-4 — 固定ページタイトル 04（トップ用）

コーポレート・士業向けFV。左寄せテキスト+背景色or画像。情報量が多い業種に最適。テキスト配置をPC/SP別に左寄せ/中央で切り替え可能。

特徴: フィルター透過度が1.0（画像を完全に隠す）がデフォルト → 単色背景として使える。maxWidthでテキストエリアの幅を制御。テキスト配置をPC/SP別に設定可能。

FV-5 — 固定ページタイトル 05（下層用）

下層ページ用FV。中央にタイトル+説明文。色ベタ塗り背景。サービス詳細ページ向け。

特徴: 最小高さが全FVで最も小さい（コンパクト）。サブタイトルなし。お問い合わせページやサービス詳細ページ向き。

FV-6 — 固定ページタイトル 06（下層用）

下層ページ用FV。中央にタイトル+サブタイトル+背景画像。会社情報・採用ページ向け。ダーク系のデフォルト設定。

特徴: テキスト色がデフォルトでダーク（#111）。日本語＋英語の2行構成。明るい背景画像と相性が良い。

FV-7 — 固定ページタイトル 07(トップ用・動画背景)

動画背景FV。中央テキスト+ボタン+mp4/Vimeo背景。インパクト重視のトップページ向け。

特徴: 唯一の動画背景FV。videoSpeedでスローモーション（0.5）や倍速（2.0）に設定可能。ボタンは表示/非表示の切替のみ（色のカスタマイズはFV-1のみ）。

プレミアム FVブロック（5種）🔊

FV-13 — 固定ページタイトル 13(動画背景)

左テキスト+右画像の2カラムFV。CTAボタン付き。動画背景も対応。コーポレートサイトに最適。テキストの縁取り（ストローク）エフェクト付き。

特徴: テキストの縁取り（ストローク）エフェクトが独自機能。PC/SP別にストローク幅を設定可能。タイトル・説明文それぞれのフォント/ウェイト/色を個別設定。30属性。

FV-14 — FV 14 ヘッダーまで回り込む全画背景

全画面FV（ヘッダー回り込み）。ロゴ+ナビ+見出し+説明+2CTAボタン。動画対応。ブランドサイトに最適。ヘッダーを隠して独自ナビを表示する特殊FV。

特徴: 40属性の最高機能FV。ヘッダーを覆って独自のロゴ・ナビ・デュアルCTAを表示。グラデーションフィルター対応。100vh全画面がデフォルト。LP用に最適。

FV-15 — 固定ページタイトル 15(動画背景)

左テキスト+右画像FV。CTAボタン付き。動画背景対応。IT・Web・教育系に最適。FV-13のダークバリエーション。

その他の設定はFV-13と同じ（30属性）。暗いトーンのサイトに合う。

FV-16 — 固定ページタイトル 16(動画背景)

中央テキスト+背景画像FV。大きな見出し+説明+CTAボタン。飲食・美容・ECのビジュアル訴求に最適。FV-13/15ベースに内側オーバーレイボックスとレスポンシブ高さを追加。

特徴: 34属性。テキストの背後に半透明ボックスを置いて可読性を確保。最小高さが100vh-headerでヘッダー高さを差し引いた全画面表示。

FV-17 — 固定ページタイトル 17（下層用）

下層ページ用コンパクトFV。左右背景画像+中央テキスト。ポートフォリオ・実績ページ向け。

特徴: 22属性。FV-5ベースに左右の装飾画像（花・イラスト等）を配置できる。各画像のPC/SP別透過度を設定可能。

有料個別購入 FVブロック（5種）🔊

FV-8 — 固定ページタイトル 08（トップ用）

テキスト重視FV。メインタイトル+サブ+リード+ポイント3つ+ボトムテキスト。背景画像付き。情報量が多い業種に最適。

特徴: 「お客様満足度98点」のような数値実績をビジュアル表示。リスト3項目のバッジ表示。修理業・買取業などの訴求力重視のLP向き。

FV-9 — FV 09 画像スライダー用ブロック

画像スライダーFV。複数画像を自動切替。テキストなし。ビジュアル重視のトップページに。

特徴: テキストなしの画像スライダー。施工事例・商品写真の自動スライドショーに。各スライドにリンク設定可能。

FV-10 — 固定ページタイトル 10（下層用）

下層ページ用シンプルFV。中央タイトル+背景画像+フィルター装飾。プレミアムデザイン。内側フレーム（枠線＋影）付き。

特徴: ポップなデザイン。カフェ・サロン・キッズ向けサイトに合う。ボックスシャドウの細かい制御が可能。

FV-11 — FV 11 背景画像スライダー

背景画像スライダーFV。複数背景画像切替+サブタイトル+見出し+説明+CTAボタン。リッチなトップページに。

＋FV-9のスライダー設定（13項目）。合計27属性。

特徴: スライダー＋CTAの組み合わせ。トップページのメインビジュアルに最適。

FV-12 — FV 12 ヘッダーまで回り込む全画背景

全画面FV（ヘッダー回り込み）。ロゴ+ナビ+見出し+2CTA+ニュース。動画対応。ブランドサイトに最適。NEWSティッカー付き。

特徴: 45属性で全FV中最多。ヘッダーを覆う全画面＋最新ニュースティッカー。コーポレートサイトのトップページに最適。FV-14との違いはNEWSティッカーとCTAのデフォルトスタイル。

テンプレート専用 FVブロック（2種）🔊

shin-gas-station-01-fv-top — ガソリンスタンド用トップFV

特徴: 20属性。PC/SP別にテキスト・フォントを個別設定可能。

shin-gas-station-01-fv-lower-01 — ガソリンスタンド用下層FV

コンパクトなサブページヘッダー。10属性のみ。

FV選びの早見表🔊

よくある質問🔊

Q: FVブロックはどのページにも使えますか？
A: はい、固定ページであればどのページにも使えます。トップ用（FV-1, FV-4, FV-7等）と下層用（FV-2, FV-5, FV-6等）があるので、ページの役割に合わせて選んでください。

Q: 背景画像のPC用とSP用、両方設定する必要がありますか？
A: PC用は必須です。SP用は未設定の場合PC画像が使われますが、スマホで見切れる可能性があるため、SP用も別途設定することをおすすめします。

Q: フィルター透過度の数値がよくわかりません。
A: 0に近いほど画像がそのまま見え、1に近いほどフィルター色で覆われます。例えば0.4なら画像がうっすら見える状態、0.9ならほぼ単色背景になります。

Q: FVの高さが足りない / 大きすぎる場合は？
A: 右サイドバーの「最小高さ（PC/TB/SP）」の値を調整してください。単位はpxです。FV-14やFV-16は 100vh（画面全体）がデフォルトです。

Q: FV背景画像の推奨サイズは？（トップ画像のサイズは？）
A: FVの種類によって異なる。大きく2パターンある。

① 画像をそのまま表示したい場合（見切れない） → 「固定ページタイトル 03(画像のみの場合)」を使う
このFVは背景画像ではなく、画像そのものを表示する。PC用とスマホ用で別々の画像を設定でき、画面幅800pxで自動切替される。横幅設定（画面いっぱい / inner fit / outer fit）で表示幅を調整できる。画像が見切れないので、作った画像がそのまま表示される。

② 背景画像として使う場合（テキストが上に乗る） → FV-1, FV-2, FV-4〜等
背景画像には「推奨サイズ」はない。背景画像はCSSの object-fit: cover で表示されるため、閲覧者の画面幅や設定した高さによって見える範囲が変わる。横幅の大きいPCモニターではより多くトリミングされ、スマホでは縦長に切り取られる。

そのため、まず画像を入れてみて、実際の表示を確認しながら合うか合わないかを判断するのがベスト。うまくいかない場合は別の画像を試すか、フィルター色と透過度を調整して雰囲気を整える。PC用とSP用で別の画像を設定できるので、それぞれの見え方を確認すること。

Q: 動画背景のFV（FV-7, FV-13等）で動画が再生されません。
A: MP4形式の動画ファイルをメディアライブラリにアップロードし、そのURLを「動画URL」に設定してください。Vimeo対応のFV-7では「動画タイプ」を「vimeo」に切り替えてVimeo IDを入力することもできます。

関連ページ🔊

最終更新: 2026-03-21