FAQコード生成用
チャット風のQ&A
質問と回答を吹き出しで並べた、会話のようなQ&A。
用途・説明
質問を右、回答を左の吹き出しにして、会話のように見せるQ&Aを作成します。はじめての人向けの案内、やわらかい雰囲気のサービス、採用ページの「よくある質問」などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問と回答]- 質問・回答を3〜5組
[回答者の名前]- 例：サポート担当
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「チャット風のQ&A」を実装してください。 ## 表示内容 [質問と回答] （質問の吹き出し、回答の吹き出し、回答者のアイコンと名前：[回答者の名前]） ## レイアウト - 質問は右寄せ、回答は左寄せで交互に並べる - 吹き出しの最大幅は、コンテナの 80% - 回答の左に、直径 36px の丸いアイコン - 組と組の間隔 28px、質問と回答の間隔 12px ## デザイン - 質問の吹き出し：背景 #1463F0、文字 #FFFFFF、15px、font-weight 700、padding 12px 18px、角丸 18px（右下だけ 4px） - 回答の吹き出し：背景 #FFFFFF、枠線 1px solid #E2E8F0、文字 #1B2A44、15px、line-height 1.8、角丸 18px（左下だけ 4px） - 回答者の名前：12px、色 #5F6D84、吹き出しの上 ## アクセシビリティ - 見た目は会話でも、質問は h3、回答はその下の段落としてマークアップする（dl / dt / dd でもよい） - 左右の配置は CSS だけで行い、HTMLの順番は 質問 → 回答 のままにする - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 - アイコンは装飾なら alt を空にする ## 出力形式 - [使用技術]のコードを1つ出力 - 質問と回答を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。