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
190
グラスモーフィズムのススメ
グラスモーフィズムを構成するデザイン要素の説明と、コーディングの仕方の説明です。
Akito UEHARA
January 24, 2023
Tweet
Share
More Decks by Akito UEHARA
See All by Akito UEHARA
What is front end engineer?
aktuehr
0
130
10名超えのスクラムでフロントエンド開発する現場の声 / Develop Front-end in Scrum
aktuehr
4
1.2k
Other Decks in Design
See All in Design
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
380
The Fight
euralisw
0
110
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
110
231206_Book-launch-event_kato
hjmkth
2
1.1k
今日から始めるDesignOpsのヒント
isaikaori
1
410
Designship 2023|想いを可視化するデザインの力
weddingpark
0
240
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
実案件でのFigmaデータの作り方
xxxkinu
2
210
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
言語やロールの違いを超えて、一緒にデザインしていくための挑戦
hrtnde
0
1.3k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
WHAT ARE ME?
takuro_nakajima
PRO
0
1.2k
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Raft: Consensus for Rubyists
vanstee
131
6.2k
Git: the NoSQL Database
bkeepers
PRO
421
63k
Pencils Down: Stop Designing & Start Developing
hursman
116
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Automating Front-end Workflow
addyosmani
1354
200k
Typedesign – Prime Four
hannesfritz
36
2k
Docker and Python
trallard
33
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
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デザインの選択肢として 面白い表現なので使ってみてください!