ファーストビューコード生成用
新商品のファーストビュー
商品写真を大きく、名前と価格・購入ボタンを添える。
用途・説明
ECサイトやブランドサイトで、新商品を1つ大きく紹介するファーストビューを作成します。商品写真を主役にして、商品名、短い説明、価格、カートに入れるボタンを最初の画面にまとめます。発売の告知、季節の限定商品、看板商品の紹介に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[商品名]- 例：二重構造の磁器マグ
[説明文]- 商品の魅力を1〜2文で
[価格]- 例：¥3,960（税込）
[ボタン文言]- 例：カートに入れる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「新商品のファーストビュー」を実装してください。 ## 表示内容 - 「NEW」のラベル - 商品名：[商品名] - 説明文：[説明文] - 価格：[価格] - ボタン：[ボタン文言]、その横に「詳しく見る」のリンク - 商品写真（仮の画像を置く） - 色違いがある場合の、色の丸（3つ） ## レイアウト - PC：左にテキスト（幅 45%）、右に商品写真（幅 55%） - 商品写真の後ろに、大きな円（#1463F0 の15%の淡い色、直径は写真の幅の85%）を敷く - スマホ：商品写真を上、テキストを下に - セクションの高さ 600px、背景 #F7F9FC ## デザイン - ラベル：11px、font-weight 700、letter-spacing 0.15em、背景 #1463F0、文字 #FFFFFF、padding 3px 12px、角丸 999px - 商品名：PC 40px / スマホ 26px、font-weight 700、line-height 1.4、色 #1B2A44 - 説明文：15px、line-height 1.9、色 #5F6D84 - 価格：28px、font-weight 700。「税込」は 13px、色 #5F6D84 - ボタン：高さ 56px、左右padding 36px、角丸 999px、背景 #1463F0、文字 #FFFFFF・font-weight 700 - 色の丸：直径 24px。選択中は外側に 2px の #1463F0 のリング ## 動作 - 色の丸を押すと、商品写真がその色のものに切り替わる - 在庫がない場合は、ボタンを「再入荷のお知らせを受け取る」に変える ## アクセシビリティ - 商品名は h1 - 色の丸は input type="radio" と label で実装し、色の名前を読み上げられるようにする - 商品写真の alt に、商品名と色を書く - 価格の「税込」は読み上げでも伝わるようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。