ポートフォリオサイトを Glassmorphism の UI デザインにリニューアルしようかな❓

こんにちは、おおとろ（@digiangler）です。

Apple の macOS Big Sur で採用したりと少し前からまた注目された始めた　Glassmorphism（グラスモーフィズム）。

透明度が高い背景とぼかしを組み合わせて、半透明の擦りガラスを表現したような見栄えが、私は大好きです。なので、ポートフォリオのサイトを新たにリニューアルしようかと思っております。

Dribbble（ドリブル） という世界中のデザイナーが集うデザイナーのための SNS があるのですが、ここに投稿されている作品がどれもクオリティが高いので、参考にするにはもってこいです。

リンクを貼ったので、ご覧になってみてください。どの作品もクオリティが高いです。

Glassmorphism designs, themes, templates and downloadable graphic elements on Dribbble

自分の完成した作品を投稿することもできますし、フィードバックをもらうこともできますが、作品を公開するためには Player と呼ばれる、すでに Dribbblr 上で作品を公開しているデザイナーから招待されないといけないようです。作品を閲覧するだけなら無料で利用することができます。

お気に入りのデザイナーをフォローしたり、作品をお気に入りに保存して、自分の作品作成に役立てましょう。

ぼかし具合をトグルで不透明度を調整でき、そのままコピペ可能なコードをダウンロードできるオンラインサービスがあるようです。

Glassmorphism - simple CSS generator

背景画像を変更したり、CSS によるスタイリングをさらに細かく設定できたりできるオンラインサービスもあるようです。

Glass Morphism

Glassmorphism CSS Generator - Glass UI

間違いなく、CSS の設定がキモとなるので、いくつかサンプルを作成してみて UI / UX デザインをしたいと思います。

ちなみにヘッド画像のサンプルは Figma で作成してみました。

Figma: The Collaborative Interface Design Tool

今年から Figma を使い始めたので、スキルアップにもってこいです。

✓ ガラスに blur をかけて背景をぼかす
✓ 半透明のボーダーでガラスの厚みを表現する
✓ box-shadow で輪郭をはっきりさせ、浮遊しているように見せる
✓ 背景画像は、鮮やかでシェイプが多めのものを採用

※【Glassmorphism】ガラス風のエフェクトをCSSで実装する方法より引用

// 例

background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );

これらのポイントを押さえるだけで簡単に実装できるので、みなさんのポートフォリオサイトも Glassmorphism（グラスモーフィズム）にしてみてはどうでしょうか❓

最後まで、読んで頂きありがとうございました❗

読んだ証明として、1 日 1 回クリックをお願い致します m(_ _)m
👇
人気ブログランキング

それでは、また。

是非、感想をコメントや SNS でくださると嬉しいです。

Twitter: @digiangler
Instagram: @digi_angler

また、スキボタンを ”こっそり” 押したり、サポートしてくださるのも、とても嬉しいです。

"こっそり" Twitter からのリツイートでの感想もくださると嬉しいです。