ファーストビューコード生成用
中央揃えのファーストビュー
見出し・説明・ボタンを中央に重ねる、SaaSの定番構成。
用途・説明
お知らせ用の小さなバッジ、大きな見出し、説明文、2つのボタンを中央揃えで縦に並べるファーストビューを作成します。画像がまだ用意できていない段階でも成立し、下に製品のスクリーンショットを足すこともできます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[バッジ文言]- 例：新機能をリリースしました。不要なら削除
[キャッチコピー]- 例：チームの「いつもの作業」を、ひとつの場所に。
[説明文]- サービスの概要を1〜2文で
[メインボタン文言]- 例：無料ではじめる
[サブボタン文言]- 例：デモを見る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「中央揃えのファーストビュー」を実装してください。 ## 表示内容 - バッジ：[バッジ文言] - キャッチコピー：[キャッチコピー] - 説明文：[説明文] - メインボタン：[メインボタン文言] - サブボタン：[サブボタン文言] ## レイアウト - すべて中央揃えで、上から バッジ → キャッチコピー → 説明文 → ボタン2つ（横並び） - コンテンツの最大幅 760px、説明文の最大幅 34em - セクション上下の padding：PC 120px / スマホ 72px - スマホではボタンを縦に並べ、それぞれ幅100%にする ## デザイン - 背景：#F7F9FC。上部中央に #1463F0 のごく淡い放射状グラデーションを重ねて奥行きを出す - バッジ：12px、font-weight 700、文字 #1463F0、#1463F0の10%の背景、角丸 9999px、padding 4px 12px - キャッチコピー：clamp(32px, 6vw, 56px)、font-weight 700、line-height 1.3、色 #1B2A44 - 説明文：PC 18px / スマホ 16px、line-height 1.9、色 #5F6D84 - メインボタン：高さ 52px、角丸 9999px、背景 #1463F0、文字 #FFFFFF - サブボタン：同じ高さ、背景 #FFFFFF、枠線と文字が #1463F0 - 各要素の間隔：バッジ→コピー 20px、コピー→説明文 20px、説明文→ボタン 36px ## 文字組み - キャッチコピーは text-wrap: balance で行の長さを揃える - 日本語が単語の途中で折り返されないよう、意味のまとまりごとに inline-block の span で囲む ## アクセシビリティ - キャッチコピーは h1（ページに1つだけ） - ボタンは遷移先がある場合 a 要素で実装し、focus-visible のスタイルを用意する - 文字と背景のコントラスト比は 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - ボタンの下に製品画像を追加する場合の置き方をコメントで補足
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。