ファーストビューコード生成用
画面の一部が浮かぶファーストビュー
通知や数字の小さなカードを浮かべて、使う場面を想像させる。
用途・説明
右側に、アプリの画面の一部（通知、グラフ、完了メッセージなど）を小さなカードにして、少しずつずらして浮かべるファーストビューを作成します。大きなスクリーンショットよりも、使ったときの「いいこと」が伝わりやすくなります。SaaSやアプリの紹介ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：予約が入ったら、すぐ分かる。
[補足文]- 見出しを補う1〜2文
[ボタン文言]- 例：無料ではじめる
[カードの内容]- 3枚ぶん。例：新しい予約の通知、今月の売上、完了メッセージ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「画面の一部が浮かぶファーストビュー」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足文：[補足文] - ボタン：[ボタン文言] - 浮かべるカード（3枚）：[カードの内容] ## レイアウト - PC：左にテキスト（幅 45%）、右にカードの領域（幅 55%、高さ 420px） - カードは position: absolute で、少しずつ重なるようにずらして置く。1枚は少し傾ける（-4度） - スマホ：テキストを上、カードの領域を下に。カードは2枚に減らす ## デザイン - 背景：#1463F0 の9%の淡い色 - カード：背景 #FFFFFF、角丸 16px、padding 16px 20px、影 0 16px 40px rgba(27, 42, 68, 0.12) - カードのなかの文字：見出し 14px・font-weight 700、数字 28px・font-weight 700・色 #1463F0、補足 12px・色 #5F6D84 - 見出し：PC 44px / スマホ 28px、font-weight 700、line-height 1.4、色 #1B2A44 - ボタン：高さ 56px、角丸 999px、背景 #1463F0、文字 #FFFFFF・font-weight 700 ## 動き - カードは、それぞれ違う速さでゆっくり上下にゆれる（4〜6秒、移動は 8px） - 表示されたとき、下から順にフェードインする - prefers-reduced-motion のときは、動きをすべて止める ## アクセシビリティ - カードは雰囲気を伝える装飾として、まとめて aria-hidden="true" にする（内容はテキストで別に伝える） - 見出しは h1 - カードがテキストやボタンに重ならないようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。