CTA・特徴紹介コード生成用
大きな番号で見せる3つの理由
「01 02 03」の番号で、選ばれる理由を並べる。
用途・説明
大きな番号を添えて、選ばれる理由や強みを3つ並べるセクションを作成します。カードで囲まず、番号と線だけで構成するため、すっきりした印象になります。コーポレートサイトやサービスの紹介ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[セクション見出し]- 例：選ばれる3つの理由
[理由のリスト]- 見出しと説明文のセットを3つ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはタイポグラフィに強いWebデザイナーです。 以下の条件で「大きな番号で見せる3つの理由」のセクションを実装してください。 ## 表示内容 - セクション見出し：[セクション見出し] - 理由： [理由のリスト] ## レイアウト - PC：3列、間隔 40px。スマホ：1列、間隔 40px - 各ブロックは上から 番号 → 線 → 見出し → 説明文 - セクション見出しは中央揃え、ブロックの上 56px ## デザイン - 番号：「01」「02」「03」。56px、セリフ体、line-height 1、色は #1463F0 の25%の淡い色 - 線：番号の下 12px に、#1463F0 の線（太さ 2px、幅はブロックいっぱい） - 見出し：20px、font-weight 700、line-height 1.5、色 #1B2A44、線の下 16px - 説明文：15px、line-height 1.9、色 #5F6D84、見出しの下 12px - カードの枠や背景は付けない ## マークアップ - ol / li でマークアップ（順番があるため） - 番号は装飾として CSS のカウンターで表示し、読み上げは ol の番号に任せる - 各見出しは h3 ## 動作 - 画面に入ったときに、左のブロックから順に下から 12px 浮き上がって表示する（0.5秒、0.12秒ずつずらす） - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。