FAQコード生成用
手順で答えるQ&A
「どうやるの？」に、番号付きの手順で答える。
用途・説明
「解約するには？」「パスワードを変えるには？」のような、やり方を聞く質問に、番号付きの手順で答えるQ&Aを作成します。文章で長く説明するより、ひとつずつの操作に分けたほうが迷いません。操作マニュアルやヘルプページのFAQに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[質問]- 例：プランを変更するには？
[手順]- 3〜5ステップ
[補足]- 注意点があれば。例：変更は次回の更新日から適用されます
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「手順で答えるQ&A」を実装してください。 ## 表示内容 - 質問：[質問] - 回答の最初に、結論の1文（例：設定画面から、いつでも変更できます。） - 手順： [手順] - 補足：[補足] ## レイアウト - 質問 → 結論の1文 → 手順 → 補足 の順に縦に並べる - 手順は、左に番号の丸、右に説明。番号の丸どうしを縦の線でつなぐ ## デザイン - 質問：18px、font-weight 700、色 #1B2A44。左に「Q」（#1463F0） - 結論の1文：15px、font-weight 700、色 #1B2A44 - 番号の丸：直径 28px、背景 #1463F0、数字 #FFFFFF・13px・font-weight 700 - 丸をつなぐ線：幅 2px、#1463F0 の25%の淡い色 - 手順の説明：15px、line-height 1.8、色 #47566E。画面上のボタン名は「」でくくり、太字にする - 手順の間隔 16px - 補足：背景 #F7F9FC、角丸 8px、padding 12px 16px、13px、色 #5F6D84。先頭に「ⓘ」のアイコン ## アクセシビリティ - 手順は ol / li でマークアップし、番号の丸は装飾として CSS のカウンターで表示する - 丸をつなぐ線は疑似要素で描く - 補足のアイコンは aria-hidden="true" - 手順にスクリーンショットを入れる場合の、alt の書き方をコメントで補足する ## 出力形式 - [使用技術]のコードを1つ出力 - 手順を配列で渡して繰り返し表示する形にする - HowTo の構造化データを JSON-LD で出力する例をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。