かっこよくなきゃデザインじゃない!? そんなのは誤解だ!
デザインとは何ぞや?を考える、ayanpaの独断と偏見のデザインうんちくです。

フォントのホント
その3  文字組み
屁持論: 
大口くんにもおちょぼ口さんにも合うように

今回は、いかに文章を「おいしく」読ませるかというところを考察してみるでよ!

<文字数> 
ただっぴろい画面の中で、文章は一口サイズで改行


人の視界は横長に出来ているので、ワイドテレビやパノラマ写真などで臨場感を表現することが出来るんだなも。
しかーし!文章ではそれは通用せんでかん。
何故なら、人間の視界はワイドであるにも関わらず、実際見ているのはピンポイントだからなんだがや。
そんで、一番右端まで読んで次の段の一番左の文字が視界の中心から遠いと目線が迷うんよ。いっくらおいしいメロンパンでも一口で口の中いっぱいにしてまったら次の一口行けにゃーがね。

「まーかん!カンカンがかんでまったでかん!(とてもいけません!缶が(自動販売機の取り出し口などに)はさまってしまってどうにもなりません!)」という文を例でみせると、




さて、全部で何回「まーかんかんかんがかんでまったでかん」が繰り返されたでしょう?
実際数えなくてもええんやけど、読み比べてどれが一番読みやすい一行における文字数(一口サイズ)だろう?
人間が読みやすいと言われる文字数は、一行あたり12〜24文字くらいまでらしいんよ。
それ以下でもそれ以上でもいかんということではないんだが、長文になればなるほど目が疲れやすくなる。
水泳でいうならば、息継ぎなしで50メートル泳ぐようなもんだがや。
改行は息継ぎのためにあると思えばわかりやすいだろか?
息継ぎがありすぎても疲れるがな。

縦スクロールさせるのが嫌だからといって無理やり文章を詰め込もうとすると、逆に読んでくれない画面になってまうんよ。モニター画面を全部見てるつもりでも実際はにゃんこの目のように半分の幅くらいまでしか見ていないんだで、それに合わせて文字の大きさや文字数調整したってちょ!
メロンパン(文字の量)を口の大きさ(視界)に合わせて食べさせてちょ!



<行間>
外(タイトルまわり)はサクっともしくはシットリ、
中(本文)はフワっとしとった方がおいしい



文章の量や、扱いによって適正な行間は変わるがや。
基本的に長文を読ませるのに適正な行間は文字のでっかさの30%〜50%の縦幅くらいが適正らしいんだわさ。
でも、注訳や見出し文などは20%くらいらしい。
つまり、10pointの文章は文字+3〜5pointの行間、見出し文などでは文字+2pointくらいがええということなんだがね。
もちろんこれが正解というもんではなく、文字の大きさでも変わるし、要は見せ方の問題なんだがや。
年配の人対象ならもっと広めにとらないと読みにくくなってまうし、誰に見せるかで決めてちょ!
若い人対象だからといって詰めすぎると、かばんに詰め込んでまってペシャンコになったメロンパンのように悲しいでよ。ギュウギュウでもスカスカでもない、フワっとした感じをつかんでみてちょ!
「空白の部分が多いとすっきり見える」から、ファッション雑誌やデザイン誌の広告なんかは200%〜300%の行間空けとるのもあるし、内容や扱い方によってもやり方はかわるっちゅうこっちゃ。




<詰め>
空間のあきを見た目で揃えたってちょ!



日本語フォントはマスに合わせて作ってあるから、小さい「っ」や、「。、()」とかも全角分のスペースになるから、そこだけスカスカした感じになるがや。
英数字も半角マスで作ってあるけど、「L」とか、「T」とか「A」が隣同士になるとスカスカして見えるがね。それに、英文和文混在の文章では、初期設定のままだと英字は和字より小さく見えてまうで、英字は和字より1〜2ポイントくらい大きくすると揃って見えるでよ。英数字は英字フォント、和字は和字フォントと、形の似たフォントにするほうがプロポーションが綺麗だでよ。そこまで及ばないなら、「MS〜」ではなくて「MSP〜」の方の書体にした方がええじゃろ(マックは「OSAKAフォント」で十分きれいだがや)。
「DF(ダイナフォント)」系などのシステムフォント以外は、フォントを入れていない人も多いので、かっちょいいフォントにしたとしても無駄になる結果が多い(見ている側のパソコンでそのフォントがない場合は、代替のフォントで表示される)。
ソフトによっては、スタイルシートとかいう機能などで設定しておけば自動的に調整してくれるのもあるでよ、長文になるときは便利だがね。(ayanの持ってるソフトではできないらしい。あいつが使いこなせてないだけかも?)

文字間は全て均等な感覚で空いとるように見せなかんで、マス目できっちり均等に空いてても、実際に組むときは隣り合う文字の密度によって空けたり詰めたりしなきゃあかんっちゅうこっちゃ。




<揃え>
カスが袋の中からこぼれんようにしなかん。




メロンパン食っとると、ボロボロと食いカスがでるがね。
終わりの1〜3文字が改行してまうことによってボロッと次の行にこぼれてしまう状態だがね。
原稿用紙に作文書いて入りきらんで、余った数文字の為だけに2枚目使ってまうようなもんだがね。
このコラムにしたって字余りばっかだがね。
本当なら、調整して最後の行の右端で「。」で終わるのがいいがや(調整のできにゃーソフトらしいので無理も言えんと思っとるけど、食いカスにハトがよってきそうでおそぎゃーでかん!)。
原稿用紙の最後のマスに「。」で終わると気持ちええし、パシっと決まるがね。
そんで、端は揃っとったほうがええがね。
「左揃え」「右揃え」「中央揃え」「両端強制揃え」「両端均等揃え」があるけど、簡単にいうと、画面の左側にあるものは「左揃え」、右側にあるものは「右揃え」、真ん中は「中央揃え」。
箇条書きのようなものはそれでいいのだが、文章となると左右デコボコの食いさしのメロンパン状態になってまうで、なんか汚ならしくみえるんだがね。
これもソフトの限界らしくayanは出来ないと言っているが、本当なら「両端均等揃え」だがや。
「両端強制揃え」は一行ものならええが、行数が増えると文字間がバラバラになってまうでよ、文字間を均等に保ちつつ端と端をピシっと揃えると画面がぐっと締まって見えるんだがや。

さっきスーパーでメロンパン買おうかどうか迷っとって、こんな文章になってまったけど、「おいしく」見せれば食べたく(読みたく)なるもんだでよ。気を遣って損はせんと思うんだぎゃ。
パソコンで簡単に出来るけど、プロは「写植」といってカセットテープのケースにタイトルをレタリングしとったみたいに、ポスターや記事の文字をマス目テープに合わせながら一文字一文字貼っとるちゅうことだがらかなり大変な作業だと思うんよ。マス目はポイントではなく、級数(Q)という単位だがや。「写植屋」さんの手作業の職人技はパソコンには真似出来にゃーなあ。
ちなみにメロンパンはドラミちゃんも大好きだがや。

なんかわからんことあったらメールしてちょー! 
じゃあ、頑張ってちょー!バイちゃ!written by あやんぱ





Post Script :ラブレター書く時とかに、長文を書くときと、要点だけ言いたい時と、同じ便箋使った場合でも書き方かわらせん?
なんとなく要点を色分けしちゃうとか、大きくしちゃうとか、一行飛ばしで書いちゃうとか、L・O・V・Eと文字間あけたりとか…。
うん、あれはかわいらしく見えるがね。
お叱りの手紙はレポート用紙にぎっちり詰め込まれて書いてあったが…。
おそぎゃーでかんわ!
このページのTOPへ戻る 次(CI戦略)へ進む
01 ) コンセプトは
    むちゃんこ重要
02 ) 空間の魔術師 その1
   面積の黄金率
★ でら偏見 その1
   デザインとは何ぞや
03 ) フォントのホント その1
   文字と黄金率の関係
04 ) 空間の魔術師 その2
   目線を誘導するんだぎゃ
05 ) 色もイロイロあるけれど
   その1 グレースケール
06 ) 色もイロイロあるけれど
   その2 イメージカラー
★ でら偏見 その2
   雑誌を読もう!
07 ) 色もイロイロあるけれど
   その3 カラーと対比
★ でら偏見 その3
  おいたち 〜追憶〜
08 ) フォントのホント その3
  文字組み
09 ) CI戦略
10 ) 空間の魔術師 その3
   面積の黄金率U
★ でら偏見 その4
   ライセンス
11 ) 空間の魔術師 その4
   空白と余白
12 ) 空間の魔術師 その5
   空白と余白U
★ でら偏見 その5
   劣等感
13 ) 色もイロイロあるけれど
  その4 配色
14 ) フォントのホント その4
  統一感
15 ) コンセプトは
  むちゃんこ重要 その2
  コンセプトと技術



01 ) 光と影 その1
02) 光と影 その2
03 ) 発想法 その1
★ でら偏見 その1
   芸術と裸の王様
04 ) 発想法 その2
05) 光と影 その3
06) デッサン表現 その1
07) デッサン表現 その2
★ でら偏見 その2
   尊敬する人
08) 色の魔術師 その1
   色占い
09) 表示図法その1 図形
10 ) 発想法 その3 
 
  リスクは逃げず乗り越えるもの
11 ) 表示図法その2 
12 ) 表示図法その3 
13 ) 表示図法その4
14 ) 表示図法その5
★ でら偏見 その3
   幸福への才能
 
15 ) 空間の魔術師 
   空白と余白3

ayanpaのデザインうんちくHOMEへ戻る