2026年5月19日更新

📌 この記事のポイント

• 文字組みの仕上げで差がつく3要素は「役物・ラグ組・錯視」

• 役物（鉤括弧・記号類）は加工して使うのがプロの暗黙知

• ラグ組の分末は「下が狭い逆三角形」を回避して安定形を目指す

• 錯視（O問題・T問題・中央問題）の知識は作字・ロゴで効く

• 5ステップの仕上げチェックリストで「整っている」を「仕上がっている」に変える

文字組みの仕上げで差がつくのは、役物の加工・ラグ組の分末・錯視への対応の3要素です。書体を選んで字間を詰めただけでは「整っている」止まり。プロの仕上がりに必要なこの3要素は、教科書に体系的には載っておらず、現場でベテランから盗むしかない暗黙知の塊でもあります。

グラフィック歴31年の山津さんのウェビナーをベースに、駆け出しデザイナーが今日から使える仕上げ実装フローを5ステップに整理しました。

参考動画：□△◯（カタチ）で捉える文字組み 〜「なんとなく」が「意識的」に変わる〜【後編】

文字組みの仕上げとは｜「整っている」を「仕上がっている」に持ち上げる工程

文字組みの仕上げとは、書体選定・字間調整が済んだあとに、デザイン全体のクオリティを一段引き上げる微調整工程のことです。レイアウト・配色が完成していても、この仕上げを飛ばすと「素人っぽい」印象が残ってしまう可能性があります。

主に差がつくのは次の3要素：

参考：タイポグラフィ7つのルール｜Moji-Blog / タイポグラフィの基礎 役物編｜YOSHITAKE でも、組版の上級ルールが整理されています。

役物の扱い｜鉤括弧の罫線化・記号の大型化

役物（やくもの）とは、句読点・鉤括弧・記号類など、文字以外の記号類の総称です。タイトル・見出しで使う場合、書体に内蔵された形のまま使うことはほぼないというのがプロの暗黙知。

ウェビナーで山津さんは明言しています。

「タイトル周りでは、鉤括弧に関してはこのまま使うっていうことはほぼほぼない」

役物そのものは小さく・控えめに作られているため、タイトルで使うと存在感が弱くなったり、逆に浮いたりします。だから加工する。

鉤括弧の罫線化（4ステップ）

鉤括弧「」は、タイトルで使うとそのままの形状が浮きがちな役物の代表格です。その場合は鉤括弧を自作してしまうのも有りです。

文字を直接囲む形ではなく、括弧の役割を線で示すのがポイントです。

ビックリマーク・記号の大型化

「！」「？」などの強調記号は、大胆に拡大して使うのも一つのテクニックです。

ウェビナーで山津さんは「人生はカオスだ！」というコピーを例に、ビックリマークを大胆に拡大して使う実演をしていました。強調記号の存在感を上げるだけで、コピー全体の感情が立つのが、もちが現場でも感じる効果です。

参考：あるあるタイポ｜MdN では、こうした文字加工のパターンが事例豊富にまとまっています。

ラグ組と箱組｜分末の形で印象が決まる

ラグ組と箱組の使い分け

文字組みの並べ方には2種類あります。ラグ組は行末を揃えない自由な組み方、箱組は行末を揃える整然とした組み方です。

参考：クリエイターズファクトリー｜文字組みの基本 / form and craft｜組版の基礎 では、「言葉を大切に情緒的に読んでほしい文章はラグ組、文字量が多く可読性確保したい時は箱組」と整理されています。

ラグ組で最も重要な「分末の形」

ラグ組で最も重要なのが分末の形です。改行が不揃いだからこそ、分末の輪郭が全体の印象を決めます。

ウェビナーで山津さんが強調していました。

「下が狭い状態だと逆三角形に見えてしまって、それはやっぱり不安を与えてしまったり、要はバランスが悪い状態」

逆三角形を回避する5ステップ

「意味の切れ目 ＆ 視覚的バランス」を両立させる改行位置を探すのがプロの判断です。もち自身も改行位置の調整は完成直前ではなく完成翌日にもう一度見直す習慣を持っています。

錯視と形の調整｜作字の基礎

錯視（さくし）とは、目の錯覚により同じ大きさ・太さでも違って見える現象です。文字組みの仕上げで重要になる錯視を、3つに整理します。

錯視1｜O問題（丸い文字は小さく見える）

丸い文字は、四角や三角の文字と同じ高さで作ると、視覚的には小さく見えます。

対応：丸い文字は、上下に少し飛び出させることで同じ大きさに見える。

これは欧文書体の O G などでも同じで、プロの書体（Helvetica・Inter・Noto Sans等）はすでにこの調整が施されています。

錯視2｜T問題（横棒が太く見える）

横棒と縦棒が同じ太さだと、横棒の方が太く見える錯視です。

対応：横棒は、縦棒より少し細く作る。欧文書体・和文書体ともに、すでに適用されています。

錯視3｜中央問題（上下の重心ズレ）

図形の中央に線を引くと、下が小さく見える現象。E や B などの中央線は少し上に配置し、8の数字やSのカーブも下を少し大きく作ります。

作字での応用

参考：Adobeのカーニングクイズ / Figma｜タイポグラフィの究極ガイド でも、錯視を意識した文字組みの感覚を養うコンテンツが用意されています。

仕上げの実装フロー｜5ステップチェックリスト

ここまでの3要素を、実務の5ステップチェックリストとしてまとめます。完成直前にこの順番で見直すと、仕上げ品質が安定します。

KV・主要セクションだけはこの5ステップを通すようにしてみましょう。1回5〜10分の習慣でも、デザイン全体の印象が一段変わると感じます。

校長の見解｜文字組みの仕上げで大事にしている視点

NOT DESIGN SCHOOL校長のもちが、文字組みの仕上げで日々大事にしていることを2つの視点で語ります。

視点1｜錯視は知識として学習しておく

錯視は、感覚で覚えるよりも先に知識として学習しておくほうが、効率が良いと、もちは思っています。なぜなら、知っていないとずっと存在に気付けない錯視も多いと感じているからです。

O問題・T問題・中央問題のような錯視は、知っていれば「ここはO問題が出るから上下を飛び出させよう」と即判断できる。けれど知らないと「なんとなく違和感あるけど、なんでだろう」、もしくは気付かずに止まってしまう。違和感を見つけられるかどうかが、仕上げ品質の分かれ目になります。

定番書体（Helvetica・Noto Sans・リュウミン等）はすでに錯視補正が施されているため、通常のWeb案件では知識は判断材料として持っておくだけで十分。ただしロゴ・カスタム文字・特大サイズの拡大文字を扱うときには、自分で補正できるかどうかが品質を分けることもあります。

AI時代でも、錯視判断は人間の目でしかできない領域である可能性があります。一度知識として整理しておけば、5年10年と陳腐化しない長持ちスキルになるので、これを機に、学んでおくことをおすすめします。

視点2｜約物は文字組みで一番粗が目立つので面倒くさがらない

約物（句読点・鉤括弧・記号類）は、文字組みで一番粗が目立ちやすい領域だと、もちは感じています。約物を丁寧に仕上げてあるかどうかで、デザイナーの力量が測られることもあるでしょう。

理由はシンプルで、約物は通常の文字に比べて余白部分が多いため、バランスが崩れやすいから。余白部分が多いからこそ、1つの加工不足が全体の印象に強く影響します。漢字やひらがなよりも粗が目立ちやすいんです。

「約物までいちいち加工する時間ない」と感じる駆け出しも多いかもしれませんが、実は約物に時間をかけたほうが、結果的にコストパフォーマンスが極めて高い仕上げになる場合も多いです。

慣れると数秒で判断できるようになるので、最初の習慣化を乗り越えれば、ずっと武器として使えるスキルです。是非習慣化にチャレンジしてみてください。

限界と注意点

限界1｜全プロジェクトに丁寧な仕上げは不可能

LP1本で見出しが20-30個あるような大型案件で、すべての見出しを手詰めで仕上げる時間はありません。

時間配分も含めて仕上げスキルの一部だと、もちは考えています。

限界2｜Web実装での再現の限界

カスタム文字組み・役物の罫線化は、画像書き出しが前提になります。

ハイブリッド（重要部分は画像、本文はHTML）が現実解です。

限界3｜やりすぎは読みにくくなる

全タイトルで役物を罫線化したり、すべてのビックリマークを大型化すると統一感が消えます。「読みやすさ」「自然さ」を最優先で、必要箇所だけ仕上げを入れる、というのがプロの判断です。

FAQ

Q1｜ラグ組の改行はCSSではどうやって制御する？

特に text-wrap: balance は、ヒーローセクションのラグ組調整に革命を起こした2024年のCSS新機能です。Chrome 114以降・Safari 17.5以降でサポートされており、2026年時点ではモダンブラウザのほぼ全てで使えます。

Q2｜仕上げのスキルを継続的に磨く方法は？

仕上げスキルは、書体選定やカーニングよりも上達に時間がかかる領域です。年単位で育てる感覚で取り組んでください。

まとめ｜文字組み仕上げの実装フロー

文字組みの仕上げ品質を上げるには、5ステップで進めます。ここまでの3要素を、実務の5ステップチェックリストとしてまとめます。完成直前にこの順番で見直すと、仕上げ品質が安定します。

これらを毎回ぜんぶ丁寧にやる必要はありません。KV・主要セクションなど「ここぞ」の場面で意識的に仕上げることで、デザイン全体のクオリティが一段上がります。

合わせて読みたい：

• ロゴデザイン入門【決定版】

• 駆け出しが0からデザインを作る方法

• 駆け出しデザイナーのためのClaude Code実践ガイド