見出しコード生成用
番号付きのセクション見出し
大きな数字で順番を示し、読み進めやすく。
用途・説明
「01」「02」のような大きな番号と英字ラベルを添えたセクション見出しを作ります。サービスの特徴や選ばれる理由、導入の流れなど、順番に読んでほしい内容が続くページに向いています。番号は装飾として扱い、読み上げ時に邪魔にならないよう指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[番号]- 例：01
[英字ラベル]- 例：OUR STRENGTH
[見出しテキスト]- 例：選ばれる3つの理由
[サブテキスト]- 見出しの下の補足文。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたは経験豊富なWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「番号付きのセクション見出し」を実装してください。 ## 目的 - 複数のセクションが続くページで、いま何番目の話かをひと目で伝える - 番号を大きく淡く置き、見出し本体の読みやすさは損なわない ## 表示内容 - 番号：[番号] - 英字ラベル：[英字ラベル] - 見出し：[見出しテキスト] - サブテキスト：[サブテキスト] ## レイアウト - 左に番号、その右に「英字ラベル → 見出し → サブテキスト」を縦に並べる - 番号と見出しブロックの間隔は 24px、上端を揃える - スマホ（640px未満）では番号を見出しブロックの上に移し、縦1列にする ## デザイン - 番号：PC 72px / スマホ 48px、font-weight 700、line-height 1、色は#1463F0の25%程度の淡い色 - 英字ラベル：12px、font-weight 700、letter-spacing 0.2em、色 #1463F0 - 見出し：PC 32px / スマホ 24px、font-weight 700、line-height 1.4、色 #1B2A44 - サブテキスト：15px、line-height 1.8、色 #5F6D84、見出しとの間隔 12px ## アクセシビリティ - 見出しは h2 でマークアップし、番号と英字ラベルは h2 の外に置く - 番号は装飾なので aria-hidden="true" を付ける - 淡い番号の上に文字を重ねない（コントラストを確保する） ## 出力形式 - [使用技術]のコードを1つ出力 - 色とサイズはCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。