Appleも唸るクオリティ！「Enlight」に学ぶUXの工夫
Appleも唸るクオリティ！「Enlight」に学ぶUXの工夫
Amebaクリエイティブディレクターが語る
スマホアプリのデザイントレンド
2016年1月28日
TEXT：山幡 大祐（株式会社サイバーエージェント）
日々進化するデバイスやユーザーに合わせ、スマホアプリのデザイントレンドの移り変わりは非常に早い。本コラムでは、アップデートによって進化を遂げたサービスUIや新機能、新サービスなどにフォーカスし、より良いユーザー体験を提供するうえでの工夫についてサービスごとに考察する。今回は、AppStoreのBest of 2015に選ばれた、写真加工アプリ「Enlight」を取り上げる。
このアプリは、写真加工を感覚的な操作で、本格的に楽しめるアプリである。一般的なトリミングやフィルタ処理はもちろん、画像の変形やマスク処理、トーンカーブによる色調整といった本格的な機能も揃えている優れものだ。そんな、多機能でクリエイティブなアプリに隠された工夫をひも解いてみる。
スマホアプリのデザイントレンド
2016年1月28日
TEXT：山幡 大祐（株式会社サイバーエージェント）
日々進化するデバイスやユーザーに合わせ、スマホアプリのデザイントレンドの移り変わりは非常に早い。本コラムでは、アップデートによって進化を遂げたサービスUIや新機能、新サービスなどにフォーカスし、より良いユーザー体験を提供するうえでの工夫についてサービスごとに考察する。今回は、AppStoreのBest of 2015に選ばれた、写真加工アプリ「Enlight」を取り上げる。
このアプリは、写真加工を感覚的な操作で、本格的に楽しめるアプリである。一般的なトリミングやフィルタ処理はもちろん、画像の変形やマスク処理、トーンカーブによる色調整といった本格的な機能も揃えている優れものだ。そんな、多機能でクリエイティブなアプリに隠された工夫をひも解いてみる。
5色のグラデーションで作る世界観
アプリを起動して、最初に目に飛び込んでくるのは、美しいグラデーションを使った雰囲気あるスプラッシュ画面だ。
アプリを起動して、最初に目に飛び込んでくるのは、美しいグラデーションを使った雰囲気あるスプラッシュ画面だ。
本アプリでは、キーカラーを1色に絞らずに、5色のグラデーションで見せているところが面白い。黒ベースのUIに、色を決めきらない曖昧なグラデーションを使うことで、他のアプリにない雰囲気が演出されている。
色を変える分、レイアウトは各ページで統一されていて、変化があまりない。ユーザーにとっては、どこにどんな機能があるか理解しやすく、操作方法も統一されているため、色が変化していてもユーザー体験に影響なく、色を雰囲気作りにうまく使うことができているのだ。
色を変える分、レイアウトは各ページで統一されていて、変化があまりない。ユーザーにとっては、どこにどんな機能があるか理解しやすく、操作方法も統一されているため、色が変化していてもユーザー体験に影響なく、色を雰囲気作りにうまく使うことができているのだ。
写真に触れて、感覚的に加工する
フィルタの強弱の調整は非常に感覚的に操作できる。下部のメニューからフィルタを選択し、写真の上で指を左右に動かすことで、強弱を調整することができる。このジェスチャーを採用することによって、「もうちょっと…」「大体このぐらいかなぁ？」といった、非常に感覚的なイメージでの加工が可能になっている。これは、初心者にもわかりやすく、使い易い工夫だ。
フィルタの強弱の調整は非常に感覚的に操作できる。下部のメニューからフィルタを選択し、写真の上で指を左右に動かすことで、強弱を調整することができる。このジェスチャーを採用することによって、「もうちょっと…」「大体このぐらいかなぁ？」といった、非常に感覚的なイメージでの加工が可能になっている。これは、初心者にもわかりやすく、使い易い工夫だ。
また、フィルタを適用する範囲を選ぶ「ターゲット」という機能があり、この機能の使い勝手も非常に良い。
ターゲットエリアを表現する円を、ピンチすることでサイズ調整、ドラッグすることで位置変更ができる。ここまでは、一般的だが、円の外に矢印がついていて、それを引っ張ることによって、ぼかしの範囲を調整できる。これが良い。ターゲットを表す円と、ぼかしの範囲を表す矢印。それぞれを独立して動かせることにより、感覚的な操作ながらも、自分のイメージに通りに、細かく調整することができる。
ターゲットエリアを表現する円を、ピンチすることでサイズ調整、ドラッグすることで位置変更ができる。ここまでは、一般的だが、円の外に矢印がついていて、それを引っ張ることによって、ぼかしの範囲を調整できる。これが良い。ターゲットを表す円と、ぼかしの範囲を表す矢印。それぞれを独立して動かせることにより、感覚的な操作ながらも、自分のイメージに通りに、細かく調整することができる。
Enlightの加工は、どれも、写真上でジェスチャーを使って、感覚的に操作することができる。多機能ながら、触っていたら何となく良い感じに仕上がる操作性に魅力を感じる。
動画で魅せるチュートリアル
多機能なアプリにとって重要なのが、使い方を説明するチュートリアルだ。Enlightのチュートリアルは、とてもわかりやすい。
動画で魅せるチュートリアル
多機能なアプリにとって重要なのが、使い方を説明するチュートリアルだ。Enlightのチュートリアルは、とてもわかりやすい。
まず、機能ごとに、1枚ずつカード形式になっていて、動画で使い方を説明している。このアプリは、ジェスチャーを使って、感覚的に操作することができるため、変に言葉で説明するより、実際に操作してる動画を見せるのが一番早いのだ。直感的なUIを作ることで、チュートリアル自体も、とてもシンプルに作ることができている。
そして、このチュートリアルは、初めて開くページには、必ず表示されるが、常に画面上部に格納されていて、必要な時に引っ張り出してくることができる。
そして、このチュートリアルは、初めて開くページには、必ず表示されるが、常に画面上部に格納されていて、必要な時に引っ張り出してくることができる。
たいていのアプリが、「まずは使い方を！」といった感じで、初回起動時に強制的にチュートリアルを表示する。しかし、「いったん使ってみたい」とか「めんどくさい」といった感情から、チュートリアルを、スキップしてしまうユーザーが多いのが現実だ。1度スキップすると、設定の奥深くにあるヘルプを見るか、二度と表示できないかになってしまい、使い方を再学習するのが、難しくなっている。
その点、Enlightでは、気軽に1機能ずつ確認できる上に、常に上部から呼び出せるようにすることで、ユーザーが気になった時に、簡単に確認できるようにしている。多機能ならではの工夫だ。
その点、Enlightでは、気軽に1機能ずつ確認できる上に、常に上部から呼び出せるようにすることで、ユーザーが気になった時に、簡単に確認できるようにしている。多機能ならではの工夫だ。
■まとめ「Enlight」にみる多機能アプリのこれから
Enlightは、多機能ながら絵で表現すべき部分と、ジェスチャーを使って体験させ、操作させる部分を非常にうまく住み分けたアプリである。
技術も進化し、アプリで出来ることも増えてきている今、アプリが多機能になるのは当然のことで、機能はこれからも増え続けるであろう。その中で、何を見た目で表現し、何をインタラクションで表現するかの、住み分けに成功したアプリが、長くユーザーに愛されるアプリになっていくだろうと改めて感じた。
●その他の記事
「Amebaクリエイティブディレクターが語る
スマホアプリのデザイントレンド」の目次はこちら
Enlightは、多機能ながら絵で表現すべき部分と、ジェスチャーを使って体験させ、操作させる部分を非常にうまく住み分けたアプリである。
技術も進化し、アプリで出来ることも増えてきている今、アプリが多機能になるのは当然のことで、機能はこれからも増え続けるであろう。その中で、何を見た目で表現し、何をインタラクションで表現するかの、住み分けに成功したアプリが、長くユーザーに愛されるアプリになっていくだろうと改めて感じた。
●その他の記事
「Amebaクリエイティブディレクターが語る
スマホアプリのデザイントレンド」の目次はこちら
山幡 大祐（やまはた だいすけ） ／クリエイティブディレクター
「Ameba」のクリエイティブディレクターとして、Amebaアプリのリニューアル等を担当。現在は、「755」開発チームのプロダクトマネージャー兼デザイナーを務める。