わたしはどう目を通しているのか?ーーー 続・視覚コミュニケーション
みなみなさま、ごきげんさま。
すっかり梅雨もあけて暑い夏がやってきました、と来週には言えるでしょうか。例年の7月ならば梅雨の最中でももっと暑かったような気もしますがどうなのでしょう。蝉の声すら一向に聞きません。
タイポグラフィ「文字を用いた視覚的コミュニケーションのデザイン」の話を前回しました。
文字、印刷されるもしくは画面に映る文字(フォント・書体)には、
視認性と印象を与える役割がある、という話でした。
街中を歩いていると明朝体を使っているのに大きなサイズでぎっちりと字間を詰めたタイポグラフィを文字組みをしていたりすると、『どういう印象をイメージをもってほしいのだろう』と勝手に思ってしまいますが、製作者さんには何らかの意図があってしているのでしょう。
聞いてみたい気持ちはありますがなかなか聞く機会がありません。
あ、整列(Alignment)の話をするのを忘れていました。またいつか話せればと……。
なんて感じで終わったので、タイポグラフィにおける整列の話ができればと思います。
さらっと、前回、書いたことをおさらいすると、
タイポグラフィもデザインですからルイス・サリヴァン(Louis Sullivan)(建築家)さんの言葉、
「Form Follows Fonction.(形は機能に従う。)」
ルイス・サリヴァン(Louis Sullivan) 1896年
を、主題にします。
つまり機能に従った形(文字・文章)が、タイポグラフィです。
広告デザインの機能やそれぞれの媒体の機能に従うことと、
読む人の機能、視認性と印象に従う。
そこでフォントの選択から、文字のサイズ(ジャンプ率)、文字と文字の間隔(カーニングやトラッキング)、行と行の間隔(行送り)、1行の長さ(行幅)などを考慮し文字を組んでいくわけです。
文字サイズのジャンプ率を小さくすると高級感が出る、反面大きくすると躍動感が、なんて話でした。
気になる、いや、一度、今一度、こちらもお読みいただけると嬉しいです。
文字をレイアウトすることを文字組みといいますが、これはその昔、活字と呼ばれるハンコのようなものをひと文字ひと文字、隙間なく並べ文章となるように組み立てられていた(四角いハンコを隣り合わせで連ねるように)ことからその名残で文字組みと呼ばれています。
昔話はさておき、では整列(Alignment)の話を
整列(アライメント)とは、
文章や文字の塊(ブロック)の端を、特定の基準線に沿って揃える技術です。
左揃えや右揃え、中央揃えに両端揃えとあります。
活字を組んでいた頃や手作業で切り貼りなどをしていた頃ならば、技術なんてテクニカルな意味合いでしたが、今時はパソコンで専門のソフトを使っているので技術なんていうものでもありません。ボタンひとつで基準線に沿って揃えてくれますが、それを知っているのと知っていないのでは、というと知識になってしまいますかね。
しかし、このNoteにもこのボタンがついていたりしますから簡単です。
左揃えから見ていきましょう。
この私のNoteも基本的には左揃えです。
左端が綺麗に文章の先頭(改行された先頭)にきて揃って整列されています。
横書きの文章の左端を直線状に揃える(整列)文字組みです。(逆側の右端は不揃い)
横書きの場合は、日本語も英語も基本的には「左から右」に向かって読み進めます。行を読み終えて次の行に移るとき「常に同じ位置(左端)から次の行のスタート地点がある」ため、脳に最もストレスを与えない読みやすい整列といわれています。
[基本的には「左から右」]と書かれていることが多いですが、
その昔は明治以前、日本では「右から左」と読まれていました。その名残としてか老舗のお店の看板など「右から左」に屋号が書かれているものを見たことがありませんか?
実は「右から左」にではなく縦書きで書かれているだけで横書きではなく、ひと文字で改行されているとのことです。
そもそも日本には横書きという概念自体がありませんでした。
日本語と中国語くらいを扱うことが多かったために何の支障もなかったといえばいいでしょうか。
看板などスペース的に横長のものに文字を書くときだけが支障があったので改行を用いてその当時の看板職人さんはタイポグラフィをしていたのかもしれません。看板職人さんがいたのかは知りませんが。
明治に入り開国をし外国語、横書きが入ってくると支障が出るわけです。横書きと縦書きでは、紙面がうまく形成・構成できません。
現代でも縦書きの文字組みの中にAlignmentと横文字を入れるには、ひと苦労が必要です。90度回転させるのか、パソコンですからそんな苦労ではありませんがバランスは悪くなります。当時の超アナログな文字組みを想像するとどうしていたのでしょうか。
様々な論やお考えがあり論争が繰り返され、1942年(昭和17年)に当時の政府の文部省が「横書きは左から右へ書く」という統一見解を出しました。
それでも、伝統と文化を守っていたところもあったみたいですが、1946年(昭和21年)以降はそれもなくなり、統一されました。昭和21年に何があったのかは、ここでは詳しくは書きませんが調べるとすぐにわかるはずです。
左揃えだけで、こんなにも文字数を使ってしまったけれど、ここはささっといくつもりでしたが、想定の範囲内です。
いや、まだ左揃えの印象の話をしていません。
自然、標準的、誠実。などの印象をもたれます。印刷物にせよネット環境にせよ基本的な文章の多くは左揃えです。
つまりは、左揃えにしておけば間違いはありません。
では逆の、右揃えを見ていきましょう。
横書きの文章の右端を直線状に揃える(整列)文字組みです。
(逆側の左端は不揃い)
横書きの視線移動(左→右)の「終着点(右)」を揃えるため、視覚的な余韻や、少し「ひねりやアクセント」のある印象を与えます。
メインの文章として使うと読みづらいですが、「補足情報」や「日付・署名」など、主役を引き立てる脇役のデータを配置するのに最適と
いわれています。
メインの文章にすると少し読みづらいどころか、かなり読みづらいですね。
2026.7.7 火曜日
日付くらい文字数だと良さそうです。
短めの文章や写真の説明(キャプション)を写真の下で右端に合わせて整列させるなどでは納まりが左揃えよりも良いことが多い。
印象としては、スタイリッシュ、知的、情緒的。などのイメージをもたれやすく。スタイリッシュですからオシャレ的な読んでもらうというよりかは感じてもらいたいときでしょうか。メインの本文でない短い文ならば少しばかりのオシャレをもってもらえるので使い所が多いかも知れません。
知的なイメージを出したいからと、メインの本文で安易に右揃えにすると見づらいだけになってしかねません。
名刺など短い文たちならば、フォントや字間・行間なども気をつければ知的なイメージはつくれそうです。
実際、本人や会社が知的でないならば会った場合の印象がよくないけれど。
続いては、中央揃えです。
文章の各行の中心(軸)を基準線として一行を左右対称に配置する方法で、左右の端はどちらも不揃いになる文字組みです。
視線が中央の1点に集まるため、強い安定感と格式が生まれやすい。
ただし、行ごとに文頭(始点)の位置がバラバラになるため、3行以上の長文に使うと、視線移動に迷いが生じて読みづらくなります。
ゲシュタルトの対称性の法則で図(主役)として捉えられる場合がある。
つまりは目立たせたいならばいいが意図せずに目立ってしまいます。
なかなか長文は読みづらいことがわかりますが、よく見かけます。
いい感じな印象として組んでいるのでしょうか、いい感じと抽象的にいいましたが、デザインをやっている考えているような感じといえばいいでしょうか。あるいは本文を読んでほしくない、なんて狙いならばバッチリです。
中央揃いの印象としては、安定感と格式のほかに、伝統的、エレガント、高級感などのイメージを与えるといわれています。しかしフォントや字間を気をつけなければならない難しい。もちろん文字の大きさも要注意です。
高級なもののパンフレットなど明朝体を用い中央揃いをし、小さめな文字で字間も行間もゆったりと優雅に本文も書かれていたりします。
タイトルやキャッチコピーを中央(左右)に中央揃えで、安心感をというのはある程度どんなフォントも安心感は出せるのではないでしょうか。
紙面や画面の右側や左側に、中央揃えでというのはあまり見かけないですが組んでいる人も納まりが悪いと感じるからでしょうか。
しかし、それが成功すればとても印象のいいエレガントで高級な感じに捉えますからチャレンジするのもいいかも知れません。パソコンの画面上でその確認はできますからね。
逆にロゴなどは中央揃えが多いですね。安定感がよくまとまりとして捉えてほしいものですからね。そのロゴにまた中央揃いでスローガンやタグラインと呼ばれる文字・文章(タイポグラフィ)が入ることも多いですかね。
整列の最後に、均等配置・両端揃えがあります。
このNoteにその設定はありませんが、
文章の左端と右端の「両方」を直線状にピシ
ッと揃える方法で文字数によって生まれる隙
間を自動(手動)に文字間(トラッキング)
を微調整をして四角の中にキッチリと納まる
文字組みです。
(手作業で20文字で両端揃えをしています)
紙面や画面全体が「美しい四角い箱(ブロック)」として認識されます。
中央揃いとは違い、両端が揃っている(整列)ので、紙面などの中央に配置しなくても印象は変わりません。
印象的には、組織的や秩序感などですが、視認性の高さが圧倒的に高く読みやすい。雑誌やコラム、新聞などに使われています。
広告などのボディーコピーでは、デザイナーがただただ右端がガタガタなるのが気持ちが悪い職業病的に揃えられている。なんてこともあるかも知れません。(見るからにガタガタならばいいのですが微妙にガタついていることが気持ちが悪くなればいっぱしのデザイナーです、とは言い切れませんが)
しかし、にぎやかや躍動感などの印象が目的ではない場合は、秩序があるような印象をもたれたいものです。
あくまでも印象やイメージで、左揃えだから標準的に必ず見えるとは限りません。フォントやサイズ、字間も関係してきます、周りの要素との関係性や背景に何があるとかも印象には影響を与えます。
文字組みに正解はない。終わりがない。ものです。
日本語には縦書きもありますが、基本的には同じで応用が効きます。
左を上とすれば考え方は左揃えは上揃えです。右が下で下揃え。中央揃えはそのまま横軸の中央を軸に揃えます。両端揃えは上下を揃えることです。
整列(Alignment)は以上で、
タイポグラフィの基礎的な話はできたかと思います。
後ひとつ、文字組みとしての文字数の話をできればと思います。
一行に何文字くらいが読みやすいのか。という話です。
このNoteは34文字です。3回、数えましたから間違いありません。本当は5回数えて4回は34文字で1回35文字だったので、35文字かも知れません。
これはパソコンで見た文字数です。(環境によって変わるのでしょうか)
スマホとはきっと違います、スマホによっても違うのか。
つまりは、パソコンの画面で読むのとスマホの画面で読むのでは一行の読みやすさが違う、ということです。そう設計、デザインされています。
いや、正確にはNoteの運営会社はそう感じて文字数を変えています。
読みやすいというのは、語弊があります。
ミスが起きない、ストレスが少ない文字数という方が正確かも知れません。
Webと紙媒体では少し数字が違うのですが、といいたいところではありますが、ほぼ同じ。
40文字前後といわれています。
なぜその数字なのか。
人間の眼球のシステムにおけるサッケード(躍度運動)で文字を捉え認識することから、導き出された数字です。
サッケードとは、人間が文字を読むときは目は滑らかに動いているのではなく、跳び跳ねるように動いて一塊の文字(言葉)として捉え、その視線を止める瞬間に7文字前後を認識している、といわれています。中心窩(ちゅうしんか)と呼ばれる視野に入る4〜6文字がその範囲内だということです。
一行が長すぎると、行を見失う確率が高くなる。横書きの場合、左から右へと文字を読み進めていき、行の終わりが右にあり次の行へと左へと戻りますが、その次の行がどれなのかがわからないくなる確率が一行の長さが伸びると高くなる、ということです。
だったらより短くするといいのでは、と思うのがこの人(筆者)ですが、サッケードの回数が増えてよりストレスがかかる。ともいわれています。
その最適(最長)な文字数が日本語では、一行40文字前後、欧文では60〜70(10〜12ワード)が、誤認が少ない。
といわれています。
印刷媒体やパソコンの画面でのテキストの文字組みとしての話です。
小説やブログ、などの媒体での誤認が少ない数。
もちろん文字の大きさやフォント、行間なども影響は与えますから、40文字だからいいというわけでもありません。
これがスマホだと、40文字も一行にあると読みづらい。文字サイズが小さくなりますからね。
そのデバイスにもよりますが、私のデバイスでは20文字でした。
スマホのいいところは自分の好みや視力に合わせて文字の大きさなどを変更できることですから、見ている人が最適なサイズで一行が決まるという感じでしょうか。
つまりは、前途で両端揃えを手作業で行ったものをスマホで見ると単なる左揃えとなっているかもしれません。わかっているのならば直せばいいのですがみなさまのデバイスが何文字なのか、わかりません。なんて言い訳をここに残しておきます。
テキスト文字、紙媒体なのに一行に40文字もなく、10文字から12文字くらいのものも日本にはあります。
多段組の新聞がそれです。
昔は、15文字ありましたがフォントのサイズを大きくするのをきっかけに10〜12文字なりました。それだと疲れるという話と矛盾します。しかし、新聞に使われているフォントは特殊で平体がかかっており通常のフォントよりも縦が少し短い。それによりサッケードの回数を減らし疲れにくい工夫があるといわれていて、何よりも縦書きは横書きよりも疲れないみたいです。
疲れないやストレスがかかりにくいなどの表現が多いですが、実際には自覚認識できるほどの疲れではありません。
最近の研究では、横書きを読むほうが疲れない。なんて結果もあり単なる慣れということも大きいのかもしれません。
しかし、知っていてそうするのと知らなくて、闇雲に文字を流す、組んでいくのでは根拠と出来上がりが違ってきます。
40文字は読みやすさというよりも、誤認誤読防止策です。
W3C(World Wide Web Consortium:ワールド・ワイド・ウェブ・コンソーシアム)の
WCAG(Web Content Accessibility Guidelines:ウェブ・コンテンツ・アクセシビリティ・ガイドライン)
としての国際標準も設けられています。
幅が80字を越えない(全角文字の場合は、40字)。
WCAG(Web Content Accessibility Guidelines) 達成基準 1.4.8 視覚的提示
WCAGとは、
W3Cという国際標準化団体が、Webをみんなに使いやすくするために定めた世界共通のガイドライン。
W3Cとは、
ティム・バーナーズ=リーさんらが1994年に創設した、Webの技術(HTMLやCSSなど)の国際標準化を進める非営利の標準化団体。
ティム・バーナーズ=リーさんとは、インターネットの生みの親。
(といわれていますが厳密にはインターネットの育ての親ではと個人的には思いWeb(World Wide Web)の生みの親では、と思うのは個人の感想です)
インターネットは1960年代からあり、世界中のコンピュータを物理的・電気的につなぐ「回線や通信網(インフラ)」のことです。
彼は「職場の物忘れ」を防ぐことをきっかけに1990年の数ヶ月間で、現代の私たちが毎日使うWebの基盤(世界初のシステム)をたった1人で同時に開発をした人物です。
同時にというのは、
HTML(HyperText Markup Language)
文字にリンクを埋め込み、ドキュメントの構造(見出しや本文)を記述する言語。
HTTP(Hypertext Transfer Protocol)
コンピュータ同士が「このページをちょうだい」「はい、どうぞ」とデータをやり取りするための共通の通信ルール。
URL(Uniform Resource Locator)
インターネット上の情報の「住所」を決める仕組み。 を書き上げ、
さらに、
世界初の「Webブラウザ(閲覧ソフト)」と、
世界初の「Webサーバー(ページを配信するコンピュータ)」のプログラムも同時に書き上げました。
さらにさらに、このプログラムの特許を放棄したのです。
つまり、ティム・バーナーズ=リーさんは、
「HTML、HTTP、URLというWebの仕組みを1人で発明し、
それを世界に『無料』で配った」人物です。
その彼らが1994年に「W3C」を設立しその組織内に、
障害のある人や高齢者なども、すべての人がWebを使えるようにするため専門部会、「WAI(ワイ)(Web Accessibility Initiative:ウェブ・アクセシビリティ・イニシアチブ)」を立ち上げ、
「WCAG(Web Content Accessibility Guidelines)」というガイドラインを設けたわけです。
Webに特化したユニバーサルデザインという感じ、といえばわかりやすいでしょうか。
特段の事情がない限り、この機能に従うのがデザイナーでデザイン(形)です。
これはグラフィック・印刷物でも変わりがありません。
特に雑誌や小説、冊子など一段組の文章を中心としたデザインが求められる場合は40文字と覚えておくといいかもしれません。
しかし、広告はエディトリアル(ページもの)でも多段組(新聞のような)を用いるパンフレットやポスターやチラシなどボディーコピーなどの文章を組まなければなりません。
それらは、横幅(あるいは縦幅)を40文字にするととても長い。
写真などのビジュアルが入ったりしますから、そのバランスも見なければなりません。
ボディーコピーは大体、300文字前後がベストといわれていますが、これがなぜ300文字前後なのかは科学的な根拠はありません。勉強不足で私が知らないだけかもしれませんので知っている方がいれば教えてくださるとありがたいです。
一説には、20〜30秒程度でストレスなく読めるのが300文字とかといわれていますが、そもそも、広告ポスターや新聞広告、雑誌広告の前でのアテンションは、10秒止まれば優秀な広告だといわれていますから、20〜30秒なんて止まってはくれていません。
300文字くらいの塊が文字として認識される限界とかいう説もありますが、いや、それではもう小説は本はテキストのペーパーは文字として認識されずに読めないといっているのと同じですから無謀な言い分です。
広告界の経験則でもあります。日本独自の経験則であります。
日本独自というのは、海外の広告にはキャッチコピーやタグライン、スローガンなど、短めのコピー(文章)はあるが、何百文字という長めの文章は入っていないことが多い。
しかし、広告ポスターや新聞広告、雑誌広告などではなくそこから一歩二歩進み、商品やサービスなどのリーフレットやパンフレット、HPなどでは格段にボディーコピーが読まれる率が跳ね上がります。
300文字前後(200〜400文字)という文字数を手がかりにしてボディーコピーをコピーライターは綴っていきます。
ライティングページと呼ばれるものには1000文字が適切なんて文章もあるみたいですが、こちらも科学的な根拠がわかりません。
デザイン、タイポグラフィの話から少し離れてしまいましたが、この300文字をどう組むかの話です。
幅が40文字だと長くて読みづらい。
ポスターや新聞広告など媒体にもよりますが、ボディーコピーだと、15〜25文字くらいが目安としてあります。
リーフレット(1枚の用紙を折り畳んで作成される小冊子状の印刷物)やパンフレット(複数のページを綴じたり折ったりして作られる冊子や小冊子)などの本文や商品説明だと、25〜35文字。なんて数字が挙げられています。
周りの写真や余白の関係性がありますから、一概に何文字という法則や規定ではありません。科学的な根拠もありません。
センスや才能と経験と呼ばれる領域かもしません。
フォントや字間、行間などで印象が変わります、当然、横幅、縦幅でも印象が変わりますから気をつけなければなりません。
ただ「4の倍数」あるいは「7の倍数」でレイアウトすると美しさがでて、紙面を綺麗に分割できる。ともいわれています。
綺麗に分割できるということは、整列(Alignment)できるということです。
12文字や14文字、16文字、20や21文字や24文字に、28文字。
中でも28文字は「4と7の倍数」であり美しい。
広告のグラフィックデザイン業界には、
「A4・3段組・28文字」なる言葉があり、A4サイズのリーフレットを横置き(縦210mm × 横297mm)で3段組(三つ折り)にする場合、美しく納まる文字数が28文字(9pt)といわれていたりいます。
9ptは、3.15mmです。
28文字 × 3.15mm = 88.2mm
3段分の幅は、88.2mm × 3 = 264.6mm
A4の横幅から引くと残りの余白が導き出されます。
297 - 264.6 = 32.4mm
この余白を左右のマージンや段の間のスペースをどうするかはデザイナーの腕の見せ所です。
例えば、
左右のマージンを各10mm(計20mm)
段の間(2箇所)を各6.2mm(計12.4mm)
264.6mm + 20mm + 12.4mm = 297mm
なんて数学的なというと大袈裟ですが、計算をしたりしてデザイナーは組んでいたりしますから、才能や感覚というよりかは論理的です。
あくまで目安で、A4横置きという特殊な環境下での目安です。
知っているとプロっぽく見えますが、プロっぽくすることがいいのかはまた別の話。
以上がタイポグラフィ、文字組みの大まかな解説です。
正解などない、終わりのない世界ですから。
「いやいやそういうのではない違う」といわれても、「確かに」と納得するしかありません。
言い方を変えればそれぞれに正解のある世界。
あなたにとっての正解を見つけていただければ。
それではまたの機会に。
最後までお読みいただきありがとうございます。
ここまでお読みいただけたならば、20分程度の暇つぶしの役には立っているはずです。約30kcalも消費していますから、中くらいのトマト1個(約150g)、この間に食べていなければダイエット効果もきっとあるはずです。
まとめ
□デザインとは、
「Form Follows Fonction.(形は機能に従う。)」
□タイポグラフィ
「文字を用いた視覚的コミュニケーションのデザイン」
文字、印刷されるもしくは画面に映る文字(フォント・書体)には、
視認性と印象を与える役割がある。
□整列(Alignment)(アライメント)
文章や文字の塊(ブロック)の端を、定の基準線に沿って揃える技術です。
・左揃え
横書きの文章の左端を直線状に揃える文字組み。(逆側の右端は不揃い)
印象:自然、標準的、誠実。
・右揃え
横書きの文章の右端を直線状に揃える文字組み。(逆側の左端は不揃い)
印象:スタイリッシュ、知的、情緒的。
・中央揃え
文章の各行の中心(軸)を基準線として、一行を左右対称に配置する方法で、左右の端はどちらも不揃いになる文字組み。
印象:安定感と格式、伝統的、エレガント、高級感。
・均等配置 / 両端揃え
文章の左端と右端の「両方」を直線状にピシッと揃える方法で文字数によって生まれる隙間をソフトが自動的(手動)に文字間(トラッキング)を微調整をして四角の中にキッチリと納まる文字組み。
印象:組織的や秩序感。視認性の高さが圧倒的に高く読みやすい。
□一行の文字数
・最適(最長)な文字数が日本語では、一行40文字前後。
欧文では60〜70(10〜12ワード)が、誤認が少ない。
・300文字前後(200〜400文字)ボディーコピー:15〜25文字が目安。
・リーフレットやパンフレット:25〜35文字が目安。
「4の倍数」あるいは「7の倍数」でレイアウトすると美しい。
こちらの記事も合わせてお読みいただけると嬉しいです。
参考サイト
W3C(World Wide Web Consortium)WCAG(Web Content Accessibility Guidelines) 達成基準 1.4.8 視覚的提示
