Fontlobers #1 に関するブログ記事
- 「Webデザイナーでも知っているべき、グラフィックデザインとタイポグラフィの常識」生明義秀さん
- 「Web Typography & Material Honesty」小久保浩大郎さん – この記事
- 「キャラクターから考えるフォント」森賢人さん
2014年12月12日に開催された FontLovers #1 から、小久保浩大郎さん（ @kotarok ）の講演メモです。
テーマは「Web Typography & Material Honesty」です。
メモは箇条書きで書いております。
（※ もしかすると後日加筆、修正する場合もあるかもしれません。予めご了承ください。）
Material Honestyとは
直訳 : 素材的な正直さ。素材的に正直に。
逆にMaterial Honestyじゃないものっていうと、スキューモフィック（以前のiOSのUIデザインのようにリアルな質感）とかが該当する。
それに対抗して、というわけじゃないけど、その素材・環境・特性に素直に従った方がいいというデザインの考え方が Material Honesty 。
WebにおけるMaterial Honestyとは
ウェブに関しては「実装を無理するなとよく言っている。Webでできること以上をやりすぎると、おかしなことになる。
ウェブが本来持っているDOMの構造やアクセシビリティ、ユーザビリティなどを損なうような無理な事はすべきでない。
ウェブの本質を一言で言うとしたら、アクセシビリティだと思う。
環境に対して素直な実装、デザインをするのは意味のあること。
Web Design is 95% Typography.
記事 : Web Design is 95% Typography | Information Architects
これは以前小久保さんが所属していた iA (Information Architects Inc.) の Oliver Reichenstein 氏の記事。
書かれたのは2006年10月19日。当時センセーショナルで話題になった。
2つの重要な単語。
- Macro-typography
- Micro typography
Macro-typography = Information Design
Information Designのやっていることは、30年くらい前にタイポグラファがやっていた仕事なのだ。
ほかにも……
タイプフェイスを選ぶことは、タイポグラフィではない。
テキストをUIとして使え。 ……マクロタイポグラフィの概念に、より現代的な意味合いを付加する。
紙のタイポグラフィはスタティック（static：静的）。Webのタイポグラフィは、ダイナミック（dynamic：動的）なものだ。
Dynamically Responsive
ダイナミックにレスポンシブ
環境に対して動的に呼応する
アクセシビリティに対して良いこと。
ダイナミック（動的）だと、インターフェースの部分で形が決まる。
ウェブサイト（主体/objective） – インターフェース(interface) – ユーザー（人/subjective）
境目がインターフェース。
紙媒体だとインターフェースは固定されていて変わらない。ウェブは変わる。
ウェブ = ダイナミックなインターフェースは変化する。それはアクセシブルでもある。
ユーザー側の意思によって、変化させることができる。（わかりやすい例 : 点字ディスプレイ）
ユーザーが望む形でインターフェースが動的に変化して。ユーザーに情報が届く。
なので、ウェブの場合、ダイナミック（動的）であるということはすごく大事。
その特性をタイポグラフィに持っていくと……色んなことをがんばろうとしだしたりする。
がんばる
がんばった例
- waokon sample ……小久保さんがかつて作った和欧文間スペースの自動処理
- HTMLで文字詰めするタイポグラフィー用JS | fladdict
- 擬似要素を利用したベースライン・グリッド · terkel.jp
上記の例はいいけれど、がんばり方を相当うまくがんばらないとうまくいかない。うまくいかないのはMaterial Honesty的に良くない。
欧文と和文について
欧文はズルい
欧文はズルい
日本語・和文は、欧文と同じようなタイポグラフィ表現で勝負できない。
文字以外の要素でエレメントの区別を付けていくことが必要になる。
先に日本語でデザインしておけば、国際化に対応できる、というポジティブな発想で作る。
欧文は長い。和文はブロックみたいで短く済む。
文字の大きさ
欧文より和文・日本語の方が大きく見える。
x-height
和文は欧文と比べても、同じフォントサイズでも見た目の情報密度が低い。そして、かっこわるく見える傾向がある。
抽象的なシンボルとしての文字
見せ方によっては、グラフィックなのか文字なのかよくわからないケースがある。
がんばらない例
ベースライングリッドは気にしていない。
インラインブロックを気にしている。
結論としては、Webの場合Material Honestyの観念から見ると、がんばらない方がいい。
（プレゼンここまで）
感想
ユーザー側によって情報を得る手段や状態が変化しても、同じ情報を取得することができる……小久保さんのお話は、紙媒体とWebの文字の扱い方の違いを比較しただけではなく、Webの根本的なところに迫ったお話ではないか思いました。
また、実はこのお話の裏テーマはアクセシブル／アクセシビリティだったのではないか、とも思いました。
Webの場合は見た目もさることながら、インターフェースが変化することを考慮しながらフォント選び等のデザイニングを心がけなければならないということを、再認識するセッションだったと思います。
参考リンク
- スライド: Web Typography & Material Honesty – Google スライド
- Web Design is 95% Typography | Information Architects
- おまけ。小久保さんが「Noto Sans CJK JP」をPRしていました。