カードコード生成用
アイコン横並びの特徴カード
左にアイコン、右に見出しと説明。縦に積んで読みやすく。
用途・説明
左にアイコン、右に見出しと説明文を置いた横長のカードを、縦に並べて作成します。機能の一覧、サポート内容、安心ポイントなど、項目が4つ以上あって説明もきちんと読ませたい場面に向いています。スマホでもレイアウトが変わらないので、どの画面でも同じ読み心地になります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[特徴]- 見出しと説明文を4〜6個
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「アイコン横並びの特徴カード」を実装してください。 ## 表示内容 [特徴] （各カード：アイコン、見出し、説明文） ## レイアウト - PC：2列、スマホ：1列。カードの間隔 16px - カード内は横並び：左にアイコン、右に見出しと説明文。間隔 16px - アイコンは上端でそろえる（説明文が長くても中央に下がらない） ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 20px - アイコンの枠：44×44px、角丸 10px、背景は #1463F0 の9%の淡い色 - アイコン：線のアイコン 22px、色 #1463F0、線の太さ 1.75px - 見出し：16px、font-weight 700、色 #1B2A44 - 説明文：14px、line-height 1.7、色 #5F6D84、見出しの下 4px ## アイコンの扱い - 内容に合う線のアイコンをインラインSVGで入れる。すべて同じ太さ・同じ角の丸みにそろえる - 合うアイコンがない項目は、チェックマークで統一する ## アクセシビリティ - 一覧は ul / li、見出しは h3 - アイコンは装飾なので aria-hidden="true" - 説明文と背景のコントラスト比 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 特徴を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。