見出しコード生成用
下線アクセントの見出し
シンプルな線で、伝えたい言葉を印象的に。
用途・説明
セクション見出しの下に短いアクセントラインを引き、ページ全体にリズムをつくる見出しコンポーネントを作ります。コーポレートサイトやサービス紹介ページのセクション見出しに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：Design for you.
[サブテキスト]- 見出しの下の補足文。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたは経験豊富なWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「下線アクセントのセクション見出し」を実装してください。 ## 目的 - ページ内の各セクションの始まりを明確にし、読み手が内容を拾いやすくする - 装飾は下線1本に絞り、落ち着いた印象を保つ ## 表示内容 - 見出し：[見出しテキスト] - サブテキスト：[サブテキスト] ## レイアウト - 見出しは左揃え。見出しのすぐ下に下線を配置する - 下線の長さは見出し幅の100%ではなく、見出しテキスト幅にぴったり合わせる - 下線の太さは見出し文字サイズの約10%（目安4〜6px）、角は2pxの角丸 - サブテキストは下線から16px下に配置 ## 配色 - 見出し文字：#1B2A44 - 下線：#1463F0 - サブテキスト：#5F6D84 - 背景色は指定しない（配置先の背景を活かす） ## 余白・タイポグラフィ - 見出し：PC 36px / スマホ 26px、font-weight 700、line-height 1.3 - 欧文見出しの場合はセリフ体、和文の場合は読みやすいゴシック体 - 見出しと下線の間：8px、セクション上の余白：PC 96px / スマホ 64px ## レスポンシブ・アクセシビリティ - 見出しが2行に折り返しても下線が最終行の下に正しく表示されること - 見出しは適切な見出しレベル（h2）でマークアップする - 下線は装飾なので疑似要素で描き、スクリーンリーダーに読み上げさせない - 文字色と背景のコントラスト比は4.5:1以上 ## 出力形式 - [使用技術]で、コピーしてそのまま使えるコードを1つ出力 - CSSはクラス名を付けて他の要素に影響しないようにする - 最後に、色やサイズを変更する箇所を箇条書きで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。