FAQコード生成用
カテゴリから探す入口カード
「料金」「使い方」などの入口を、アイコン付きで並べる。
用途・説明
ヘルプセンターやFAQページの最初に置く、カテゴリの入口カードを作成します。アイコン、カテゴリ名、どんな質問があるかの一言、件数を載せます。質問が多いサイトで、まず「どの種類の質問か」から探してもらうための入口になります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[カテゴリ]- カテゴリ名・説明・件数を4〜6個
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「カテゴリから探す入口カード」を実装してください。 ## 表示内容 - 見出し：カテゴリから探す [カテゴリ] （各カード：アイコン、カテゴリ名、説明、件数） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列（スマホでは横並びの小さなカードにする）。カードの間隔 16px - PCのカード内は上から アイコン → カテゴリ名 → 説明 → 件数 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px - アイコンの枠：48×48px、角丸 12px、背景は #1463F0 の9%の淡い色。アイコンは線のアイコン 24px・色 #1463F0 - カテゴリ名：16px、font-weight 700、色 #1B2A44 - 説明：13px、line-height 1.7、色 #5F6D84（例：プランの違い、支払い方法、領収書について） - 件数：12px、font-weight 700、色 #1463F0（例：8件の質問） - hover：枠線を #1463F0 にし、カードを 2px 持ち上げる ## アクセシビリティ - nav 要素（aria-label="質問のカテゴリ"）のなかの ul / li - カテゴリ名は h3 のなかの a 要素にし、カード全体をクリックできるようにする - アイコンは aria-hidden="true" - hover の動きは prefers-reduced-motion で無効化 - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - カテゴリを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。