デザイン調査

デザイン関連を調べておこうかな、と思ったのでAIに適当に聞いてみました。 Neumorphism と Glassmorphism は最近よく見るので、これをベースに変えていこうかなと思います。ちょっとばかしデザインが先行しすぎな気もしますが、、、

マテリアルデザインやロングシャドーデザインの時代から進化し、ここ2〜3年で新たに注目を集めたデザイントレンドがあります。この記事では、最近トレンドになったデザイン5つと、これから注目されそうなデザイン5つを海外事例を交えて紹介します。

✅ ここ2〜3年でトレンドになったデザイン#

1. Neumorphism（ニューモーフィズム）#

柔らかな影と光沢感で、UI要素が浮かび上がるように見えるデザイン。

参考リンク
- DribbbleのNeumorphismギャラリー
- ThemesbergのNeumorphism UIデモ

2. Glassmorphism（グラスモーフィズム）#

半透明の背景とぼかし効果で、ガラスのような質感を表現。

参考リンク
- DribbbleのGlassmorphismギャラリー
- WebflowのGlassmorphism事例

3. 3D UIデザイン#

Three.jsやBlenderを用いた立体的でインタラクティブなUI。

参考リンク
- Dribbbleの3D UIデザインギャラリー
- Awwwardsの3Dウェブサイト特集

4. ダークモード最適化デザイン#

単なる背景色反転ではなく、視認性・アクセシビリティを考慮したデザイン。

参考リンク
- Dark Mode Designギャラリー
- DribbbleのDark UIデザインギャラリー

5. Micro-interactions（マイクロインタラクション）#

ユーザーの操作に応じて細かく反応するアニメーション。

参考リンク
- Userpilotのマイクロインタラクション事例
- Awwwardsのマイクロインタラクション特集

🔮 トレンドになりそうなデザイン#

1. AI生成アートを活用したUI#

AIツールで生成したビジュアルをUIに活用する新潮流。

参考リンク
- Mediumの記事：AIツールでUIを生成
- YouTube動画：AIアートとChatGPTを使ったウェブデザイン

2. 拡張現実（AR）を取り入れたUI#

現実世界にデジタル情報を重ね合わせる体験型デザイン。

参考リンク
- DribbbleのAR UIデザインギャラリー
- SubframeのARウェブサイトデザイン事例

3. Skeuomorphism（スキューモーフィズム）の再解釈#

現実世界の質感を取り入れた、レトロとモダンの融合デザイン。

参考リンク
- MockplusのSkeuomorphism事例
- DribbbleのSkeuomorphismギャラリー

4. ソフトグラデーションとダイナミックカラー#

柔らかい色合いの変化や、動きに応じて変化するカラー。

参考リンク
- Onyx8のソフトグラデーション事例
- Webflowのソフトグラデーション事例

5. ミニマルで機能的なアニメーション#

シンプルなデザインに、UXを高めるアニメーションを追加。

参考リンク
- Vevのマイクロインタラクション事例
- Awwwardsのマイクロインタラクション特集

🧰 まとめ#

Neumorphism や Glassmorphism のような「質感系UI」が一度流行。
3D・ダークモード・マイクロインタラクションは既に多くのサービスで採用。
今後は AI生成ビジュアル・AR・再解釈されたスキューモーフィズム など、より没入感と個性を打ち出す方向へ進化。

インスピレーションを得たいときは以下のサイトがおすすめです。