説明書を読みやすくする

40代になると、細かい字が読みにくくなりますよね。
説明書もできるだけ大きな文字でお願いしたい！！！！！！
・・・と、そんな意見をtwitterでもみかけます。

とはいえ、制作者としては、なるべく多くの文字を、
限られたスペースに収めたいところです。

そこで同量の文字数を工夫することで、
少しでも見やすくする方法をまとめてみました。

ブログで紹介することもあり、モニターのサイズや環境によって、
印象が変わる場合もあります。
記事の内容は鵜呑みにせず参考程度にとどめ、自分の感覚で作業してください。


いくつかの段階に分けて紹介してみましょう。





左はテキストを同サイズのフォントでレイアウトしたものです。
均一のサイズですがなるべく大きな文字で、
スペース内ギリギリまで使って改行しています。
行間はかなり詰まった状態になりました。

右はテキストのサイズとフォントを、見出しと本文に分けたものです。
本文のサイズは小さくなりましたが、
メリハリをつけることでだいぶ読みやすくなりました。
行間を広げているのでテキストのサイズが小さくても可読性は上がっています。


・文字のサイズは大きければ良いわけではない

・しっかりと行間をとることで読みやすくなる

・見出しと本文でサイズやフォントを変えるとメリハリがつく


それではさらに工夫してみましょう。






左は前回のものです。

右は天地左右の余白を広げたものです。
テキストのない空間を確保することで、
ギリギリまでテキストが入っているものより読みやすいですね。

さらに文字詰めを修正しています。
カッコや句点などの字間を詰めることで、十分な行間が確保できない場合でも、
テキストが読みやすくなります。

また、テキスト右側の改行部分を比べると、ぴっしり揃えた文字組みになっています。
これは専門用語で『ハコ組み』というものですが、大量のテキストを読ませる場合に、
整えることで読みやすくする手法です。
もちろん見た目も良くなりますね。


・テキストのまわりに余白を確保する

・文字詰めをして読みやすくする

・ハコ組みにすることで読みやすくなる


使用するソフトや技術力によって、できない場合もあるとは思いますが、
知識として身につけておくだけでも違ってくると思います。






左は前回のものです。

右は見出し部分に色を入れたり、地色を加えたものです。
目立たせたい部分に、色が入ることで強調されましたね。

『初心者ルール』の部分のように、他のテキストと差別化させたい場合は、
囲みを作るのもいいでしょう。

見出しの先頭に『■』や『●』を加えることで強調することもできます。

背景や下地に色を入れることを専門用語で『ザブトン』といいます。
重要な部分にはザブトンを使うことで、
文字が白ヌキになり、全体としてメリハリができました。

さらに強調させたい場合は、ビビットな色を文字に加えることで、
ユーザーがチェックしやすくなります。

色弱な方など、色使いによっては、
逆効果になるケースもあるので注意したいですね。


・目立たせたいところに色を使う

・見出しの先頭に『■』や『●』を加える

・ザブトンや白ヌキ文字を使ってメリハリをつける

・強調したい部分にはビビットな色を使う


ここまでの作業を行うと、かなり見やすくなったと思います。
個人的には説明書のレイアウトとして十分なクオリティだと思います。







左は前回のものです。

右は・・・どこを変更したでしょう。わかりますか？

実は改行部分の文字を変更しています。

言葉の切れ目、句点の入る位置など、微調整をすることで、
可読性は変わってくるのです。
今回は字間を調整したり、改行をすることでバランスを調整しています。

ここまでやれるとハイレベルな説明書になると思います・・・が、
ページ数が多いものや、テキスト量の多いものだと限界がありますね。
無理のない範囲でやれればと思います。


・改行部分の文字を調整して読みやすくする






それでは最初のものと、仕上がりを比べてみましょう。
細かな修正の積み重ねですが、かなり見やすくなったと思います。

ここまでデザインするには、手間と字間がかかるかもしれませんが、
やっただけの価値はあると思います。

ただ文字を大きくすれば読みやすいのではありません。

自分でできる範囲でかまわないので、工夫してみるといいでしょう。