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
260
グラスモーフィズムのススメ
グラスモーフィズムを構成するデザイン要素の説明と、コーディングの仕方の説明です。
Akito UEHARA
January 24, 2023
Tweet
Share
More Decks by Akito UEHARA
See All by Akito UEHARA
What is front end engineer?
aktuehr
0
160
10名超えのスクラムでフロントエンド開発する現場の声 / Develop Front-end in Scrum
aktuehr
4
1.2k
Other Decks in Design
See All in Design
Masked shaman-Storyboard 2025
ashley0521
0
160
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
横断組織デザイナーの働き方
mixi_design
PRO
0
330
マンガで分かるサービスデザインガイドライン
senryakuka
1
550
portfolio2025_kanakoohata
kanako106
0
660
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
280
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
190
Museum Heist
allykae
0
120
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Optimizing for Happiness
mojombo
376
70k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Navigating Team Friction
lara
183
15k
Producing Creativity
orderedlist
PRO
343
39k
Facilitating Awesome Meetings
lara
51
6.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Into the Great Unknown - MozCon
thekraken
35
1.6k
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デザインの選択肢として 面白い表現なので使ってみてください!