誰かに見てもらうための、簡単なデザイン

カーニング(文字詰め)で出せる雰囲気と、参考としての顔文字

カーニングについての記事、2つ目です。
カーニング(文字詰め)のやり方、詰めるときの考え方みたいなのは前回書いたのですが、今回は、状況に応じたカーニング効果について書こうかと思います。
って、私の感覚的な話が多いのですが…。
なんとなくですが、顔文字を参考にすると雰囲気が伝わりやすいかもしれないと思ったので、最後に顔文字の話もちょっと入れています。

54_emoticons_kerning_03

詰めることばかりが良いことではない

文字詰めといったら、詰めろ詰めろ!みたいに考えがちなんですが、詰めることだけがいいわけではありません。
文字も絵と一緒で、使いようによってはアートになり、人に与える印象が違います。
フォントがゴシックか明朝か…というようなフォントの違いが、文字のデザイン?アートの分かりやすい点だと思いますが、それに合わせて、文字間を調節すると、さらにつけたい効果が得られたりします。

54_emoticons_kerning_07

季節外れだけど、年賀状…。
例えるならこんな感じですかね。左右の謹賀新年の文字の、文字間を変えています。
左側の、文字間を詰めた方に対して、右側はゆったりとした印象を持たせます。
なんとなく、右側の方がデザイン上級者というか…アーティスティックな感じがします。
空間をうまく使っている…ということですかね。文字間をあけて、ゆったりと文字を見せることで、余裕のある配置を感じさせるだけではなく、羊のイラストが持つ、ホンワカした感じを更に助長させているような気もします。
文字を詰めると、ちょっとせわしない感じがすることもあるんですが、こういう風に使って、画像や出したい雰囲気に合わせて変えてもいいんじゃないかと。
文字詰めとは空間の活かし方、という一面もあるんではなかろうか。

メディアの大きさもポイント

などと書いておきながら、「じゃあ文字間を空ければカッコよく仕上がるのか!」といったら、そうでもありません。
出したい雰囲気の他に、メディアサイズ、視界の範囲も考えて文字詰めをしなければいけません。
メディアサイズというのは、出力する時のサイズですね。紙だったらA4なのかA3なのか、ハガキなのか…ということや、ホームページだったらスマホ用なのかパソコン用なのか、どのくらいの幅のページに文字を置くのか…といった具合です。
メディアの大きさを考慮した配置をしないと、視界に必要な情報が入ってきづらかったり、読みづらかったり…で、結局見ている人に上手く情報が伝わらないことがあります。

54_emoticons_kerning_10

この場合だと、上の文字間を広くあけたものよりは、下の詰めた方が読みやすかったりします。
上の例だと、文字間が開いている分、文字を目で追うのに時間がかかってしまい、結果、文章内容の認識に時間がかかってしまいます。ただ、ぱっと見た目はオシャレです。
下の例だと、見た目は普通ですが、一目で文章全体が入ってくるので、上に比べれば内容の認識にあまり時間がかかりません。
僅かな差なのですが、こんな感じですかね。

長い文章を書く場合は、文字間を空ければいいというわけではありません。その文章をストレスなく読ませたいのであれば、視界に収まりきるサイズも考えることも必要です。

ハガキサイズの横幅いっぱいに文字を配置しても、ハガキは片手に収まるサイズなので、視界にそのまま入り、読みづらいことはないのですが、A4サイズの横幅いっぱいに文字を配置すると、多少視線を移動させないと読みづらいので、その移動分、内容を認識するのに時間がかかります。
あまりに読みづらい形だと、読んでいる側にストレスを与えます。
ちょっとした単語の配置なら問題はありませんが、長い文章の場合は、この辺りも考慮して文字間を調節することも重要です。

文字のスペースを認識させる

54_emoticons_kerning_13

一例ですが、文字間をつめて多くの文章を書いてみた場合(左)と、文字間をあけて文章を書いた場合(右)です。
文字間を空けた方(右)は、当然ですが、スペースを多く取ります。左に比べても、2行くらい差が出ていますね。
スペースを多く取るということは、その分文字の範囲を多く見せるという効果があって、同じ文章量でも、右のほうが「ダラダラ文字が並んでいる」というイメージを感じられるかと思います。
ぱっと見た目の文章量が多かったら、「うげぇ、これ読むの?」と思われることも多いはず。
ダラダラ長い文…というのは読み手にとってはストレスに感じる元になります。それなら文字間を詰めて、スペースを少なくして、かっちりまとめた方(左)が、読みやすそうな見た目に仕上がります。

新聞とかもこんな感じじゃないでしょうか。一定のスペースを区切って文章を詰めています。
新聞が見やすいかどうかというのはアレなのですが、長い文章は、ぱっと見で「長そう…読むの辛そう…」と思われる見た目にしないためにも、適切な文字間を保つことが必要です。
ただ、長い文章を限られたスペースに入れなければならなくて、仕方なく文字間をギリギリに詰める…という例もあって、この場合は文字間の効果にこだわってられなくなる場合もあります。。。

長体/平体にするか、文字を小さくするか

ちょっと話が逸れるかもですが…。文字を入れるスペースの都合で、文字間や形状を調整しなくてはいけない場合も出てきます。
例えば、少ないスペースに文字を詰めて入れる場合、考えられる方法は以下の3つです。

  • ・文字間を詰める
  • ・文字を小さくする
  • ・文字に長体/平体にする

これなのですが、私は長体、そして平体があまり好きではなく…いや、しゃーなしにいっつもしているのですが…なるべく避けたいと思っています…。

54_emoticons_kerning_16

本来の文字(100%)に対して、横幅を75%短くした「長体」、縦幅を75%低くした「平体」です。
長体、平体はなんか不格好に思えてしまって…平体にすることはあまりないのですが、長体にしても90%くらいまでに抑えたいなぁと思っています…。
なるべく長体を使わないために、文字を詰める時は文字間をギチギチに詰めるのも手の1つです。
じゃあ、ホントにギチギチに詰めていいのか、と言われると…これが結構できたりします。

54_emoticons_kerning_19

上が何も触っていない状態での文章、下が文字をギリギリまで詰めてみた文章です。
隣の文字とぶつからない程度にギリギリ詰めても、読めないとか、読みづらいという感じはあんまりしないんですよね…。何も触っていない状態と比べてみれば、そりゃ違いが分かりますが、ギリギリに詰めた文字だけ見ても、あまり違和感はないかと思います。

ただ、詰められる範囲には限界があります。そんな時に、文字を長体にしたり、文字サイズを小さくするという方法が使われます。ただ、あんまり細かい文字がビッチリ並んでいると、それはそれで読みにくい印象を与えてしまうので、これもほどほどに…ってとこでしょうか。

54_emoticons_kerning_22

文字間を詰めて、左は長体にし、右は文字サイズを小さくしてみました。
どちらが読みやすいか…というのは用途にもよるかもしれません。雑誌のコラムなどなら、文字サイズが小さくても問題はなさそうですが、年配の方などが見るパンフレットなどであれば、長体になっていても、多少文字が大きい(文字に高さがある)ほうが見やすいと思います。
ちょっと文字詰め関係ないような気もするんですが、私はこの辺は永遠のテーマだと思っています(何の?)。

顔文字が文字間の特徴をよく表していると思う

と、ここになって顔文字。
長い文章を書く時は、必ずしも文字間を空けることが良くない、というのは今まで書いてきた通りなのですが、短い文章の場合は、文字間によって雰囲気を変えて、表現力をつけることができます。
それがよく分かるなぁと思うのが、顔文字です。

54_emoticons_kerning_25

それぞれ左側にあるのが、文字間が空いてて、また全角等の文字を使っているものです。
右のものは、文字間が詰められていて、文字も半角を中心に使われているものです。
左側の方が、全体的にゆったりして、余裕があるように見えます。優しく見えるというのか…「にっこり」も「にっこり」ではなく「にーっこり」というか…ペロペロの速度も、左のほうが遅そうに見えます。なにそれ。いやなんとなくですけど。

左側の方は、スペースが広く使われているので、ゆとりを感じる一方、ちょっと間延びした印象もあります。右側の方が「ペロペロ!」「ニコッ!」としてて、収まりがよく見えるというか。
細かいこと言うようでなんですが、「返事ちょっと待って(^-^)」と打つよりは、「返事ちょっと待って(^-^)」と打ったほうが、なんか早く返事きそうな気がします。
ゆとりのない顔文字の方が素早さそうに見えるというか…。こんな風に思うの私くらいかしら…。

私はiPhoneなのですが、顔文字には最初から、同じような顔文字の全角版と半角版が入っています。ないものもありますが…。みなさんどうやって使い分けているのでしょうか。
なんとなくですが、ゆっくりした雰囲気を出したい時は左を、サクッと済ませたい時は右が効果的なのかなぁと思いました。

ほんと感覚の話で申し訳ないのですが…顔文字も文字間や記号の幅などを変えることによって、ちょっとニュアンスがかわってくるんじゃないかなぁと…んで、この辺はどこか文字詰めに似た部分があるなぁと…そう思っただけです…。

以上カーニングの話第2弾でした。
配置するスペースや出したい効果によって文字間を変えてみると、また違った雰囲気が出せるかもしれないよ的な話です。
文字間空けたほうがオシャレな雰囲気出せますけどね。そういうのは用途次第ですかね。
字詰め1つでも、それなりに効果があるので、文字配置するときの参考とかにしていただければありがたいです。参考になるのかしら…。

それでは!Have a nice design!!