CTA・特徴紹介コード生成用
ジグザグに進むステップ
曲線でつないで、道のりのように見せる。
用途・説明
ステップのカードを上下にずらして並べ、点線の曲線でつなぐセクションを作成します。まっすぐ並べるよりも動きがあり、道のりを進んでいく印象になります。制作の流れや、学習のステップなどに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ステップのリスト]- 見出しと短い説明のセットを3〜5つ
[使用技術]- 例：HTML/CSS + SVG、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ジグザグに進むステップ」のセクションを実装してください。 ## 表示内容 [ステップのリスト] （各カード：番号「01」、見出し、短い説明） ## レイアウト - PC：カードを横に並べ、奇数番目は上、偶数番目は下に 48px ずらす - カードの中心どうしを、なめらかな曲線の点線でつなぐ（カードの後ろに置く） - スマホ：ずらさずに縦1列に並べ、線はまっすぐな縦の点線にする ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 20px、中央揃え - 番号：14px、font-weight 700、色 #1463F0 - 見出し：18px、font-weight 700、色 #1B2A44 - 説明：13px、line-height 1.7、色 #5F6D84 - 点線：太さ 2px、#1463F0 の55%の淡い色、stroke-dasharray 6 6 ## 実装 - 曲線は SVG の path で描く。カードの数が変わっても形が保てるよう、viewBox と preserveAspectRatio="none" を使って横幅に合わせて伸縮させる - SVG は position: absolute でカードの後ろに敷く ## 動作 - 画面に入ったときに、点線が左から右へ描かれ、カードが順に現れる（全体で 1.2秒） ## アクセシビリティ - ol / li でマークアップ。見出しは h3 - SVG は aria-hidden="true" - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。