Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
グラスモーフィズムのススメ
Search
Akito UEHARA
January 24, 2023
Design
1
310
グラスモーフィズムのススメ
グラスモーフィズムを構成するデザイン要素の説明と、コーディングの仕方の説明です。
Akito UEHARA
January 24, 2023
Tweet
Share
More Decks by Akito UEHARA
See All by Akito UEHARA
What is front end engineer?
aktuehr
0
190
10名超えのスクラムでフロントエンド開発する現場の声 / Develop Front-end in Scrum
aktuehr
4
1.3k
Other Decks in Design
See All in Design
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
910
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
590
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
560
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
350
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
190
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
150
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.6k
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
850
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
630
Installing and Running decksh/pdfdeck
ajstarks
1
860
minpaku-community-scrum-patterns
norinity1103
1
430
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Building an army of robots
kneath
306
46k
KATA
mclloyd
32
15k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Done Done
chrislema
185
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
A Tale of Four Properties
chriscoyier
160
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Transcript
グラスモーフィズム のススメ 2023/01/23 上原 晃人(淀川コナン) @Markup Meetup #3 online グラスモーフィズム
のススメ 2023/01/23 上原 晃人(淀川コナン) @Markup Meetup #3 online グラスモーフィズム のススメ 2023/01/23上原晃人(淀川コナン) @MarkupMeetup#3online 自 自 自
自己紹介 自己紹介 自己紹介 上原晃人(淀川コナン) デザインエンジニア(Webフロントエンド) @株式会社ゆめみ UIデザイナー @株式会社ジェイタマズ(業務委託) WACA公認上級ウェブ解析士 aktuehr
グ グラ すり 202 スキ を、 グ グラ すり 202 スキ を、 グ グラ すり 202 スキ を、
ド) グラスモーフィズム is 何? グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見
を、馴染みのあるものにする)の流れを汲む1つ。 グラスモーフィズム is 何? グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見 を、馴染みのあるものにする)の流れを汲む1つ。 グラスモーフィズムis何? グラスモーフィズム:Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見 を、馴染みのあるものにする)の流れを汲む1つ。 グ グ グ
ド) グラスモーフィズム is 何? グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見
を、馴染みのあるものにする)の流れを汲む1つ。 グラスモーフィズム is 何? グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見 を、馴染みのあるものにする)の流れを汲む1つ。 グラスモーフィズムis何? グラスモーフィズム:Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見 を、馴染みのあるものにする)の流れを汲む1つ。 グ グ グ このように重ねたりすることで印象が変わったりします。 モーダルとしても利用できます。 このように重ねたりすることで印象が変わったりします。 モーダルとしても利用できます。 このように重ねたりすることで印象が変わったりします。 モーダルとしても利用できます。
外見 外見 外見 グラスモーフィズム is 何? グラスモーフィズム is 何? グラスモーフィズムis何?
グ グ グ
グラスモーフィズムを使ってみた 副業で関わったチャットデザイン グラスモーフィズムを使ってみた 副業で関わったチャットデザイン グラスモーフィズムを使ってみた 副業で関わったチャットデザイン グ •色 •チ
埋め グ •色 •チ 埋め グ •色 •チ 埋め
グラスモーフィズムを使ってみた •色んなWebサイトに埋め込まれる •チャットのカラースキームのカスタマイズができない ↓ 埋め込まれるサイトの世界観を壊さずに使いやすいUIを実現したい グラスモーフィズムを使ってみた •色んなWebサイトに埋め込まれる •チャットのカラースキームのカスタマイズができない ↓ 埋め込まれるサイトの世界観を壊さずに使いやすいUIを実現したい
グラスモーフィズムを使ってみた •色んなWebサイトに埋め込まれる •チャットのカラースキームのカスタマイズができない ↓ 埋め込まれるサイトの世界観を壊さずに使いやすいUIを実現したい グ 不透 この グ 不透 この グ 不透 この
グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは:上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは:上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは:上から下に30〜50%のグラデーション グ
境界 境界 ・St ・同 グ 境界 境界 ・St ・同 グ 境界 境界 ・St ・同
グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは:上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは:上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは:上から下に30〜50%のグラデーション グ
境界 境界 ・St ・同 グ 境界 境界 ・St ・同 グ 境界 境界 ・St ・同 重ねる時は不透明度を高くしたほうが視認性高い このモーダルライクなものは、上から70%〜90%のグラデーション。 背景に何が来るかわからない場合は、無難に不透明度は高くしておいた方が良さそうです。 重ねる時は不透明度を高くしたほうが視認性高い このモーダルライクなものは、上から70%〜90%のグラデーション。 背景に何が来るかわからない場合は、無難に不透明度は高くしておいた方が良さそうです。 重ねる時は不透明度を高くしたほうが視認性高い このモーダルライクなものは、上から70%〜90%のグラデーション。 背景に何が来るかわからない場合は、無難に不透明度は高くしておいた方が良さそうです。
グラスモーフィズムの気をつけること 境界 境界を明確にするための装飾 ・Stroke(境界線)として1pxで背景と同色の不透明の線を設定する ・同系色が背景に来る場合に背景の反対色のドロップシャドウ グラスモーフィズムの気をつけること 境界 境界を明確にするための装飾 ・Stroke(境界線)として1pxで背景と同色の不透明の線を設定する ・同系色が背景に来る場合に背景の反対色のドロップシャドウ
グラスモーフィズムの気をつけること 境界 境界を明確にするための装飾 ・Stroke(境界線)として1pxで背景と同色の不透明の線を設定する ・同系色が背景に来る場合に背景の反対色のドロップシャドウ グ ぼか すり ・ba グ ぼか すり ・ba グ ぼか すり ・ba
グラスモーフィズムの気をつけること ぼかし すりガラス感を演出する一番大事な装飾 ・background blurを4pxくらいかける グラスモーフィズムの気をつけること ぼかし すりガラス感を演出する一番大事な装飾 ・background blurを4pxくらいかける
グラスモーフィズムの気をつけること ぼかし すりガラス感を演出する一番大事な装飾 ・backgroundblurを4pxくらいかける グ 背景 境界 ドロ ぼか グ 背景 境界 ドロ ぼか グ 背景 境界 ドロ ぼか
グラスモーフィズムをコーディングする 背景グラデーション: linear-gradient() 境界線: border ドロップシャドウ: box-shadow ぼかし:backdrop-filter: blur(value) グラスモーフィズムをコーディングする
背景グラデーション: linear-gradient() 境界線: border ドロップシャドウ: box-shadow ぼかし:backdrop-filter: blur(value) グラスモーフィズムをコーディングする 背景グラデーション:linear-gradient() 境界線:border ドロップシャドウ:box-shadow ぼかし:backdrop-filter:blur(value) グ グ グ
グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <div class="bg"> <div class="glass"> てきすとが入ります。 </div> </div>
<divclass="bg"> <div class="glass"> てきすとが入ります。 </div> </div> .bg { display: grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue, red); } .glass { width: 100px; height: 100px; background: #fff; } .bg { display:grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue,red); } .glass { width: 100px; height: 100px; background: #fff; } グ グ グ https://codepen.io/aktuehr/pen/bGjLRMM
グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <div class="bg"> <div class="glass"> てきすとが入ります。 </div> </div>
<divclass="bg"> <div class="glass"> てきすとが入ります。 </div> </div> .bg { display: grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue, red); } .glass { width: 100px; height: 100px; background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9)); } .bg { display:grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue,red); } .glass { width: 100px; height: 100px; } background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255,255,0.9)); グ グ グ https://codepen.io/aktuehr/pen/bGjLRMM
グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <div class="bg"> <div class="glass"> てきすとが入ります。 </div> </div>
<div class="bg"> <div class="glass"> てきすとが入ります。 </div> </div> .bg { display: grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue, red); } .glass { width: 100px; height: 100px; background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9)); border: 1px solid #fff; } .bg { display: grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue, red); } .glass { width: 100px; height: 100px; background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9)); } border: 1px solid #fff; グ グ グ https://codepen.io/aktuehr/pen/bGjLRMM
グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <div class="bg"> <div class="glass"> てきすとが入ります。 </div> </div>
<div class="bg"> <div class="glass"> てきすとが入ります。 </div> </div> .bg { display: grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue, red); } .glass { width: 100px; height: 100px; background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9)); border: 1px solid #fff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); } .bg { display: grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue, red); } .glass { width: 100px; height: 100px; background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9)); } border: 1px solid #fff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); グ グ グ https://codepen.io/aktuehr/pen/bGjLRMM
グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <div class="bg"> <div class="glass"> てきすとが入ります。 </div> </div>
<div class="bg"> <div class="glass"> てきすとが入ります。 </div> </div> .bg { display: grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue, red); } .glass { width: 100px; height: 100px; background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7)); border: 1px solid #fff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .bg { display: grid; place-content: center; width: 200px; height: 200px; background: linear-gradient(to right, blue, red); } .glass { width: 100px; height: 100px; background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7)); border: 1px solid #fff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); } -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); グ ・す ・背 ・不 グ ・す ・背 ・不 グ ・す ・背 ・不 https://codepen.io/aktuehr/pen/bGjLRMM
グラスモーフィズムのまとめ ・すりガラスを背景に敷いたような見た目の印象を与えるデザイン手法 ・背景の世界観を壊さずに、ウィンドウやモーダルを表現できる ・不透明度・境界・ぼかしの要素を設定することで実装できる グラスモーフィズムのまとめ ・すりガラスを背景に敷いたような見た目の印象を与えるデザイン手法 ・背景の世界観を壊さずに、ウィンドウやモーダルを表現できる ・不透明度・境界・ぼかしの要素を設定することで実装できる グラスモーフィズムのまとめ ・すりガラスを背景に敷いたような見た目の印象を与えるデザイン手法
・背景の世界観を壊さずに、ウィンドウやモーダルを表現できる ・不透明度・境界・ぼかしの要素を設定することで実装できる 参 ▼ジ http →グ ▼U http →直 参 ▼ジ http →グ ▼U http →直 参 ▼ジ http →グ ▼U http →直
参考 ▼ジェネレータ https://hype4.academy/tools/glassmorphism-generator →グラスモーフィズムを好みにカスタマイズできます ▼UIから「白」が消える日 https://note.com/ritar/n/n0f6aad6c2560 →直接関係はないですが、「UIが脱色していく傾向にある」の記事 参考 ▼ジェネレータ https://hype4.academy/tools/glassmorphism-generator
→グラスモーフィズムを好みにカスタマイズできます ▼UIから「白」が消える日 https://note.com/ritar/n/n0f6aad6c2560 →直接関係はないですが、「UIが脱色していく傾向にある」の記事 参考 ▼ジェネレータ https://hype4.academy/tools/glassmorphism-generator →グラスモーフィズムを好みにカスタマイズできます ▼UIから「白」が消える日 https://note.com/ritar/n/n0f6aad6c2560 →直接関係はないですが、「UIが脱色していく傾向にある」の記事
Thanks! IE無き今、UIデザインの選択肢として 面白い表現なので使ってみてください! Thanks! IE無き今、UIデザインの選択肢として 面白い表現なので使ってみてください! Thanks! IE無き今、UIデザインの選択肢として 面白い表現なので使ってみてください!