文字組みの改善とフィードバックとは?比較とA/Bテストで読みやすくする方法

自分で作ったデザインを見て、「なんとなく読みにくい」「どこか素人っぽい」と感じるのに、何を直せばよいか分からない、ということはないでしょうか。

その「なんとなく」を具体的な原因に置き換え、一つずつ直していくのが、文字組みの改善とフィードバックという取り組みです。

この記事では、文字組みの改善とフィードバックとは何か、そして複数案の比較・第三者からの意見・A/Bテストで文字組みを読みやすくしていく方法を、初心者向けに解説します。

文字組みの改善とフィードバックの基本

まずは、文字組みの改善とフィードバックとは何を指すのか、そしてなぜ必要なのかを押さえましょう。

文字組みの改善とフィードバックとは

文字組みの改善とフィードバックとは、自分で作ったデザインの文字組みを見直し、「なんとなく違和感がある」という感覚を具体的な原因に置き換えて直していく取り組みのことです。

文字組みとは、書体(フォントの種類)・文字の大きさ・太さ・字間(文字と文字の間隔)・行間(行と行の間隔)・揃え方などを決めて、文字を並べることを指します(文字組みを含むタイポグラフィ全体の考え方はタイポグラフィとは?で解説しています)。

フィードバックとは、自分の作ったものに対して、ほかの人から意見や感想をもらうことです。

つまりこの取り組みは、自分で見直すことと、人の目や実際のデータで確かめることを組み合わせて、文字組みを良くしていくものです。

なぜ改善とフィードバックが必要なのか

改善とフィードバックが必要なのは、タイポグラフィは知識を覚えただけでは上達せず、実際に文字を組んで確かめることで判断力が育つからです。
優れたデザインを分解して真似る練習(文字の分析・模写とは)が「お手本から学ぶ」段階だとすれば、この記事で扱うのは「自分のデザインを直す」段階です。

違和感をそのままにしていると、「見出しと本文のサイズ差が小さすぎる」「字間が詰まりすぎる」といった自分の癖に気づけず、同じ失敗を繰り返してしまいます。

また、作った本人は内容を知っているため、初めて見る人がどこでつまずくかに気づきにくいものです。

自分では読めているつもりでも、第三者の目を通すことで、初めて読みにくさが見えてくることは少なくありません。

文字組みを改善する方法

文字組みの改善は、「違和感を原因に置き換える→複数案を比べる→自分でチェックする→人に見てもらう→数値で確かめる」という流れで進めます。

一つずつ見ていきましょう。

「なんとなく違和感」を具体的な原因に置き換える

改善の第一歩は、「なんとなく変」という感覚を、どの文字の要素が原因なのかに置き換えることです。

原因が分からないまま手を動かすと、あれこれいじっているうちに、かえって悪くなってしまうことがあるからです。

よくある違和感と、疑うべき要素の対応を表にまとめました。

表に出てくる「ジャンプ率」は、見出しと本文の文字の大きさの比率のことで、見出しのメリハリの強さを表します。見出しを大きく、本文を小さくするほど「ジャンプ率が高い」状態になり、見出しがパッと目に入りやすくなります。

「ウェイト」は文字の太さ、「行長」は1行の長さ(1行に並ぶ文字数)のことです。1行が長すぎると、次の行の頭に目を移すときに迷いやすくなります。

感じる違和感	疑うべき要素	試す調整の例
どこから読めばいいか迷う	ジャンプ率・ウェイト	見出しを大きく太くし、本文との差を広げる
窮屈で息苦しい	字間・行間・余白	本文の行間や、要素の間の余白を広げる
間延びしてまとまりがない	字間・行間	大きな見出しの字間と行間を少し詰める
長文を読むと疲れる	文字サイズ・行間・行長	本文を少し大きくし、1行の長さを短くする
雰囲気が内容と合わない	書体	明朝体とゴシック体を入れ替えて比べる
文字が背景に沈んで見える	文字色・コントラスト	文字色を濃くして、背景との明るさの差を広げる

それぞれの詳しい調整方法は、ジャンプ率で変わるメッセージの伝わり方、カーニングとトラッキングの教科書、読みやすさを劇的に変える「行間と行長」の黄金ルール、コントラスト比とは?、書体の選び直しは見やすいフォントの選び方で解説しています。

1か所ずつ変えた複数案を並べて比べる

原因の見当がついたら、その要素だけを変えた案をいくつか作り、並べて比べましょう。

1つの案だけを見ていると良し悪しを判断しにくいですが、並べると「こちらのほうが読みやすい」と違いがはっきり分かるからです。

ポイントは、1回の比較で変える要素は1つだけにすることです。

サイズと行間と書体を一度に変えてしまうと、良くなった理由がどれなのか分からなくなります。

たとえば、行間だけを変えた3つの案を比べてみましょう。

ここでの「1.2倍」などは、行の高さ(1行目の頭から次の行の頭までの距離)が文字サイズの何倍かを表しています。CSSのline-heightと同じ考え方で、デザインツールによっては「180%」のような%や、ptで指定するものもあります。

A案:行間 1.2倍

文字組みは、少しの違いで読みやすさが大きく変わります。行と行の間が狭すぎると、次に読む行を目で探しにくくなり、文章全体が窮屈に見えます。

B案:行間 1.8倍

C案:行間 2.6倍

A案は行間が狭く、行がくっついて窮屈に見えます。

C案は逆に行間が広すぎて、行同士のつながりが切れ、文章がばらばらに見えます。

B案が、最も落ち着いて読みやすいと感じる人が多いでしょう。

本文の行間は、行の高さを文字サイズの1.5倍以上にするのが目安で、日本語では1.7〜1.9倍くらいまで広げると読みやすく感じることも多いです。詳しくは読みやすい本文とは?で解説しています。

このように、極端な案も含めて並べると、「ちょうどいい」範囲がつかみやすくなります。

自分でできるチェック方法

人に見せる前に、自分ひとりでもできる見直し方があります。

作っている最中は細部ばかり見てしまうため、意識的に見方を変えることで、全体の問題に気づきやすくなります。

縮小して見る・離れて見る:画面を縮小したり、少し離れたりして見ると、細かい文字が読めなくなる分、大きさや太さの差、余白のバランスだけが見えてきます。
ブラウザならCtrl(Macは⌘)と「−」キーで縮小でき、デザインツールでも表示倍率を下げれば同じように確認できます。
見出しが一番に目に入るかを確かめましょう。
時間を置いて見る:作った直後は目が慣れてしまっています。
一晩置くなど時間を空けてから見ると、初めて見る人に近い目で確認できます。
実際の画面で見る:デザインツールの画面とスマホの画面では、画面の大きさや解像度が違うため、文字の見え方も変わります。
Webやバナーなら、実際に表示されるスマホやパソコンで確認しましょう。
CanvaやFigmaなどで作ったデザインは、PNGやJPEGの画像として書き出して自分のスマホに送り、全画面で表示してみると手軽です。
声に出して読む:声に出して読むと、改行の位置が言葉の途中になっている箇所や、読み飛ばしやすい箇所に気づけます。

第三者からフィードバックをもらう

自分でのチェックが終わったら、ほかの人に見てもらいましょう。

フィードバックを有効に活かすコツは、「どう?」と漠然と聞くのではなく、答えやすい具体的な質問をすることです。

「どう?」と聞くと「いいと思う」「なんかダサい」のような感想で終わりやすく、何を直せばよいかにつながりません。

漠然とした聞き方	具体的な聞き方の例
このデザイン、どう?	最初に目に入ったのはどこ?
読みやすい?	読んでいて引っかかった箇所はある?
いい感じ?	このページで一番伝わったことは何だった?
おかしいところある?	文字が小さい・詰まっていると感じた場所はある?

相手から「なんか読みにくい」という感覚的な答えが返ってきたら、「どのあたりで?」「どの文字が?」と聞き返して掘り下げましょう。

「パッと見た瞬間に読む気がしなかった?それとも、読んでいる途中で疲れた?」と聞くのも効果的です。パッと見の問題ならジャンプ率や余白、読んでいる途中の問題なら文字サイズや行間・行長が原因である可能性が高い、と絞り込めます。

そのうえで、教えてもらった場所を上の表と照らし合わせると、「この見出しのジャンプ率が低いのかもしれない」と原因に置き換えられます。

なお、デザインに詳しくない人の意見も大切です。

実際にデザインを見るユーザーの多くはデザインの専門家ではないため、「どこを見たか」「何が伝わったか」という素直な反応は、そのまま改善のヒントになります。

A/Bテストで数値で確かめる

Webサイトやバナー広告では、A/Bテストで複数の文字組みを実際に試し、数値で比べることもできます。

A/Bテストとは、「A案」と「B案」のように一部だけを変えた2つのパターンを用意し、訪れた人にランダムに振り分けて表示して、どちらがよりクリックされたかなどを比べる方法です。

振り分けは、A/Bテスト用のツールや広告の配信機能が自動で行ってくれます。感覚ではなく、実際にクリックされた数で勝ち負けを決める実験のようなものです。

人の意見は「好み」に左右されやすいのに対し、A/Bテストは実際のユーザーの行動で判断できるのが強みです。

たとえば、バナーのキャッチコピーを「大きく太いゴシック体」にしたA案と、「やや細めの明朝体」にしたB案を同じ期間に配信し、クリック率(表示された回数のうちクリックされた割合)を比べます。

A案のクリック率がはっきり高ければ、「このバナーでは、太いゴシック体のほうが目を引いた」と判断できます。

A/Bテストでも、変える要素は1つだけにするのが基本です。

また、表示回数が少ないうちは偶然の差が出やすいため、ある程度の数が集まるまで待ってから判断しましょう。

たとえば、どちらの案もクリックが数回〜十数回しかないうちは、たまたまの差かもしれません。A/Bテストのツールには、その差が偶然ではないかを判定してくれる機能を持つものも多いので、参考にしましょう。

ボタンの文言や色をA/Bテストで比べる考え方は、CTAボタンとは?のよくある質問でも紹介しています。

公開後も振り返り、次の制作に活かす

文字組みの改善は、デザインを公開したら終わりではありません。

公開後に、狙いどおりに情報が伝わっているか、問い合わせやクリックの数、SNSなら保存や反応の数、利用者の声などから確かめましょう。

そこで分かったことを「本文の行間は広めのほうが反応が良かった」のようにメモしておくと、次の制作で同じ迷いをせずに済みます。

こうした気づきを積み重ねることが、自分なりの文字組みの判断基準を育てることにつながります。

実践のポイント

文字組みの改善とフィードバックで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

フィードバックを「自分を否定された」と受け止めてしまい、改善に活かせないことがあります。
フィードバックは、あなた自身ではなくデザインに向けられた、より良くするための情報です。
まずは「教えてくれてありがとう」と受け取り、取り入れるかどうかは後で落ち着いて判断しましょう。
「なんかダサい」のような感覚的な指摘で止まってしまい、どの文字の要素の問題かまで掘り下げないことがあります。
原因の要素まで特定しないと、次の制作に活かせません。
複数案を作るときに、一度にいくつもの要素を変えてしまうことがあります。
どの変更が効いたのか分からなくなるので、比べる要素は1回に1つに絞りましょう。

よくある質問

Q. フィードバックをくれる人が周りにいない。
A. まずはこの記事で紹介した、縮小して見る・時間を置いて見るなどの自分でできるチェックから始めましょう。
家族や友人など、デザインに詳しくない人に「最初にどこを見た?」と聞くだけでも、十分なフィードバックになります。
あわせて、身の回りのデザインを観察して文字を見る目を養っておくと、自分で気づける違和感も増えていきます(タイポグラフィの観察方法)。
Q. 人によって意見がバラバラで、どれに従えばいいか分からない。
A. そのデザインの目的とターゲットに立ち返って判断しましょう。
「誰に、何を一番伝えたいか」に照らして、その目的に近づく意見を優先します。
複数の人が同じ箇所を指摘している場合は、そこに問題がある可能性が高いと考えましょう。
Q. A/Bテストは個人のブログやサイトでもできる?
A. 専用のツールを使わなくても、「今月はA案、来月はB案」のように期間を分けてクリック数を比べる簡単な方法から始められます。
クリック数は、Googleアナリティクスなどのアクセス解析ツールで確認できます。
ただしこの方法は、季節やキャンペーンなど時期による影響も混ざるため、結果はあくまで目安として見ましょう。