カードコード生成用
導入事例カード
成果の数字を大きく見せる、事例紹介のカード。
用途・説明
導入事例やお客様の成功事例を紹介するカードを作成します。「作業時間を50%削減」のような成果の数字を大きく見せ、会社名と短い説明を添えます。サービスサイトの事例一覧や、トップページの実績紹介に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[事例データの例]- 会社名・業種・成果の数字・ひとこと説明を2〜3件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「導入事例カード」を実装してください。 ## 表示内容 [事例データの例] （各カード：ロゴ、業種、成果の数字、説明、会社名） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カード間隔 24px - カード内は上から ロゴと業種 → 成果の数字 → 説明 → 「事例を読む」リンク ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px - ロゴ：高さ 28px に収める。業種は 11px、色 #5F6D84 - 成果の数字：36px、font-weight 700、色 #1463F0。前後の言葉（「作業時間を」「削減」）は 14px、font-weight 700、色 #1B2A44 - 説明：14px、line-height 1.8、色 #5F6D84、最大3行で省略 - 「事例を読む」：13px、font-weight 700、色 #1463F0、右に矢印。カードの下端に揃える ## 状態 - hover：カードをわずかに持ち上げる（translateY(-2px) と、うすい影） - focus-visible：カード全体を 2px のアウトラインで囲む ## マークアップ・アクセシビリティ - 一覧は ul / li、各カードは article 要素、成果を含む一文を h3 にする - リンクは1つだけにし、疑似要素でクリック範囲をカード全体に広げる - ロゴの alt には会社名を入れる - アニメーションは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 事例データを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。