カードコード生成用
アイコン付きのリンクカード
アイコン・見出し・説明・矢印を1行に並べた案内カード。
用途・説明
アイコン、見出し、短い説明、右端の矢印を横1行に並べたリンクカードを作成します。ヘルプセンターの入口、サービス一覧、「次に読む」案内など、別のページへ進む選択肢を並べる場面に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[リンクデータの例]- 見出し・説明・リンク先・アイコンを3〜4件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「アイコン付きのリンクカード」を実装してください。 ## 表示内容 [リンクデータの例] （各カード：アイコン、見出し、説明、矢印） ## レイアウト - PC：2列、スマホ：1列。カード間隔 16px - カード内は左から アイコン → 見出しと説明 → 矢印（右端） ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 18px 20px - アイコン：44px 四方の角丸（10px）の箱、背景は #1463F0 の9%、アイコン本体は 22px・線の太さ 1.8px・色 #1463F0 - 見出し：16px、font-weight 700、色 #1B2A44 - 説明：13px、line-height 1.6、色 #5F6D84、1行で省略 - 矢印：18px、色 #1463F0 ## 状態 - hover：枠線を #1463F0 に、矢印を右へ 3px 動かす。transition 200ms - focus-visible：カード全体を 2px のアウトラインで囲む ## マークアップ・アクセシビリティ - 一覧は ul / li。カード全体を1つの a 要素にする - アイコンと矢印は装飾なので aria-hidden="true" を付ける - タップ領域は高さ 44px 以上 - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - リンクデータを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。