見出しコード生成用
英字と日本語の2段見出し
大きな英字に小さな日本語を添える、サイトの定番。
用途・説明
大きな英字の下に、小さな日本語の見出しを添えた2段組みの見出しです。コーポレートサイトやサービスサイト、店舗サイトのセクション見出し（SERVICE／サービス、ABOUT／私たちについて など）として広く使われる形です。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：サービス
[英字]- 見出しを表す英単語。例：SERVICE、ABOUT、NEWS
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「英字と日本語の2段見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - 英字：[英字] ## デザイン - 英字：PC 40px / スマホ 30px、font-weight 700、letter-spacing 0.06em、line-height 1.1、色 #1463F0 - 日本語：14px、font-weight 700、letter-spacing 0.1em、色 #1B2A44。英字の下 8px - 左揃え。中央揃えで使う場合の指定も併記する ## 余白 - 上の余白 80px、下の余白 32px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - 見出し要素（h2）の中身は日本語にし、英字は装飾として span で添える - 英字は大文字で入力せず、CSSの text-transform: uppercase で大文字にする - 英字と日本語の順番は、見た目は英字が上でも、HTMLでは意味が通る順にする ## アクセシビリティ - 見出しは h2 でマークアップする（置く場所の階層に合わせて変更してよい） - 英字が日本語と同じ意味の飾りである場合は、aria-hidden="true" を付けて二重に読み上げられないようにする ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - 英字の色・文字サイズ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。