「自分の文字組み、なんかちょっと違うんだよな」と感じたことはありませんか。グラフィックデザイナーの仕上がりを見ると、同じツール・同じフォントを使っているはずなのに、明確に「整っている」と感じる。けれど自分の組みは、どこか締まらない。

理由は単純です。Webデザイナーは文字組みが苦手なのではなく、文字組みに触る時間が構造的に少ないだけ。Webは画面幅・デバイス・ブラウザで表示が変わる可変性が前提で、ユーザーがフォントサイズを変更することすらできます。つまり、グラフィックのように1ピクセル単位で文字を仕上げる機会そのものが少ない。

ですがLP・キービジュアル・ヘッダーなど、Webにも「ここは固定で1枚絵として作る」場面はあります。AIで誰でもLPを作れる時代になったからこそ、そういう仕上げの差が顧客評価を分けるようになってきました。

この記事では、グラフィック界の大ベテラン山津さん（デザイナー歴31年・雑誌レギュラー記事25年）のウェビナーをベースに、Webデザイナーが今日から使える「カタチで捉える文字組み」の思考法を体系化します。「なんとなく組む」を「意識的に組む」に変える、4ステップの実用フレームです。

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

文字組みとは何か｜定義と意義

文字組み（もじぐみ）とは、文章や見出しを構成する文字を、読みやすく・美しく見せるために配置・調整する作業全般を指します。書体選定、サイズ、字間（カーニング・トラッキング）、行間、改行位置、役物の扱いまで含めた文字まわりの設計の総称です。

参考：組版の基礎｜form and craft（note） では、組版は升目で揃える、スペーシングは見た目で揃えると整理されています。文字組みはこの両方を包括する概念です。

なぜ文字組みが大事なのか。シンプルに言えば、文字組みが整っていないと「読みづらい」「素人っぽい」と即座に判断されるからです。配色やレイアウトが整っていても、文字組みが甘ければ全体のクオリティが落ちて見える。逆に、文字組みが整っているだけで、レイアウトの不足を補えるほどの説得力が生まれます。

なぜWebデザイナーは文字組みが苦手と感じるのか

「グラフィックデザイナーは文字組みが上手いけど、自分は苦手」という劣等感を抱えるWebデザイナーは少なくありません。けれどこれは、能力差ではなく構造的な経験差です。

Webの可変性が文字組みとの距離を生む

Webは画面幅・デバイス・ブラウザによって表示が変わる、可変性前提の仕組みです。ユーザーがフォントサイズを変更したり、ダークモードに切り替えたりもできます。つまり、グラフィックのように「この通りの見た目で完成」というアウトプットが構造的に作れない。

Webでは基本的にCSSでの全体バランス調整が中心になり、見出しなど特に強調したい部分だけ画像書き出しで手動カーニングする、という分業が一般的です（参考：タイポグラフィを考える｜BRISK）。

グラフィックデザイナーが特別なのではない

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

「ウェブデザイナーがグラフィックデザイナーよりも劣っているとかそういうことではなく、文字に関わる時間が結果的に少なくなってしまっているだけのこと」

劣等感を抱える必要はありません。必要なのは、限られた「文字を固定で仕上げる場面」で、意識的に組めるようになる思考法です。

文字組みが効くWebの場面5選

これらの場面はすべて「画像として書き出す」ため、グラフィックと同じく1ピクセル単位で組める領域です。Webデザイナーでも文字組みの素養が直接効きます。

文字組みが難しい本質3つ｜日本語・併存・準備不足

山津さんが指摘する「文字組みが難しいと感じる理由」を、Webデザイナー視点で整理し直します。

理由1｜日本語は表意文字と表音文字が混在する世界的にも珍しい言語

日本語は、表意文字（漢字）と表音文字（ひらがな・カタカナ）が混在し、さらにアルファベットも自然に組み込まれる、世界的にも珍しい言語です。

重さ・密度・形状が違う文字が同じ1行に混在するため、バランスを取ること自体が構造的に難しい。書体デザイナーがこの混在を考慮して書体を作ってくれていますが、それでも組む側の調整が必要になります。

理由2｜縦書きと横書きの両方が存在する

日本語には縦書きと横書きの2種類の表記方法があります。書籍・雑誌のように縦組みが主流の媒体と、Web・ビジネス文書のように横組みが主流の媒体が併存し、書体もそれぞれに最適化されたものを選ぶ必要があります。

Webデザイナーはほぼ横書きしか扱わないため、縦組みの感覚が育ちにくい。けれど、書体の良し悪しを判断する目を養うには、本来両方を見ておくほうが有利です。

理由3｜「準備」をせずに「見た目」から入る癖

最大の落とし穴は、コピーの分析をする前に、見た目やデザインから入ってしまうこと。

軸のないまま組み始めると、ただ悩むだけになって「文字組みは難しい」という体感だけが残ります。文字組みも他のデザイン制作と同じく、準備が9割です。

「カタチ」で捉える文字組みの考え方｜核心フレーム

ここからが、山津さんウェビナーの核となるパートです。「カタチ」で捉えるとはどういうことか、ウェビナー全編を貫く思考法を整理します。

カタチで捉えるとは

「カタチで捉える」とは、文字を個別の文字としてではなく、組み上がった全体の形状として認識する思考法です。

文字組みが整って見える人は、常にブロックレベル・余白レベルの「カタチ」を見ています。逆に苦手な人は、文字レベルだけで悩み続けて全体が崩れる。

□△◯で考える理由

タイトルの仕上がりを「□（四角）」「△（三角・逆三角）」「◯（円・楕円）」のどれに収まるかで意識すると、組みの整理が一気に進みます。

たとえば「全体的に円で括れる」仕上がりを目指すなら、文字の出っ張り・凹みを意識的に調整し、ラグ組であれば分末の形が逆三角形にならないように改行位置を選ぶ。これだけで「なんとなく」が「意識的」に変わります。

余白の「カタチ」を見る目

文字と文字の間の余白も、距離（何ピクセル）ではなく形状（白の塊のカタチ）として見ます。

ウェビナーでの山津さんの言葉が象徴的です。

「文字詰めは距離じゃない。全体的に見たときに、それぞれの文字が均等に同じように見える明るさが重要」

詳しくは記事#3 カーニングは距離じゃない｜「明るさ」で見る文字詰めの思考法で深掘りします。

文字組みの全体像｜4ステップ思考プロセス

「カタチで捉える」を実務に落とし込むと、次の4ステップになります。

ステップ1｜コピー分析（土台）

書体を選ぶ前に、コピーを読み込んで以下を分解します。

• ターゲット：誰に届ける文章か（性別・年齢・職種・心理状態）

• クライアントの趣旨・想い：何を達成したいのか

• 要素分解：メインタイトル／サブタイトル／補足文の階層

• 使用文字種：漢字／ひらがな／カタカナ／欧文の比率

• 欧文の有無：小文字のa・gがあるか（書体選びに影響）

• 記号の有無：鉤括弧・ビックリマーク・記号の処理判断

• 縦組み／横組み：基本は横だが、ブランドによる

これを「テキストファイルにバラっと書き出す」だけでも、コピーへの解像度が大きく上がります。

ステップ2｜書体選定

コピー分析で出てきた情報を元に、書体の方向性を決めます。

ステップ3｜組み

書体が決まったら、字間・行送り・改行位置を調整します。ここで「カタチ」と「明るさ」を意識する。

ステップ4｜仕上げ

役物の処理、ラグ組／箱組の判断、ひらがなの初体差し替え、錯視を意識した形の微調整など、最後の仕上げで完成度が決まります。

実演｜タイトルコピーから完成までの思考プロセス

山津さんがウェビナー前編で実演したプロセスを、Webデザイナー視点で再構成します。素材は 「Webデザイナーのための文字組み Vol.2 タイトル編 グラフィックデザイナーの視点を追体験する」 というウェビナータイトル。

Phase 1｜コピーを読みながら気になりを書き出す

すぐに参考デザインを探したり書体を選んだりせず、コピーを読みながら以下をモンヤリ考える時間を作ります。

• ターゲット：Webデザイナー（性別不問）

• ターゲットの心理：苦手意識あり・必要性は感じている・行動は止まっている

• クライアント趣旨：敷居は上げたくない・きっかけを作りたい

• ひらがな・カタカナの曲線比率：「のための」「グラフィック」など中量

• 欧文の有無：「Vol.2」あり（小文字なし・数字+ピリオド）

• 縦組み／横組み：横組みでOK

Phase 2｜方向性の言語化

分析を元に、書体の方向性を言葉にします。

Phase 3｜書体の組み合わせ

• 和文（メイン）：MBの101（5シック、定番ゴシック）

• 英数字（Vol.2）：少し見慣れない書体（最近見かけない、レトロ味のあるもの）

Phase 4｜組みと調整

• 「文字組み」の「組」に送り仮名は不要（正式名称として確認）

• ボリューム表記の高さ調整

• タイトル編は太字の中で軽めの太さに

• 全体のカタチが「円で括れる」状態を目指す

• 各要素間の余白を意識的に確保

Phase 5｜サブタイトル配置

• メインが全部5シック→サブも痕色で

• 軽い印象の書体を当てて、メインとの緊張感と退避を作る

このプロセスを意識的にやるかどうかで、仕上がりは全く違うものになります。

書体選定の基本

書体選定でWebデザイナーが押さえるべきポイントを、ここでは概要だけ紹介します。

縦線の太さで揃える（核となる原則）

異なる書体を組み合わせる場合、まず縦線の太さを揃えると、自然なバランスが取れます。

混植｜同書体内での組み合わせ

「混植」は、同じ書体ファミリー内で、字種ごとにウェイトや派生書体を変える手法です。

• 例：リュウミンKL（漢字）×リュウミンKO（ひらがな・カタカナ）

• ひらがなだけ一段細くすることで、可読性とリズムを生む

ゴシック×明朝の混植

ゴシック×明朝の混植は 「漢字ゴシック×ひらがな明朝（またはアンチック体）」が定番で、その逆は基本的にNG。明治〜昭和初期にゴシックのひらがなが未開発だった歴史的経緯から、漫画の吹き出し・タイトル・ロゴで使われ続ける標準フォーマットです。

逆（漢字明朝×ひらがなゴシック）にすると、ひらがなが暴れて漢字の存在感が弱まり、全体が崩れます。

参考：日本語のタイトルやロゴデザイン｜LIG / 漫画の吹き出しとアンチック体｜しじみnote

カーニング・文字詰めの考え方

カーニングは、Webデザイナーが特に弱くなりがちな領域です。核心の思考法だけここで紹介します。

「距離」ではなく「明るさ」で見る

カーニングでよくある質問は「文字と文字の間を何ピクセル空ければいいですか」というもの。これに対する山津さんの答えは明快です。

「距離じゃない。明るさ。それぞれの文字が均等に同じように見えるかどうか」

明るさとは、文字と文字の間の余白部分の見え方を指しています。

全体を見ながら、文字を触る

文字詰めの作業中、目は「個別の文字間」と「全体の仕上がり」の両方を行き来します。

• 個別の文字間だけ見る→部分最適で全体が崩れる

• 全体だけ見る→詰めるべき箇所を見逃す

• 両方を同時に見る→均等な明るさの仕上がりに

役物・ラグ組・錯視

仕上げで差がつく3要素を、概要だけ紹介します。

役物の扱い

役物（やくもの）は、鉤括弧・点丸・記号などの総称です。タイトル使用時はそのまま使うことが少なく、加工して使うのが基本。

ラグ組と箱組

ラグ組で重要なのは分末の形。下が狭くなる逆三角形は不安定で避けるべき。下が広がる安定形、もしくは整った長方形を目指します。

錯視と形の調整

「同じ高さ・同じ太さでも、形によって違って見える」のが錯視。Webデザイナーが知っておくべき基本錯視は次の3つ。

• O問題：丸い文字は四角や三角より小さく見えるので、少し飛び出すように作る

• T問題：横棒と縦棒が同じ太さだと、横棒が太く見えるので、横棒を細くする

• 中央問題：図形の中央に線を引くと、下が小さく見えるので、線を少し上にずらす

校長の見解｜AI時代に文字組みが効く4つの理由

NOT DESIGN SCHOOL校長のもちが、AI時代のWebデザイナーにとって文字組みがなぜ重要かを4つの視点で語ります。

視点1｜文字組みにこそ細部のクオリティが宿る

レイアウトや配色が綺麗でも、文字組みが甘いとデザイン全体が一気に素人っぽく見えてしまう。逆に、文字組みが整っているだけで「ちゃんと作られている」という信頼感が出る。経験的にそう感じます。

AIで誰でも一定水準のデザインが作れる時代になったからこそ、最後の差は細部のクオリティに集約される。そして細部のクオリティは、文字組みから始まるとも、もちは思っています。

KV1枚・LP1本でも、文字組みに丁寧に向き合うだけで、見せた瞬間の顧客反応が明確に変わります。1ピクセル単位で字間を詰める時間は、長期的にいちばんレバレッジが効く投資です。

視点2｜有料フォントは強い武器になる

駆け出しデザイナーは「無料フォントで何とかしよう」と考えがちですが、ここはケチらないほうが良いと、もちは思っています。

Adobe Fonts（Adobe Creative Cloud契約者なら追加費用なしで使える）には20,000書体以上のラインナップがあり、和文の定番（リュウミン、A1明朝、新ゴ、見出ゴMB101など）もあるので、これだけでも「いい書体を使う」という前提が手に入りやすくなります。もし余裕があればMorisawa Fonts（年64,240円〜）も検討したい所です。

「いい書体を使うだけで組みのクオリティが一段上がる」のは、駆け出しに伝えたい現実です。書体は素材であり、料理人がいい食材を選ぶのと同じ感覚で投資する価値があると、もちには見えています。

視点3｜文字組みのセンスを鍛えるなら雑誌を見る

Webデザイナーは紙媒体に触れる機会が少なくなりがち。だからこそ、書店で雑誌の表紙・誌面を5分眺める習慣が効きます。

雑誌の見出し・特集タイトル・誌面の文字組みは、プロのアートディレクターが時間をかけて仕上げた文字組みの宝庫。Webで見るデザインだけでは触れられない情報量と完成度があります。

毎週1回でも書店に立ち寄って「今週はこの雑誌の表紙」と決めて眺めるだけで、文字組みを見る目が確実に育つ。デジタル中心の生活だからこそ、意識的に紙を見る時間を作るのが効くと、もちは思っています。

限界と注意点

文字組みのスキルを学ぶ前に、Webならではの限界も理解しておきましょう。

限界1｜CSSでの細かいカーニングは限界がある

WebはCSSのletter-spacingプロパティで字間を調整しますが、これは全体の字間しか調整できません。個別の文字ペアごとに調整する「真のカーニング」は、CSSではほぼ実現できない。

そのため、Webで本格的に文字組みする場合は、見出しを画像書き出しするか、SVGテキストで個別調整する必要があります。

限界2｜ユーザー環境で表示が変わる

ユーザーのブラウザ・OS・フォント置換設定・拡大率によって、デザイナーが意図した通りに表示されない可能性が常にあります。

• WindowsとMacでフォントレンダリングが違う

• スマホで意図しないサイズ変更が起きる

• アクセシビリティ設定で文字サイズが拡大される

全環境で同じ表示を目指しすぎず、標準環境で美しく、極端な環境でも崩れないラインを設計するのが現実解です。

限界3｜業務スピードと品質のトレードオフ

全タイトル・全見出しを手詰めしていたら、業務が回らないのも事実です。

• LP制作1本で見出しが20個ある場合、全部を手詰めは非現実的

• KVと重要見出し3-5箇所だけ手詰め、残りはCSSで仕上げる、という分業が現実的

「どこに時間をかけるか」の判断も、文字組みスキルの一部です。

FAQ

Q1｜Webデザイナーは本当に文字組みを学ぶ必要がありますか？

LP・KV・OGPなど画像書き出しする場面では確実に効きます。CSSテキストだけの単純なコーディングだけならスキル必須度は低いですが、デザイナーとしてキャリアを伸ばすなら学んで損はありません。

特にAI時代、AIに代替されにくい仕上げのスキルとして長期的に効くと感じます。

Q2｜FigmaにもIllustratorと同じカーニング機能はありますか？

Figmaも個別カーニングは可能です。文字間にカーソルを置いた状態で Option + < / Option + >（Mac）または Alt + < / Alt + >（Windows）のショートカットで、その位置の字間を1文字単位で調整できます。右パネルの「Letter Spacing」も同様にカーソル位置に効きます。

ただしIllustratorのメトリクスカーニング（書体メタデータベースの自動詰め）やオプティカルカーニング（自動詰め）に相当する自動機能はありません。すべて手動調整になります。

大量の見出しを詰める案件はIllustrator、Web中心の制作はFigma、と使い分けるのが現実的。

Q3｜書体選びの数を増やすには何から始めればいいですか？

まずはAdobe Fonts（Creative Cloud契約者なら無料）で20,000書体以上が使えるので、毎週1書体ずつ「今週の書体」を決めて使い込むのがおすすめです。

そのうえで、定番書体（リュウミン、A1明朝、新ゴ、見出ゴMB、TBゴシック、Helvetica、DIN等）を完全に使いこなせるようにするのが先決。「数」より「深さ」が書体選定の精度を上げます。

Q4｜「カタチで捉える」を体感するおすすめの練習法は？

書店で雑誌の表紙・誌面を外側のカタチだけで見る練習が手軽でおすすめです。

• 雑誌タイトルブロックが□／◯／△のどれに収まっているか

• リード文の分末がどんな形か

• 見出しと本文の余白がどんなカタチか

これを習慣化するだけで、自分の組みを見直す目が育ちます。

Q5｜AI時代、文字組みのスキルはいつまで効きますか？

文字組みのスキルは、AI時代に重要視されている「審美眼」にも不可欠な要素です。AIがどれだけ進化しようが、鍛えておいて損はないと思いますよ。

AIは「整った組み」を生成するのは得意になってきましたが、意図を持って崩す「カタチで個性を出す」「ブランドの感情を文字で表現する」といった領域は、まだまだ人間の手仕事の価値が高い。

特にハイエンドな案件（コーポレートブランディング、書籍装丁、ブランドロゴ）では、文字組みの精度がそのまま単価に直結します。

まとめ｜「なんとなく」を「意識的」に変える

Webデザイナーの文字組みは、能力が低いのではなく、触る時間が少ないだけ。本記事で紹介した4ステップ思考法は、その時間差を意識の質で埋めるためのフレームです。

そして核心は「カタチで捉える」。文字を個別の文字としてではなく、組み上がった全体の形として認識する。この視点を持つだけで、明日からの文字組みが「なんとなく」から「意識的」に変わります。

シリーズ全4本

このハブ記事は、文字組みの全体像を体系化したもの。各テーマの深掘りは、以下のシリーズ記事で展開しています。

• #1（本記事）：Webデザイナーのための文字組み入門｜完全ガイド

• #2：書体選定の決め方｜縦線の太さ・痕色・混植で迷わなくなる実践メソッド

• #3：カーニングは距離じゃない｜「明るさ」で見る文字詰めの思考法

• #4：文字組みの仕上げ術｜役物・ラグ組・錯視で完成度を上げる実装フロー

合わせて読みたい関連シリーズ：

• 駆け出しデザイナーのためのClaude入門

• デザインのセンスは磨ける｜形容詞起点の3ステップ完全ガイド

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