CTA・特徴紹介コード生成用
中央の画像を特徴で囲むレイアウト
真ん中にスマホの画面、左右に特徴を2つずつ。
用途・説明
中央にスマホやプロダクトの画像を置き、その左右に特徴を2つずつ並べるセクションを作成します。アプリや、形のある商品の紹介に向いています。画像を主役にしながら、4つの特徴を一度に見せられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[中央の画像]- アプリの画面や商品の写真
[特徴のリスト]- 見出しと説明文のセットを4つ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「中央の画像を特徴で囲むレイアウト」を実装してください。 ## 表示内容 - 中央の画像：[中央の画像] - 特徴： [特徴のリスト] ## レイアウト - PC：3カラム。左に特徴を2つ（右揃え）、中央に画像、右に特徴を2つ（左揃え） - カラムの間隔 48px、上下中央揃え。左右それぞれの特徴の間隔 48px - スマホ：画像 → 特徴4つ の順に縦並び、すべて左揃え - 中央の画像は幅 280px ## デザイン - 画像：スマホの場合は、角丸 36px の濃い色（#1B2A44）の枠に入れる。影 0 24px 48px rgba(27,42,68,0.18) - 各特徴の上に、アイコンの枠（48px、角丸 12px、背景は #1463F0 の9%の淡い色）。アイコンは線のアイコン 24px・色 #1463F0 - 見出し：18px、font-weight 700、色 #1B2A44、アイコンの下 16px - 説明文：14px、line-height 1.8、色 #5F6D84、見出しの下 8px - 左のカラムでは、アイコンも右に寄せる ## マークアップ - HTML の順番は 画像 → 特徴1〜4 にし、PC での左右の配置は CSS Grid で行う（読み上げの順番を保つため） - 特徴は ul / li、見出しは h3 - アイコンは aria-hidden="true" ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。