20 7

スマホ アプ リ に お ける
U I デ ザイン のトレンド

2017/12/16 Shift11 @sugaar

佐藤 洋介（サトウ ヨウスケ）

クリエイティブ 執行役員
チーフ・クリエイティブディレクター
@sugaarweiv
rev
OnoSessi
スマホアプリの開発に関わる方
UIデザインのトレンドに興味がある方

1

2

3

2017

20 17

主なトピッ クス

UIのトレンドサービス
デザインの未来

ざっくり年表/【機能別アプリ紹介】

スマホ習慣の変化/

主立ったUI業界ニュース/

EC、カメラ、Ado be、UIの進化/

制作環境の変化ライトゲーム、Microso ft、まとめ

Bitc oin、AR20 7

niconico(く)リリース

Spaces終了

Service

Android oreo発表

Appleから Clips発表

FaceApp
ちょっと流行るZOOZフリマ終了

ZOZOTOWN「送料自由」Canva上陸

Medium
運用停止

メルカリNowリリース
Mastodonが話題に

FiNCプレリリース

ポケモンキャラ追加

1News

CASHリリース&停止
hulu iOSリニューアル

2DAZN障害345

Google drawに驚く

67

CASH再開baltoサービス終了
ポケモンキャラ追加

89

ビットコイン分裂

10Google Home発売

Apple design award 2017

1112Google PlayBEST OF 2017

iOS11発表
米ヤフー社名を「Altaba」に変更

LINEがClova発表

亀田、サーバーをKO

メリカリチャンネル開始

Apple
BEST OF 2017

Spaces終了

ServiceAppleから Clips発表

FaceApp
ちょっと流行るTop ix

niconico(く)リリース
Android oreo発表

ZOOZフリマ終了

ZOZOTOWN「送料自由」Canva上陸「速すぎる流行」
Medium
運用停止

メルカリNowリリース

Mastodonが話題に

FiNCプレリリース

ポケモンキャラ追加

1

News

CASHリリース&停止
hulu iOSリニューアル

2DAZN障害345

Google drawに驚く

67

CASH再開baltoサービス終了

ポケモンキャラ追加

89

ビットコイン分裂

10Google Home発売

Apple design award 2017

1112Google PlayBEST OF 2017

iOS11発表
米ヤフー社名を「Altaba」に変更

LINEがClova発表

亀田、サーバーをKO

メリカリチャンネル開始

Apple
BEST OF 2017

Spaces終了

ServiceAppleから Clips発表

FaceApp
ちょっと流行るTop ix

niconico(く)リリース
Android oreo発表

ZOOZフリマ終了

ZOZOTOWN「送料自由」Canva上陸「速すぎる流行」
Medium
運用停止

メルカリNowリリース

Mastodonが話題に

FiNCプレリリース

ポケモンキャラ追加

1

News

CASHリリース&停止
hulu iOSリニューアル2

DAZN障害345

Google drawに驚く

6

7

CASH再開baltoサービス終了

ポケモンキャラ追加

89

ビットコイン分裂

10

Google Home発売

Apple design award 2017

1112Google PlayBEST OF 2017

iOS11発表
米ヤフー社名を「Altaba」に変更

LINEがClova発表

亀田、サーバーをKO

メリカリチャンネル開始

GoogleトレンドAppleBEST OF 2017
http://ysklog.net/life/5305.html

Spaces終了

ServiceAppleから Clips発表

FaceApp
ちょっと流行るTop ix

niconico(く)リリース
Android oreo発表

ZOOZフリマ終了

ZOZOTOWN「送料自由」Canva上陸「大規模障害」
Medium
運用停止

メルカリNowリリース

Mastodonが話題に

FiNCプレリリース

ポケモンキャラ追加

1

News

CASHリリース&停止
hulu iOSリニューアル2

DAZN障害

エンコーディング障害

3

4

5

Google drawに驚く

6

7

CASH再開baltoサービス終了
ポケモンキャラ追加

8

9

ビットコイン分裂

10

Google Home発売

Apple design award 2017

アクセス集中による停止

アクセス負荷によるダウン

11

12

Google PlayBEST OF 2017

アクセス負荷によるダウン

iOS11発表
米ヤフー社名を「Altaba」に変更

LINEがClova発表

亀田、サーバーをKO

メリカリチャンネル開始

Apple
BEST OF 2017

Abem aT Vの年末年始
Spaces終了

ServiceAndroid oreo発表

Appleから Clips発表

FaceApp
ちょっと流行るZOOZフリマ終了

ZOZOTOWN「送料自由」Canva上陸

Medium
運用停止

niconico(く)リリース

メルカリNowリリース
Mastodonが話題に

FiNCプレリリース

ポケモンキャラ追加

1

News

CASHリリース&停止
hulu iOSリニューアル

235

Google drawに驚く

DAZN障害大晦日

米ヤフー社名を「Altaba」に変更

4

LINEがClova発表

6

7

CASH再開baltoサービス終了
ポケモンキャラ追加

8

9

ビットコイン分裂

10

Google Home発売

Apple design award 2017

元旦

1112

Google PlayBEST OF 2017

iOS11発表
亀田、サーバーをKO

メリカリチャンネル開始

Apple
BEST OF 2017

Spaces終了

ServiceAppleから Clips発表

FaceApp
ちょっと流行るTop ix

niconico(く)リリース
Android oreo発表

ZOOZフリマ終了

ZOZOTOWN「送料自由」Canva上陸

Medium
運用停止「Bitcoin」

メルカリNowリリース

Mastodonが話題に

FiNCプレリリースポケモンキャラ追加

1News

CASHリリース&停止
hulu iOSリニューアル

2DAZN障害345

Google drawに驚く

67

CASH再開baltoサービス終了
ポケモンキャラ追加

89

ビットコイン分裂

10Google Home発売

Apple design award 2017

1112Google PlayBEST OF 2017

iOS11発表
米ヤフー社名を「Altaba」に変更

LINEがClova発表

亀田、サーバーをKO

メリカリチャンネル開始

Apple
BEST OF 2017
http://www.newsweekjapan.jp/stories/world/2017/12/2017-5.php

2017年に入って100 0％

以上

価 格 が上 昇
http://www.newsweekjapan.jp/stories/world/2017/12/2017-5.php

20 7

主立ったUI業界ニュース

https://www.apple.com/jp/ios/ios-11/

App Store
デザイン刷新https://www.apple.com/jp/ios/ios-11/

https://blog.appfollow.io/app-store-сhanges-for-ios-11-from-aso-point-of-view-f201e157a8cc

https://blog.appfollow.io/app-store-сhanges-for-ios-11-from-aso-point-of-view-f201e157a8cc

10 周年記念モデル
iPh on e X 発売

https://www.apple.com/jp/iphone-x/https://www.apple.com/jp/iphone-x/

Animoji

https://www.apple.com/jp/iphone-x/https://www.linkedin.com/pulse/ar-next-big-step-retail-vikki-weston/ARKitiO S 11 以上、かつ iPh on e 6s 以降( A9 チップ以降を搭載)で利用できる

AR フレームワーク

https://techcrunch.com/2017/06/27/rumors-of-the-demise-of-augmented-reality-developers-have-been-greatly-exaggerated/https://blog.triedge-lab.com/2017/10/13/post-1262/

Google Home

https://store.google.com/product/google̲homehttps://store.google.com/product/google̲homehttps://www.mercari.com/jp/mercari-channel/

https://www.mercari.com/jp/mercari-channel/
https://liveshop.jp

「作りながら売ろう」をコンセプトにしたアプリ
製作過程や作品への思い、クリエイターの個性までも表現できるt

https://laﬀy.live20 7

制作環境の変化https://zeplin.iohttp://yomikata.org/word/zeplin

ProtoPie

https://www.protopie.iohttps://www.protopie.io/demo/index.html

http://www.pixate.com

時期未定？

時期未定？

GALLERY

STAGE

Google製のプロトタイピングツール？

Google製のUIインタラクションツール？

https://material.io

UITRENDin 2017

https://www.mdn.co.jp/di/

DNERTIU

1/8

ECアプリ

Etsy : ハンドメイド&ビンテージ商品•

ハンドメイドの商品が世界中から集まるマーケットプレイ
スサービス

•

売り手（ショップ）の詳細ページは縦に長く、上部のタブナビゲーションはページ内のアンカーリンクになっている•

一般的に、タブになった情報は閲覧されにくい（フリックしてもらえない）•

アンカーリンクはうまい解決策

eBay - Buy, Sell & Save Money•

世界最大規模のインターネットオークションサービス•「膨大な検索結果」をユーザーに適度に意識させ、「膨大な中から選び出した」という買い物のワクワク感をインタラクションの細部で演出•

リスト読み込み時に、画面の上部からリストのUIが「少しだけズレるように」入ってくる•

表示のタイミングをズラすことで「候補の商品をたくさん用意したので、さぁ見てください！」となる

Canopy – Amazon, Curated.
•Amazonのおしゃれな商品をキュレーションするサービス•「量」よりも「質」にこだわっている印象•

大きめの写真や大きな余白など「ゆとりのあるUI」で商品をじっくり見てもらう•

1つ1つの商品が全て「主役」•「詳しくはAmazonで」と割り切ったコンセプト

GOAT : Buy & Sell Sneakers•

スニーカー専用の売買アプリ•「シンプルさ」と「わかりやすさ」が絶妙なバランス•

UIをシンプルにすればするほど情報が平均化してしまい、ユーザーを迷わせてしまうケースが多くある•

画像右上のスペースを「補足情報エリア」とし端的に訴求•「商品を物色したい」ニーズにさり気ない配慮で訴求Urban Outfitters•

洋服や雑貨など、幅広いジャンルの商品が買えるサービス•

写真を大きく扱うレイアウトやカードUIが美しい•

カタログや街中で撮影した写真をベースに商品を検索できる「Scan＋Shop」という検索機能が非常に便利•

解析が半分くらい済んだ時点で検索のタグ候補が表示され、解析結果への期待感を程よく煽ってくる•

ストレスを与える処理時間をポジティブに変えるアイデア

DNE
RT
I
U

2/8

有料

カメラアプリTouchRetouch•

簡単な操作で手早く写真をレタッチできるアプリ•

Photoshopの「コンテンツに応じる機能」に似た仕組み•

細かい作業がしやすいように、ブラシで塗りつぶしている間だけ拡大鏡のようなUIが出現して操作をサポート•

色調補正など複雑な加工機能はなく、あくまでも「手軽なレタッチ」にフォーカスして「簡単さ」というコアなユーザー体験を最大化Musemage—プロフェッショナルなカメラappとビデオ編集ソフト•

１つのアプリで便利な機能を凝縮しているカメラアプリ•

この手のアプリは機能過多で複雑になりがち•

横フリックで撮影モードをライトに切り替えることができ、画面毎に機能を制限している点がわかりやすい•「あれもこれも」を１画面に詰め込まず、それぞれの画面に「テーマ」を持たせてユーザーを制限することも重要

Afterlight•

豊富な機能がオールインワンなアプリ•

ダークトーンを基調としたUIは品がありつつも控えめな印
象で、シンプルなアイコンが機能のライトさを演出•加工操作は下部のメニュー内ですべて完結する•「操作する位置」を一定に保つことで、ユーザー自身が「主導権を持って操作している」ような印象を与えることができ、使いやすさへとつながっているAnalog Paris•「Analog Film Cityシリーズ」のひとつ•

アプリを開くとパリの写真がデフォルトで設定されていて、トイカメラ風のフィルターがすぐに試せる•「あ、こういう風になるんだ」と認識し、ユーザーも手元にある自分の写真で試したくなるのは必然•

チュートリアルではなく「まずは推し機能を体験させる」というリアルな訴求もユーザー体験の向上に有効

ProCam 4 - マニュアルカメラ + RAW•

デジカメ顔負けの性能でベストアプリを2度受賞•

撮影時に画面上にたくさんの表示が出ていて一見難しそうに見えるが、基本的な機能は下部の5つ•

メモリが大きく各ボタン間にゆとりがあったり、オートフォーカス設定時に拡大鏡が出現し、どの程度ボケるかが視覚的に分かりやすくなっているなど、安心感のあるUIで「品の良さ」を演出している

DN
ERTI
U

3/8

ちょっと変わったAndroid

カメラアプリHypocam•

白黒写真の加工に特化したアプリ•

白黒で構成されたシンプルなUIは、まさに白黒写真の一部に溶け込むような印象•

加工結果とUIのトーンを白黒の世界観で一貫させることで、ユーザーに提供したい体験（白黒が持つアナログ感や非現実感）を濁すことなく演出

パノラマ360：全体像•

360度のパノラマ写真が撮影できるアプリ•

撮影を開始すると、中央に丸いサークルが現れ、画像を合成するために必要な撮影ポイントに点があるのがわかる。

•

シューティングゲームの照準を合わせるような感覚で操作•

一見複雑な操作に対して、自然な形で操作をアテンドしてくれるこの仕組みは、ユーザーの使い心地を左右する重要なおもてなしである。

GoArt•

何気ない写真をワンタップで精細な絵画風に変える•

人工知能（AI）を用いて、ゴッホやピカソといった美術界の巨匠の作風を模して即座に加工•

写真を選んでフィルターをタップするだけというシンプルな操作に対し、加工後に表示される結果のクオリティの高さのギャップに驚く•

ユーザーの期待を良い意味で裏切る

DNE
RTI
U

4/8

Ado b eAdobe Capture CC– デジタルアセットの作成•

Creative Cloudとの連携が便利なアプリ•

カメラを通して、そこにあるものを瞬時にシェイプ化したり、見ている景色からカラーテーマをさっと取得できるな
ど、「スキャン」という概念を根底から覆してくれる•

高度な技術とは裏腹に操作は非常にシンプル•

機能と操作の「重さ」のギャップがユーザー体験をより深いものにする

Adobe Comp CC•

シンプルジェスチャーでワイヤーフレームが作れる•

まるで紙に書いているような感覚で入力できる•

アイデアラッシュをする際に紙にスケッチするような感覚で入力し、それを自動で整えてくれる•

普段何気なく行っている行為に近い入力ジェスチャーを用いることで、思い通りに操作できる驚き

Adobe Photoshop Sketch•Photoshopの高性能なペイントエンジンを用いて本格的なドローイングができる•

ペン先のサイズやインク量の調整など詳細な設定が直感的に操作できる点が心地よい•

すべての画面がシームレスに遷移し、絵を描くために色々なツールがその上に乗って来るような演出が施されているため、「書く」という行為に対して「最適なサポートをされている感覚」をユーザーに与えている

Adobe Photoshop Fix•Photoshopの技術を用いて画像の補正に特化したアプリ•

ストア上にはセルフィーをより「盛る」ための加工系アプリが数多くあるが、このアプリは「加工の自然さ」が秀逸•

詳細機能のUIがクロスビューで出現するため、今なんの操作をしているのかがわかりやすい

DN
E
RTI
U

5/8

Mic ro so ft

Microsoft To-Do•

毎日の「すべきこと」をシンプル管理できるToDoアプリ•

レイアウトにゆとりのある余白と大きな角の丸みで、使っていて安心感をもたらすUI•

インテリジェント機能で過去に入力されたタスクから推測•「毎日を新しくスタートする」というコンセプトのもと、自動で繰り返し予定を組むよりも、日々のちょっとした差を毎日カスタムできる「若干の余白」こそが重要Office Lens•

ホワイトボードや書類など、撮った写真を自動でトリミン
グ&斜め写真を補正してくれるカメラアプリ•

必要な箇所をトリミングしてデータ化できるのが魅力的•

アプリを立ち上げてから画像を補正しデータ保存するところまでわずか２タップ•「複雑な機能」を「シンプルに見せる工夫」がユーザーにとっての「手軽さ」に影響する

Microsoft Pix カメラ•

シャッターを切るだけで瞬間的に補正し、ベストショットを提供してくれるカメラアプリ•「面白い動き」を感知すると短時間のループ動画を自動生成するなど、ユーザーが意図していない部分までフォローし「少し変わった思い出」を提供•

あまり精度は高くないが、「お得なユーザー体験」としてポジティブに訴求

DNE
RTI
U

6/8

ライトゲームビックハンター (Big Hunter)•

原始時代を舞台にしたハンティングゲーム•

フラットイラストと大胆なタイポグラフィが印象的•クセになる面白さは「シンプルなルールの足し算」•「投げる角度」や「当てる部位」、常に変わる「獲物との距離感」、さらには「時間制限」や「回数制限」があるなど、「モノを投げて獲物を狩猟する」という基本ルールに足される追加ルールがどれもシンプルで分かりやすいSplashy Dots•

一筆書きで点と点をつないでいく脳トレ系のゲーム•

特徴は「アート感覚」な点と次に進む「ハードルの低さ」•点の色が次につなぐ線のインクの役割となっているため、非常に「それっぽく」アート風に仕上がる達成感がある•

完成時に「ちょっとした達成感」を演出するだけでなく、そこから次のステージへと移行させるシームレスな遷移もうまいPrune•木を育て、光へと誘い開花させるゲーム•

グラフィックとしての完成度の高さもさることながら、ステージを進めたくなるようなシームレスな演出が特徴的•次のステージでの障害物がシームレスに画面遷移を補助しているため、一連をストーリーとして進めているかのようなステージ毎の「つながり」を感じることができる•

マテリアルデザインの「リップル」の概念が近い

DNERTIU

7/8

Bitc oin

Coincheck ビットコインウォレット•コインチェック株式会社が運営する仮想通貨取引所アプリ•

注目すべきはホーム画面を持たずに画面ごとに情報を分散させ、無理に機能を詰め込まず「簡単そうに見せる」工夫•

あえて情報を分散させることでユーザーの使い勝手を向上させるケースもあるbitFlyer ウォレット- ビットコイン（仮想通貨）取引もかんたん！

•

株式会社bitFlyerが運営するビットコイン取引所のアプリ•Coincheckとは真逆で、このアプリでできる機能の全てをホーム画面に集約•

ホーム画面を用意するメリットとしては、「どこを見ていても、最終的にはホーム画面に戻れる」という安心感

Blockfolio- Bitcoin and Altcoin Portfolio•

複数の取引所を利用している場合など、仮想通貨の一元管理ができるアプリ•「Book」のタブは画面が3分割されていて、それぞれが独立してスクロールする•情報が多く、玄人感がハンパないDNERTIU

8/8

ARLightSpace - 3D painting in AR•

カメラを通した空間に3Dペイントができるアプリ•

多くのアプリが画面上で指を使ってドローイングするのに対し、画面に指を置いたままスマホを持った腕を動かすことで、スマホ自体が擬似的なブラシとなり、空間に対して自由にドローイングできる•

実際のスマホを現実世界と拡張世界のハブにすることで、思い通りの場所に立体的なドローイングが出来る

CARROT Weather•

サポートロボットのCARROTがかわいい天気アプリ•CARROTを実際に現実世界にオーバーラップさせる「ARMode」が面白い•

ペット感覚で部屋の中でロボットを操作することができる•

操作のサポートは音声で流れるため、次に何をして欲しいのかが明確にわかる

LIFULL HOME'S(ライフルホームズ)•

賃貸物件や購入物件を探すことができる総合不動産情報•

ARkitに対応した「ARお部屋計測」の機能が面白い•

部屋の平面図を作成することができるこの機能だが、計測時にホームズくんがトコトコ歩く演出が可愛い•ARという仮想的な事象に対して操作の進捗を分かりやすく可視化し、可愛らしい演出で心的不安を軽減すること
は、利用ハードルを大きく下げる

FUTURE OFSERVICEDESIGNスマホ習慣の変化

スマホ習慣の変化 1

決済機能により接触機会の増加

スマホ習慣の変化 2

端末スペックの向上

新技術

スマホ習慣の変化 3「テレビの時間」が「スマホの時間」に

UIの進化

Voice User Interface
Designer- Google

Web Designer ?

Siri Designer- Apple今後、サービスデザイナーに求められる「力」• 世の中の変化に気づき 「柔軟に対応する力」• トレンドを「自分なりに解釈する力」• 常に進化するユーザー リテラシーを「甘く見ない力」• 作業を効率化した分を 「クオリティに昇華する力」• 未知の領域でもベース スキルを活かせる「応用力」

.
niF
2017/12/16 Shift11 @sugaar