グラデメッシュ背景ヒーロー
カラフルなメッシュグラデ背景に白抜きコピー。スタートアップ向け。
使いどころ
カラフルなメッシュグラデ背景に白抜きコピー。スタートアップ向け。
- LP のファーストビュー
- サービストップの導入セクション
- コーポレートサイトのキービジュアル
- 採用ページの冒頭
カスタマイズのポイント
見出しコピーとサブテキスト・CTA ラベルだけ差し替えれば即実装できます。背景画像を使う場合は object-fit: cover + aspect-ratio でレスポンシブ崩れを防止。
注意点
FV は LCP（Largest Contentful Paint）に直結するため、画像は WebP 形式・fetchpriority="high" 付与で読み込み速度を稼ぐのがおすすめ。テキストの行間は最低 1.25 を確保。
よくある質問
このパーツは商用利用できますか？
はい。moatway がオリジナル制作したパーツは商用・個人問わず自由にご利用いただけます。
そのまま貼り付ければ動きますか？
はい。HTML / CSS タブをそれぞれコピーすればすぐ動作します。クラス名が既存サイトと衝突する場合はリネームしてください。
JavaScript が必要なパーツはありますか？
一部のパーツ（アコーディオン・タブ切替・告知バーの閉じる機能など）は JavaScript が必要です。詳細ページの JS タブで確認できます。
ブラウザ対応は？
最新 2 世代の Chrome / Safari / Firefox / Edge で動作確認しています。