CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ

4月4日に行われたCSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきました。この前ここにも書いたCSS Nite LP26のCSSプリプロセッサの回で、クックパッドの@tikedaさんのお話をもっと聞いてみたいなーと思っていたので、これは！！と思い。

テーマは「UIデザインのパターン化」。ちょうど「スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン」という本を出されたばかりだったので、本から抜粋された内容が紹介されました。以下Agenda。

1. UIのパターン化・ルール化とは
2. プラットフォームの流儀
3. 画面パターン
4. UIコンポーネント
5. 実践事例
6. パターンとルールがもたらすメリット

90分という短い時間だったけど、ワークショップ的なのが何度かあって、結構頭を使いました。クックパッドや食べログ、facebook、TwitterなんかのiPhone,Androidアプリ、スマホサイトのキャプチャを見て、どれがどのプラットフォーム向けのUIか考えたり、似たUIコンポーネントのそれぞれのメリット、デメリットを考えてみたり。
仕事的にはスマホサイトが一番近いんだけど、iOSやWindows8みたいにかっちりとしたデザインガイドラインやコンポーネントがあるわけじゃなく、どういうのがいいのかわかんないなぁと思っていたので、iOS, AndroidアプリとスマホサイトのUIを並べてみるのはすごく参考になるなと思いました。

アイコンの意味を考える

１０個ほどのアイコンが表す意味を考える時間があって、これが一番頭を使いました。以下そのときのアイコン一覧（スライドからキャプチャさせていただきました）と、解答メモ。

• Aの三点リーダーみたいなアイコン、iOSではタブの一番右側によく見かけるけど、縦３点は知りませんでした。Androidでは縦の３点が結構あるらしく、押すとドロップダウンが表示されるらしいです。
• Cは反時計回りの矢印アイコン。更新（リロード）かと思ったんですが、「リプレイ」でした。リロードは時間を進めるから時計回り。リプレイは時間を戻すから反時計回り。YouTubeで使われてるらしいです。
• Eは何かよく分かんなくて、写真アプリでときどきあるRGB値の変更かと思ったら、Androidの「設定」でした。
• Gのゴミ箱は、「削除」ではなく「ゴミ箱にいれる」。ゴミ箱のメタファーを使うなら機能も本物に近づける。現実ではゴミ箱に入れるだけでは完全に削除されないから、データ上も完全削除はしない。
• Hの星マーク、最近はハートマークもよく見るようになったので、☆はみんなからの人気を表すレーティングに、ハートは個人のお気に入りを表す意味に使われるんじゃないかとのこと。
• Iはグループを表すアイコンですが、人系アイコンで重要なのは人数。１人だと自分自身、２人だと友達（自分と、友達）、３人だとグループ。

視覚記号奥が深い…かなり面白かったです。Cのリプレイのアイコンを見て、細かい部分は意識して使ってないんだなと思いました。リプレイも更新も「なんとなく丸くて回ってるっぽいもの」を適当に押してんだろなと。「意識せずに使えるものがいいＵＩ」と言われたりもするから、それはいいＵＩなんだろうなぁ。

以下、その他メモ箇条書き。

■画面遷移

・画面の種類はざっくり分けると、TOP、一覧、詳細に分けられる。TOPも一種の一覧に近いから、もっとざっくり分けちゃうと一覧と詳細になる。一覧ページは通過点でしかなくて、ひたすら一覧を繰り返したどって詳細にたどり着く。
・画面遷移を作ることで、どこにどんなコンポーネントが必要か自然と見えてくる。すると、コンポーネントのマッピングができる。目的をはっきりさせることでシンプルでスピーディな画面設計がしやすくなる。画面一覧の次は、画面からエリアに分けていく。

■UIコンポーネント

・ラベリングをどうしていくかも重要
・判断を求めるウィンドウは、ユーザに選択肢を残しておくことが必要
・iOSはラベルがキャンセルであればどちら側にボタンを置く、というのではなく、破壊的な選択の時には順番が入れ替わる
・モーダルとモードレスUIのメリットデメリット。モーダルはユーザの行動を事前に注意するのに向いている。事後のものはモードレス。確実に伝えたいものには向いてない

■情報のビジュアル化

・いいね、と星の例。レーティング。youtubeの場合はマイナスのレーティングを採用。これによりネガティブなコンテンツが出てくることを抑止している
・アイコンにはラベルが不要なので、コンパクトなUIを構築できる。
・保存アイコンはフロッピーではなく、何のメディアをどこにダウンロードするかを表すダウンロード（下向き矢印）のようなアイコンにする動きがある。

■クックパッドでの事例紹介

・レシピのランキングの変動を表すために、赤い数字で+3と表現したことがあった。でも赤い数字は逆にマイナスの印象を与えてしまうため、オレンジの上向き矢印に変更した。

『デザインを変える場合は、必ず計測する。UIはパターン化できてもユーザ体験までパターン化してロジカルに考えることはできない。コンポーネント化は、開発方法としての捉え方だけではなく、ユーザメリットのためであることを忘れずに。』

かんそうとか

帰りの電車で偶然にも講師の@tikedaさんと同じ方向で、贅沢にも色々お話ができました。「今、ゲームのUIのほうが進んでるじゃないですか」とおしゃってて、ゲームニクスの話を思い出した。ゲームニクスの話を聞いたときもWebのUIよりずいぶん進んでるという印象があった。Webやアプリの世界も、確かにゲーム界のほうが進んでいるかもしれないなぁと。パッケージゲーム界はノウハウを外に出さないらしいから、Webのゲーム界にも出てきていないノウハウっていっぱいあるんだろうな。

デザインには意味があるし、開発ツールは効率化してよりクリエイティブな所へ力を注ぐための手段なんだなと再認識できた良い90分でしたー。後日UI本買いました(o´艸`o)