カードコード生成用
カテゴリ入口のタイルカード
アイコンと名前だけの小さなタイルで、行き先を選びやすく。
用途・説明
カテゴリやメニューへの入口を、アイコンと名前だけの小さなタイルで並べて作成します。ECサイトの「カテゴリから探す」、ヘルプセンターの入口、ツール集のトップなど、選択肢が6〜12個ある場面に向いています。件数を小さく添えると、中身の量も伝わります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[カテゴリ一覧]- カテゴリ名と件数を6〜12個
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「カテゴリ入口のタイルカード」を実装してください。 ## 表示内容 [カテゴリ一覧] （各タイル：アイコン、カテゴリ名、件数） ## レイアウト - PC：6列、タブレット：4列、スマホ：3列。タイルの間隔 12px - タイル内は中央揃えで、上から アイコン → カテゴリ名 → 件数 - タイルは正方形に近い形にし、すべて同じ高さにそろえる ## デザイン - タイル：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 16px 8px - アイコン：線のアイコン 28px、色 #1463F0、線の太さ 1.75px - カテゴリ名：14px、font-weight 700、色 #1B2A44、1行で収める（長い名前は2行まで） - 件数：11px、色 #5F6D84 - hover：枠線を #1463F0 に、背景を #1463F0 の9%の淡い色に ## アクセシビリティ - 一覧は nav 要素（aria-label="カテゴリ"）のなかの ul / li - タイル全体を a 要素にする。タップ領域は 44×44px 以上 - アイコンは aria-hidden="true"。件数は「（24件）」のように読み上げられる形にする - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - カテゴリを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。