デザインがもっとセマンティックになっていくということ今年はスマホが普及してきたな、と思った。僕が初めてiPhoneに機種変したのは去年(2010年）で、iPhone4が出たばかりのタイミングでした。アプリはあんまり入れてないし、有料アプリはほとんど入れてない。iPhoneを買ってすぐは少し有料のフォルダ管理アプリとかを買ってみたけど、なぜだか100円ちょっとが高く感じる。これは今もそうだ。

ただ、アプリのレビューコメントが情弱ユーザが如実に現れてきたり、なんだか衆愚なアプリがランキング上位をとったりし始めたのが今年の秋。だいたいiPhone4Sがでた頃。あ、Android界隈の話はまったく知らないで書いてますよ。この頃から「スマホ初心者に優しいアプリやWEBサービスってどんな形だろう」と考えるようになってきた。とは言っても2,3ヶ月の話なんだけども。

デザインがセマンティックになっていくとは

いわゆるHTML5という文脈で語られるsection要素やらarticle要素やらアウトライン構造やらという話ではなくて、もっと見た目に近い部分で、そうなっていく。デザイン自体が言葉と同じ意味を主張し始めるようになる、と思ってる。
それはiPhoneだからとかスマホだから、ということじゃなくって、WEBアプリケーションが全体的にそうなっていく、と感じ始めた。結局それは牽引役がいるんだけど、FacebookやTwitterやGoogleがやっぱり代表格で、プラットフォームとしてはWindows8のMetro UIだったりする。

別に僕はUIの巨匠でも美のカリスマでもなく、単なる下っ端のへっぽこサラリーマンなんだけれども、それでも感じ始めたんだからおそらく一般の人もそろそろ気づいているんだろう、という意味でのこのエントリを書いてみることにした。

つまり、デザインが意味を持ち、ユーザがそれを意識し始めたということ。
っていうことさえも僕が言うまでもなくて「アイコンとボタンを使い分けろ」がほぼすべてかもしれない。

アイコンとボタンを使い分けるとは

Flash出身の(広義の)WEBデザイナーは、CSSを書く場合やデザインを作る場合も、ボタンはほぼ必ず3パターン作る。つまり「通常」「ホバー」「ダウン」である。これに加えて「ボタンが押せる範囲」も意識する。なぜか。FlashのMovieClipボタンを作ると、自動でこれらのフレームを用意してくれるからだ。だからFlasherは当たり前のようにボタンにインタラクションとアフォーダンスを与える。もう癖になってると言っても過言じゃない（余談だけど、もうちょっとディテールにこだわる人は「無効状態」のデザインも作る）。
ところが、CSSから入った場合はそうならない。CSSでは「:hover」はaリンクで使えるものの、「:active」や「:disabled」はあんまり意識しないんじゃないだろうか。必要があれば作るけど、ランディングページに置くだけのボタン画像だったらあんまり気にしないというケースがほとんどじゃなかろうか。

さて、話は戻って「アイコン」と「ボタン」だ。
使い分ける＝差別化ということ。特にスマホでは、「ホバー」アクションが存在しない。だからボタンかアイコンかは押してみて反応があるかないかを確かめないと分からないというユーザ負担がある。僕にとっては恐怖だったりする。
知らないでデザイン内の一部をタップしてしまったせいで前の画面とは全然違う画面になったら怖いな、とか、アイコンをタップできることを知らないせいで永遠に機能にたどり着けないせいで不具合かと思うということは、よくある。

これどこ押せるの問題

Flashでは、2004年から2006年くらいにこの問題を通過してきた歴史がある。
つまり、フルフラッシュコンテンツが流行ったせいで「俺オレUI」がサイトごとに登場した時期だ。各サイトやキャンペーンごとに全く関連性がないUI。ボタンの形状やカーソルの形、テキストの色、下線の有無、ホバー時のアクション、テキストの大きさ、色、アイコン。

ど派手な演出がひとしきり流れた後、どこをクリックすれば目的のコンテンツにたどり着けるかが全く分からない上に、間違ったボタンを押してしまったらまた動画を読み込み始めて戻るに戻れない、というUIの弊害にみんながストレスを感じていた。それはフルフラッシュのサイトでは今もあんまり変わらないといえばそうなんだけど。

いまで言うと、僕はFacebookのボタンに恐怖を感じている。

ロゴの右となりにアイコンが３つ並んでるけど、これ、何？　と思う。クリックしないと分からないので、クリックしたくなくなる。こんなリア充なボタン並べやがって、と思ってしまうと、Facebookを使うのも嫌になってくる。これはただの妬みだ。

Gmailのボタンもぺろっとしていて見た目に心地よいが、何を意味しているのか分からない。ただ、ホバーすると「移動」「アーカイブ」「削除」といった具合で説明コメントが吹き出し表示されるので、まだ使えるかなと思う。それぞれのボタンを２回ほど押せば意味を憶えるから、その後は吹き出しコメントがうざく感じ始める。ただ、ボタンを押したとき(down状態)もCSSでちょっと色が変わったりするから気持ちいい。

WEBデザインにアイコンを使うのはいいけど、意味をちゃんと持たせないと嫌われる

これは少し前に知った、無料のピクセルアイコン集だ。こういうのを得意げに集めて利用するのはいいけど、そのまえに「このアイコンが意味しているところを一言で言えるか？」と自問してから使うようにしたい。100%全員が一瞬で理解できるのって「メール」と「ゴミ箱」あとは矢印くらいじゃないかな。
雲の形のアイコンが何を意味しているのか、または吹き出しっぽいのとか、時計とか、スターとか。これ、意味わかる？いや、分かるようにピクトで作ってあるから上のアイコン集はいいんだけど。
僕が言いたいのは、っていうか思っているのは、オレオレUIで自分が作ったアイコンをボタンに入れてるけど、アクセントとしては意味があるだろうけどピクトの意味がまったく分からないものは押さないぜ、っていうこと。難しいなあ。

Flashで辛酸をなめてきた「オレオレUI」が、HTML5（作り方的にはCSS）になって再発したら嫌だなあ、と思う。Flashの簡単さと自由度は、そういう意味で発揮されてた感が強い。

UNIQLOトップはFlashじゃなくてJSだけど、たとえばこの画像。ヒートテックの紹介らしいけど、クリックできるのは右下のボックス、「WOMEN」だけだ。このでっかい男女の写真はクリックしても意味がない。僕はこういうのが嫌いだ。
こういうのって、スマホがもっと一般の人や老若男女分け隔てなく使えるようになったら、みんな騒ぐと思う。アイコンや画像をどんだけシンプルにしても「分かりません」って思うのはどんどん増える。つまり、その画像やアイコンが意味をなさないという状態だ。スマホサイトではCSSホバーなんて効かないから、どうするんでしょうね。どうするのがベストプラクティスなのかな。
という意味では、Metro UIの言うように「アイコンはそのまま、ボタンは○や□で囲う」という手段は見た目に分かりやすい。スマホしか知らない（PCを使ったことが無い人）は、たとえば子どもたちは、「本」の次に手に取るのが「スマホあるいはタブレット」だ。そのとき、テキストがリンクしていたり、写真がクリッカブルであることを自然と感知するのは何によってなのか？　って、すごく興味深い。どうやったら「この画像はクリックできる」「この画像はできない」を見分けることができるのか（使い分けるじゃなくて）。最初はまあ、タップしまくるだろうけど、ある程度使えるようになったら、何に寄って判断するのかな。
僕はそういう部分を追求して行きたいと、最近、思ってる。もっとボタンを気持ちよくしたいと、思ってる。