CTA・特徴紹介コード生成用
横に並べる導入の流れ
申し込みから利用開始までを、3ステップで。
用途・説明
申し込みから利用開始までの流れを、番号の丸と点線でつないで横に並べるセクションを作成します。「かんたんに始められる」ことを伝えたいときに向いています。各ステップに、かかる時間の目安を添える指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[セクション見出し]- 例：ご利用開始までの流れ
[ステップのリスト]- 見出し・説明・目安の時間のセットを3〜4つ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「横に並べる導入の流れ」のセクションを実装してください。 ## 表示内容 - セクション見出し：[セクション見出し] - ステップ： [ステップのリスト] ## レイアウト - PC：横に均等に並べ、番号の丸どうしを点線でつなぐ。各ステップは中央揃え - スマホ：縦に並べ、点線も縦にする。番号の丸を左、内容を右に置く - 各ステップは上から 番号の丸 → 見出し → 説明 → 目安の時間 ## デザイン - 番号の丸：48px、背景 #1463F0、文字 #FFFFFF・18px・font-weight 700 - 点線：太さ 2px、#1463F0 の55%の淡い色。丸の中心の高さを通す - 見出し：18px、font-weight 700、色 #1B2A44、丸の下 20px - 説明：14px、line-height 1.8、色 #5F6D84 - 目安の時間：12px、font-weight 700、背景は #1463F0 の9%の淡い色、文字色 #1463F0、角丸 999px、padding 4px 12px ## マークアップ - ol / li でマークアップ（順番があるため） - 番号は CSS のカウンターで表示する - 点線は疑似要素で描き、最後のステップには付けない ## アクセシビリティ - 見出しは h3 - 番号の丸は装飾として扱い、読み上げは ol の番号に任せる ## 出力形式 - [使用技術]のコードを1つ出力 - ステップを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。