FAQコード生成用
丸いプラスボタンのアコーディオン
右端の丸い＋が回って×になる、やわらかい印象の開閉。
用途・説明
質問の右端に丸い「＋」ボタンを置き、開くと45度回って「×」になるアコーディオンを作成します。線で区切るだけのFAQよりも、押せることが分かりやすく、やわらかい印象になります。サロン、教室、暮らしまわりのサービスなどのFAQに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を4〜6組
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「丸いプラスボタンのアコーディオン」を実装してください。 ## 表示内容 [質問と回答] ## レイアウト - 質問を縦に並べ、質問の間は 1px solid #E2E8F0 で区切る - 各行：左に質問、右端に丸いボタン（上下中央） - 回答は質問の下に開く。右端のボタンの幅ぶん、右に余白をとる ## デザイン - 質問：16px、font-weight 700、色 #1B2A44、上下 padding 20px - 丸いボタン：直径 32px、背景は #1463F0 の9%の淡い色、「＋」の線は #1463F0・太さ 2px・長さ 12px - 開いたとき：丸の背景 #1463F0、線は #FFFFFF。丸ごと 45度回転して「×」に見せる（0.2秒） - 回答：15px、line-height 1.9、色 #5F6D84、下 padding 20px - hover：質問の文字色を #1463F0 に ## 動作 - 質問の行のどこを押しても開閉する - 開閉は高さのアニメーション（0.25秒）。grid-template-rows を 0fr → 1fr に変える方法で実装する - 複数の質問を同時に開いたままにできる ## アクセシビリティ - 質問は h3 のなかの button 要素。aria-expanded と aria-controls を付ける - 回答の領域には role="region" と aria-labelledby を付ける - 丸いボタンは装飾として button のなかに置き、aria-hidden="true" にする - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。