CTA・特徴紹介コード生成用
アコーディオンと画像が連動する特徴紹介
開いた項目に合わせて、横の画像が変わる。
用途・説明
左のアコーディオンで特徴を1つ開くと、右の画像がその内容に切り替わるセクションを作成します。常に1つだけ開いた状態にし、数秒ごとに自動で次へ進む動きも付けられます。機能紹介をコンパクトにまとめたいときに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[特徴のリスト]- 見出し・説明文・画像のセットを3〜4つ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「アコーディオンと画像が連動する特徴紹介」を実装してください。 ## 表示内容 [特徴のリスト] ## レイアウト - PC：2カラム。左（45%）にアコーディオン、右（55%）に画像。間隔 56px、上下中央揃え - スマホ：アコーディオンの開いた項目のなかに、その画像を表示する（右の画像エリアは使わない） ## デザイン - 項目：上下padding 20px、下に区切り線 1px solid #E2E8F0 - 見出し：18px、font-weight 700、色 #1B2A44。開いている項目は #1463F0 - 説明文：15px、line-height 1.9、色 #5F6D84、見出しの下 8px - 開いている項目の下に、進み具合を示す細い線（高さ 2px、色 #1463F0）を表示する - 画像：角丸 16px、縦横比 4:3、背景は #1463F0 の15%の淡い色 ## 動作 - 常に1つだけ開く。ほかの項目を押すと、開いていた項目は閉じる - 開閉は 0.3秒。画像は 0.3秒のフェードで切り替える - 6秒ごとに自動で次の項目へ進み、進み具合の線が左から伸びる - 項目を自分で押したとき、または hover・フォーカスしているあいだは、自動の切り替えを止める ## アクセシビリティ - 見出しは button 要素（h3 のなか）で、aria-expanded と aria-controls を設定する - 自動の切り替えは prefers-reduced-motion のときは行わない - 画像には alt を入れる ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。