akuyan to

イベント/旅行/デザイン/おいしいもの...

スマホUI勉強会でめんどくさがりなデザイナー向けにUIデザインのポイントについて発表しました #spui2014


10月20日、渋谷セルリアンタワーのGMO YoursにてスマホUIに関するイベントに登壇させていただきました。

スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-
http://eventdots.jp/event/172659


今回の登壇は主催の@inamolyさんからお話いただいたかんじでしたが、他の登壇メンバーがUIやらUXやらのプロフェッショナルだったので「それ自分いらなくないですか?!」と戦々恐々でした…。ただ実践寄りのところを話してくれればということで、ゆるく参考になりそうな形で自分はこんな風にやってるよーってお話させていただいてきました。

のがこちらです。

めんどくさがりなデザイナーのタッチデバイスUI攻略 #spui2014
http://www.slideshare.net/akuyan613/ui-40529567


内容については適当に上の資料をご参考いただければと。
そして発表時に伝えきれなかった補足部分やただいいたいだけのことをちょこちょこと書いていきたいと思います。


グリッドについて


まず発表時に「とりあえずiOSは8px、Androidは4pxで覚えてください」というかんじで言ってしまったんですが、わかりづらかったようで申し訳ないです…。
こちらグリッドの基準値のお話でした。グリッドを8px基準と4px基準で作るようにしているってことです。
iPhone6 Plusが出たことでAppleのデザイン設計が崩れた、というような話がありますが、そういうことでもないんじゃないかと個人的には思っています。後述しますが、AppleもAppleで色々模索中なんだと思いますヨ。


あと会場で「Androidのグリッド3pxで作っているんですが…」とお話いただいたんですが、3pxでも間違いとかではないです。ぜんぜんOKです。対応する端末によりけりAndroidは調整する必要があるので、正直やりやすいピクセル数でよいと思います。
ただ、結局のとことAndroidで重要なのって「ピクセルじゃなくて実装はdpiだぜ!」ってとこなので、エンジニアさんと実装調整するときにピクセル数に縛られすぎないようにはしておきたいですよね。頭の中身をリキッドに!



AndroidとiOSの話


「iOSがAndroidに近づいているのでは」という話題がイベント内でも持ち上がっていましたが、個人的には「いやいやいやいやいやいや」と全力でNO!と言いたいところです。
まず「近づいてる」って何をもってして近づいているのか、という話ですが。
それって「機能面」で「似通ったものがでてきた」から「近づいている」のだと定義するのであれば、そもそもGoogleが今回出したデザインの概念である「マテリアル・デザイン」だってAppleのガイドラインに載っていることに共通するわけで、何がいいたいかというと「いいものをお互いに作ろうとした別々のアプローチから攻めたものが同じようなところにきている」ということなんですよ。Appleはブランディング(デザイン)から、Googleは機能面からいいものを目指してた結果なので、それでいいものがもう片方に採用されたっていいじゃないですか。いいものだもの。


なので、別にどっちの肩を持つ気もないけど「どっちかが正解でどっちかが間違ってた」みたいな考え方はデザインを考えるうえでジャマなので忘れましょう、ということです。
変な話AndroidとiPhoneなんて別ものなんですよ。スマホというくくりでは同じだけど、じゃあWindowsとMacはパソコンだけど別ものじゃないですか。
AndroidとiOSじゃ、各挙動の指し示すものがバラバラなんですよね。例えば分かりやすいところでいうと、Androidにおいて横スワイプでの画面切り替えって「前に戻る」挙動をさすんですが、iOSは「並列情報の切り替え」なんですね。
それを作っている側が認識せずにそれぞれのアプリを作ったら、それを使うユーザーさんが混乱します。だって頭の中に無意識に刷り込まれているOSの挙動と違うんですもん。


それが今回の発表でお話した「スクリーンとコントロール」の話にも繋がってくるのですが、UIを作るときに本当にきちんと気をつけなければいけないのは「ユーザーさんが無意識に刷り込まれている挙動と違う動きはしない」ってことなんです。
もちろんわざと外して目立たせるという手法もありますが、これを基本的なUIに採用し続けるとかなり使う側のストレスがたまります。なのでUIで困ったら、AppleとGoogleから出されているそれぞれのアプリをそれぞれのOSで使い倒すのをおすすめします。



多画面対応の順番について


関係ないんですけどものすごく1個いいたいことがあって。
最近多いのが「レスポンシブ対応」っていいながら、やってることがただの「リキッド(可変)対応」だったりするページがあって、別にその対応が間違っているわけじゃないんですけどそれが本当にそのコンテンツに適しているか見るようにはしておきたいですよね。もったいないので。


そしてどこまで多画面に対応するのかどうかで考えると…あんまり小難しく考えなくて大丈夫だと思います。
もちろん可能な限り画面ごとに対応できたらしあわせですが、もちろん多くの方はそこまで対応する余裕もコストもないですよね。結局のところ世の中の仕様はすべて大人の事情という夢も希望もない話をまずここに置いておきます。


それならじゃあどこからどこまで対応してったらいいのか、というと、ここで1番大事なのは数字です。解析です。アナリティクスです。


サービスやサイト、アプリに埋め込まれている解析データを元にユーザー数の多い順に対応していきましょう。埋め込まれていないのは論外なので、すぐGoogleアナリティクスをいれましょう。


もちろん個人の趣味で提供しているものであれば特に解析とか面倒なのでいいですが、少なくとも仕事であれば数字を見るのは必須です。それはデザイナーであっても間違いなく必須です。
デザイナーだと解析値を見る権限がないという話もよく聞きますが、ディレクターに交渉して数値共有してもらいましょう。自分のデザインがどれだけユーザーさんに届いているのかどうかを見るのはデザイナーの責任でもあります。
責任をとれ、という意味ではもちろんありません。UIは「使ってもらうためのデザイン」なので、「本当に使ってもらっているか」というのを自分の目で確認するのはとても重要です。
すんごい一生懸命考えたUIでもまったく効果がないこともいっぱいありますが、そんな失敗もあります。人間だもの。
ただ実際の「使ってもらっている数字」を見ながらUIを考えると、数字を見ないで作るものとは段違いのものができます。絶対。たぶん。
今までに1回も数値を見たことがない!という方は週1くらいで数字を見るクセをつけるとよいかなと思われます。
そしてもし可能であればユーザーテストとかもできるようになると尚ヨシです。


そんなこんなでUIデザイナーの一生的にまとめたのが、資料の最後にある超ざっくりUI検討フローチャートです。
UIデザインなんてもうお茶の子さいさいだぜー!という方にはほぼ参考になりませんが、これから頑張っちゃおうかな!って方は、軽くご参考ください。


今回のイベントに登壇側で参加して、色んなお話も聞けて自分自身とても勉強になりました。
また何かしらでご縁がありましたら、よろしくお願いします。