【タイポグラフィ編】美大4年＋実務6年を凝縮した、デザインを仕事にするための教科書【簡易版】
デザイナーになりたいと思って、何年が経ちましたか？
「デザインを仕事にしたい」と思いながら、まだ何者でもない自分に焦りを感じている人へ。
このnoteを書いているわたしは、20代でフリーランスデザイナーとして年収1000万円を達成しました。4年制の美大に通い、情報デザインを専攻し、卒業後は会社員を経てフリーランスへ。今では動画制作・グラフィックデザイン・VI設計・Webディレクション・コンテンツ制作まで、幅広く請け負っています。
でも、最初から順調だったわけではありません。
美大1年目の春、はじめてIllustratorを開いたとき、何をどうすればいいのか全くわからなかった。ツールバーのどのボタンが何をするのかも、右も左もわからなかった。プレゼンで先生に「この作品の意図は何ですか？」と聞かれて、頭が真っ白になったこともある。何度も「自分にはセンスがない」と諦めかけました。
それでも続けて、今があります。
このnoteには、私がまだ何者でもなかった美大時代まで遡り、デザイナーとして社会に出るまでやってきたことを書いています。
「美大に行けなかった」「学費が払えなかった」「もう社会人だけどデザイナーに転身したい」——そういう方がこれを読んで、4年間分の地図を手に入れてほしい。そのために書きました。
免責事項： このnoteはわたし個人の経験と見解にもとづいています。学習成果・収入・キャリアの結果は、個人の努力・環境・タイミングによって異なります。特定の成果を保証するものではありません。
このnoteで手に入るもの
タイポグラフィの基本が知れる
タイポグラフィの技術が演習問題で習得できる
タイポグラフィを深く学ぶ
デザインの中で、最も「理解しているつもりで理解していない」のがタイポグラフィです。
「フォントを選んで置く」だけなら誰でもできます。でも「なぜこのフォントか」「なぜこのサイズか」「なぜこの行間か」を説明できるデザイナーは、現場でも少数です。
このnoteでは、タイポグラフィを「感覚」から「技術」に変えるために必要なものをまとめました。
日本語組版の基礎
日本語のタイポグラフィには、欧文と異なる独自のルールがあります。美大で「日本語組版」の授業があったとき、それまでの「なんとなく」が一気に言語化された経験をしました。
文字種の混在
日本語テキストは、ひらがな・カタカナ・漢字・数字・英字が混在します。この混在を「自然に見せる」のが、日本語組版の技術です。
よくある失敗は、日本語テキストの中に英字を置いたとき、サイズや位置がずれて見えること。これはベースライン（文字の底部の基準線）の扱いが違うためです。
対処法
欧文が含まれる場合、フォントサイズを本文より1〜2pt下げると馴染みやすくなります。また、日本語フォントの中でも「欧文部分のデザイン品質が高いもの」を選ぶと、混在してもバランスが取れます。
約物（やくもの）の扱い
句読点（、。）・括弧（「」）・中点（・）などを「約物」と呼びます。
日本語組版では、約物は全角スペースを持っています。文頭や行末での約物の処理（禁則処理）は、読みやすさに直結します。
最低限知っておくべきルール：
行頭禁則：句読点・閉じ括弧は行頭に来ない
行末禁則：開き括弧は行末に来ない
約物の詰め：連続する約物（「、」など）は詰めて処理する
Illustratorでは「段落パネル」→「禁則処理」で設定できます。
縦組みと横組み
日本語には縦書きと横書きの両方があります。雑誌・書籍・ポスターでは縦組みが使われることがあります。Illustratorで縦組みテキストを扱うとき、数字と英字の向きの制御（縦中横）を理解しておく必要があります。
欧文組版の基礎
欧文のタイポグラフィには、日本語とは異なる美意識があります。
カーニングとトラッキング
カーニングは、特定の2文字間のスペースを調整すること。
トラッキングは、選択した文字列全体の間隔を均一に調整すること。
「なんかこのタイトル、バランス悪い気がする」という感覚の多くは、カーニングの問題です。特に大きなサイズの見出し文字では、自動カーニングだけでは不十分で、手動調整が必要になります。
Illustratorでのカーニング調整：文字間にカーソルを置き、`Option + →/←`（Mac）で調整します。
練習課題
「WAVE」という文字を大きなサイズ（120pt程度）でIllustratorに打ち、W-A・A-V・V-E それぞれの間隔を手動で調整する。調整前と調整後を並べて比較すると、カーニングの影響が体感できます。
ベースラインとキャップハイト
欧文フォントは、複数の基準線を持っています。
ベースライン：文字の底部が揃う線
キャップハイト：大文字の高さの基準
エックスハイト：小文字「x」の高さ
異なるフォントを組み合わせるとき、ベースラインとエックスハイトが近いもの同士を選ぶと、統一感が生まれます。
フォントは「場面」と「感情」で決める
「どのフォントを選べばいいか」という質問は、「どんな印象を与えたいか」という質問に変換できます。
フォントが持つ感情
フォントを選ぶときは、まず「このデザインが届く相手はどんな感情になってほしいか」を先に言葉にしてみてください。その感情に対応するカテゴリから選ぶと、迷いが減ります。
デザイナーが知っておくべきフォントリスト
和文フォント（定番）
ヒラギノ明朝：日本語組版の高品質スタンダード。書籍・高級品向け
游ゴシック：読みやすく、Webでも使いやすい現代的なゴシック
源ノ角ゴシック（Noto Sans JP）：無料で使えるクオリティの高いゴシック体。Webとの互換性が高い
こぶりなゴシック：細めのラインで品があり、ファッションやコスメに合う
欧文フォント（定番）
Helvetica（ヘルベチカ）：デザイン界の「制服」。どんな場面でも使いやすい
Garamond（ガラモン）：歴史あるセリフ体。品格と読みやすさを両立
Futura（フツラ）：幾何学的で未来感がある。ルイ・ヴィトンのロゴに使われている
DM Serif Display：現代的なリバイバルセリフ。ファッション系に人気
Inter：UI用に設計された読みやすいサンセリフ。デジタルデバイスと相性がいい
無料フォントのおすすめ入手先
Google Fonts（商用無料）
Adobe Fonts（Creative Cloud契約者は追加費用なし）
タイポグラフィの失敗例と修正
現場でよく見る「タイポグラフィの失敗」を5つ、まとめてみました。
失敗①：フォントを3種類以上使う
1つのデザインでフォントを4〜5種類使うと、視覚的にうるさくなります。原則は「1つのデザインで使うフォントは2種類まで（見出し用＋本文用）」です。
バリエーションが必要な場合は、同じフォントでウェイト（太さ）やサイズを変えて対応する方が、まとまりが出ます。
失敗②：行間が狭すぎる（または広すぎる）
行間は、フォントサイズの1.5〜1.8倍が読みやすい目安です。
Webの本文テキストなら、line-height: 1.7〜1.8 が基準。印刷物では、フォントサイズ10ptに対して行送り16〜17ptが一般的です。
行間が狭いと「詰まって読みにくい」、広すぎると「バラバラに見える」。どちらも読む意欲を奪います。
失敗③：字間の設定ミス
本文テキストのletter-spacingを広げすぎると、読みにくくなります。本文は「0（デフォルト）」か「ごくわずかプラス」が適切。letter-spacingを広めに設定して効果的なのは、見出しや短いキャッチコピーの場合です。ALLキャップス（全大文字）のテキストは、少し字間を広げると読みやすくなります。
失敗④：コントラスト不足
テキストと背景の色のコントラスト比が低いと、読めません。
WCAG（Webアクセシビリティガイドライン）では、本文テキストのコントラスト比4.5:1以上を推奨しています。薄いグレーの背景に白のテキスト、などは要注意です。
Chrome拡張の「Colour Contrast Analyser」などのツールで数値を確認する習慣をつけると、クライアントへの説明根拠にもなります。
失敗⑤：揃え方の混在
見出しを中央揃え、本文を左揃え、キャプションを右揃え——というように、揃え方がバラバラなデザインは落ち着きません。
揃え方を「なぜ左揃えか」「なぜ中央か」と意図して決めているデザインは、統一感があります。「なんとなく」で混在させているデザインは、見る人に「乱れた」印象を与えます。
演習課題
演習①：フォント感情マップ
「信頼」「やさしさ」「高級感」「スピード」「伝統」の5つの感情ワードをFigmaかIllustratorに入力する。それぞれに「最も合うと思うフォント」を1つずつ当てはめ、なぜそのフォントを選んだかを1文で書く。完成後、デザイナーの友人や同僚に見せて、感情とフォントの対応が伝わるか確認する。
演習②：同じ文章、5つのフォント比較
「わたしたちの暮らしに、余白を。」という文章を5つの異なるフォント（明朝・ゴシック・手書き系・欧文セリフ・欧文サンセリフ）で組み、A4の1枚に並べる。同じ言葉なのに全く異なる印象になることを体感する。「一番ブランドとして使いたいフォントはどれか」と「なぜか」を書く。
演習③：見出しのカーニング調整
Illustratorで「DESIGN IS THINKING」という英文を80pt以上の大きなサイズで打つ。自動カーニングのままの状態をスクリーンショットで保存する。その後、全ての文字間を手動で調整して「気持ちよく見える」状態を作る。調整前と調整後を並べて比較する。
演習④：行間の読みやすさ実験
200〜300字程度の日本語テキストを用意し、同じフォント・同じサイズで行間だけを変えた3バージョンを作る。
バージョンA：line-height 1.2（狭い）
バージョンB：line-height 1.6（適切）
バージョンC：line-height 2.2（広い）
3つを並べて「最も読みやすいのはどれか」を確認する。適切な行間は、読み手が「読んでいることを意識しない」ときの間隔です。
演習⑤：タイポグラフィだけのポスター
写真もイラストも使わず、テキストと色だけで「映画のポスター」を作る。タイトル・キャッチコピー・公開日の3要素だけを使い、A4サイズで完成させる。フォントの大きさ・ウェイト・配置・色の組み合わせだけで、映画のジャンル（ホラー・恋愛・SF・コメディ）が伝わるかを試す。
ここまで読んでくださったあなたへ
このnoteを最後まで読んだあなたへ、最後に伝えたいことがあります。
デザイナーになれるかどうかは、センスでは決まりません。
「なぜこのデザインか」を言葉にし続けられるか。失敗を次に活かせるか。他者のフィードバックを恐れないか。それだけです。
美大で4年間、わたしが何度も聞かされた言葉があります。
「いいデザインは、いい問いから生まれる。」
あなたが「何を作るか」より前に「誰のために、何のために」を問い続けるなら、あなたはすでにデザイナーとしての一歩を踏み出しています。
私のデザイナー人生の礎を築いてきた10年間をギュッとまとめた記事には、このnoteでは書ききれなかったことがまだまだたくさん詰まっています。
もっとデザインのことを知りたい！
デザインが上手くなりたい！
そのための投資は惜しまない！
という方は、ぜひ完全版も読んでみてくださいね。
完全版では、このnoteで書いた内容に加えて、
美大情報デザイン専攻4年間の学習ロードマップ（ほぼ完全版）
ツール5本の習得戦略（イラレ・Photoshop・Figma・Ae・Pr）
自分に向いているデザインジャンルを発見するための課題設計
デザイン理論の核心（美大で最初に叩き込まれる10の概念）
プレゼンを武器にする方法（場数の積み方、フィードバックの受け方・与え方）
半年間の架空プロジェクト設計書（ポートフォリオになる作品を作るための方法）
「今売れるデザイン」を自分のものにするトレーニング法
ポートフォリオの作り方と、最初の案件獲得まで
がすべて知れちゃいます。
デザイナーを目指すならぜひ一度は読んでいただきたい内容になっています。
このnoteがよかったら、「スキ！」とコメントをいただけると励みになります。よければぜひ、SNSなどで感想をシェアしてください！
