カードコード生成用
ビフォーアフターの比較カード
導入前と導入後を左右に並べ、変化をひと目で。
用途・説明
「これまで」と「これから」を左右に並べて、変化を伝えるカードを作成します。サービス導入の効果、リフォームや施術の事例、業務改善の紹介などに向いています。導入後の側だけ色を付けて目立たせ、あいだに矢印を置いて流れを示します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[導入前]- 困りごとを2〜3個
[導入後]- 導入前に対応する変化を同じ数だけ
[ラベル]- 例：これまで／これから、Before／After
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ビフォーアフターの比較カード」を実装してください。 ## 表示内容 - ラベル：[ラベル] - 導入前： [導入前] - 導入後： [導入後] ## レイアウト - PC：左右2枚のカードを並べ、あいだに右向きの矢印（丸のなか）を置く - スマホ：上下に並べ、矢印は下向きにする - 2枚のカードの高さをそろえる ## デザイン - 導入前のカード：背景 #F7F9FC、枠線 1px solid #E2E8F0、ラベルと文字は #5F6D84 - 導入後のカード：背景 #FFFFFF、枠線 2px solid #1463F0、ラベルは #1463F0 - 共通：角丸 12px、padding 24px。ラベル 12px・font-weight 700・letter-spacing 0.1em - 項目：15px、line-height 1.7。導入前は「×」ではなくグレーの「−」、導入後は #1463F0 のチェックマークを行頭に置く - 矢印：40px の円、背景 #1463F0、矢印は #FFFFFF ## アクセシビリティ - それぞれのカードに見出し（h3）を付け、項目は ul / li にする - 色だけで違いを伝えない（ラベルと行頭の記号でも区別する） - 矢印は装飾なので aria-hidden="true" ## 出力形式 - [使用技術]のコードを1つ出力 - 導入前・導入後の項目を配列で渡せるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。