20 6@sugaar

2016/12/17

foTREND

inUI DESIGNMOBILE APPS.

Shift10：Webデザイン行く年来る年（CSS Nite LP50）

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

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

1

2

3

2016
主なトピックス

2016
UIトレンドまとめ

ざっくり年表/１月〜３月/４月〜6月/

サービスデザインの今後主立った業界ニュース/

７月〜９月/10月〜12月/
その他のトピックス

1

2

3

2016
主なトピックス

2016
UIトレンドまとめ

ざっくり年表/１月〜３月/４月〜6月/

サービスデザインの今後主立った業界ニュース/

７月〜９月/10月〜12月/
その他のトピックス

2016Vine終了宣言

Facebook Paper終了

Service

Miitomoリリース

peachリリース

2016News12

SXSW 2016

spottily上陸

storehouse終了

Public Preview(3/14)

34Instagram刷新

56

Google I/O 2016

WWDC 2016

8

ポケモンGO ブーム

Google gallery、stage事前登録開始

UberEATS上陸

Prismaリリース

7

Pixate終了

910

Apple Pay開始

iPhone7リリース

1112

Google Play
ベスト オブ 2016

App Store
ベストアプリ2016

News 01

iOS 10リリース

http://www.apple.com/jp/ios/ios-10/

Complexion Reduction

http://uxmilk.jp/48364
原文：http://swarmnyc.com/whiteboard/complexion-reduction-a-new-trend-in-design-1#michael

Complexion Reduction❶

より大きく、太い見出し❷

よりシンプルで、汎用的なアイコン❸

使用色の減少(コンプレクション・リダクション)

http://uxmilk.jp/48364
原文：http://swarmnyc.com/whiteboard/complexion-reduction-a-new-trend-in-design-1#michael

Apple Music

http://uxmilk.jp/48364
原文：http://swarmnyc.com/whiteboard/complexion-reduction-a-new-trend-in-design-1#michaelhttp://uxmilk.jp/48364
原文：http://swarmnyc.com/whiteboard/complexion-reduction-a-new-trend-in-design-1#michael

News 02

動画元年

大容量データ通信プランの登場

News 03

セルフィー文化Snapchathttps://www.youtube.com/watch?v=T1DZUjw67eY

SNOW

https://www.youtube.com/watch?v=12iNcpVmATUInstagram

https://vimeo.com/177180549

1

2

3

2016
主なトピックス

2016
UIトレンドまとめ

ざっくり年表/１月〜３月/４月〜6月/

サービスデザインの今後

主立った業界ニュース/

７月〜９月/10月〜12月/
その他のトピックス01
JANUARY

03
MARCH

!
hcaeP
• クローズドなメッセージアプリ• 「マジックワード」と呼ばれる入力アシストが「気兼ねなくつぶやく」ために投稿のハードルを下げている• 「友人同士の他愛ない会話」を機能から訴求している良い事例

omot
Mii
• 今年の初めに話題になったアプリ• 「任天堂感」のあるUIで、安心感がある• 独特なSEで「押し心地の良さ」を演出• 読み込み時にミニゲームを入れるなど、ユーザーを飽きさせない工夫があるregnesseM• 3月ごろ、Facebookメッセンジャーがマテリアルデザイン化• よりシンプルな設計となり、高機能メッセー
ジアプリが持つ複雑な印象を払拭• 単体アプリとしての使い心地が良くなった

https://www.youtube.com/watch?v=B9gsvUxmQQA

04
APRIL

06
JUNE

Best Use ofMaterial Design

http://android-developers.blogspot.jp/2016/04/the-google-play-awards-coming-to-google.html

Best Use of Material Design!
gnirB• 買い物リストを管理するアプリ• タップのみで主要な操作ができるため、入力を簡単に見せる工夫をしている• ドロワーでリストを切り替える仕様だが、リストの種類が一目でわかるようなシンプルなイラストを用いている

Best Use of Material DesignsuolubaFThe• 自分の習慣行動を管理してくれるアプリ• カラフルなUIが印象的• アイコンや余白にゆとりがあり、入力の煩わしさを軽減させてくれているBest Use of Material DesigntsiodoT• その名の通り、ToDo管理のアプリ• スワイプ時に出るリップルのエフェクトが心地よく、入力を気軽なものに見せている• シンプルな設計のため、迷いがないサービス終了のお知らせesuoherotS惜しまれながらもサービス終了• パララックスとスケールをコントロールし、ページを繰りたくなるような仕掛け• 詳細画面からの遷移もシームレスで、フィードの上に乗っている表現• 投稿画面も浮遊感を踏襲し、サービス全体が、統一感のある印象にesuoherotS• デザインリニューアル• よりクローズドなメディアへ• リッチなアニメーションを排除し、シンプルな使いやすさにフォーカス

しかし、サービス終了...

07
JULY

09
SEPTEMBER

サービス終了のお知らせrepaPkoobecaF
惜しまれながらもサービス終了• 下にフリックすると、上からドロワーが出現する• アイコンなど、手がかりがいないため、高いリテラシーを求められる• しかし、「閲覧」という観点では、ドロワーの中身はさほど重要な項目ではないamsiPr• Apple Best of 2016
• 印象的なフィルターが人気のアプリ• 選択中のフィルターを画面の中央にFixさせることで、次へ（右へ）の選択をしやすくしているrepaPxob
Drop• 「Dropbox」がリリース• 簡単な入力操作でリッチな文章を作成• テキストや写真だけでなく、チェックリス
トやコードも貼り付けられる高度な機能に対して入力のUIは非常に簡潔で、すべての入力操作はキーボード上部の4つの起点から行われる。

STAErebU• Uberのデザイントーンを踏襲し、洗練されたUIが印象的• 縦の動きをベースとしたシームレスな遷移が心地よく、商品選びをスムーズにアシスト• タップで詳細へ遷移する度に画面が積み上がっていくような重なりの演出があり、自然と階層を意識させ迷いを緩和yfitoSp• 音楽配信サービス• 黒を基調としたデザインで、差し色にライトグリーンを用いてアクセントとし、全体的な重厚感が印象的• コンテンツ間に大きなゆとりを持つことで黒の圧迫感を軽減させ、重厚な中にも親しみやすさを演出

10
OCTOBER

12

DECEMBER

Allo• GoogleのAIチャットアプリ• 「スマートリプライ」機能で、ユーザーの入力スタイルを学習し、受け取ったメッセージに対して文字入力せずにある程度返信できる• 予測変換の進化版として、「押しやすさ」や「見つけやすさ」というこれまでの入力デバイスの使いやすさの概念をAIでサポート

Google Play Best of 2016

https://play.google.com/store/info/topic?id=merch̲topic̲b0000b2̲apps̲TopicPage̲bestof2016&hl=JA

GooglePlay2016年 ベストアプリ

VTamAbe• フリック時のスケーリングで「何気ないザッピング」を演出• 遷移時に、画面を下から上へ動かすことで切り替わりを演出

GooglePlay2016年 ベストイノベーティブアプリ

iQON• コーデを投稿、閲覧するアプリ• 情報量が多い分、優劣をバランス良くつけ、ベースの色味を抑えることで、目に飛び込んでくる情報を制御

GooglePlay2016年 ベストエンターテインメントアプリ

AWA• 背景にメインイメージを配置し、ページの持つ世界観を訴求• その上にコンテンツを浮遊させることで、ページ全体の印象を統一• 横フリックで背景をパララックスさせることで、横のつながりを示唆Other topics

PROTOTYPE

TOOLTransition

Interaction

Interaction

http://www.pixate.com

http://www.pixate.com

Principle

http://principleformac.com

Animation

Interaction

Multiple Screens

http://principleformac.com

Origami Studio

http://origami.designhttp://origami.designProtoPie

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

STAGE / GALLERY

Adobe XD

https://material.io

https://blogs.adobe.com/creativestation/web-how-to-play-with-adobe-xd

「これ 1つでオールO K」ではなくフェーズや用 途によってツール と上手 く付き合う スキルが重要ngiseDIUfosdne
Tr
1/3

チュートリアル紙芝居型spirTelgooG• Googleがリリースした、旅行に関する情報をまとめて管理できるアプリ• 一見紙芝居的な表現だが、スワイプジに微妙にパララックスを用いていて、「思わずフリックしてしまう」心地よいインタラクションが印象的• 枚数を少なくすることで「手軽さ」を印象付けている

動的な紙芝居型チュートリアル

VUE• モンタージュやフィルターを使って、映画のような6秒のアートムービーが作れる• アプリの魅力を動画で表現• 基本的には紙芝居的だが、操作とリンクした遷移なので没入感があるスプラッシュ型チュートリアル

bnbri
A• 民泊シェアリングエコノミーサービス• 短い時間でその魅力を伝えるために、全画面の動画によるコンセプト訴求• 一見ストレスに感じそうだが、ついつい見入ってしまうシンプルな表現であることと、時間にして10秒程度の動画なため、起動してすぐに世界観に一気に引き込むには効果的

体験型チュートリアル

yadoT• 日課をサポートするアプリ• 初期起動時に強制的に投稿を体験• ゆとりのあるレイアウトで「めんどくささ」を軽減させ、「簡単そう」に見せる工夫をしている!!

revewoH

体験型チュートリアル

yadoT•初回は中央に「+」ボタンがあるが、実際のUIでは左メニュー内の奥まった位置にあるため、初投稿後にユーザーが迷ってしまう• 「+」ボタンが複数あり、どれがさっきのボタンかが分からず、見失ってしまう吹き出しTips型チュートリアル

kcabt
Fron
• 前面と背面のカメラを用いて、同じ瞬間を複数の視点で記録できるカメラアプリ。

• 閲覧している最中に吹き出しやポップアップを用いて操作を局所的に訴求

!!

rev
ewoH

吹き出しTips型チュートリアル

kcabt
Fron
• 実際の操作への影響が少なく閲覧を阻害しないのはよい• 新機能が追加された時など、一時的なアテンションとしては効果的だが、初回起動時に複数出してしまうと、押し付けがましい印象を与えてしまうため訴求のバランスが重要である

ngiseDIUfosdne
Tr2/3

ヒーローイメージ

Vevo• 写真の大きさが印象的なアプリ• 一見写真サービスのようだが、再生マークが異物のように印象的に配置されているので「動画感」をうまく演出している。

ynapmoctsFa• 写真の上に乗せられたテキストの背景に色を敷くことで「雑誌」のような手軽な印象を与えている• 写真の下部を三角形にトリミングし、下にコンテンツが続いていることを示唆している。

senilTime• 一覧から詳細への遷移時に、一旦イメージをヒーロー画像のように最大化させてから小さくFixすることで、コンテンツの内容を印象づけている• リスト部分では、パララックスを用いることで、１つ１つのコンテンツを魅力的にアテンションしている

ngiseDIUfosdne
Tr
3/3

示唆

ediugSnap• 詳細への遷移時に、右から左へコンテンツが滑るように入ってくるので、「右に何かあるかも」という期待値をうまく演出し、操作を示唆できているretratskci
K• 読み込みのプログレスバーを左から右に流れるように設計し、右にあるコンテンツを示唆している。

• 最下部にスクロールバーを配置し、さり気なく全体感も訴求vidloM• ファーストランディング時に、左メニューの存在を画面のバウンスを用いて示唆している• 下部のマガジンが横に流れることで注目を集める工夫をしている

1

2

3

2016
主なトピックス

2016
UIトレンドまとめ

ざっくり年表/１月〜３月/４月〜6月/サービスデザインの今後

主立った業界ニュース/

７月〜９月/10月〜12月/

プロトタイプツール

その他のトピックス

トレンドに価値はなく吟味するこ とに意味がある
流れの速い業界において、トレンドが必ずしも一般化するとは限らない「提供者」として、ユーザーのニーズとどうやってシンクロさせるかが重要「流行りのUI」に惑わされず、ユーザーファーストで優れたUIは優れたUXの一部であって自然なインタラクションは使い心地のための演出である

ragu
SbyuoyknaTh@sugaar2016/12/17

Shift10：Webデザイン行く年来る年（CSS Nite LP50）