My365のUIデザイン
スマフォのデザインってのは僕にとってチャレンジにありふれた領域でした。
いざスマートフォン向けのユーザーインターフェースを作るにあたって、意識していたことが５つあります。僕の中ではもうお馴染みのルールとなってしまいましたが、せっかくなので書き記しておきます。
スマフォのデザインルール。
「視認性」「判読性」「可読性」「デザイン性」「操作性」
と、ユーザー視点を用いてネガティブチェック。
「視認性」：文字ひとつひとつの構成要素を視認しやすくする
。
「判読性」：誤読しにくく、他の文字などの役割の違いを判別しやすくする。
「可読性」：文字列としての単語・文章の読みやすさ
を担保する。
これらは文字のみならず記号においても、DTPやWebデザインにおける基本原則としてよく語られてることだと思います。ユーザーがスマートフォンに移っても、ネットに繋がりウェブを閲覧している以上、最低限必要なデザイン・ルールだと再認識しています。スマフォは解像度は高いけど、画面が小さいのでより顕著に。
わかりやすさを追求しただけでは、体験価値はうめない。
My365のデザインをしていくなか、不要な要素をそぎ落としてシンプルなものに仕上げていく過程で、iPhoneや人気アプリ、Coolなアプリを当然のごとくいじり倒していきました。
何気ないアプリの１画面でも、いけてるorいけてないの差を自分なりに見つけ出し、何がユーザーエクスペリエンスに繋がっていて、心地のよい感覚を生み出しているのかを知る必要がある。初見で得た感想ももちろん大切だけど、ユーザーの"ハートを掴む"要素は何かを徹底的に見極める努力が大切だと思います。
例えば、Photo365にあってMy365にないものは、写真の一覧性だったり、逆にMy365にあってPhoto365にないのは、写真の視認性だったりとね。
スマフォアプリUIの優劣を客観的に付けていく中で、３つの指標だと評価し辛い場面があったりしました。例えばローディング中を表す、インディケーターのアニメーションとか。（上：My365のインディケーター制作画面です。AfterEffects使用してます。）
どことなく得られる、触っててor見てて気持ちいいっていう感覚は、既存の指標３つじゃ整理されなくて惜しいなと思いました。あと結局アプリはiPhoneという箱に収まってしまうという事も考えると、結果的に２つの指標をもつことにしました。
「デザイン性」：iPhone標準アプリに劣らないシンプルさ、要素の美しさ。
「操作性」：スマートフォン上の押しやすさ、操作したときの気持よさ。
いい言葉があったら随時変えてくつもりですくけど、AppleがルールなiPhoneアプリのデザインの基準は、標準アプリで実現している配置であったり、640px x 960pxの画面サイズであったりして。気持よさはブラウジングを意識させない細かいアニメーションのディテールだったりするわけです。
My365のUIを作るにあたっては、この５つを守ることがアプリ内外でコミュニケーションをするきっかけになり、最終的にアプリ体験価値につながってると思います。
でもなにより、無茶振りをスーパーエンジニアの片岡(@katty0324)が柔軟に対応してくれたおかげで実装できているので、Xcodeに触れて、iOS上で実現できそうなアニメーションを学ばないといけないなと。