FAQコード生成用
画像つきで答えるアコーディオン
回答のなかに画像を入れて、見て分かる説明に。
用途・説明
回答のなかに画像（画面のスクリーンショット、図、写真など）を入れられるアコーディオンを作成します。文章だけでは伝わりにくい操作の場所やサイズの違いを、見て分かるように説明できます。アプリの使い方、商品のサイズ、設置場所の案内などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答・画像の説明を3〜4組
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「画像つきで答えるアコーディオン」を実装してください。 ## 表示内容 [質問と回答] （各回答：説明の文章と、画像1枚。画像は仮のものを置く） ## レイアウト - 質問を縦に並べ、質問の間は 1px solid #E2E8F0 で区切る - 開いた回答のなか：PCは左に文章（幅 55%）、右に画像（幅 45%）。スマホは文章の下に画像 - 画像の下に、小さな説明文（キャプション） ## デザイン - 質問：16px、font-weight 700、色 #1B2A44、上下 padding 20px。左に「Q」（#1463F0）、右端に「＋／−」 - 回答の文章：15px、line-height 1.9、色 #47566E - 画像：角丸 8px、枠線 1px solid #E2E8F0、縦横比を保つ - 画像のなかで注目してほしい場所に、#1463F0 の丸い枠（太さ 3px）を重ねられるようにする（位置は % で指定） - キャプション：12px、色 #5F6D84 ## 動作 - 画像は、質問を開いたときにはじめて読み込む（loading="lazy"） - 画像を押すと、大きく表示する（背景を暗くして中央に表示。Esc または背景を押すと閉じる） - 画像の読み込みで回答の高さが変わらないよう、width と height を指定する ## アクセシビリティ - 画像の alt に、画像で伝えたい内容を書く（「設定画面の右上にある歯車のアイコン」のように） - 文章だけを読んでも手順が分かるようにする（画像に頼りきらない） - 拡大表示は dialog 要素を使い、閉じたらフォーカスを元の画像に戻す - 質問は h3 のなかの button 要素。aria-expanded を付ける ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。