Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
グラスモーフィズムのススメ
Akito UEHARA
January 24, 2023
Design
1
42
グラスモーフィズムのススメ
グラスモーフィズムを構成するデザイン要素の説明と、コーディングの仕方の説明です。
Akito UEHARA
January 24, 2023
Tweet
Share
More Decks by Akito UEHARA
See All by Akito UEHARA
What is front end engineer?
aktuehr
0
100
10名超えのスクラムでフロントエンド開発する現場の声 / Develop Front-end in Scrum
aktuehr
4
1k
Other Decks in Design
See All in Design
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
0
140
MIXI スポーツ領域とライフスタイル領域のデザイン
mixil
0
480
Best Practices For Designing Apps For India - Devfest Bangalore 2022
soham
0
290
A Walk in the Suburbs
sabina415
0
170
エムスリー×マネーフォワード 『社会を変えるサービスデザイン 』/m3design-digikar
yusuke109
1
2k
ユーザーインターフェイス設計の基礎を振り返る / Basics of User Interface Design
yuyaink
0
530
Grub
rottentwinkies
1
360
リサーチの前に詩を描く
hiranotomoki
0
560
Anatomy of Dynamic color
rockname
0
590
Tu fais du Web et tu ne connais pas les Layout Shifts ?! Nan mais...
goetter
2
190
モンストの組織とUIデザイナー業務の紹介
mixil
0
500
Finnegan Tester Pilot
joehealey
0
360
Featured
See All Featured
Infographics Made Easy
chrislema
235
17k
How STYLIGHT went responsive
nonsquared
89
4.2k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Six Lessons from altMBA
skipperchong
15
2.3k
Side Projects
sachag
451
37k
Three Pipe Problems
jasonvnalue
89
8.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.8k
Web development in the modern age
philhawksworth
197
9.6k
No one is an island. Learnings from fostering a developers community.
thoeni
12
1.5k
Making Projects Easy
brettharned
102
4.8k
Design by the Numbers
sachag
271
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
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デザインの選択肢として 面白い表現なので使ってみてください!