ウェブサイトが機能面でも見た目の面でもどんどんWebアプリケーション化しているいま、スキンという観点でWebアプリをどう成立させるかを考えるのは面白いはずです。そこで、まずは2つの異なるアプローチを比べます。HTMLスキン対デスクトップアプリケーションスキン。つまり Google 対 Apple です。
GMail は見た目も感触も、はっきりと HTML のウェブサイトです。見た目のうえで、普通のユーザーがアプリケーションらしさを想像するときの何かを少し奪ってしまいます。新しい .Mac 環境である MobileMe は、デスクトップアプリケーションのように見え、アプリケーションのように感じますが、ウェブサイトのデザイン原則には従っていません。では、オンラインアプリケーションの表面デザインはどちらを目指すべきでしょうか。より「オンライン」寄りにするべきか、それともより「アプリケーション」寄りにするべきか？
ノイズの芸術
MobileMe は、ウェブ上で重要なナビゲーションやインターフェースの操作に、明白な意味を持たないアイコンを頼りにしています。そのためユーザーは、とくに Mac 以外のユーザーは、それぞれのアイコンが実際に 何をするのか を推測するしかありません。主なナビゲーションの最初の3つのアイコンだけは見覚えがありますが、その最初のひとつですら、あまりに分かりやすいからそう思えるだけです。テキストがなければ、マウスオーバーと ALT テキストの神に祈るしかありません。
これを GMail の上部ナビゲーションと比べてみましょう:
平易なテキストがあれば、それぞれのリンクがどこへ行くのかは明白です。「Start Page」は開始ページへ、「Mail」はメールへ。どちらをクリックしてもよいのか、何かを間違えるのではないかという不安はありません。
意味が曖昧なシンボルに頼るインターフェース要素は、見慣れた言語（視覚的であれ何であれ）に頼る要素よりも多くの思考を必要とします。MobileMe の過度に削ぎ落とされたナビゲーション要素はユーザーに厳しく、インターフェースの基本部品に不確実性を持ち込み、サイトの使いやすさに悪影響を与えています。Google に1点。
目のためのデザイン: (ドット)Me
閉所恐怖症を誘う上部バーは、サイト全体の構造の中で自分がどこにいるのかを示すうえでほとんど役に立ちません。これは情報を伝えない見栄えの良さの典型です。別の例を見てみましょう:
私たちはおそらく Mail にいて、たぶん Inbox にいます。そしてメッセージをクリックしたら何が起こるのかについて、あまり手がかりはありません。
不確実性を減らし、理解を高めることは、良いWebデザインの重要な要素です。直感的でない情報でも、思慮深い構造化と視覚的な操作によって明快でアクセスしやすくできます。しかし、ここではそれが行われていません。色、背景画像、その他のグラフィック要素が情報を邪魔しています。支えているのではありません:
- サイドバーは、それが表しているものと視覚的につながっていない。
- メッセージの間に区切り線がないと一覧はすっきり見えるが、その結果、個々のメッセージの境目が明確ではなくなる。
- メッセージ一覧は目を引くが、そもそも何の一覧なのかを全体として示す視覚的な導線がない。
- ボタンは見栄えのために装飾されている。
- フォームフィールドは手入れされすぎている。
- ホバー状態とカーソル変化が予想外で、一貫していない。
- メニューは MobileMe 依存だ。
脳のためのデザイン: Gmail
いくつかのことがすぐに明らかです:
- 私たちは受信箱を見ていて、新しいメッセージが1件（古いメッセージが2件）ある。
- 目線はメッセージ一覧から「Inbox」タブへ移り、現在地を示している。
- 新しいメッセージは対照的な色（白い背景）とフォントの太さ（太字）で強調され、古いメッセージは同じ手法で階層のひとつ下に落とされている。
- 個々のメッセージは線で区切られ、各メッセージには明白な操作オプション（Archive、Report Spam、Delete など）がある。
- ボタンは標準のフォームボタンだ。
- テキストを選択できる。
- リンクには理解しやすいホバー状態とカーソル変化がある。
- メニューはほかのサイトのものと一貫している。
- テキスト入力は想定どおりに動く。
GMail のインターフェースは「安心できる」感じがします。不確実性が明らかに少ない。多くのものが実際に 何をするか がはっきりしています。道筋は短く、因果関係も明快です。GMail は、一般に受け入れられているウェブブラウザのインターフェース要素を使うことで、ウェブサイト本来の見た目、感触、操作性を保っています。Google に2点。
応答性
MobileMe のいちばん腹立たしい特徴は、その遅さです。ロードに時間がかかることが予想されるなら、インターフェース側でそれを織り込み、ユーザーにフィードバックを返すべきです。ウェブブラウザはもともと、Firefox のようにタブで読み込みアイコンを表示して待ち時間に対応する手段を持っています。GMail はこの機能を利用して、長い待ち時間をユーザーに知らせています。
スキン自体のせいで読み込みが遅いわけではありません。しかし、応答しないインターフェースを想定に入れないのは、インターフェース設計者として怠慢です。MobileMe はフラッシュサイトのやり方を前提にしており、ユーザーにまったく新しく、しばしば直感に反するインターフェースを学び、適応することを強いています。ウェブに置くよりデスクトップに置いておくべきアプリケーションです。Google に3点。
結論
Google のメディアにふさわしいアプローチは、インターフェースがグラフィックデザインの問題ではなく、どう動くかの問題だということを示しています。Apple が美人コンテストに勝とうとしてウェブに持ち込む華やかさは、真のコンテスト、つまり使いやすさの美しさでは敗れます。とはいえ、だからといって Web アプリに手入れをしてはいけないわけではありません。
Apple のグラフィックへの細やかな配慮は、たいてい驚くべき結果につながります。しかし、Web アプリの成否を分けるのは形や色ではなく、それらを動かすロジックです。そしてそのロジックは、見た目ではなくメディアによって定義されるのです。
