Amebaクリエイティブディレクターが語る
スマホアプリのデザイントレンド

これでアイデアを逃さない！PaperのiPhone版がついに登場！

2015年10月15日
TEXT：佐藤洋介（株式会社サイバーエージェント）

日々進化するデバイスやユーザーに合わせ、スマホアプリのデザイントレンドの移り変わりは非常に早い。本コラムでは、アップデートによって進化を遂げたサービスUIや新機能、新サービスなどにフォーカスし、より良いユーザー体験を提供するうえでの工夫についてサービスごとに考察する。今回は、つい最近iPhone版がリリースされた「Paper - FiftyThree」の公式アプリを取り上げる。

Paper
●iOS版アプリはこちら

このアプリは名前の通り、紙にメモスケッチしていくような感覚で、様々なアイデアをスクラップする事ができるツール系アプリである。以前より、主にペイント系ツールとしてiPad版がリリースされていたが、この度、写真やスケッチの取り込みが可能になったほか、文字入力によるテキストメモの作成など、大幅な機能のアップデートとともに、待望のiPhone版がリリースされ、より身近なアプリへと進化を遂げた。早速、機能追加によって進化したそのサービスUIについてひも解いてみる。

デバイスに最適化されたUIと、自然なチュートリアルが導くユーザー体験

iPad版が先行していたことから、まずはiPhone版へどのように最適化されているかを見てみよう。起動してまずランディングするのがホーム画面であるが、そこにはチュートリアルを兼ねた「Paperについて学ぶ」というスペース（フォルダ）があらかじめ用意されており、ユーザーはその中身を見ることにより、このアプリの大まかな使い方を理解することができる。

ホーム画面

iPhoneとiPadとの違い

好みのスペースを作り、その中にアイデアを貯めていく使い方がこのアプリの一般的な使い方だが、iPad版では横スクロール、iPhone版では縦スクロールにスペースを並べることで、デバイス毎の画面サイズに応じて最適なレイアウトに工夫されている。

また、各スペースの左右に大きくゆとりがあり、一見、１画面に対する情報量が少なく見えるが、スペースをタップした際の中身がバッと広がるインタラクションに備えてあえて広めにゆとりが取られている所も、このアプリにおけるよりリッチなユーザー体験を演出している。

シームレスなレイヤー構造と直感的な操作性

このアプリで最も注目すべきは、直感的な操作性を実現するために、非常にシンプルなレイヤー構造を持っている所である。

画面遷移を紐解くと、ドリルダウン式の一般的なレイヤー構造となっていることがわかるが、画面遷移のインタラクションが非常にシームレスであり、画面を切り替えずにズームイン・ズームアウトによって遷移することで、自分のいるポディションが常に把握でき、より直感的なユーザー体験を助長している。

また、シームレスさを助長するピンチイン・ピンチアウトでの画面遷移に加え、スクロールの限界点からさらにフリックすることで、1つ前の階層に戻ることができる。これは、より自然な画面遷移を演出するだけでなく、片手での操作が一般的なiPhone版でのシームレスなユーザー体験に一役かっている。

ワクワクするツールが散りばめられたスケッチ・入力画面

元々ペイント系ツールとしてiPad版で先行リリースされていたこともあり、スケッチ・入力画面のUIはアイデアをスピーディーに記録することに特化した最適な設計となっている。特徴的なツールが下部に表示され、右上の「？」マークからそれぞれのツールの使い方を動画で学ぶことができる。

指での操作なため、ざっくりとしたスケッチとなっているが、ちょっとした記録をするには非常にクイックで直感的な操作でメモを残せる。また、Paperには専用のスタイラスペンが用意されており、これを用いれば傾きによって筆圧をコントロールできたり、指がぼかしツールになるなど、より快適で詳細なスケッチが可能になるようである。

5_Styluspen

■まとめ
「Paper - FiftyThree」にみる、サービス進化の鉄則

ペイント系のスケッチだけでなく、写真、テキストを取り込めるようになって更にボリュームを持ったツールとしての進化を遂げた「Paper - FiftyThree」。

デバイス・ユーザーの進化に合わせて、サービスが持つコンセプトを拡張し、より良いユーザー体験として進化するためには、複雑な機能をどこまでシンプルにアウトプットできるかが重要でありつつも、機能の取捨選択だけではなく、遷移などインタラクションの工夫による心的負荷を軽減する方法などを模索し、ユーザーに対しての細やかな気配りが細部に求められてくるであろう。

【著者プロフィール】
佐藤洋介（さとうようすけ）／チーフ・クリエイティブディレクター
「Ameba」のクリエイティブ統括室室長として、スマートフォン向けサービスのデザイナーを統括。クリエイティブ責任者として各サービスのUIデザインを監修。

●1pixel：スマホデザインにおける、忘れがちな5つのルール
http://ameblo.jp/ca-1pixel/entry-11591358238.html
●1pixel：スマホブログ「Simplog」のUIデザイン
http://ameblo.jp/ca-1pixel/entry-11376905441.html
●Twitter
@sugaar