タイポグラフィを正確に指定する

タイポグラフィの指定は、Claude Designで一番「伝わったつもりで伝わってない」部分だと実感している。「読みやすくして」と言っても、何をもって読みやすいかは人によって全然違う。具体的な数値や名前で指定することが、思い通りのデザインへの最短ルートだった。

フォント名は正式名称で書く

「丸ゴシックで」とか「細めのフォントで」という曖昧な指定だと、ほぼ確実に意図と違うものが出てくる。実際にやってみると、同じ「サンセリフ」でも全然違う印象になった。

フォント: Noto Sans JP（Googleフォント）
日本語本文用。英数字はInter。

こう書くと、ちゃんとそのフォントを想定したデザインが出てくる。ウェブフォントか画像かで扱いが変わるが、デザイン段階では名前で指定するだけで十分。

日本語フォントで使いやすいのは以下：

• Noto Sans JP — 汎用性が高い。読み物系に向いている
• BIZ UDPGothic — UD（ユニバーサルデザイン）フォント。行政・医療系に合う
• Zen Kaku Gothic New — 少しデザイン性がある。モダンな印象に使える
• M PLUS Rounded 1c — 丸みがある。柔らかいサービスに向いている

サイズは用途ごとに階層で指定する

「テキストを大きく」という指示は毎回ギャンブルになる。何pxが大きいかが人によって違うし、コンテキストによっても違う。

タイポグラフィ階層:
- 見出しH1: 32px / ウェイト700 / 行間1.3
- 見出しH2: 24px / ウェイト600 / 行間1.4
- 本文: 16px / ウェイト400 / 行間1.7
- 注釈・キャプション: 12px / ウェイト400 / 行間1.5

日本語の本文は行間1.7〜1.8が読みやすい。英語の1.5をそのまま使うと詰まって見える。これはやって気づいた落とし穴だった。

日本語と英数字で別のフォントを使うと伝える

デフォルトだと日本語フォントに含まれる英数字がそのまま使われる。Noto Sans JPの英数字はちょっと間抜けに見えることがある。

日本語: Noto Sans JP
英数字・記号: Inter（またはRoboto）
組み合わせて使用してください

と明示すると、英数字だけ別フォントにしてくれるデザインが出てくる。実際にこの指定を入れるだけで、デザインのクオリティが一段上がった感覚がある。

ウェイトは数値で指定する

「太字」「細め」という表現は曖昧すぎる。フォントウェイトの数値（100〜900）で指定するほうが確実。

見出し: font-weight 700
小見出し: font-weight 600
本文: font-weight 400
強調: font-weight 600（boldより控えめに）

特に日本語の場合、ウェイト500が存在しないフォントも多い。Noto Sans JPは300/400/500/700が使えるが、BIZ UDPGothicは400/700のみ。フォントに合わせたウェイト設定を指定するのが安全。

カーニングとレタースペーシングの指示

日本語の見出しで字間が詰まりすぎる問題がある。特に太いウェイトの大きいテキストは、デフォルトだと圧迫感が出やすい。

見出し: letter-spacing 0.05em（少し広め）
本文: letter-spacing 0（デフォルト）
英字のみの見出し: letter-spacing -0.02em（少し詰める）

英語の見出しは逆に少し詰めると締まる。この逆転は実際に試してみないと気づきにくかった。

失敗パターン：「おしゃれな感じで」は禁句

「おしゃれで読みやすいタイポグラフィにして」と指定したら、セリフ体の極細フォントが出てきた。確かにおしゃれだったが、スマホでは全然読めない。

おしゃれさと可読性は時に対立する。デザインの用途（スマホ閲覧か印刷か、情報量が多いか少ないか）を先に伝えてから、フォントの方向性を指定するほうが失敗が少ない。

スマホ中心のウェブサービス向け。
本文の可読性最優先。フォントはNoto Sans JP 16px、行間1.75。
見出しはBold（700）で存在感を出す。デザイン性より読みやすさを取ること。

こういう制約を先に渡すと、外れたデザインが出てきにくくなった。