CTA・特徴紹介コード生成用
縦に進むタイムライン型の流れ
相談から開始までを、縦の線に沿って説明する。
用途・説明
ご依頼から納品・利用開始までの流れを、縦の線と点でつないだタイムラインで見せるセクションを作成します。各ステップの説明を長めに書けるため、制作会社や工務店、士業など、進め方の説明が大切なサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ステップのリスト]- 見出しと説明文のセットを3〜5つ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「縦に進むタイムライン型の流れ」のセクションを実装してください。 ## 表示内容 [ステップのリスト] （各ステップ：「STEP 1」のラベル、見出し、説明文） ## レイアウト - 最大幅 720px、中央配置 - 左に縦線と点、その右に内容。ステップの間隔 40px - ラベルと見出しは横に並べる（スマホでは縦） ## デザイン - 縦線：太さ 2px、色は #1463F0 の25%の淡い色。最初の点から最後の点までをつなぐ - 点：16px の円、背景 #1463F0、白いふち（4px） - ラベル：12px、font-weight 700、letter-spacing 0.1em、色 #1463F0 - 見出し：20px、font-weight 700、色 #1B2A44 - 説明文：15px、line-height 1.9、色 #5F6D84、見出しの下 8px - お客様に用意してもらうものがあるステップには、淡い背景（#F7F9FC）の小さな枠で「ご用意いただくもの」を添えられるようにする ## 動作 - スクロールに合わせて、縦線が上から #1463F0 で塗られていく ## マークアップ - ol / li でマークアップ。見出しは h3 - 縦線と点は疑似要素で描く ## アクセシビリティ - 線が塗られる動きは prefers-reduced-motion で無効化 - 「STEP 1」のラベルは、読み上げで「ステップ1」と伝わるようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。