Webデザイン・UIの頼み方

文字の階層

Typography hierarchy

見出し・小見出し・本文で、文字の大きさや太さに段差をつけること。

見本：同じ記事画面を2つ並べています。良い例は見出し・小見出し・本文で大きさと太さに段差があり、悪い例は全部同じ大きさで区切りが分かりません。ひとりAIラボが作ったサンプル画面です。

使いどころ　どこが大事か、ぱっと見て分かるようにしたいとき。

コピペ用プロンプト

[ ] のところを書きかえて使ってください。英語のほうが伝わりやすいツールもあります。

日本語

文字の階層をはっきりさせてください。見出しは大きく太く、小見出しは一段小さく、本文は読みやすい大きさと行間で。フォントは[フォント名]。

English

Make the typography hierarchy clear: large bold headings, smaller subheadings, and body text at a comfortable size and line height. Font: [font name].

ひとりAIラボ作成のテンプレートです（各社の公式ガイドの文ではありません）。

公式ガイドに載っているか

文字の階層が各社の公式プロンプトガイドに載っているか
ガイド	記載
v0	載っている^[1]
Lovable	載っている^[2]

確認日 2026年11月2日。公式ガイドのページを開いて、本文にこの言葉（英語）が出てくるかを見ました。「公式記載なし」は、出典のページに見当たらなかったという意味です。

出典

1.v0 Docs「Design Mode」（外部サイト、新しいタブで開く）https://v0.app/docs/design-mode
2.Lovable Docs「Prompting best practices」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-one

今週の一歩

上のコピペ用プロンプトの日本語版を写して、[ ] を自分の内容に書きかえ、v0 の無料版（1日7メッセージ）で作りかけの画面に1回だけ足して、前と見くらべてください。

どのAIに頼むか（v0・Bolt などの無料版）は開発する人のAIの使い分け（UI試作）にまとめています。