Figmaを使った「グラスモーフィズム」デザインの作り方

みなさんこんにちは!
数年前から流行している「グラスモーフィズム」というデザインの技法をご存知ですか?

グラスモーフィズムとはすりガラスのような半透明な質感を表現するデザイン技法で、2021〜2022年頃に流行りました。
ですが今でもホームページのデザインなどでよく見かけますね。

というわけで今回はFigmaを使ってグラスモーフィズムを作っていきます!

1)背景を作成する

グラスモーフィズムの背景にはよくグラデーションが使われるのでお好みのグラデーションを作りましょう。

2)ガラス部分を作成する

背景の上にまず白い四角を作ります。
塗りでグラデを選択し、左上から右下にかけて半透明の白グラデを作ります。(左上40%・右下20%)

 

四角に線もつけ、そこにも半透明の白グラデをかけます。(左上60%・右下40%)
塗りよりも不透明度が少し濃いグラデがおすすめです。

 

エフェクトで背景にぼかしをつけます。(数値:80)

 

エフェクトでドロップシャドウをつけます。(ぼかし範囲の背景:40・色:#000000・不透明度:12%)
そして角丸にするとガラス部分の完成です!

3)背景に模様を置く

よりガラス感を出すため、背景にお好みの模様を置いてみましょう。
ガラスに重なった模様がぼやけていい感じですね!

4)テキストを置く

最後にガラスの上にテキストを置き、軽くドロップシャドウをかけて完成です!

まとめ

いかがでしたでしょうか。
簡単に凝って見えるデザインができ便利ですね。
ホームページのデザイン制作の際、ぜひ使ってみてください!
以上、Figmaを使った「グラスモーフィズム」デザインの作り方でした!

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。