グラスモーフィズムのススメ

グラスモーフィズムを構成するデザイン要素の説明と、コーディングの仕方の説明です。

Transcript

1. グラスモーフィズム のススメ 2023/01/23 上原 晃人(淀川コナン) @Markup Meetup #3 online グラスモーフィズム のススメ 2023/01/23 上原 晃人(淀川コナン) @Markup Meetup #3 online グラスモーフィズム のススメ 2023/01/23上原晃人(淀川コナン) @MarkupMeetup#3online 自 自 自
2. 自己紹介 自己紹介 自己紹介 上原晃人(淀川コナン) デザインエンジニア（Webフロントエンド） @株式会社ゆめみ UIデザイナー @株式会社ジェイタマズ（業務委託） WACA公認上級ウェブ解析士 aktuehr グ グラ すり 202 スキ を、 グ グラ すり 202 スキ を、 グ グラ すり 202 スキ を、
3. ド） グラスモーフィズム is 何？ グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム（skeuomorphism：ユーザーに馴染みのないものの外見 を、馴染みのあるものにする）の流れを汲む1つ。 グラスモーフィズム is 何？ グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム（skeuomorphism：ユーザーに馴染みのないものの外見 を、馴染みのあるものにする）の流れを汲む1つ。 グラスモーフィズムis何？ グラスモーフィズム:Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム（skeuomorphism：ユーザーに馴染みのないものの外見 を、馴染みのあるものにする）の流れを汲む1つ。 グ グ グ
4. ド） グラスモーフィズム is 何？ グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム（skeuomorphism：ユーザーに馴染みのないものの外見 を、馴染みのあるものにする）の流れを汲む1つ。 グラスモーフィズム is 何？ グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム（skeuomorphism：ユーザーに馴染みのないものの外見 を、馴染みのあるものにする）の流れを汲む1つ。 グラスモーフィズムis何？ グラスモーフィズム:Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム（skeuomorphism：ユーザーに馴染みのないものの外見 を、馴染みのあるものにする）の流れを汲む1つ。 グ グ グ このように重ねたりすることで印象が変わったりします。 モーダルとしても利用できます。 このように重ねたりすることで印象が変わったりします。 モーダルとしても利用できます。 このように重ねたりすることで印象が変わったりします。 モーダルとしても利用できます。
5. 外見 外見 外見 グラスモーフィズム is 何？ グラスモーフィズム is 何？ グラスモーフィズムis何？ グ グ グ
6. グラスモーフィズムを使ってみた 副業で関わったチャットデザイン グラスモーフィズムを使ってみた 副業で関わったチャットデザイン グラスモーフィズムを使ってみた 副業で関わったチャットデザイン グ •色 •チ 　　 埋め グ •色 •チ 　　 埋め グ •色 •チ 埋め
7. グラスモーフィズムを使ってみた •色んなWebサイトに埋め込まれる •チャットのカラースキームのカスタマイズができない 　　　　　　　　　　　　↓ 埋め込まれるサイトの世界観を壊さずに使いやすいUIを実現したい グラスモーフィズムを使ってみた •色んなWebサイトに埋め込まれる •チャットのカラースキームのカスタマイズができない 　　　　　　　　　　　　↓ 埋め込まれるサイトの世界観を壊さずに使いやすいUIを実現したい グラスモーフィズムを使ってみた •色んなWebサイトに埋め込まれる •チャットのカラースキームのカスタマイズができない ↓ 埋め込まれるサイトの世界観を壊さずに使いやすいUIを実現したい グ 不透 この グ 不透 この グ 不透 この
8. グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは：上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは：上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは：上から下に30〜50%のグラデーション グ 境界 境界 ・St ・同 グ 境界 境界 ・St ・同 グ 境界 境界 ・St ・同
9. グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは：上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは：上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは：上から下に30〜50%のグラデーション グ 境界 境界 ・St ・同 グ 境界 境界 ・St ・同 グ 境界 境界 ・St ・同 重ねる時は不透明度を高くしたほうが視認性高い このモーダルライクなものは、上から70%〜90%のグラデーション。 背景に何が来るかわからない場合は、無難に不透明度は高くしておいた方が良さそうです。 重ねる時は不透明度を高くしたほうが視認性高い このモーダルライクなものは、上から70%〜90%のグラデーション。 背景に何が来るかわからない場合は、無難に不透明度は高くしておいた方が良さそうです。 重ねる時は不透明度を高くしたほうが視認性高い このモーダルライクなものは、上から70%〜90%のグラデーション。 背景に何が来るかわからない場合は、無難に不透明度は高くしておいた方が良さそうです。
10. グラスモーフィズムの気をつけること 境界 境界を明確にするための装飾 ・Stroke（境界線）として1pxで背景と同色の不透明の線を設定する ・同系色が背景に来る場合に背景の反対色のドロップシャドウ グラスモーフィズムの気をつけること 境界 境界を明確にするための装飾 ・Stroke（境界線）として1pxで背景と同色の不透明の線を設定する ・同系色が背景に来る場合に背景の反対色のドロップシャドウ グラスモーフィズムの気をつけること 境界 境界を明確にするための装飾 ・Stroke（境界線）として1pxで背景と同色の不透明の線を設定する ・同系色が背景に来る場合に背景の反対色のドロップシャドウ グ ぼか すり ・ba グ ぼか すり ・ba グ ぼか すり ・ba
11. グラスモーフィズムの気をつけること ぼかし すりガラス感を演出する一番大事な装飾 ・background blurを4pxくらいかける グラスモーフィズムの気をつけること ぼかし すりガラス感を演出する一番大事な装飾 ・background blurを4pxくらいかける グラスモーフィズムの気をつけること ぼかし すりガラス感を演出する一番大事な装飾 ・backgroundblurを4pxくらいかける グ 背景 境界 ドロ ぼか グ 背景 境界 ドロ ぼか グ 背景 境界 ドロ ぼか
12. グラスモーフィズムをコーディングする 背景グラデーション： 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) グ グ グ
13. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
14. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
15. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
16. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
17. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
18. グラスモーフィズムのまとめ ・すりガラスを背景に敷いたような見た目の印象を与えるデザイン手法 ・背景の世界観を壊さずに、ウィンドウやモーダルを表現できる ・不透明度・境界・ぼかしの要素を設定することで実装できる グラスモーフィズムのまとめ ・すりガラスを背景に敷いたような見た目の印象を与えるデザイン手法 ・背景の世界観を壊さずに、ウィンドウやモーダルを表現できる ・不透明度・境界・ぼかしの要素を設定することで実装できる グラスモーフィズムのまとめ ・すりガラスを背景に敷いたような見た目の印象を与えるデザイン手法 ・背景の世界観を壊さずに、ウィンドウやモーダルを表現できる ・不透明度・境界・ぼかしの要素を設定することで実装できる 参 ▼ジ http →グ ▼U http →直 参 ▼ジ http →グ ▼U http →直 参 ▼ジ http →グ ▼U http →直
19. 参考 ▼ジェネレータ 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が脱色していく傾向にある」の記事
20. Thanks! IE無き今、UIデザインの選択肢として 面白い表現なので使ってみてください！ Thanks! IE無き今、UIデザインの選択肢として 面白い表現なので使ってみてください！ Thanks! IE無き今、UIデザインの選択肢として 面白い表現なので使ってみてください！