【SwiftUI】グラスモーフィズムを試してみました
🤔 グラスモーフィズムって？
すりガラスの表現を利用した半透明の表現方法でガラスの向こう側がすりガラスによって曇って見える表現が特徴です。iosでは今更ですが、MacOSのBig Surに利用されていることから、2021年のデザインのトレンドとして挙がっています。
🤔 では、どのような画面表現があるのか？
・Dribbbleでは？
・Pinterestでは？
Pinteresetで検索すると、Osamu Furukawaさんのボードに掲載がございます。以下にリンクを掲載します。
🤔 どんな表現が可能なのか？
以下のスズキアユミさんのサイトがまとまってますので、リンクとして掲載します。
🤔 SwiftUIで表示できるの？
試した結果、SwiftUIのみでは表現が難しそうです。Blurの表現ありますが、ただのViewにくもりガラス風の表現をするのは難しく、UIViewRepresentableで拡張したUIVisualEffectViewというパーツが必要になるようです。
ここまでで、やったこととして、Figmaで以下のように簡単なデザインしました。
figmaのプラグインで、SwiftUIインスペクターを利用してSwiftUIのコードを出力してiPhone画面に表示してみました。以下のようになります。オレンジの四角形と黄色い三角形部分が上にのっているViewで薄く表示されてますが、くもりガラス風な表現になってはいません。
UIVisualEffectViewを利用すると以下のような表現になります。オレンジの四角形と黄色い三角形部分が上にのっているViewがくもりガラスのようになりました。
くもりガラスのくもり具合については、Figmaの表現とiOSのくもり具合の表現の違いがあるので上記の差分が出ました。アプリを作る際は、注意点としてデザイナーの方の利用するツールとの表現に調整が必要そうだと感じました。
