見出しコード生成用
マーカーで強調する見出し
伝えたい言葉だけに、蛍光ペンのような線を引く。
用途・説明
見出しの中のキーワードだけに、蛍光ペンで引いたような太い下線を入れる見出しです。LPのキャッチやメリットの訴求など、一文の中で特に読ませたい言葉があるときに使います。2行に折り返しても線が途切れない実装方法を指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 例：毎日の作業を、もっとかんたんに。
[強調する言葉]- 見出しの中でマーカーを引く部分。例：もっとかんたん
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたは経験豊富なWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「マーカーで強調する見出し」を実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - マーカーを引く部分：[強調する言葉] ## マーカーの描き方 - 強調する部分を span で囲み、background に linear-gradient を指定して描く （例：上から60%は透明、下の40%だけ #FFE38A） - 下線（border-bottom や text-decoration）ではなく背景で描き、文字の下半分に重なるようにする - 強調部分が2行に折り返しても、各行にマーカーが引かれること（box-decoration-break: clone を指定） - マーカーの左右に 0.1em ほどの余白を付け、文字の端ぴったりで切れないようにする ## デザイン - 見出し：PC 36px / スマホ 26px、font-weight 700、line-height 1.6、色 #1B2A44 - 行間はマーカー同士が重ならない広さを確保する - マーカーを引くのは1つの見出しにつき1か所まで ## 動きをつける場合（任意） - 画面に入ったときに、マーカーが左から右へ 0.6秒で伸びるアニメーションを付ける（background-size を変化させる） - prefers-reduced-motion のときは、最初から引かれた状態で表示する ## アクセシビリティ - 強調に意味がある場合は span ではなく strong 要素を使う - マーカーの上の文字と #FFE38A のコントラスト比が 4.5:1 以上になること - 色だけに頼らず、強調部分は文字の太さでも差がつくようにする ## 出力形式 - [使用技術]のコードを1つ出力 - マーカーの太さ（何%から色を付けるか）と色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。