ヒーローセクション（ページ上部）ジェネレーター

ヒーローセクション（ページ上部）ジェネレーター: 用途

ヒーローセクションはサイトのファーストビューで、訪問者が数秒で先へ進むかを決める場所です。明確な約束、短い説明、主要な行動が必要です。

ジェネレーターは、テキストを読みやすくする調整可能な暗いレイヤー付きの背景画像のヒーロー、またはテキストと画像を横に並べたヒーローを作成します。タイトルは流動的なサイズで、メインとサブのボタンも付きます。画像は、ファーストビューで最大の要素（LCP）になることが多いため、fetchpriority=high付きで遅延読み込みなしのimgとして入ります。

使い方

1. タイトル、サブタイトル、ボタンを書きます。
2. 画像、レイアウト、色を選びます。
3. コードをコピーして、ページの上部に貼り付けます。

使うタイミング

• 地元のお店のトップページ。
• キャンペーンのランディングページ。
• 新商品の発表ページ。

よくある質問

ヒーローには何を入れますか？

お客様が求める成果を1文で（タイトル）、それをどう提供するか（サブタイトル）、そして「LINEで見積もり依頼」のような主要な行動を1つだけ入れます。控えめな2つ目のボタンは任意です。すべてがスクロールなしのファーストビューに収まるようにします。

画像でサイトが重くならないようにするには？

ヒーローの画像は、ファーストビューで最大の要素になることが多く、GoogleはこれをLCPとして計測します。コードはimgタグ（background-imageではなく）を使い、fetchpriority=highを付けてloading=lazyは付けず、ブラウザーが最初にダウンロードするようにします。画像はWebPで、適切なサイズにしてください。

写真の上のテキストはどうしますか？

画像の上の暗いレイヤー（オーバーレイ）により、どんな写真でも白いテキストのコントラストが確保されます。テキストが読みやすくなるまで不透明度を調整してください。45%〜60%で足りることが多いです。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール