「このページ、なんか見づらい」と先輩ディレクターから指摘があった。

数年一緒に働いている先輩のため、先輩の指摘する私もその「なんか」という部分はわかり、共感したものの。「なんか」を共有していない作業者に対してはどう伝え、指示をだせばいいのかと悶々とした。ここでは、文字情報に的を絞って、「なんか見づらい」のなんかを要素に分解してみようと思う。

背景色と文字色の組み合わせが悪い

一番あるのが、背景色と文字色がわかりづらい色というとき。例えば、背景#FF94AC　に　文字色#66CCFF　を重ねると。

一応読めなくはないけど、なんかもやっとする。このもやっと感こそが、一つ目の「なんか見づらい」の「なんか」だ。ただし、人間にはいろんな人がいて、当然上記の例でも「別に見づらくないよ」という人もいる。そういう人に「何かみづらいじゃん！」って説いても感覚の共有はできない。ゆえに、私は富士通のカラーセレクターを使って、判定をするのがいいのでは、と思っている。

背景#FF94AC　に　文字色#66CCFF　を重ねた結果。判定結果窓には「×」の文字。ここが×だと見づらい、という判定とする。作業者に実際にデザイン時にこのカラーセレクターを使ってもらって「×」にならないよう、用いる色を決めてもらうと、文字が見やすくなってくると思う。

ちなみに、背景がグラデーションの場合は、その最上部の色、中間の色、最下部の色で判定を私はしてる。文字を読みやすくするには、全部で「○」をだすと美しいよね！

アンチエイリアスで一部が薄い

しかし、上記カラーセレクターで判定○がでたからといって安心はできない。第二の「なんか見づらい」の「なんか」の落とし穴がある。文字をうつと、グラフィックソフトではフォントをより滑らかにみせるために、文字の輪郭と背景を融合させる「アンチエイリアス」という処理をする。このアンチエイリアス処理段階で「輪郭がより多く背景に融合されてしまう」と、文字はみづらくなることがあるのだ。

例えば以下の画像。

同じ000000の色でも、新ゴの「鮮明」と「シャープ」の形状では、同じサイズなのに「シャープ」のほうがみやすい。これは、鮮明よりシャープのほうが、より輪郭と背景の融合度合いが少ないからだ。また、アンチエイリアスを切ったMSPゴシックについては、輪郭と背景の融合が全くないから、かなり見やすい。（デザイン的にいけているかいけていないかは別の議論とする）さて、同じ内容を今度は#333333でみてみる。「鮮明」をみた瞬間、私は「なんか見づらい」と強く感じる。シャープでも「なんか見づらい」という感覚を持つ。黒だとなんだか重いから、グレーにしよう・・・としてグレーにするにしても。文字がみづらくないか、は常に自問自答すべき。

輪郭をぼやかす、文字の装飾（ドロップシャドウ・境界線・光彩等）

第3の「なんか見づらい」の「なんか」は、よかれと思ってつけた装飾が挙げられる。輪郭がより多く背景に融合される最たる例としては、ドロップシャドウや境界線、光彩などがある。あとは文字のグラデーションとか。

ドロップシャドウは影を落としてみせるデザインだが、影の範囲を広く、輪郭がやわらかくぼけるようにしたり、文字色と背景色をつなぐような色合いにすると悲しいくらい文字が読みづらくなる。境界線・光彩もしかり。シャドウおとすときも、境界線・光彩つけるときも、文字装飾がないさみしいから、という漠然とした理由ではなく、文字の形を際立たせるために装飾を用いると考えたほうが見やすいものが作れるようになると思う。

———-

デザイン感覚を共有してない人に対して、自分が感じた「なんか見づらい」を伝えるのは大変なことだ。感覚をデザイン要素に分解して理由を考える作業、なぜそれがいけないのかを考え伝える作業、どうすればいいのかを考え伝える作業、とおして行わなければいけないから。でも、その作業をとおしてこそ、デザインのクオリティは上がるし、何よりより多くのお客様にさくさく読んでもらえるコンテンツになると私は信じている。