FAQコード生成用
用語集のリスト
分かりにくい言葉を、五十音の見出しつきで説明する。
用途・説明
サービスや業界で使われる専門用語を、五十音順の見出しで並べる用語集を作成します。FAQの回答やマニュアルのなかで出てくる言葉を、ここにまとめて説明しておけます。上部の「あ・か・さ…」のリンクで、目的の行へすぐ移動できます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[用語と説明]- 用語・読みがな・説明を10個ほど
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「用語集のリスト」を実装してください。 ## 表示内容 [用語と説明] （各項目：用語、読みがな、説明） ## レイアウト - 上部：五十音の行（あ・か・さ・た・な・は・ま・や・ら・わ・英数字）へのリンクを横に並べる - 下部：行ごとに見出し（あ行、か行…）を付け、そのなかに用語を五十音順で並べる - 各用語：PCは左に用語と読みがな（幅 30%）、右に説明。スマホは縦に並べる ## デザイン - 行へのリンク：36×36px の丸、枠線 1px solid #DCE4F0、文字 14px・font-weight 700。用語がない行は、文字を #CBD5E1 にして押せなくする - 行の見出し：20px、font-weight 700、色 #1463F0、下に 2px solid #1463F0 - 用語：16px、font-weight 700、色 #1B2A44 - 読みがな：12px、色 #5F6D84、用語の下 - 説明：15px、line-height 1.9、色 #47566E - 用語の間は 1px solid #E2E8F0、上下 padding 20px ## 動作 - 行へのリンクを押すと、その行の見出しまで移動する - 用語の並び順は、読みがなをもとに自動で決める - 説明のなかにほかの用語が出てきたら、その用語へリンクできるようにする ## アクセシビリティ - 用語と説明は dl / dt / dd でマークアップする - 行へのリンクは nav 要素（aria-label="五十音の索引"）にまとめる - 用語がない行のリンクは、aria-disabled="true" にする - 各用語に id を付け、ほかのページからその用語へ直接リンクできるようにする ## 出力形式 - [使用技術]のコードを1つ出力 - 用語を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。