CrowdWorks Designer Blog

クラウドワークスのデザイナーが書くブログ。深いような、そうでもないような知識、体験、考察をお届けします。

文字について考えよう Vol.1

f:id:humcooh:20170517163940p:plain

「文字には不思議なちからがあります」とTRICKというドラマで山田里見(野際陽子さん)が言っていたのを、ふと思い出しました。

はじめまして、CrowdWorks UXデザイングループの浜野です。文字が好きすぎるデザイナー(グラフィック歴6年:Web歴1年半)です。

突然ですがみなさん、好きな書体はなんですか?

私がいま一番好きな書体はBrandon Grotesquです。

f:id:humcooh:20170517152341p:plain

可愛らしい印象を持ちながら、シンプルで力強いイメージも持っている、とても魅力的なフォントです。Cap & Lawの相性がいまいち悪く、使う時はもっぱらAll Capsで使ってしまっていますが…

和文であれば、A1明朝やこぶりなゴシックなどのフォントを溺愛しています。

嫌いな書体はDINです。

f:id:humcooh:20170517152453p:plain

正確に言うと、訳もなく使われているのが見えてしまうDINが可哀想で目も当てられないのです。

 フォントには生まれた国や歴史、文化などがあり、もちろん得手不得手があります。DINは1930年頃ドイツ工業規格(Deutsche Industrie Normen)のために作られたフォントで、ドイツの道路看板などに使用されています。日本でいうところの「公団ゴシック*1」にあたります。

※ちなみにこの「公団ゴシック」は高速道路というスピードの高い環境下で、的確に情報を認識させるために、棒を数本少なくしたりと本来の文字としての正確さを犠牲にしているので、興味深いですよね。

 必ずしも、日本のデザインにドイツのフォントを使ってはならない、ということではなく、歴史や文化を理解した上で適切なフォントチョイスをしよう、ということです。

さて前置きが長くなりましたが、そんな文字バカが文字について日々悶々としていることをお話ししたいと思います。

日本語っておもしろい

日本語はとても特殊な文字だと言えます。いまこの記事を読まれている横組みの場合と、小説などで目にする縦組みの2種類が存在します。欧文など横組みがメインとなる文字とは違い、縦横2方向からのアプローチを考慮する必要があります。

一方、横組みだけの欧文はシンプルに感じがちですが大文字小文字という区別があるため、和文とは異なる特殊な構造をしています。

さて、突然ですがデザイナーが嫌う半角記号ですが、これはなぜ嫌っているのでしょうか。スペースも省略できるし、いいことづくめだと思いますよね。

しかし、先述したとおり欧文には「大文字」と「小文字:特に j y p qなどのディセンダラインまで到達する文字」が存在するため、記号はそのどちらでも違和感の無いように、ベースラインより下になっているんです。

f:id:humcooh:20170517152927p:plain

私はこれを「半角落ち」と呼んでいます(半角記号が使われて少し下に落ちているから)。この違和感こそ、私たちが半角記号を嫌っている理由です。

※全角記号を使用すると、左右に変な間隔が開いてしまうのですが、最近では約物を認識して間隔をツメるCSSや、全角約物を半角のようにスペース調整をしたWebフォントを作られている方がいるので、尊敬の念を抱いております。

そして欧文は、和文と文字を定義する基準が異なります。

f:id:humcooh:20170517154124p:plain

正方形のプロポーションを持ち縦横2方向からのアプローチを考慮する日本語と、大文字小文字があり上下のバランスを考慮する英語。これら基準の異なる言語を組み合わせるときには、考えなくてはならないことがたくさんあります。

和欧混植で一番理想的な方法は

Adobe IllustratorやIn Designなどの日本語をイジるのに最適なツールを使うことです。合成フォントを使用することにより、欧文と和文の大きさやベースラインを細かく調整することができます。 f:id:humcooh:20170517154300p:plain

※合成フォントを作るときに注意する点:和文と欧文が同じ大きさ、同じ重さ(見た目のバランス)になるように ※この設定は本文中の和文と欧文の割合、フォントの組み合わせにより微調整が必要になります(欧文は抜けの空間が和文に比べて大きいので欧文が多い場合はスカスカに見えてしまうため)

f:id:humcooh:20170517170419p:plain

Adobe IllustratorやIn Designで文字のバランスを調整する感覚で、Webの文字も簡単に微調整できたらいいのに、と思うのです。モヤモヤします。

そもそも日本語にとってに最適な環境って何なの?

先述した通り、和文と欧文では大きく基準が異なります。欧文の基準をそのまま和文に適応するとどうなるでしょうか。

f:id:humcooh:20170517154625p:plain

行間の開きがまったく異なって見えますよね。和欧混植の場合、まったく同じline-heightを設定していても、和文がメインの場合と欧文がメインの場合ではその行間は全く違って見えてしまいます。このことから、和欧混植の組版をする場合(文字サイズの微調整ができない場合)は、どちらがメインなのかを考えて行間を設定してあげる必要があります。

そして和文の場合、行間の考え方はいくつかありますが…

基本的には文字サイズを基準とし、25%単位で行間を捉えるのが伝統的な考え方です。文字サイズの50%を開ける場合は二分(ニブ)アキ、25%を開ける場合は四分(シブ)アキと呼び、75%を開ける場合は二分四分(ニブシブ)アキと呼びます。

Adobeなどでは、この二分四分アキを基準とし、日本語が読みやすい行間としています。line-heightだと1.75になります。

もちろんこれも、テキストエリアの幅や端末などの環境(閲覧者の目とデバイスの距離など)やフォントの種類やサイズによって異なります。読みやすいかどうか、を常に考える必要があるんですね。

つまり

いろいろ長々とお話ししましたが、今回お伝えしたかったことは

  • 和文と欧文は異なる基準で成り立っているので同じ数値を与えても見え方は変わること

  • 欧文は和文よりも小さいからバランスに注意すること(書体によっては例外があります)

  • 半角約物を使うときは違和感に注意すること

  • 和欧の比率や文字量、テキストエリアの大きさによって適切な行間は異なるので、読みやすいかどうかは逐次考えよう

懐古主義、紙媒体至高主義というわけではなく、日本語をより読みやすく試行錯誤してきた先人たちの知見を、日本語を使う身としては大切にしたいと思うのです。より情報を伝えやすくするために、何ができるかを考えたいですね。

この記事を読んで、少しでも文字に興味を持っていただけた方、今日はちょっと視点を変えて、いろいろな文字を眺めてみるのはいかがでしょうか。

もっと色々と書きたかったのですが、かなり膨らんでしまったため、この続きはまた次回お話しできればと思います。

さいごに

CrowdWorks UXデザイングループについて「もっと知りたい!」という方や、デザインについて話してみたい、好きなフォントについて熱弁したい方、ぜひとも恵比寿にあるオフィスまでお気軽に遊びに来てください。

www.wantedly.com

それではー。

*1:2010年まで使用されていましたが、現在はヒラギノ角ゴシックW5に変更されています