見出しコード生成用
余白を活かした大見出し
タイポグラフィで魅せる、洗練された表現。
用途・説明
大きな文字と十分な余白だけで構成する、ブランドサイトやポートフォリオ向けのステートメント見出しです。画像を使わずに印象的なファーストビューやセクション区切りをつくりたいときに使います。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 2行程度の短い言葉。例：Less, but better.
[ラベル]- 見出し上の小さな英字ラベル。例：PHILOSOPHY
[本文]- 見出しの下に添える1〜2文
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはタイポグラフィに強いWebデザイナーです。 余白を大きく取った「ステートメント型の大見出しセクション」をコーディングしてください。 ## 目的 - 画像に頼らず、文字の大きさと余白だけで世界観を伝える - 1画面に1メッセージを置き、読み手の視線を迷わせない ## 表示内容 - 小さなラベル：[ラベル] - 大見出し：[見出しテキスト]（意図した位置で改行する） - 本文：[本文] ## レイアウト - セクションの高さは最低でも画面の70%（min-height: 70vh） - コンテンツは左寄せ、最大幅 960px、左右中央に配置 - ラベル → 大見出し → 本文の順に縦に並べる ## 配色 - 背景：#F7F9FC - 大見出し：#1B2A44 - ラベル：#1463F0（letter-spacing 0.2em、大文字） - 本文：#5F6D84 ## 余白・タイポグラフィ - 大見出し：clamp(40px, 8vw, 96px)、font-weight 400、line-height 1.15、セリフ体 - ラベルと大見出しの間 24px、大見出しと本文の間 40px - 本文は16px、line-height 1.9、最大幅 32em - セクション上下のpaddingは PC 160px / スマホ 96px ## レスポンシブ・アクセシビリティ - 320px幅でも横スクロールや文字切れが起きないこと - 改行位置は<br>ではなく、意味のまとまりで折り返すよう工夫する（スマホで不自然な改行を避ける） - 見出しは h2、ラベルは装飾用テキストとして p 要素で実装 ## 出力形式 - [使用技術]のコードを1つ出力 - 文字サイズと余白をCSS変数にまとめ、調整しやすくする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。