見出しコード生成用
英字ラベル付きの中央見出し
小さな英字と短いバーで、セクションの始まりを整える。
用途・説明
小さな英字ラベル・見出し・短いアクセントバー・リード文を中央揃えで重ねる、定番のセクション見出しです。機能紹介や料金、お客様の声など、カードやグリッドが続くセクションの頭に置くと全体が引き締まります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[英字ラベル]- 例：FEATURES
[見出しテキスト]- 例：できること
[リード文]- 見出しの下に添える1〜2文
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「英字ラベル付きの中央揃えセクション見出し」を実装してください。 ## 表示内容 - 英字ラベル：[英字ラベル] - 見出し：[見出しテキスト] - リード文：[リード文] ## レイアウト - すべて中央揃えで、上から 英字ラベル → 見出し → アクセントバー → リード文 の順 - リード文の最大幅は 36em。長い場合も1行が長くなりすぎないようにする - 見出しブロックの下に 48px（スマホ 32px）の余白を取り、次のコンテンツと区切る ## デザイン - 英字ラベル：12px、font-weight 700、letter-spacing 0.28em、色 #1463F0 - 見出し：PC 34px / スマホ 26px、font-weight 700、line-height 1.4、色 #1B2A44 - アクセントバー：幅 40px、高さ 4px、角丸 9999px、色 #1463F0、見出しの 16px 下 - リード文：15px、line-height 1.9、色 #5F6D84、バーの 20px 下 ## 文字組み - 見出しが2行になるときは、行の長さが極端に偏らないようにする（text-wrap: balance） - リード文は中央揃えのままだと読みにくいので、3行以上になる場合は左揃えに切り替える案もコメントで示す ## アクセシビリティ - 見出しは h2、英字ラベルは p 要素。英字ラベルが見出しの単なる英訳なら aria-hidden="true" を付ける - アクセントバーは疑似要素で描く ## 出力形式 - [使用技術]のコードを1つ出力 - 最後に、色・余白を変更する箇所を箇条書きで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。