Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Akito UEHARA Akito UEHARA
January 24, 2023

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

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

Avatar for Akito UEHARA

Akito UEHARA

January 24, 2023
Tweet

More Decks by Akito UEHARA

Other Decks in Design

Transcript

  1. グラスモーフィズム のススメ 2023/01/23 上原 晃人(淀川コナン) @Markup Meetup #3 online グラスモーフィズム

    のススメ 2023/01/23 上原 晃人(淀川コナン) @Markup Meetup #3 online グラスモーフィズム のススメ 2023/01/23上原晃人(淀川コナン) @MarkupMeetup#3online 自 自 自
  2. ド) グラスモーフィズム is 何? グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見

    を、馴染みのあるものにする)の流れを汲む1つ。 グラスモーフィズム is 何? グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見 を、馴染みのあるものにする)の流れを汲む1つ。 グラスモーフィズムis何? グラスモーフィズム:Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見 を、馴染みのあるものにする)の流れを汲む1つ。 グ グ グ
  3. ド) グラスモーフィズム is 何? グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見

    を、馴染みのあるものにする)の流れを汲む1つ。 グラスモーフィズム is 何? グラスモーフィズム : Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見 を、馴染みのあるものにする)の流れを汲む1つ。 グラスモーフィズムis何? グラスモーフィズム:Glassmorphism すりガラスを背景に敷いたような見た目の印象を与えます。 2020年末頃から見かけるようになったデザイン手法。 スキューモーフィズム(skeuomorphism:ユーザーに馴染みのないものの外見 を、馴染みのあるものにする)の流れを汲む1つ。 グ グ グ このように重ねたりすることで印象が変わったりします。 モーダルとしても利用できます。 このように重ねたりすることで印象が変わったりします。 モーダルとしても利用できます。 このように重ねたりすることで印象が変わったりします。 モーダルとしても利用できます。
  4. グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは:上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは:上から下に30〜50%のグラデーション グラスモーフィズムの気をつけること 不透明度 このテキストが乗っているものは:上から下に30〜50%のグラデーション グ

    境界 境界 ・St ・同 グ 境界 境界 ・St ・同 グ 境界 境界 ・St ・同 重ねる時は不透明度を高くしたほうが視認性高い このモーダルライクなものは、上から70%〜90%のグラデーション。 背景に何が来るかわからない場合は、無難に不透明度は高くしておいた方が良さそうです。 重ねる時は不透明度を高くしたほうが視認性高い このモーダルライクなものは、上から70%〜90%のグラデーション。 背景に何が来るかわからない場合は、無難に不透明度は高くしておいた方が良さそうです。 重ねる時は不透明度を高くしたほうが視認性高い このモーダルライクなものは、上から70%〜90%のグラデーション。 背景に何が来るかわからない場合は、無難に不透明度は高くしておいた方が良さそうです。
  5. グラスモーフィズムの気をつけること ぼかし すりガラス感を演出する一番大事な装飾 ・background blurを4pxくらいかける グラスモーフィズムの気をつけること ぼかし すりガラス感を演出する一番大事な装飾 ・background blurを4pxくらいかける

    グラスモーフィズムの気をつけること ぼかし すりガラス感を演出する一番大事な装飾 ・backgroundblurを4pxくらいかける グ 背景 境界 ドロ ぼか グ 背景 境界 ドロ ぼか グ 背景 境界 ドロ ぼか
  6. グラスモーフィズムをコーディングする 背景グラデーション: 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) グ グ グ
  7. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
  8. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
  9. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
  10. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
  11. グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする グラスモーフィズムをコーディングする <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
  12. 参考 ▼ジェネレータ 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が脱色していく傾向にある」の記事