カードコード生成用
アイコン付き特徴カード
アイコン・見出し・説明を揃えた、並べやすいカード。
用途・説明
サービスの特徴やメリットを3〜4個並べる、アイコン付きのカードグリッドを作成します。高さが揃い、テキスト量が違っても崩れないレイアウトが得られます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[特徴リスト]- 見出しと説明のペアを3〜4個
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 サービスの特徴を紹介する「アイコン付きカードグリッド」を実装してください。 ## 表示内容 [特徴リスト] （各カード：アイコン、見出し、説明文2〜3行） ## レイアウト - PC：3列（4項目なら4列）、タブレット：2列、スマホ：1列 - カード同士の間隔：24px - 各カードの高さは行ごとに揃える（CSS Grid を使用） - カード内は上から アイコン → 見出し → 説明 の順、左揃え ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 28px - 影はごく弱く（0 1px 2px rgba(0,0,0,0.04)） - アイコン：40px四方の角丸（10px）の枠に、#1463F0の10%透明度の背景、アイコン本体は#1463F0の線画 - 見出し：18px、font-weight 700、色 #1B2A44、アイコンとの間隔 16px - 説明：14px、line-height 1.8、色 #5F6D84 ## 状態 - カード全体がリンクの場合のみ、hover で枠線を#1463F0に変える - focus-visible 時は枠線と同じ色で2pxのアウトライン ## アクセシビリティ - セクションに見出し（h2）、カード見出しは h3 - アイコンは装飾扱い（aria-hidden="true"） - カード全体をリンクにする場合、リンクは見出しの <a> 1つにし、疑似要素でクリック範囲を広げる ## 出力形式 - [使用技術]のコードを1つ出力 - アイコンはインラインSVGで用意し、差し替え方をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。