狠狠撸
Submit Search
Web デザインのこれからを Material Design と Ionic から考えた
?
Download as PPTX, PDF
?
0 likes
?
545 views
Nobuhiro Takahashi
Follow
UI デザイン戦略どうすればいいですか?
Read less
Read more
1 of 40
Download now
More Related Content
Web デザインのこれからを Material Design と Ionic から考えた
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
Download