CTA・特徴紹介コード生成用
画像と文章を交互に並べる特徴紹介
左右を入れ替えながら、特徴を1つずつ丁寧に。
用途・説明
画像と文章を左右交互に並べて、特徴を1つずつ紹介するセクションを作成します。それぞれの特徴にしっかりスペースを使えるため、画面のスクリーンショットや写真で説明したいサービスに向いています。サービス紹介ページの定番の構成です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[特徴のリスト]- 見出し・説明文・画像のセットを3つ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「画像と文章を交互に並べる特徴紹介」を実装してください。 ## 表示内容 [特徴のリスト] （各ブロック：ラベル「POINT 1」、見出し、説明文、画像） ## レイアウト - 各ブロックは2カラム。1つ目は左に画像・右に文章、2つ目は左右を逆に、と交互にする - カラムの間隔 64px、上下中央揃え。ブロックどうしの間隔 PC 96px / スマホ 56px - スマホでは常に 画像 → 文章 の順に縦並び - 最大幅 1080px、中央配置 ## デザイン - ラベル：12px、font-weight 700、letter-spacing 0.1em、背景は #1463F0 の9%の淡い色、文字色 #1463F0、角丸 999px - 見出し：PC 28px / スマホ 22px、font-weight 700、line-height 1.5、色 #1B2A44 - 説明文：16px、line-height 2、色 #5F6D84 - 画像：縦横比 4:3、角丸 16px、object-fit: cover - ラベルと見出しの間 12px、見出しと説明文の間 16px ## マークアップ - 左右の入れ替えは CSS（order または direction）で行い、HTML の順番は常に 画像 → 文章 にする - 各ブロックは section、見出しは h3 - 画像には内容を説明する alt を入れる。width と height を指定してレイアウトのずれを防ぐ - 2つ目以降の画像は loading="lazy" ## 出力形式 - [使用技術]のコードを1つ出力 - 特徴を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。