伊藤  直子

伊藤 直子

1649989860

Glassmorphismとは?Figmaでガラスカードを作成する

Glassmorphismは、ユーザーインターフェイスデザインの成長傾向です。それはあなたのデザインをモダンでエレガントに見せます。

‌‌‌‌この記事では、ガラス形態の意味、アクセスのしやすさ、シンプルなガラスカードのデザイン方法について学びます。‌‌

Glassmorphismとは何ですか?

Glassmorphismは、その名前が示すように、ガラスの特性を使用してデザインを強化するスタイルです。それはその要素に半透明または透明なルックアンドフィールを与えます。

Glassmorphicの要素と形状は、ガラスの効果を強調する鮮やかでカラフルな背景に非常に適しています。Glassmorphismは、デザインに視覚的な階層を追加し、強調したいコンテンツに焦点を当てるのに役立ちます。

‌‌Glassmorphismのアクセシビリティ

ガラスのデザインは、視力に問題のある人のためにデザインする場合には最適ではありません。スクリーンリーダーやその他のデバイスがデザインを適切に解釈できるように、色やフォントを選択する際には十分に注意する必要があります。

‌‌また、ガラス形態を使用すると、サイトの速度が低下し、バッテリーの使用量が増える可能性があります。

ただし、これらの問題を回避できる場合は、ガラスのデザインは非常にクールに見えます。そのため、ここでそれらの作成方法を学習します。

ガラスデザインのアクセシビリティを向上させるためのヒントを次に示します。

  1. 透明度またはぼかし効果を控えめ/適度に使用します。使いすぎないでください。デザインの2つまたは3つの要素にのみ使用すると、効果が最もよく見えます。
  2. 明確な階層感を確立します。デザインレイアウトのカード間の適切な間隔と適切な要素を目立たせることは、アクセシビリティの問題に役立ちます。強力な視覚的階層は、ユーザーに適切な視覚的手がかりを与えるのに役立つことを忘れないでください。
  3. 適切な背景を設定します。背景がくすんだりくすんだりしていないことを確認してください。背景として鮮やかな色を使用すると、効果を強調するのに役立ちます。もちろん、これは非常に審美的に心地よい外観も実現します。
  4. より大きなフォントを使用すると、ガラスのデザインにアクセスしやすくなります。また、ガラスの背景と対照的なフォントを選択してください。

Glassmorphicの設計例

Glassmorphicデザインがどのように見えるかをよりよく理解するために、この手法を適用するWebサイトの例をいくつか示します。

2022-04-01--19--1

SahidAldiSusiloによるGlassmorphicWebサイト

GlassmorphismWebUIデザイン

<p><strong>製品の説明</strong></ p> <p>&nbsp; </ p> <p>これは、コースまたは学習アプリケーションのオンボーディングです。AdobeXDで作成しました。私もフィグマを使うことができました。<strong>個人使用</strong>用にダウンロードできます。<strong>ビジネスで使用したい場合、または別の画面パーツが必要な場合</ strong>、よろしくお願いします…

アップル-アイコン-152x152UpLabs

プレビュー

2022-04-01--20--1

ステファン・ブラウンによるガラスの形のデザイン‌

このデザインはここで見ることができます。

2022-04-01--22--1

PratheekPurohitによるガラスカード

このデザインはここで見ることができます。

最後の例に似たものをどのように再現できるか見てみましょう。

Figmaでガラスカードを作成する方法

ガラスカードは、ガラスモルフィズムを使用して作成されたカードです。カードは、クレジットカード、プロファイルカード、請求書カードなどの画像である可能性があります。

以下の手順に従って、Figmaでガラス製のクレジットカードを作成します。

ステップ1-カラフルな背景を設定する

ガラスのデザインを際立たせ、目立たせるために、カラフルな背景が不可欠です。以下で行ったように、 uiGradientsプラグインを使用して、選択したグラデーションを選択できます。

2022-04-01-1

ステップ2–図形を描く

2022-04-01--1--1

ここでは、長方形のように見える実際のクレジットカードの形状を模倣します。

640×400の寸法で長方形を描き、角の半径を40ptに設定します。

ステップ3–グラデーションを使用して塗りつぶしを適用する

次に、白のような半透明の色で図形を塗りつぶす必要があります。グラデーションの両方の色は白である必要がありますが、異なる不透明度レベルに設定する必要があります。

2022-04-01--2--1

2022-04-01--3--2

ステップ4–背景ブラーを適用する

ぼかしの値を40に設定するか、見たいぼかしの程度に応じて任意の値を設定します。

2022-04-01--4--1

2022-04-01--5--1

‌‌ステップ5 –ストロークを追加して境界線を作成する

境界線を追加すると、カードがより洗練されたエレガントな外観になります。太くて識別しやすい境界線を通して、よりシャープなコントラストを得るのに役立ちます。

2022-04-01--6--1

‌ステップ6 –ドロップシャドウを適用する

ドロップシャドウ効果を使用すると、視覚的な階層を強化するのに役立ちます。

ぼかし値を24に設定し、広がりを-1に設定します。

2022-04-01--7--1

‌ステップ7 –コンテンツを追加する

これで、テキストやロゴなどのコンテンツをカードに追加できます。私がVisaロゴとEMVチップを取得するために行ったようにIconifyプラグインを使用すると、時間を大幅に節約できます。

コンテンツを白で塗りつぶし、不透明度を下げて、レイヤーの描画モードをオーバーレイに設定します。

2022-04-01--12-

霜の効果はあなたのデザインに磨きを加えます。この効果を適用するには、ノイズプラグインを使用して画像をノイズで埋めるだけです。

プラグインがすでにインストールされている場合は、プラグインに直接移動して、ノイズをクリックします。そうでない場合は、https://www.figma.com/community/pluginsにアクセスしてプラグインをインストールしてください。

プラグインをインストールして選択したら、レイヤーの描画モードをオーバーレイに設定し、不透明度を下げます。

2022-04-01--13--1

ノイズプラグインを適用すると、カードは次のようになります。

2022-04-01--14--1

次に、ブレンディングモードをオーバーレイに変更します。

2022-04-01--15--1

カードの不透明度を下げます。好みに合うまで不透明度を試してみてください。

キーボードの任意の数字をクリックすると、不透明度を下げることができます。2は20%、3は30%、4は40%などです。

2022-04-01--17--4

そして、あなたはそれを持っています–美しくてガラスのように見えるカード。

結論

グラスモーフィックな効果をデザインに追加するのはとても簡単です。ガラスの形態の傾向がより一般的になるにつれて、ガラスのデザインを作成する方法を知ることは、将来本当に役立つかもしれません。

出典:https ://www.freecodecamp.org/news/glassmorphism-how-to-create-a-glass-card-in-figma/

#figma 

What is GEEK

Buddha Community

Glassmorphismとは?Figmaでガラスカードを作成する
伊藤  直子

伊藤 直子

1649989860

Glassmorphismとは?Figmaでガラスカードを作成する

Glassmorphismは、ユーザーインターフェイスデザインの成長傾向です。それはあなたのデザインをモダンでエレガントに見せます。

‌‌‌‌この記事では、ガラス形態の意味、アクセスのしやすさ、シンプルなガラスカードのデザイン方法について学びます。‌‌

Glassmorphismとは何ですか?

Glassmorphismは、その名前が示すように、ガラスの特性を使用してデザインを強化するスタイルです。それはその要素に半透明または透明なルックアンドフィールを与えます。

Glassmorphicの要素と形状は、ガラスの効果を強調する鮮やかでカラフルな背景に非常に適しています。Glassmorphismは、デザインに視覚的な階層を追加し、強調したいコンテンツに焦点を当てるのに役立ちます。

‌‌Glassmorphismのアクセシビリティ

ガラスのデザインは、視力に問題のある人のためにデザインする場合には最適ではありません。スクリーンリーダーやその他のデバイスがデザインを適切に解釈できるように、色やフォントを選択する際には十分に注意する必要があります。

‌‌また、ガラス形態を使用すると、サイトの速度が低下し、バッテリーの使用量が増える可能性があります。

ただし、これらの問題を回避できる場合は、ガラスのデザインは非常にクールに見えます。そのため、ここでそれらの作成方法を学習します。

ガラスデザインのアクセシビリティを向上させるためのヒントを次に示します。

  1. 透明度またはぼかし効果を控えめ/適度に使用します。使いすぎないでください。デザインの2つまたは3つの要素にのみ使用すると、効果が最もよく見えます。
  2. 明確な階層感を確立します。デザインレイアウトのカード間の適切な間隔と適切な要素を目立たせることは、アクセシビリティの問題に役立ちます。強力な視覚的階層は、ユーザーに適切な視覚的手がかりを与えるのに役立つことを忘れないでください。
  3. 適切な背景を設定します。背景がくすんだりくすんだりしていないことを確認してください。背景として鮮やかな色を使用すると、効果を強調するのに役立ちます。もちろん、これは非常に審美的に心地よい外観も実現します。
  4. より大きなフォントを使用すると、ガラスのデザインにアクセスしやすくなります。また、ガラスの背景と対照的なフォントを選択してください。

Glassmorphicの設計例

Glassmorphicデザインがどのように見えるかをよりよく理解するために、この手法を適用するWebサイトの例をいくつか示します。

2022-04-01--19--1

SahidAldiSusiloによるGlassmorphicWebサイト

GlassmorphismWebUIデザイン

<p><strong>製品の説明</strong></ p> <p>&nbsp; </ p> <p>これは、コースまたは学習アプリケーションのオンボーディングです。AdobeXDで作成しました。私もフィグマを使うことができました。<strong>個人使用</strong>用にダウンロードできます。<strong>ビジネスで使用したい場合、または別の画面パーツが必要な場合</ strong>、よろしくお願いします…

アップル-アイコン-152x152UpLabs

プレビュー

2022-04-01--20--1

ステファン・ブラウンによるガラスの形のデザイン‌

このデザインはここで見ることができます。

2022-04-01--22--1

PratheekPurohitによるガラスカード

このデザインはここで見ることができます。

最後の例に似たものをどのように再現できるか見てみましょう。

Figmaでガラスカードを作成する方法

ガラスカードは、ガラスモルフィズムを使用して作成されたカードです。カードは、クレジットカード、プロファイルカード、請求書カードなどの画像である可能性があります。

以下の手順に従って、Figmaでガラス製のクレジットカードを作成します。

ステップ1-カラフルな背景を設定する

ガラスのデザインを際立たせ、目立たせるために、カラフルな背景が不可欠です。以下で行ったように、 uiGradientsプラグインを使用して、選択したグラデーションを選択できます。

2022-04-01-1

ステップ2–図形を描く

2022-04-01--1--1

ここでは、長方形のように見える実際のクレジットカードの形状を模倣します。

640×400の寸法で長方形を描き、角の半径を40ptに設定します。

ステップ3–グラデーションを使用して塗りつぶしを適用する

次に、白のような半透明の色で図形を塗りつぶす必要があります。グラデーションの両方の色は白である必要がありますが、異なる不透明度レベルに設定する必要があります。

2022-04-01--2--1

2022-04-01--3--2

ステップ4–背景ブラーを適用する

ぼかしの値を40に設定するか、見たいぼかしの程度に応じて任意の値を設定します。

2022-04-01--4--1

2022-04-01--5--1

‌‌ステップ5 –ストロークを追加して境界線を作成する

境界線を追加すると、カードがより洗練されたエレガントな外観になります。太くて識別しやすい境界線を通して、よりシャープなコントラストを得るのに役立ちます。

2022-04-01--6--1

‌ステップ6 –ドロップシャドウを適用する

ドロップシャドウ効果を使用すると、視覚的な階層を強化するのに役立ちます。

ぼかし値を24に設定し、広がりを-1に設定します。

2022-04-01--7--1

‌ステップ7 –コンテンツを追加する

これで、テキストやロゴなどのコンテンツをカードに追加できます。私がVisaロゴとEMVチップを取得するために行ったようにIconifyプラグインを使用すると、時間を大幅に節約できます。

コンテンツを白で塗りつぶし、不透明度を下げて、レイヤーの描画モードをオーバーレイに設定します。

2022-04-01--12-

霜の効果はあなたのデザインに磨きを加えます。この効果を適用するには、ノイズプラグインを使用して画像をノイズで埋めるだけです。

プラグインがすでにインストールされている場合は、プラグインに直接移動して、ノイズをクリックします。そうでない場合は、https://www.figma.com/community/pluginsにアクセスしてプラグインをインストールしてください。

プラグインをインストールして選択したら、レイヤーの描画モードをオーバーレイに設定し、不透明度を下げます。

2022-04-01--13--1

ノイズプラグインを適用すると、カードは次のようになります。

2022-04-01--14--1

次に、ブレンディングモードをオーバーレイに変更します。

2022-04-01--15--1

カードの不透明度を下げます。好みに合うまで不透明度を試してみてください。

キーボードの任意の数字をクリックすると、不透明度を下げることができます。2は20%、3は30%、4は40%などです。

2022-04-01--17--4

そして、あなたはそれを持っています–美しくてガラスのように見えるカード。

結論

グラスモーフィックな効果をデザインに追加するのはとても簡単です。ガラスの形態の傾向がより一般的になるにつれて、ガラスのデザインを作成する方法を知ることは、将来本当に役立つかもしれません。

出典:https ://www.freecodecamp.org/news/glassmorphism-how-to-create-a-glass-card-in-figma/

#figma