ファーストビューコード生成用
予約ウィジェット付きのファーストビュー
日付と人数を選んで、最初の画面から空き状況を調べられる。
用途・説明
写真の上に、日付・人数などを選んで空き状況を検索できる予約ウィジェットを重ねたファーストビューを作成します。宿泊施設、レストラン、レンタルスペース、体験ツアーなど、日付を決めてから探すサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：週末は、海の見える部屋で。
[検索項目]- 例：チェックイン、チェックアウト、人数
[ボタン文言]- 例：空室を検索
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「予約ウィジェット付きのファーストビュー」を実装してください。 ## 表示内容 - 背景の写真（仮の画像を置く） - 見出し：[見出し] - 予約ウィジェット：[検索項目]、ボタン：[ボタン文言] ## レイアウト - 写真はセクション全体に敷く。高さ 600px（スマホ 520px） - 見出しは中央、やや上寄り - 予約ウィジェットは、セクションの下端から 48px 上に、中央配置（最大幅 880px） - ウィジェットのなか：項目を横に並べ、右端にボタン。項目のあいだは 1px solid #E2E8F0 の縦線 - スマホ：項目を縦に並べ、ボタンは全幅 ## デザイン - 写真の上に rgba(17, 28, 48, 0.3) を重ねる - 見出し：PC 44px / スマホ 28px、font-weight 500、セリフ体、色 #FFFFFF、中央揃え - ウィジェット：背景 #FFFFFF、角丸 16px、padding 12px、影 0 16px 40px rgba(27, 42, 68, 0.18) - 各項目：padding 8px 20px。ラベル 11px・font-weight 700・色 #5F6D84、値 16px・font-weight 700・色 #1B2A44 - ボタン：高さ 56px、左右padding 32px、角丸 12px、背景 #1463F0、文字 #FFFFFF・font-weight 700 ## 動作 - 日付の項目は input type="date"。チェックアウトは、チェックインより後の日付だけ選べるようにする - 過去の日付は選べないようにする - 人数は「−」「＋」のボタンで増減する - ボタンを押すと、選んだ条件をURLのパラメーターにして検索結果ページへ移動する ## アクセシビリティ - ウィジェットは form 要素（role="search"、aria-label="空室検索"）にする - 各項目に label を付ける - 見出しは h1 - 白い文字のコントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。