見出しコード生成用
縦書きの見出し
和の雰囲気をつくる、右から読む縦組みの見出し。
用途・説明
見出しを縦書きにして、セクションの端に置くレイアウトを作成します。旅館や和食店、工芸品のブランドなど、和の雰囲気を出したいサイトに向いています。句読点や数字の向き、スマホでの切り替えなど、縦書きでつまずきやすい点を指定しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 短い言葉を1〜2行で。例：季節を、味わう。
[英字ラベル]- 見出しの横に添える小さな英字。例：CONCEPT。不要なら削除
[本文]- 見出しの横に置く文章
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたは日本語の組版に詳しいWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「縦書きの見出し」を使ったセクションを実装してください。 ## 表示内容 - 見出し（縦書き）：[見出しテキスト] - 英字ラベル（縦書き）：[英字ラベル] - 本文（横書き）：[本文] ## レイアウト - PC：セクションの右側に縦書きの見出し、左側に横書きの本文を置く2カラム - 見出しの右隣に、英字ラベルを小さく縦に添える - 見出しと本文の間隔は 64px。本文は最大幅 32em - スマホ（768px未満）：見出しは縦書きのまま右上に置き、本文はその下に全幅で流す。 見出しが長く画面の高さの半分を超える場合は、横書きに切り替える ## 縦書きの指定 - writing-mode: vertical-rl を使用する - 見出しを2行にする場合は、意味の切れ目で改行し、右の行から左の行へ読む並びにする - 2桁までの半角数字は text-combine-upright: all で横に並べる（縦中横） - 英字ラベルは text-orientation: sideways で横倒しにする - 句読点やかぎ括弧が縦書き用の位置に表示されるフォントを指定する（明朝体を推奨） ## デザイン - 見出し：PC 40px / スマホ 28px、明朝体、font-weight 500、letter-spacing 0.15em、行間 1.7、色 #1B2A44 - 英字ラベル：11px、letter-spacing 0.3em、色 #1463F0 - 本文：15px、line-height 2、色 #47566E - 背景は #F7F9FC など、わずかに色のついた白 ## アクセシビリティ - 見出しは h2 でマークアップする（見た目が縦でも読み上げ順は変わらない） - 改行のために1文字ずつ span で分けない（読み上げが途切れるため） - 文字を画像にせず、必ずテキストで実装する ## 出力形式 - [使用技術]のコードを1つ出力 - 見出しを左側に置きたい場合の変更箇所をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。