ファーストビューコード生成用
左右分割のファーストビュー
左にコピーとボタン、右にビジュアルを置く王道構成。
用途・説明
サービスサイトのトップに置くファーストビューを、左テキスト・右ビジュアルの2カラムで作成します。スマホでは縦並びに切り替わり、ボタンが画面内に収まる高さに調整されます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- 例：Toolly
[キャッチコピー]- メイン見出し
[サブコピー]- 見出しを補足する1〜2文
[ボタン文言]- 例：無料ではじめる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはLP制作に慣れたWebデザイナー兼フロントエンドエンジニアです。 [サービス名]のファーストビュー（ヒーローセクション）を実装してください。 ## 表示内容 - 小さなラベル：[サービス名] - メイン見出し：[キャッチコピー] - サブコピー：[サブコピー] - メインボタン：[ボタン文言] - サブリンク：「詳しく見る」（ページ内の次のセクションへ） - ビジュアル：右側に画像エリア（仮画像として、角丸の淡い色の四角形とシンプルな図形で代用） ## レイアウト - PC：2カラム（テキスト 5 : ビジュアル 6）、縦方向中央揃え - コンテンツ最大幅 1200px、上下 padding 96px - スマホ：テキスト → ビジュアルの縦並び、上下 padding 48px - スマホでも、最初の画面内に見出しとメインボタンが収まること ## 配色・タイポグラフィ - 背景：#F7F9FC - 見出し：clamp(32px, 5vw, 56px)、font-weight 700、line-height 1.3、色 #1B2A44 - サブコピー：17px、line-height 1.9、色 #5F6D84 - ラベル：13px、色 #1463F0、letter-spacing 0.15em - メインボタン：高さ 52px、角丸 9999px、背景 #1463F0、文字 #FFFFFF ## アクセシビリティ・パフォーマンス - 見出しは h1。ページ内に h1 は1つだけ - 画像には内容に合った alt。装飾なら alt="" - ヒーロー画像は width/height を指定してレイアウトのずれを防ぐ - ボタンのコントラスト比4.5:1以上、フォーカスリングを表示 ## 出力形式 - [使用技術]のコードを1つ出力 - 画像差し替え方法と、左右を入れ替える方法をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。