見出しコード生成用
引用符を添えた見出し
大きな引用符で、お客様の声や言葉を引き立てる。
用途・説明
見出しの左上に大きな引用符を添えた見出しです。お客様の声、インタビューの発言、代表メッセージ、記事の中の印象的なひとことなど、誰かの言葉を見出しにする場面に向いています。発言者の名前も添えられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：準備の時間が、半分になりました。
[発言者]- 例：Webデザイナー 佐藤さん。不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「引用符を添えた見出し」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - 発言者：[発言者] ## デザイン - 左上に大きな引用符（幅 40px 程度、#1463F0 の30%程度の淡い色） - 引用符の下 8px に見出し。文字：PC 24px / スマホ 20px、font-weight 700、line-height 1.6、色 #1B2A44 - 発言者：13px、色 #5F6D84、見出しの下 10px。先頭に「—」を付ける ## 余白 - 上の余白 64px、下の余白 24px - ページやコンテンツの先頭に置く場合は、上の余白を 0 にする ## 実装方法 - 引用符はインラインSVGまたは疑似要素で描き、フォントによって形が変わる記号の文字に頼らない - 見出しが実際の発言の引用である場合は、blockquote の中に置く構成を併記する - 発言者は見出しの外の要素にする ## アクセシビリティ - 見出しは h2 でマークアップする（置く場所の階層に合わせて変更してよい） - 引用符は装飾なので aria-hidden="true" を付ける ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - 引用符の色と大きさ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。