文字の分析・模写とは?タイポグラフィが上達する練習方法を初心者向けに解説

文字の分析・模写の基本

まずは、文字の分析・模写とはどんな練習なのか、そしてなぜタイポグラフィの上達に効くのかを押さえましょう。

文字の分析・模写とは

文字の分析・模写とは、公開されている優れたWebサイトやバナーを観察し、使われている文字の特徴を読み解いたうえで、実際に自分の手で再現してみる練習方法です。

「分析」は、書体(フォントの種類)・文字の大きさ・太さ・字間・行間・揃え方などを一つずつ見て、どう設計されているかを推測することです。

「模写」は、分析した内容をもとに、FigmaやPhotoshopなどのデザインツールで同じレイアウトを作ってみることです。

タイポグラフィとは、文字の書体・大きさ・間隔・配置などを整えて、読みやすく伝わりやすくする技術のことで、分析・模写はその感覚を身につけるための練習にあたります(タイポグラフィの基本はタイポグラフィとはで解説しています)。

なぜ分析・模写で上達するのか

分析・模写が上達に効くのは、学んだルールが実際のデザインの中でどう使われているかを、自分の手で確かめられるからです。

たとえば「見出しと本文のサイズに差をつける」というルールを知っていても、実際に「どのくらいの差なら良いのか」は、知識だけではなかなか判断できません。

優れたデザインを分解すると、「見出しは本文の2倍以上ある」「行間は思ったより広い」といった具体的な数字や比率が見えてきます。

ゼロから自分で考えるより、完成されたお手本を分解して再現するほうが、初心者のうちは多くのことを短い時間で学べます。

そして「観察→分解→模写→比較」を繰り返すうちに、文字の細かな違いに気づける目(解像度)が育っていきます。
分析の前の段階として、普段から身の回りのデザインの文字を観察するコツはタイポグラフィの観察方法で紹介しています。

文字の分析・模写のやり方

文字の分析・模写は、「お手本を選ぶ→分解する→模写する→比べて言語化する」の4ステップで進めます。

それぞれのステップでやることを見ていきましょう。

ステップ1:文字が主役のお手本を選ぶ

最初は、写真やイラストが少なく、文字が主役になっているシンプルなデザインをお手本に選びましょう。

要素が多いデザインは見るべきポイントも多く、初心者のうちは何を分析すればよいか分からなくなりやすいからです。

たとえば、キャッチコピー・説明文・ボタンだけで構成されたバナーや、Webサイトのトップの見出し部分などが練習に向いています。

「なんとなく好き」「読みやすいと感じた」デザインを選ぶと、その理由を探る楽しさもあり、続けやすくなります。

ステップ2:チェックリストで文字を分解する

お手本を選んだら、次のチェックリストに沿って、文字の特徴を一つずつ書き出していきます。

漠然と眺めるのではなく、見る観点を決めておくことで、見落としがなくなります。

観点	見るポイント	メモの例
書体	明朝体かゴシック体か、和文と欧文で書体を変えているか	見出しも本文もゴシック体
文字サイズ	一番大きい文字と一番小さい文字はどれか	キャッチコピーが最大、注意書きが最小
ジャンプ率	見出しと本文の大きさの差はどのくらいか	見出しは本文の約3倍
ウェイト(太さ)	どこを太く、どこを細くしているか	キャッチコピーと価格だけ太字
字間	文字の間隔は詰めているか、広げているか	大きな見出しは少し詰め気味
行間	行と行の間隔は広いか、狭いか	本文は広め、見出しは狭め
揃え方	左揃え・中央揃え・右揃えのどれか	すべて左揃えで、左端が一直線
余白	文字の周りにどれくらい空間があるか	キャッチコピーの上下に大きな余白
視線の流れ	最初にどこを見て、次にどこへ目が動くか	キャッチコピー→価格→ボタンの順

ジャンプ率とは、一番大きな文字と本文などの小さな文字の大きさの比率のことです。
たとえば本文が16pxなら、見出しが20px(1.25倍)ほどだと落ち着いた印象に、32px(2倍)以上になると躍動感やインパクトのある印象になります(詳しくはジャンプ率で変わるメッセージの伝わり方で解説しています)。

特に大切なのは最後の「視線の流れ」で、どこに一番視線が集まるか、そしてそれはなぜかを言葉にすることです。

「一番大きいから」「ここだけ太いから」「周りに余白があるから」と理由まで書き出すと、デザインの意図が見えてきます(情報の優先順位の考え方は情報の階層を作るタイポグラフィ術で解説しています)。

表の「揃え方」を見るときは、本文は左揃え、短い見出しは中央揃え、数字は右揃えのように、役割ごとに使い分けているかに注目しましょう(揃え方の使い分けは文字の揃え方とはで解説しています)。

Webサイトなら実際の数値を確かめられる

お手本がWebサイトの場合は、ブラウザの機能を使って、文字の大きさや書体を実際の数値で確かめられます。

推測した値と実際の値を比べると、自分の目の感覚がどのくらい正確かも分かり、観察力のトレーニングになります。

Google Chromeの場合、次の手順で確認できます。

1. 調べたい文字の上で右クリックし、「検証」を選ぶ。
2. 画面に開いた開発者ツール(DevTools)の「要素(Elements)」パネルで、「計算済み(Computed)」タブを開く。
3. font-size(文字サイズ)、font-weight(太さ)、line-height(行間)、letter-spacing(字間)などの値を確認する。
4. 同じタブの一番下にある「Rendered Fonts」の欄で、実際に表示に使われているフォント名を確認する。

開発者ツールとは、Webページの裏側の仕組み(HTMLやCSS)を確認するための、ブラウザに最初から入っている機能のことです。
開くとコードが画面いっぱいに表示されて驚くかもしれませんが、ここで見るのは「計算済み(Computed)」タブだけなので、ほかの部分は読めなくても大丈夫です。
画面の幅が狭いと、「計算済み」タブが「»」の中に隠れていることもあるので、見当たらないときはそこを開いてみましょう。

「Rendered Fonts」の欄には、CSSで指定された候補の中から、あなたのパソコンで実際に使われたフォントが表示されます(Chrome for Developers: What font is that?(英語))。

そのため、同じページでもパソコンやスマホの種類によって表示されるフォントが違う場合がある点は覚えておきましょう。

開発者ツールが難しく感じる場合は、文字にマウスを合わせるだけでフォント名やサイズを表示してくれる「WhatFont」のようなChromeの拡張機能を使う方法もあります。
ただし、似た名前の拡張機能がいくつもあるので、利用者数や提供元を確かめてから入れましょう。

一方、バナーのように文字が画像になっているものは、数値を直接調べられないため、目で見て推測します。

書体の名前が分からなくても、「明朝体かゴシック体か」「太いか細いか」が分かれば、練習としては十分です。

ステップ3:デザインツールで模写する

分析が終わったら、FigmaやPhotoshopなどのデザインツールで、お手本と同じレイアウトを再現してみます。

このとき、まずはお手本を横に並べて見ながら、分析メモの数値をもとに作るのがおすすめです。

Figmaなら、お手本の画像(スクリーンショット)をキャンバスに貼り付け、そのすぐ横に同じ大きさのフレーム(作業用の枠)を作って、その中で模写します。
ほかのツールでも、お手本と作業用の枠を同じ大きさで横に並べるという考え方は同じです。

お手本を下に敷いてなぞる「トレース」から始めると、形はそっくりになりますが、「なぜその大きさにしたのか」を考える機会が減ってしまうからです。

とはいえ、何から手をつければよいか分からず手が止まってしまう場合は、最初の1回だけトレースして大きさや間隔の感覚をつかみ、2回目からは横に並べて自分で作る、という進め方でも構いません。

同じフォントが手元にない場合は、雰囲気の近いフォントで代用して構いません。
ゴシック体ならMacの「ヒラギノ角ゴシック」やWindowsの「游ゴシック」「メイリオ」、明朝体ならMacの「ヒラギノ明朝」やWindowsの「游明朝」のように、パソコンに最初から入っている標準的なフォントで十分です。
Figmaなら、Google Fontsの無料フォント「Noto Sans JP」(ゴシック体)や「Noto Serif JP」(明朝体)もそのまま選べます(フォントの選び方は見やすいフォントの選び方で解説しています)。

大切なのはフォントを完全に一致させることではなく、大きさの比率・太さの使い分け・間隔の取り方を再現することです。

ステップ4:お手本と比べて違いを言語化する

模写ができたら、お手本と自分の模写を並べたり重ねたりして、違いを探します。

この「比べる」工程こそが、模写で一番学びの多い部分です。

たとえば、次の2つを比べてみましょう。

左のお手本と比べると、右の模写1回目は、キャッチコピーが小さく、説明文が大きいため、2つの差が縮まってキャッチコピーの迫力が弱くなっています。

さらに、右はキャッチコピーの字間と行間が広すぎ、説明文の行間は狭すぎ、要素の間の余白も詰まっています。

このように違いを見つけたら、次のように「どこが」「どう違い」「なぜそうなっているのか」まで書き出しましょう。

• キャッチコピーと説明文のサイズ差が小さかった。
  お手本は差を大きくして、キャッチコピーを真っ先に読ませている。
• キャッチコピーの行間を本文と同じ感覚で広く取っていた。
  お手本は大きな文字の行間を狭めて、2行をひとかたまりに見せている。
• 要素の間の余白が足りなかった。
  お手本はキャッチコピーと説明文、説明文とボタンの間をしっかり空けて、読む順番をはっきりさせている。

書き方に迷うときは、「【どこが】キャッチコピーの行間が【どう違う】模写のほうが広い【なぜ】お手本は2行をひとかたまりに見せたいから狭くしている」のように、3つの枠に当てはめてみましょう。

「なぜ」は、正解が分からなくても構いません。
「〜だからかもしれない」という推測を書いておき、ほかのお手本でも同じ傾向があるかを確かめていくと、少しずつ確信に変わっていきます。

気づいた点を直して2回目の模写をし、また比べる、というサイクルを繰り返すと、文字を見る目が少しずつ鋭くなっていきます。

配色についても同じ要領で練習できるので、実際のデザイン分析とは?もあわせて参考にしてください。

実践のポイント

文字の分析・模写で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 見た目の雰囲気だけを真似して、「なぜそのサイズや間隔なのか」という設計の意図まで考えないことがあります。
  意図が分からないままだと、自分でデザインするときに応用できないので、必ず理由まで言葉にしましょう。
• 1回模写しただけで満足して、続けられないことがあります。
  1つのお手本を何度も直すより、短い時間でいろいろなお手本を繰り返し模写するほうが、見る目は育ちやすくなります。
• 模写した作品を、自分のオリジナル作品としてSNSやポートフォリオに載せてしまうことがあります。
  模写はあくまで練習なので、手元で学ぶためだけに使い、自分の作品として公開するのはやめましょう。

よくある質問

• Q. デザインツールを持っていなくてもできる?
  A. できます。
  分析だけなら、紙とペンで観点ごとにメモを取るだけでも十分な練習になります。
  慣れてきたら、無料で始められるデザインツールで模写まで挑戦してみましょう。
• Q. お手本で使われているフォントが分からない。
  A. まずは「明朝体かゴシック体か」「太いか細いか」「文字の形が丸いか角ばっているか」の3点だけ見分ければ十分です。
  そのうえで、手元にある近い雰囲気のフォントで模写しましょう。
  書体の種類はフォントと書体の種類の知識で解説しています。
• Q. 1回の練習にどのくらい時間をかければいい?
  A. 決まりはありませんが、最初は1枚のバナーを15〜30分程度で分析・模写するくらいの気軽さで始めるのがおすすめです。
  時間をかけて1枚を完璧にするより、短い練習を何度も繰り返すほうが習慣にしやすくなります。

まとめ

文字の分析・模写とは、優れたデザインの文字を観察して分解し、自分の手で再現することで、タイポグラフィの感覚を身につける練習方法です。

文字が主役のお手本を選び、チェックリストで分解し、模写したらお手本と比べて「どこが・どう違い・なぜか」を言葉にする、というサイクルを繰り返すことがポイントです。

まずは今日見かけたバナーを1枚選び、「一番大きな文字はどれか」「なぜそこに目が行くのか」の2つだけでもメモしてみてください。