カードコード生成用
番号付きのステップカード
番号・見出し・説明のカードを並べて、流れを見せる。
用途・説明
申し込みの流れ、使い方、サービス導入までの手順を、番号付きのカードで順に見せます。3〜4枚を横に並べ、スマホでは縦に積みます。カードの間に矢印を入れて、進む方向が分かるようにしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ステップの内容]- 各ステップの見出しと説明を3〜4件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「番号付きのステップカード」を実装してください。 ## 表示内容 [ステップの内容] （各カード：番号、見出し、説明） ## レイアウト - PC：3〜4列、スマホ：1列。カード間隔 24px - カードとカードの間に、進む方向の矢印（PCは右向き、スマホは下向き） ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px - 番号：直径 36px の円、背景 #1463F0、文字 #FFFFFF、15px、font-weight 700 - 見出し：17px、font-weight 700、色 #1B2A44。番号の下 14px - 説明：14px、line-height 1.8、色 #5F6D84。見出しの下 8px - 矢印：#1463F0 の40%程度の淡い色 ## 状態 - 動きは付けない（順番に読むことを優先する） ## マークアップ・アクセシビリティ - 順番に意味があるので ol / li でマークアップし、見出しは h3 - 番号はCSSカウンターで表示するか、テキストとして入れる場合は ol の番号と二重に読み上げられないようにする - 矢印は装飾なので aria-hidden="true" を付ける ## 出力形式 - [使用技術]のコードを1つ出力 - ステップを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。