見出しコード生成用
斜線のあしらい付き見出し
「＼ ／」で囲んだひとことを添えて、親しみやすく。
用途・説明
見出しの上に、左右を斜めの線で挟んだ短いひとことを添える見出しです。日本のLPやキャンペーンページでよく使われる表現で、呼びかけるような親しみやすさが出ます。斜線は記号の文字ではなくCSSで描くので、フォントによるずれが起きません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ひとこと]- 斜線で挟む短い言葉。例：はじめての方へ
[見出しテキスト]- 例：3分でわかる、使い方ガイド
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはLP制作の経験が豊富なWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「斜線のあしらい付き見出し」を実装してください。 ## 表示内容 - ひとこと（斜線で挟む）：[ひとこと] - 見出し：[見出しテキスト] ## レイアウト - 中央揃えで、上にひとこと、その下に見出し - ひとことの左右に、外側へ開く斜めの線を1本ずつ置く（左は「＼」、右は「／」の向き） - ひとことと見出しの間隔は 8px ## 斜線の描き方 - 「＼」「／」の文字は使わず、::before と ::after で幅 2px・高さ 1.2em の線を描き、transform: rotate で左は -25deg、右は 25deg 傾ける - ひとことを display: inline-flex、align-items: center にし、文字と線の間隔は 12px - 線の色は #1463F0、端は角丸にする ## デザイン - ひとこと：PC 16px / スマホ 14px、font-weight 700、色 #1463F0 - 見出し：PC 34px / スマホ 24px、font-weight 700、line-height 1.4、色 #1B2A44 - ひとことは1行に収める（全角12文字以内を想定）。長い場合は折り返さず文字を小さくする ## アクセシビリティ - 見出しは h2。ひとことは見出しの外に置く p 要素にする - ひとことが見出しの内容を補う場合は、h2 の直前に置いて読み上げ順が自然になるようにする - 斜線は疑似要素なので読み上げられない ## 出力形式 - [使用技術]のコードを1つ出力 - 線の角度・長さ・色をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。