ファーストビューコード生成用
グラデーション背景のファーストビュー
色の広がりを背景に、言葉とボタンを中央に置く。
用途・説明
画像を用意しなくても印象的に見える、グラデーション背景のファーストビューを作成します。背景はCSSだけで描き、見出し・補足文・ボタンを中央に重ねます。リリース前のサービス、アプリの紹介、イベントの告知ページなど、素材が少ない段階でもすぐに形になります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：アイデアを、今日かたちに。
[補足文]- 見出しを補う1〜2文
[ボタン文言]- 例：無料ではじめる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「グラデーション背景のファーストビュー」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足文：[補足文] - ボタン：[ボタン文言] ## レイアウト - すべて中央揃え。上から 見出し → 補足文 → ボタン - セクションの高さは最低 560px（スマホ 480px）。コンテンツは上下中央 - コンテンツの最大幅 720px ## デザイン - 背景：左上から右下へ、#1463F0 → #8B5CF6 の linear-gradient（135度） - 背景の上に、右上と左下へ白の大きな円（不透明度 0.08）を重ねて表情を付ける - 見出し：PC 52px / スマホ 32px、font-weight 700、line-height 1.3、色 #FFFFFF - 補足文：PC 18px / スマホ 15px、line-height 1.8、色 rgba(255, 255, 255, 0.88) - ボタン：高さ 56px、左右padding 36px、角丸 999px、背景 #FFFFFF、文字 #1463F0・17px・font-weight 700 ## レスポンシブ・アクセシビリティ - 見出しは意味のまとまりで改行し、スマホで1文字だけ次の行に落ちないようにする - 白い文字と背景のコントラスト比が、グラデーションのどの位置でも 4.5:1 以上になるか確認する。足りない場合は色の調整案を出す - 見出しは h1。装飾の円は aria-hidden="true" - ボタンの focus-visible は白の 2px のアウトライン ## 出力形式 - [使用技術]のコードを1つ出力 - 2色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。