95%タイポグラフィ説ーその後

コメントの嵐、多くのブログでのお褒めの言葉、ちょっと恐れ多いような方々からもご意見をいただき、またフォーラムでのディスカッション、中国語やイタリア語への翻訳など、ほんとうに色々と皆様に反響をいただきました。一つ一つにお答えすることが難しいので、いただいたご質問、反論などから多かったものについてこちらで少し追記させていただきたいと考えています。この作業によって、結果的に自分でも色々と整理出来た気がします。

いい加減で、大げさ?

(コメント抜粋;翻訳iA)Justin: 私が気になったのは、この記事のタイトルです。ウェブデザインにおいてタイポグラフィが重要であるということに異論はありません。でも、タイポグラフィ以外の要素が軽視されているように感じます。根拠のないいい加減な意見を大げさにあげて、注目を集めようとしただけに見えるのですが。

もちろん、目立とうとしたり、人気を気にして発言したことはありません。最近まで、私のiA notebookの記事を読んで下さっていたのは友人やクライアントの方々ばかりでした。一日に100人程度の閲覧がある程度だったのです。ですが、前回の記事は思いがけず多くの方の目に留まることとなりました。redditに記事を投稿してから30分で、閲覧者数は1,500に達していました。redditだって、そんなに易しい場所ではないし、1,500という数字は簡単なことではありません。私は、あの記事自体がたくさんの読者の方々を引きよせたのだと考えています。なぜなら、あれは私の心からの言葉だったから。そして、私の情熱だったから。たくさんのインターネットユーザーの方に理解をいただくことができたと考えています。そして、だからこそ、あの記事には真実があるとも、考えています。

私は、いつの日かユーザビリティやブランディングについての本を出版したいという夢を持って、このiA notebookの記事を執筆しています。そして私は書くことを楽しんでいます。こうやって文章を残すことで、夢である出版への一歩、自分自身の研鑽、そして仕事の糧となっているのを感じています。読者の方のご意見からは、どんな優れた本を読む時よりも多くのことを教えられてきました。

私だけ?

(コメント抜粋;翻訳iA)Joran: タイプ(文字)=インターフェイス。明白です。Google等々、どこをみても、明らかな事実です。しかし、明白でありながらiAのように、そこに言及した人はわずかです。

“Text as user interface”(ユーザーインターフェイスとしてのテキスト)というのはキャメロン・モール氏が生み出したコンセプトです。好意的なご意見もたくさんいただきましたが、そこから私はこのアイデアに関して一人でも、一番でもないと言うことが分かりました。

グリッド

95%説はデザインの途中でふと浮かんだアイデアです。ナビゲーションやコンテンツのモジュラー・エレメンツがしっくりとはまり、最高のリーダビリティを実現する理想的なグリッドを見つけ出すため、私はいつもテキストの塊を転がすところから仕事を始めます。
何日もかけて、非効率に、取り憑かれたようにボックスを動かし、色を変え、詳細までアーキテクチャを詰め、完成させてもまだこの思いは強く実感されるばかりでした。

多くのウェブサイトがテキストを見やすくしようと努力し、その多くが失敗しています。そして自信過剰のデザイナーのサイトも、ユーザビリティスペシャリストのサイトも皆、扱いづらいテキストの砂漠の中で迷子になり、失敗していくのです。

ユーザビリティだけでもダメ

2004年、Design by Fireは小規模なコンテストを開催しました。“Design Eye for the Usability Guy”、別名「useit改善計画」(N. Derksenより)
キャメロン・モールの指摘によれば、とうとうニールセンは昔までの記事でやっていた100%スケーリングをやめ、新しい記事では余白スペースを活用し始めたそうです。

ユーザビリティの神々のミスとは

  1. テキストライン(メジャー)が長過ぎる
  2. 100%スケーリングはリーダー・フレンドリーではありません。考えなくてよいサイトを(Don’t make me think)、でもウィンドウをリサイズしなくて良いサイトも大事
  3. 余白がない
  4. アクティブな余白がない
  5. 行間スペースが狭すぎる
  6. テキストブロックがキレイに並んでいない
  7. フォントサイズの種類が多すぎる
  8. 画像が邪魔なところに配置されている

デザイナーの陥りやすいミス

スクラブス氏は間違いなく、ミスター2.0です。そして氏の会社は素晴らしい業績を残しています。でも、Wisdumpのフォントサイズを縮小したのは何故なのでしょうか。もちろん、ちょっとしたキーボード操作で拡大出来るのは知っています。でも、やりません。かつて私はwisdump(元whitespace)の熱心な読者でした。でも、今は読まなくなりました。フォントサイズを直すのが面倒だからです。

アート・スクール出身者にありがちな間違い

  1. テキストと背景カラーのコントラスト
  2. タイトルやサブタイトルの扱いがぞんざい
  3. テキストサイズ
  4. テキストブロックが、見やすくて把握しやすい大きさに分割されていない
  5. 識別しにくいリンク。訪問済みかどうかわからない
  6. テキストがインターフェイスとしてではなく、デコレーションのような扱い
  7. テキストがナビゲーションなのか、リンクなのか、記事なのかわかりづらい
  8. オシャレなナビゲーションが一番目立ってしまう。(コンテンツが一番目立つべきで、デザイナーが一番愛情を注ぐべき箇所なのに)

私が本の話ばかりする理由

タイポグラフィとはフォントを選んだり、作り出すことではなく、ユーザーエクスペリエンスを最高にするためにテキストの形を変えることにあるのです。

ウェブデザイナーたちは、GoogleやWikipedia、Alistapartなどから、お手軽で面白いものを拾ってくるのは得意なのですが、十分に本を読んでいません。しかしタイポグラフィとは由緒正しき学問で、多くの研鑽と、努力が求められ、そして印刷物から多くを学ぶ必要があるのです。タイポグラフィとはフォントを選んだり、作り出すことではなく、ユーザーエクスペリエンスを最高にするためにテキストの形を変えることにあるのです。

そしてまた、タイポグラフィはルール、やり方の話でも、もちろん嗜好やセンスの話でもありません。行間スペース、余白、カーニングやフォントサイズには明確なルールがあります。これらのルールに則れば、テキストはぐんと見やすく、また読みやすくなります。そして、もう少しこのルールに精通すれば、そこから外すテクニックというのも使えるようになるでしょう。

もちろん、これらの本は安いものではありません。しかし、結果的にクライアントの方々に喜ばれるサイトを作り、見返りを得る、という長いスパンで見れば、安いくらいの買い物です。

(コメント抜粋;翻訳iA)femmebot: 基本的なデザイン・エレメントの話なら、95%(以上)はグリッドではないでしょうか。タイポグラフィではなく。

読みやすいグリッドというものについて何か方法論的な定義が出来ないかと考えていた中で私が気づいたのは、グリッドというのはそもそもタイポグラフィの範疇に含まれるものだということです。ルーダーや、ミュラー・ブロックマンの本を見ていただければ明白です。

(コメント抜粋;翻訳iA)Mike:残念ながら、ウェブデザインの95%がフォントの選択とは考えられません。

私も同感です。でも、Mike氏には私の言いたいことがきちんと伝わっていないのではないでしょうか。歴代の名タイポグラファーたちも、飽きずに繰り返しこう主張し続けました。タイポグラフィで一番重要なことは、可能な限りテキストを読みやすくすることだ。と。彼らのいうタイポグラファーの仕事というのが、私の考えるインフォメーション・デザイナーの仕事と同じであることに、私は少し喜びを感じています。つまりは、インフォメーション・デザインとは別に私たちの新しく作り出した仕事ではないのだということです。前にも申し上げましたが、タイポグラフィとは、フォントを選ぶことではありません。

テキストを読みやすくする、というのが、私の探し求めていたデザイン・メソッドでした。

このiAサイトのデザインを微調整しながら、私は実験的にこの一つのルール「読みやすくすること」を半日間、自分の命題として仕事をしてみることにしました。そこで、「テキストを読みやすくすること」というのが私が今まで探し求めていたデザイン・メソッドであるということを認識するに至ったのです。ウェブと言う基本的にテキストを読みにくくするメディアにおいては、タイポグラフィの基本を骨にしみるように理解していないといけません。でもそれさえ出来ていれば、あとのものは(色や、ライン、ボックス、どの画像を、どのサイズで、等)は自然としっくりついてくるものです。

ウェブにおいては「ものを読む」という行為が一番重要であるということは自明の理です。そうでありながら私たちはオンラインではタイポグラフィのルールを軽視してきました。プラットフォームの違い、解像度の問題や、フォントの種類の少なさなどをあげ、不十分な環境の中でタイポグラフィについて考えるなんて意味がないという方々もいます。チープな言い訳です!オンライン・メディアについての大変な誤解です。

すべてのプラットフォームで同じように見える必要はない

サイト全体をFlashにして、すべてのプラットフォームで同じに見えるようにするべきだという方もいます。でも、すべてのプラットフォームで全く同じようにサイトが表示される必要なんてありません!これもまた、オンライン・メディアについての大誤解です。必要なのはサイトを読みやすくすること、そしてアクセス可能なあらゆるマシンにおいて、読みやすい環境を最大限確保することです。日本では、プロフェッショナルなサイトは携帯でもアクセス可能が常識です。

私たちは、ナマケモノすぎるので

「まだ、あとで直しとく」

最近では、グリッドを最終的に決める前からテキストをのせる作業を行うことが出来るようになっています。「あとで直しとく」というのが出来てしまうのです。タイポグラフィカル・グリッドの構築作業の簡易化や、スクリーン上のレイアウト作業が便利になってしまったこと、そして、「あとで直せる」状況が私たちをナマケモノにしてしまっているのです。

先人たちが長年かけて開拓し、試行錯誤の末積み上げていってくれた貴重なノウハウを学び、ウェブに応用するという作業の代わりに、デザイナーたちはボックスやカラーやラインや、花やおかしなオーナメントで遊んでいます。コドモのように。そして後で頭の固いユーザビリティオタク(ベージュのパンツとポケットプロテクター着用風の)から、テキストや、ストラクチャ、カラーなどについてお説教を聞かされるはめになるのです。

オンラインで文字を読むのは面倒な作業です。ウェブは、現在ほかのいかなるメディアよりも、優れたタイポグラファーの知恵を必要としています。例えば、ヤン・チヒョルト、ルーダー、ミュラー・ブロックマン、ワインガルトブリングハースト。こうして、ユーザビリティ信奉者の信条と、タイポグラフィの聖書とも呼べるこれら先人の知識が合わさったときこそ、いえ、合わさったときのみ、真に読みやすくて、クリックしやすいウェブサイトが誕生するのです。

97でも80でもなく、どうして95%なのか?

95%というのは、あるメソッドに基づいたデータです。タイポグラフィに着目し、どちらのテキストが機能的で、役に立つか、自身の心に問いかけてみます。そして、体系立て、階層的に秩序付け、簡素化し、インターフェイスを構築する。そうすれば残りは自然とついてくるのです。読みやすさについて納得がいく出来になるまで、カラーや、ラインの太さや、画像のことなんて考えることはありません。紙の上で、グリッドをデザインすることから始めてみましょう。(コンピュータ中毒者の知恵です)

(コメント抜粋;翻訳iA)Justin: この記事についてのDaring FireballでのJohn Gruberのコメントに怒りをおぼえました。そもそも、この記事へはDaring Fireballから読みに来ました。彼のブログを毎日チェックしていますが、ここで彼は、私(を含むたくさんの人)が毎日やっていることは間違っている。と述べているのです。彼はアナタの記事のタイトルを使って、私を打ちのめそうとしました。

タイトルを変えたのは私の失敗でした

今日のウェブデザインの現状においては、タイポグラフィのノウハウが全く無駄にされているということに、私たちは怒りを覚えなければなりません。ウェブデザインの95%はタイポグラフィというタイトルの代わりに、その前に考えた、“Webdesign is all about typography. Period”(ウェブデザインというのは、つまりはタイポグラフィと同義だ)というタイトルにしておけばよかったのでしょう。私の言いたいことが最も効果的に伝わったのはこちらのタイトルだったかもしれません。センスの良さに5%ほどの余地を残しても良いだろうと私は考えていました。そして、テクノロジーの世界では、95という数字は、マイクロソフトの支配力の大きさを示す数字です。

私にも分かります。95%というのは、多くのオシャレデザイナー(そしてユーザビリティ偏重教)の方々にとっては、腹にパンチを食らったような気分でしょう。でも、多くのユーザーの方、そして幾ばくかのデザイナーの方々に、なにか考えるヒントになることができればと信じています。私は、この小さな記事のお陰で、ヒーローとも、バカとも、またここでは発表出来ない色々な称号を頂戴いたしました。だんだんと、どうやってこの事態をハンドルしていけば良いか分かって来たつもりです。迅速に受け止め、失礼なものは無視し、全てのものに真摯に向き合うことです。これが、すべてのデザイナーの方への私からのアドバイスです。オシャレデザイナーだけでなくて。

オンライン・メディアがわかってない

確かに、多くの人は、まだオンライン・メディアというものをきちんと理解出来ていないのではないでしょうか。インターネット経験も様々なクライアント様の中にはウェブサイトを、見た人をお店に直行させる安上がりのTVCMだと勘違いしている方もいらっしゃいます。私が申し上げたいのは、そういった方々に、オンライン・メディアとは何かをきちんと伝えるべきだと言うことです。オンライン・メディアとは、情報(インフォメーション)であり、ショッピングや、広告などではないのです。最も効率的な形のコミュニケーションです。そして私たちがデザイナーとして考えなければならないのは効果ではなく、コミュニケーションなのです。

しかしここでまた申し上げたいのは、もしあるデザイナーが1024幅が好きで、自身のブログの幅を変えたとしても、見る人のことを考えてデザインを改良したとしても、ユーザビリティの王道的なルールを無視したとしても、奇抜なナビゲーションを作ったり、サイト全体にFlashを採用したとしても、それは結構なことです。そういうデザイナーがおかしいというつもりはありません。効率的ではないでしょうが、それが彼のチョイスなのですから。ものすごく多くの方が見るようなサイトであれば、彼はオンライン・メディアを軽視していると言いたくなるかもしれません。でも何にせよ、信念を持って何かをしている人々をバカにしたりするようなことはやりたくありません。

デザイナーは仕事をするとき、伝えられるべきメッセージや、そのサイトを見るであろうユーザーのことを考えなければなりません。理論的には、紙面上のデザインと変わりません。しかし実際は、紙面デザイナーよりももっと、メディアについて熟知する必要があります。オンライン・メディアの世界はとてもトリッキーです。スクリーン上の仕事ですが、ウェブサイトはテレビとは違います。このサイトについても、皆さんのサイトについても、youtubeにしてもです。私たちは限りない選択肢の中から色を選ぶことができますが、その作業は芸術とも違います。私たちのやっていることは、プロダクト・デザインなのです。


UPDATE: 本件について、タイポグラファーであり、ブロガーであり、そしてみんなのおじいちゃん(!)であるジョージ・エベレット氏が、何とも鋭く、そしてキレイにまとめて下さいました。

記事は情報アーキテクチャとしてのタイポグラフィに着目した。多くの人が、今まで賛同しかねた部分だ。そして、多くのコメントが私と同じように反対意見を残している。タイポグラフィは、ウェブの90%でしかない。残りは画像や色のセオリーにかかっている。いくつかの批判的コメントで触れられていたように、グラフィックデザインを軽視するようなことを私はしたことはない。グラフィック・デザインはタイポグラフィであり、タイポグラフィに由来し、そしてタイポグラフィ抜きには存在し得ない。タイポグラフィに長けたデザイナーが、デザインの出来るデザイナーだ。

最高です!おじいちゃん!

iA creates digital products. We offer strategic design and consulting services through our UX studios in Zurich, Tokyo and Berlin. To get in touch, just write a short mail to [email protected]. Subscribe to our newsletter to receive brief summaries of our articles and interviews. In case you haven’t, you should now try our apps.