スマホアプリデザイナーひとりAdvent Calendar #4 /Windows Store Apps/ Ratio Interactive

ひとりAdvent Calendar、4日目はWindows ストア アプリです。これでなんとか1週。

さてWindows ストア アプリですが、これまた有名なアプリというのは大抵すでにフィーチャーされています。

なので、今回はそんなアプリを作っている会社の紹介をしたいと思います。

会社の名前はRatio Interactive。

シアトルにあるデザインエージェンシーです。

http://www.ratiointeractive.com/

Ratio Interactiveが手がけたアプリの中で一番有名なのはNATURESPACEでしょう。

NATURESPACEは環境音を再生するアプリなのですが、UIが他のアプリとは全く違います。

まずデフォルトの画面からして違うのが一目でわかります。普通、Windows ストア アプリというとタイル状にコンテンツが並んでいる姿を想像されるかと思います。あるいは、写真が全画面に表示されていたりとか。

でもNATURESPACEは違う。UIの基本は円で構成されています。完全にオリジナルのデザインですね。

NATURESPACEは画面数としては8個しかないため、タイル状に何かコンテンツを並べるレイアウトとは相性が悪いです。そのため、1画面1要素の設計とし、フリックで画面を切り替えるようになっています。これはフラットシステムと呼ばれる構造で、ちゃんと「こういう設計でアプリを作ってね」という指標として存在しているのです。

面白いのがここからで、Windows ストア アプリは特徴的なUIをたくさん備えているのですが、その中に「アプリバー」「セマンティックズーム」と呼ばれる機能があります。

アプリバーとセマンティックズーム

アプリバーというのは、タッチデバイスなら画面の上下端どちらかから、画面内へ向けてスワイプすることで出現するコマンドを内包したバーです。

一般的なアプリバーの例。普段は何もないが、上もしくは下端から画面内側に向けてスワイプをすると、画面下（上にも出せます）にバーが出現し、様々なアクションを行うことができる。

Windows ストア アプリが持つコンセプトに「コンテンツに集中させる」があります。

マイクロソフトさんはよく「イマーシブ（没入感）」という言葉を使いますね。

みんな、写真を見てる時は必ずしも画像を回転したり削除したいわけじゃないよね。写真を見たいっていうのが、一番大きな目的だよね。だったら、普段使わないコマンドは隠して、ユーザーが使いたいときにだけ出せるようにしようよ。

大雑把に言うと、こういう考えのもとにWindows ストア アプリ、それを構成する一要素のアプリバーが設計されています。

セマンティックズームも同様です。セマンティックズームとは、画面をピンチインすることで画面の構成要素を1段階引き上げる機能です。具体例として朝日新聞デジタル for Windowsを見てみましょう。

このような標準的なレイアウトのWindows ストア アプリの場合、コンテンツは横方向に量が増えていきます。また、1画面に全てのカテゴリを表示することが求められていて、大体1カテゴリにつき5個くらいの最新情報を露出させるのがよく使われるパターンとなっています。

でもたくさんカテゴリがあったり、1カテゴリあたりの露出コンテンツ量を増やしたら、スクロールがめんどくさい。そんな時、画面をピンチインすると

このようにカテゴリだけの選択肢となります。情報の階層が1つ上がったんですね。平たく言うとショートカットです。セマンティックズームでも、デザイン的にはタイルを並べるのが普通とされています。

そして自分の見たいカテゴリ（ここでは「文化」）をタップすると

目的の場所に移動するわけです。

で、NATURESPACEはどうなの？

前置きが長くなってしまいました。それでは、NATURESPACEではこの2つの機能はどのように表現されているのでしょうか。

まずは、アプリバーです。

えっ、◯！？しかもはじっこ！？

続いてセマンティックズーム

えっ、なんか違うくない！？

どうでしょう。見事なまでにテンプレートから離れています。

これを見て「なんだ、なんでもありなんじゃん！」と思う方もいらっしゃるかもしれません。でも、その違和感は「いい違和感」であり、なんとなーくWindows 8に合ってるような気がしないでしょうか。

別にマイクロソフトは必ずしも四角形でアプリを作れとは強制していません（たぶん）。大切なのは、ユーザーをコンテンツに没入させ、アプリを気持よく使ってもらうこと。求める情報や場所にちゃんとアクセスできるように設計を考えることです。

もし朝日新聞が、TOPのタイルだけ円形にしたら、それはとても気持ち悪いものになるでしょう。でも、NATURESPACEはコントロール系を◯で統一することで、ちゃんとアプリとしての佇まいをデザインしているのです。

インフォメーションとかも◯。

NATURESPACEは、テンプレートにハマりがちなWindows ストア アプリの中で、いちはやく脱却し、独自性を考え、ちゃんとデザインに落とし込んだ好例だと思います。

まあ個人的には、セマンティックズームの時に説明テキストはいらないかなあとは思いますけどね。

そしてそんなNATURESPACEを作ったRatio Interactive、Windows 8界隈では頭ひとつ飛び抜けている存在と言えるでしょう。

他にもレシピアプリのiCookBook、妊娠から出産、子育てまで、赤ちゃんの成長に合わせたガイドや解説が見れるParentsや雑誌のGQなども手がけています。

Parentsもアプリバーがちょこんと出てきます。

アプリ以外にも色々やってる

Ratio Interactiveがすごいのは、アプリ制作以外にもWindows 8に携わっていることでしょう。

まずすごいのが、MSDNに載っているサンプル事例の制作及び解説。

そしてブログではWindows 8関連の記事を執筆しており、それをまとめたWindows 8 Design Handbookなんてサイトを作ったり、デザインコンテストを開催してたりしています。

ここまで積極的にやられてるのですから、すごいという他ありません。すげー。

いいものを作って、いい情報を発信する。僕も見習いたいです。

というわけで、4日目は制作会社という面からアプローチしてみました。

Ratio Interactiveって日本ではあまり話題に上がらないのかな？どうなんだろう。

明日は休日なので、もう少し突っ込んだ話を書けたらいいなと思います。