iPad のためのデザイン

この 2 か月、私たちはいくつもの iPad プロジェクトに取り組んでいた。ニュースアプリ 2 本、ソーシャルネットワーク 1 本、そしてワードプロセッサだ。iPad に一度も触れないまま、iPad 向けの仕事をしていたことになる。あるクライアントは、iPad が本当に存在するかどうかさえ分からないうちに、「あのタブレットのやつを始めてくれ」と言ってきた。私たちはデスクトップアプリを作っているのか、ウェブサイトを作っているのか、それともまったく別の何かなのか？ という問いが、ニューヨークからの速達が届くまで私たちを悩ませ続けていた。ここでは、iPad がオフィスに現れる前と後で見えてきたデザイン上の気づきを手短にまとめておく。

すべてを Photoshop というブラックボックスの中で作っていたにもかかわらず、iPad アプリのデザインはウェブデザインとは多くの点でかなり違うことが、すぐに分かった。いちばん大きな課題は、iMac のピクセルを使って iPad のピクセル向けにデザインしなければならないことだった。24 インチ iMac と iPad の間には解像度のギャップがあり、そのせいで不確実性が大きく増した。

Comparison of an iPad mockup on an iMac’s screen and on an actual iPad

1. タイポグラフィ: 読みやすいか？

解像度のギャップでまず問題になるのはタイポグラフィだ。iMac の画面では問題なく見える文字も、iPad では崩れるかもしれない。そこで次のような問いに答えるために……

フォントは十分大きいか？
大きすぎないか？
きれいにレンダリングされるか？
schriftbild（見た目の印象）は魅力的か？
読んだときの感触はどうか？

……私たちにできることは、1:1 のモックアップを印刷することだけだった。新しいキャンバスと高密度の解像度をつかむために、こうしたデザインを 何百枚も 印刷した。もちろん、印刷されたピクセルとバックライト付きのピクセルは同じではないので、作業の有用性にはまだ不安が残っていた。

A pile of printed iPad mockups

現実チェック: うわ、これ、すごくシャープだ！

2 か月の印刷を経て、タイポグラフィはかなりうまくいった。だが、別の驚きが待っていた。それがシャープさだ。高いコントラストとバックライトを備えた iPad は、奇跡の絵本にもフォトフレームにもなるが、長文を読みやすくデザインするのは難しい。丁寧に作れば、iPad 上の文字は印刷物にかなり近づけるが、そのためには多くの配慮と、画面タイポグラフィの専門知識が必要だ。

iPad では、ウェブの本文サイズ（たとえば 16px）は小さすぎる一方で、もっと大きいサイズはキャンバスの寸法とぶつかる。その結果、グリッドにはさまざまな制約が生まれる。

iPad の解像度は一般的な LCD より高いが、iPhone よりは低い。そのためピクセルには独特の「中間」感がある。逆説的だが、そのせいで、ふつうは目からもっと離れていてコントラストも弱い一般的なコンピュータ画面よりも、文字がピクセルっぽく感じられることがある。（最初は、サブピクセルのアンチエイリアスがより目立つのだと思った。黒地に白い文字のまわりに青とオレンジの光がにじむからだ。しかし、この記事を書いている時点で iPhone と iPad にはサブピクセルアンチエイリアスがない。なので、最初の仮説に反して、サブピクセルアンチエイリアスがないこと自体が、文字が期待したほど滑らかに見えない理由なのかもしれない。）

だが、誤解しないでほしい。一般に、iPad は通常の画面よりずっと読みやすい。そして、そう、この端末は速い。だから紙の代わりにはまだならないとしても、デジタルテキストを読むためのノートパソコンに対しては、かなり強力な競争相手だ。

背景と、ノイズの繊細な響き

最初に取りかかったのは、文字と背景の関係を見直すことだった。白地に黒文字は通常の画面よりさらに厳しいが、適度に色をつけた文字と背景の組み合わせ（たとえばセピア地に濃いアンブラのフォント、あるいは濃い青地に淡い青灰色）はかなりうまくいった。強いコントラストを避ける別の方法として、背景にさりげないパターンを使う手もある。かつてはグラフィックデザイナーにとって大きな禁じ手だったノイズ背景も、画面解像度とコントラストの向上とともに、iPad が登場する前から新しいデザイントレンドとして定着し始めていた（たとえば Dribbble）。

Comparison of plain gray, plain white, and noise backgrounds

2. UX とスキューモーフィズム: あのニセ 3D はどうか？

2 月に Apple の Human Interface Guidelines を読み込み、私たちは少なくともこれだけは理解した。ウェブデザインが Lego なら、iPad デザインは Duplo だ。 そして iPad 上でガイドラインを試してみると、その多くが確かに正しかった。たとえば。

横向きと縦向きの両方で、シームレスに動くようにする
全画面スワイプは最小限にし、できるだけ同じフレーム内にとどめる
横向きでは左サイドバー、縦向きではポップオーバーにナビゲーションを集約する

怪しい UI ガイドラインの原則

ただ、ひとつだけしっくりこないガイドラインがあった。アプリを物理的な物体のように見せる、という方針だ。Apple が触れられるものを真似したデザインを推し進めたがる理由は明らかだ。

これはタッチインターフェースだからだ。3D オブジェクトのほうが触れられそうで、親しみやすく見える
日常的なインターフェースは理解しやすく、使い方にもなじみがある
派手なインターフェースのほうが売りやすい

だが……こう言えばわかるだろう。こうした「売りやすい」インターフェースデザインの究極の旗手を覚えているかもしれない。Kai’s PhotoSoap だ。人気があったぶん、俗っぽさもすごかった。表通りでは大ヒット、デザイナー通りでは悪夢。そして、OS X Aqua を経て、あの下品な iPad の Calendar アプリへと続く一方通行だった。

Kai’s Photo Soap interface

iA チームの誰もが、そのガイドラインの妥当性を強く疑っていた。だが、その疑いを確かめる方法も、否定する方法もなかった。そこで私たちは勢いのまま進んだ。すべてを 3D に！新聞は新聞らしく！ワープロはタイプライターらしく！木目背景を使え！ なぜか？ Apple がそう言ったからだ。

前にも書いたように、私たちにはデザインを検証する方法がなかった。唯一できたのは、実寸で印刷することだけだ。ご想像のとおり、紙に印刷した、物理的な物体をまねたデジタル製品は……どう見ても正しくなかった。まあ、端末の上で見ればよいのかもしれない、そう考えた。

どうしようもなかった。デザイン作業を続けるほど、私たちは偽物の 3D 効果から離れていった。ただし、3D 効果や素材感のある表面は、控えめに使えば 確かに 機能することも分かった。基本メタファーではなく、触れたくなるきっかけとして使うのだ。言い換えれば、木目の背景や、クリックできるリビングルーム（ゴホン、Yahoo!）は避けるべきだ。上品に。繊細に。

Yahoo Entertainment’s kitsch iPad app

現実チェック: キッチュは機能するのか？

インターフェースがどれだけ特殊効果を抱えられるかも、結局は好みの問題だ。私のような昔ながらの画面デザイナーには、インターフェースはこうあるべきだという思い込みがある。

では、iPad の現実チェックのあと、私たちのエリート的な 3D 抵抗はどうなったのか。Calendar、Notes、Pages のように、素材感や特殊効果を強く押し出す iPad アプリをいくつか見て、私たちは慎重でいて正しかったのだと、むしろ確信した。

Apple’s skeuomorphic Notes app on iPad

Calendar アプリの革ボタンを押す感触は、本物の革ボタンがどう感じるかをそのまま再現している。つまり、俗っぽい。

Kitsch leather buttons in the Calendar app

電子書籍リーダーで、最初のページと最後のページに同じ厚いページの束を左右に置くのは、違和感があるし、実際におかしい。狭いカラムでハイフネーションなしの両端揃えを使い、文字の穴や川を招くのも、同じくキッチュだ。

iBooks first page vs last page

横スクロールする 9 ページの記事に 3 カラムレイアウトを当てて印刷新聞をまねても、読みやすさは下がるし、縦の 1 カラムより扱いにくい。New York Times がその道を進んだからといって、それが正しいわけではない。

過剰設計で高すぎる Wall Street Journal アプリのように、極端に狭いカラムでラギッドテキストを使うのも、タイポグラフィ的なキッチュだ。

Typographic kitsch in the Wall Street Journal iPad app 革ボタン、縫い目、破れた紙の端、多画面・多カラムの擬似新聞レイアウト……画面上では、ただのキッチュだ。それは、そうでないものになろうとして、そして見事に失敗している。電子書籍は画面上で擦り減ったりしない。現実世界に革ボタンなどない。UI の意味のない縫い目は、情報から目をそらさせるだけだ。

では、ユーザーインターフェースデザインにおける特殊効果やメタファーはどうか。特殊効果は使ってよい。だが、控えめに使うべきだ。

メタファーの使い方

視覚メタファーにも同じルールが当てはまる。文学上のメタファーと同じで、明確化しないメタファーは害になる。引き延ばせば壊れる。二つ目や三つ目を組み合わせれば、たちまちばかばかしくなる。

明確にしないメタファーは避けるべきだ。表現したい意味を曇らせるメタファーは、切り捨てる。

電子書籍リーダーでページの束を見せるなら、その束が本のどこにいるのかを示すように設計する。機能を持たせるのだ。ページというメタファーを使うなら、ページの中でスクロールを使ってはいけない。紙一枚という基本的なメンタルモデルと衝突するからだ。

Scrolling the table of contents in the skeuomorphic iBooks app

文章のメタファーは、作者にとって心地よく感じられることが多い。強く一貫したメタファーを生み出すのがどれほど難しいかを知っているので、私たちは弱いメタファーにもおおらかだ。だが UI デザインでは、そこまで寛容ではない。

UI のメタファーは、全体の質感にもっと大きな影響を与える。弱い文章メタファーは読み過ぎて済むこともあるが、弱い UI メタファーは何度も何度も付き合わなければならない。そして弱い UI 要素はすぐに神経に障る。悪い冗談だ。

たとえば、本を選ぶために本棚を使うのは一貫したメタファーだ。だが、それでインターフェースの理解は進むだろうか？何か役に立つだろうか？ 200 回目に見ても、読み取りにくい本棚をまだ好きでいられるだろうか？もし本が 200 冊あったらどうする？

The bookshelf metaphor in iBooks

奇妙なメタファーを使ったり、アプリ全体を特殊効果で塗りつぶしたりしても、アプリの売上が死ぬわけではない点には注意してほしい。残念ながら、キッチュを好む層は、エリート的な UI デザインを好む層よりずっと大きい。だが、キッチュなデザインはその場限りだ。ニセモノの製品に長い寿命はない。

3. インタラクションデザイン: では何がうまくいくのか？

iPad は、写真、コミック、児童書、ゲーム、動画、そして（適切な長さの）テキストを消費するための見事な端末だし、タッチタイピングではない なら、書くための端末としても驚くほどうまく機能するようだ。見た目は Duplo だが、手触りはかなり子どものおもちゃに近い。これは、優れた UI 設計にとって完璧な条件だ。

限られた画面領域と、1 つの作業を終えるために使える物理操作の限られた「クレジット」（何度もスワイプやタップをさせないこと）は、デザイナーにきわめて単純な情報アーキテクチャを作らせ、最小限の操作で済むようインタラクションパターンを磨かせる。これは、ユーザーインタラクションデザインの基本法則、入力を最小化し、出力を最大化する、と一致する。
1 回の操作で使える最小のタッチポイントは大人の人差し指の先ほどの大きさの円なので、狭いフレームに何千もの機能（あるいは広告！）を詰め込むことはできない。重要な要素に集中しなければならない。画面領域もユーザーの注意も、二次的な機能に浪費しないこと。
私たちがデザインした iPad アプリは、比較的簡単にウェブサイトへ戻せることが分かった。iPad は、ウェブサイトやアプリを設計するためのすばらしい青写真になりうる。iPad でうまくいくなら、少し手を加えればノートパソコンでもうまくいく。

ぼくのちいさな目で見つけたもの… それは黒い

iPad は、ウェブサイトよりもずっと明確なキャンバスを持った巨大なフォトフレームのように見え、触った感じもそうだ。ある程度までは、その感覚に合わせてデザインすべきだ。だが、固定された画面サイズに酔いすぎてはいけない。キャンバスのために描くな。iPad のスクロールは、そこらのコンピュータより滑らかだ。スクロールを単調なスワイプ地獄に置き換える必要はない。iPad でも、スワイプよりスクロールのほうがまだ簡単だ。だから、できるなら楽なほうを選ぶべきだ。New York Times の記事ページのようなカラムデザインやスワイプの祭りは真似しないこと。

An article in the NY Times split over 9 page swipes

コンピュータでは、ユーザーは物理的にはキーボードとマウスの間を行き来し、視覚的にはモニター、OS、アプリウィンドウ、そしてその内部の視覚的秩序の間を移動する。iPad では、目と手の動きがひとつにまとめられ、巨大な黒いフレームの中に閉じ込められる。

全体の方向づけ

ウェブサイトは不安定な存在だ。何十億ものほかのサイトと（ハイパー）リンクされている。Computer > Monitor > OS > Browser という複雑なフレームの深いところで動いている。ウェブサイトには無限の深さと複雑さがあるように見える。一方、iPad アプリは、もっと有限で閉じた情報アーキテクチャを示す、ずっと単純な機能的フレーミングを持っている。それでも、これまでの多くの iPad アプリは、明確な全体の方向づけやメンタルモデルを示すことに失敗しているように見える。

受動的な（Apple の言い方では “lean back” な）タブレット形式は、線形の利用モードを持つ、限定された情報アーキテクチャを作ることを示唆している。ウェブサイトと比べると、iPad アプリは閉じた卵のようなものだ。

iPad アプリのデザインがインタラクションデザイナーに突きつける主な課題のひとつが、これだ。iPad 上のナビゲーションを、卵を割るくらい簡単にするにはどうすればいいのか。とくに、静的なスクロールバーのない端末で、情報をどう測るのか。

ユーザーに iPad アプリをコントロールしている感覚を持たせるには、多くのユーザーのメンタルモデルと一致する、強くて単純で構造化されたコンテンツモデル（優れた Marvel アプリのようなもの）が必要か、情報の測り方と方向づけの与え方を再発明する必要がある。

平均読書時間

ワードプロセッサを作る中で、私たちはズーム、ページの束というメタファー、スクロールを使って、ユーザーにテキストのどの位置にいるかを示そうとしてきた。それらを組み合わせることも試した。もちろん、進捗バーも試した。……でも、それら全部より良い解決策があると思う。時間を尺度にすることだ。私たちはそれを Reading Time と呼んでいる。

本を読むとき、残りページ数や、すでに読んだ単語数ではなく、時間的にどれくらい読み進めたかと、読み終えるまでにどれくらいかかるかが表示されると想像してみてほしい。テキストを書くときに、次のように表示されるとしたら。