元Apple・現Facebookのデザイナーが開発した『Our Choice』アプリにみる、近未来型UI

このエントリーをはてなブックマークに追加

今日もスマホアプリのUIに関する記事です。2011 Apple Design Awardを受賞するなど、ウェブクリエイターの中ではその存在を知らないひとの方が少ないであろうiPhoneアプリ『Our Choice』をご紹介します。

『Our Choice』

『Our Choice』は、米国元副大統領でノーベル平和賞を受賞したアル・ゴア氏が、温暖化防止への具体的な解決策をまとめた書籍『Al Gore OUR CHOICE(邦題:私たちの選択 Al Gore OUR CHOICE 温暖化を解決するための18章』のiPhone版電子書籍アプリです。

なぜ『Our Choice』はこれほどまでに知られているのか?それは、書籍の内容が素晴らしいのはもちろんのことですが、電子書籍アプリのあるべきUI像を世界のクリエイターの脳裏に焼き付け、いまでも影響を与え続け、語り継がれているからではないでしょうか。

地球をタップすると回転し、地球温暖化の行く末で変わり果てた地球の姿に変わる

起動時画面からホーム画面(上に掲載)の間では、起動時動画が再生されます。

起動時動画でアル・ゴア氏が登場

このアプリの基本UIがこちら。

上2/3を使って各章のメインビジュアル。下1/3でテキスト表示。それぞれ横方向にスライドして、コンテンツを切り替える。

驚くのはここからです。もし、左下の画像を拡大表示させたいとき、みなさんならどのように操作するでしょうか?

ページ左下の画像を拡大表示させたいとき、通常ならタップしたくなる。

『Our Choice』は、画像を2本指でピンチイン/アウトして、画像を拡大/縮小させます。直感的な操作がとても気持ちいいです。

画像を2本指でピンチイン/アウトして、画像を拡大/縮小する。

ピンチイン/アウトの2本指の幅に合わせて画像の大きさが変わり、ある一定の幅を超えると全画面表示になります。

こちらが全画面表示

上記のように画像だけでなく、オーディオブックも内蔵されています。ネイティブアプリならではの電子書籍の特徴です。

ネイティブアプリならではのオーディオブック。左下には音声オン/オフ、右下には現在地ボタン

オーディオブック右下の「地球マーク」を押せば、報じられている場所の位置、そして自分の現在地との距離感をつかむことができます。

さらに高度なのが、インフォグラフィックです。

「手のひら」マークをタップすると、インフォグラフィックが拡大表示される。

このインフォグラフィック、ただの画像ではありません。

「SLIDE」というサインが表示されている。

このサインにしたがって、スライドさせると…

時系列に沿って現在に近づいていくのが分かる。

現在までの人口の推移が視覚的に分かる。

また、別の種類のインフォグラフィックもあります。

「By Biome」をタップしたときの画面

「By Storage」をタップするとアニメーションでグラフが変化する。

ここまで『Our Choise』の特徴的なUIをかいつまんできましたが、ポイントはスマホならではの「インターフェース」を最大限活かしきっていること、だと思います。

「ピンチイン/ピンチアウト」(インターフェース)を、画像を拡大縮小させるために使い、「位置情報」(インターフェース)を、地理を学ぶために使い、「スライド」(インターフェース)を、時系列の操作に使っています。どれも “ユニーク” なだけではなく、電子書籍で「学ぶ」のに “適した” UIだと思います。

このアプリのUIを開発したのは、先日FacebookにチームごとジョインしたPush Pop Press社です。

Push Pop Press

元Appleのデザイナーが立ち上げた会社ですね。このアプリをTEDで発表したとき、デザイナーのMike Matasは若干25歳でした。TEDの動画はこちら。UIのデザイン力はもちろん、それを実現する開発力も素晴らしいです。

ユニークかつ適切なUIの代名詞的存在のご紹介でした。450円の有料アプリですが、ぜひインストールしてアプリの素晴らしさを身体的に味わってみてください。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Both comments and trackbacks are currently closed.

Comments Closed

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ