UI デザイン戦略どうすればいいですか？

1. Webデザインのこれからを
Material Design と Ionicから考えた
Nobuhiro Takahashi @feb19
2018.5.20Ionic Meetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
Lightning Talk
2018.5.20

2. TAKAHASHI NOBUHIRO
@feb19
Designer / Engineer
2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
2

3. ホームページ手作りおじさんです
2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
3

4. 「Webのこれからを語ろう」
テーマ
4
2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」

5. 今後 Webデザイン
どうなっていくんだろう？
2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
5

6. 教えてほしい…
2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
6

7. あっ LTして教えてもらおう
2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
7

8. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
8
私見の垂れ流しをします
適宜ウェブや各所でお話ししましょう
please follow →@feb19

9. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
9
コンテンツはブラウザの全てではなく、
ブラウザによって提供される「UI」の中に
置かれるようになってきた
ここ数年のWeb デザインの流れ
ポートフォリオは大体ウェブサービスなどを使ったものが多い
AMPなどのサービス実装も進んできた

10. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
10
UI コンポーネントは共通化されていき、
サービス横断できるよう共通化された
設計・実装の中に収まるようになっていく
この先のウェブ UI
気がする

11. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
11
・動画はこのサイズ
・本文テキストはこのフォントサイズ
・音楽のアイコンはこれ
・背景色はこのトーン

12. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
12
UI は共通化され、見慣れたもので、
一般化されていく

13. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
13
共通化していく UI の基礎は何になるのか？
覇権はどこが握るのか？

14. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
14
MaterialDesign ?
最有力？

15. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
15
普段人が物理現象として「見ている」物質感で
制作された UI デザインが論理的に説明可能で、
デジタルなデザインの良いとされる作法・設計・
ノウハウを Googleがまとめたデザインシステム
Material Design (私の解釈)
見た目だけでなく a11yや i18n や言葉遣いから表示に使われる実数まで
効果も最大化・最適化できるよう Google の思想に則ってデザインの手法が定義されてい る
https://material.io/

16. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
16
・「理にかなってる」デザインシステム
・ガイドラインも公開されているので
UI デザインの勉強にとても参考になる
・世界シェア No.1 Android標準
・iOS / web でも使えるハイブリッドな
デザインシステム
メリット

17. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
17
・「没個性」になる
・iOS / web での作例は少ない
・「Bootstrap っぽくないデザインにしよう→
そうだ MaterialDesign だ！」難民が
本質的に MaterialDesign を理解して
実装できているかは怪しいことも
デメリット

18. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
18
そもそも
UI に個性はいるのか？
疑問

19. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
19
ブランドデザインの話

20. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
20
お店（ウェブサイト）
・面構え（ロゴ）
・座席や店の雰囲気（UI）
・料理（コンテンツ）
ブランド＝ウェブサイトを構成する要素を「お店」で考えてみる

21. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
21
🍰 ケーキ屋 明るい色・穏やかな明かり
🍖 ステーキハウス 暗い色・高級感のある明かり
🍽 カフェ ケルトやジャズな BGM
🍣 寿司屋 BGM には上妻宏光(三味線)
🍜 ラーメン屋 タイポグラフは毛筆
☕️ コーヒー屋 西海岸のいつものタイポグラフ
お店が持つブランドの UI を雑に定義

22. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
22
他にも「銀行や駅」は利便性を求められるなど
提供サービスの違いで
ラーメン屋と同じタイポグラフは使用しない
誤解のないように：ここでいう「個性」は、「アーティスト性」のようなものではありません。
銀行の「記入用紙」や「ATM」といった UI に求められるのはアーティスト性ではなく機能性や
正確性で、その性質を感じさせるデザインのことを個性と表しています。

23. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
23
社会実装される UI にとって
個性（ブランド、違い）は必要

24. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
24
MaterialDesign 2 の発表
そんななか先週ぐらいに行われた Google I/O 2018

25. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
25
大まかな変更：
「ブランド感（個性）が出せるようになった」
Material Design 2
https://material.io/design/material-studies/

26. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
26
・Corner Radius
・Font
・Coloring
・Elevation
etc..

27. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
27
Web / iOS (Swift / Objective-C)での
実装方法も公開
https://material.io/develop/
MaterialDesign は Androidだけでなく
あらゆる環境で実現できることを提案している

28. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
28
Ionicのベースとなっている Angularは
MaterialDesign のライブラリをオフィシャルサポート
https://github.com/angular/material2
Angular

29. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
29
MaterialDesign をサポート
(Android/ iOS / Web)
https://codelabs.developers.google.com/codelabs/mdc-101-
flutter/#0
Flutter

30. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
30
対して Ionic

31. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
31
iOS / Android で自動で最適な意匠が当たる
→Androidは MD / iOSは iOS 11 Design
→各OSの利用者が違和感のないデザインを
自動で当ててくれる
Platform Specific Styles
一応 http://ionicmaterial.com/ というサード OSSを使って
強制的に iOS でも Material Design ライクなスキンが使用可能(私は大反対)

32. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
32
ハイブリッドフレームワークとして
iOS の個性を認め
ionic が吸収する仕組みになっている

33. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
33
個人的には Ionic のスタイルの方が好き😋

34. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
34
まとめ

35. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
35
ハイブリッドなデザインシステムMaterialDesign と
ハイブリッドなフレームワーク IonicFramework
課題解決の違いがあることがわかった

36. 今後 Webデザイン
どうなっていくんだろう？
2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
36

37. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
37
UI デザイン戦略を考える上で
個性をどこまで顕現させるべきか
どの長いものに巻かれていくべきか

38. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
38
意見交換させてください 🙏

39. 2018.5.20 IonicMeetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
LightningTalk「Webデザインのこれからを Material Design と Ionic から考えた」
39
https://frokan.connpass.com/

40. 終
Webデザインのこれからを
Material Design と Ionicから考えた
Nobuhiro Takahashi @feb19
2018.5.20Ionic Meetup Tokyo #4「Webのこれからを語ろう」atアシアル社オフィス
Lightning Talk
2018.5.20