リクルートや大手企業の実績多数！

ニジボックスのUIデザインフローや案件事例を

ご紹介！

無料で資料ダウンロード

WebやUIデザインのトレンドは、デバイスやユーザーのニーズの変化、新しい技術の開発などによって変化し続けています。ユーザーが求めるものを提供するためにも、トレンドを知っておくことが大切です。

今回は、2025年に注目すべきWebデザイン・UIデザインを紹介します。Webデザイン・UIデザインは、過去・現在に話題となったデザインを踏襲しつつ、新しいトレンドへと発展していきます。まずはこの記事を読んで現状のトレンドを押さえておきましょう。

ウェブアクセシビリティに配慮したデザイン

ウェブアクセシビリティとは、「Webにおいて、あらゆる人が情報や機能を同じように利用可能な状態」を指します。

Webデザインにおいても、アクセシビリティの重要性は増しています。

まず、誰もが利用しやすいWebデザインにすることで、より多くの利用者へのリーチが期待できるでしょう。さらに、アクセシビリティに配慮している企業として、ブランドの価値も上がることが期待できます。

2024年には、「改正障害者差別解消法」の施行により、行政機関だけではなく民間事業者にも障がいを持つ人への合理的な配慮が義務付けられるようになりました。今後は、サービス提供者の責務として、ウェブアクセシビリティに配慮したデザインにしていくことが求められます。

具体的には、読み上げソフトへの対応や、キーボードのみで操作できる設計などが挙げられます。他にも、高コントラストな色の使い方やナビゲーションシステムの活用、フォントの可視性を高めるなどに配慮しているWebサイトも多くあります。

ウェブアクセシビリティについてより詳細を知りたい方はこちらも参照してください。

ウェブアクセシビリティとは？【具体例と7つのポイントを解説】

https://blog.nijibox.jp/article/whats_accessibility

ウェブアクセシビリティの重要性から身近な改善の具体例、そして明日から実践できる7つのポイントまでを分かりやすく解説します。

2025年に注目すべきWeb・UIデザイン

2025年に話題となっている、以下6つのデザインの特徴をそれぞれ見ていきましょう。

• グラスモーフィズム
• ニューモーフィズム
• レトロデザイン
• ネオブルータリズム
• 3Dクレイモーフィズム
• 体験型3Dモデルを活かしたデザイン
• タイポグラフィを活かしたデザイン
• マイクロインタラクション
• スクロールテリング
• コンテンツボーダーの可視化

グラスモーフィズム

グラスモーフィズムは透明度とぼかしを調整することで、レイヤーをすりガラスのようにみせる手法です。グラスモーフィズムを利用したレイヤーを複数配置することで、オブジェクトに浮遊感を持たせ、透明感のある表現が可能になります。

グラスモーフィズムで表現すると、オブジェクトの階層表現を明確にできるため、ユーザーはより直感的に操作できるようになります。

ただし、グラスモーフィズムを多用すると、全体的にぼんやりとした印象になってしまうため、使用頻度を調整する・背景に濃い色を配置する・枠線と併用するなどの対策が必要です。

グラスモーフィズムを用いたサイトの例
株式会社ピュール｜PYURU

株式会社インクワイア

また、Appleでは2025年のWWDCでグラスモーフィズムを思わせるような「Liquid Glass」という新しいUIデザインを発表しました。

ニューモーフィズム

ニューモーフィズムは、従来のスキューモーフィズムを進化させたデザインです。スキューモーフィズムはリアルな質感と立体感を重視したもので、これらをシンプルにしたのがニューモーフィズムとなります。

ニューモーフィズムは、要素がベースから浮き出たりくぼんだりして見えるのが特徴です。明るい色のシャドウと暗い色のシャドウを組み合わせれば、控えめで洗練された印象を与えられます。

ただし、ニューモーフィズムは背景色と要素の差がはっきりしていないことから、UIデザインとしては優れていません。ニューモーフィズムを使用する際はUIに考慮して、シャドウのつけ方やカラーの選び方を工夫しましょう。

ニューモーフィズムは2020年ごろから注目されていますが、近年では、より実際のオブジェクトに近い質感の表現や、シンプルなデザインと立体感の掛け合わせなど、さらに進化したバージョンが登場しています。

ニューモーフィズムを用いたサイトの例
株式会社博報堂プロダクツ

株式会社ウィルオブワーク

株式会社アーバンリサーチ

レトロデザイン

ポップさのあるカラフルな色使いやレトロ感のあるイラストやフォントをふんだんに用いたレトロデザインがトレンドになっています。

過去の時代の考え方や美意識をデザインに取り入れることで、ノスタルジアな感情に訴えかけることができます。また、ポップさを押し出すことでブランドの個性を演出することもできるでしょう。

ただし、アクセシビリティに配慮しないと、利用しづらいサイトになってしまうこともあるので注意が必要です。また、煩雑な印象を与えてしまうデザインになるおそれもあります。

レトロデザインと現代的なデザインをうまく掛け合わせながら、個性的でインパクトのあるデザインにしていくことが重要です。

レトロデザインを用いたサイトの例
株式会社丸亀製麺

株式会社明電舎

グランドパレス弘前

ネオブルータリズム

ブルータリズムとは、1950年代に生まれた建築デザインスタイルで、構造や素材をそのまま見せるようなシンプルなデザインスタイルです。

Web上でも、無機質で硬派さを表現するシンプルなデザインはブルータリズムとして受け入れられてきました。2025年は、ブルータリズムが発展したネオブルータリズムを取り入れるWebデザインが増えています。

ネオブルータリズムの違いとしては、シンプルなデザインの中にも高彩度やビビットなカラーを使って、無骨さの中に親しみやすさや楽しさも追加したものであるということです。

ただし、極端な配色や視覚効果の多用をしてしまうと、可読性や視認性を損ねてしまう可能性もあります。そもそもはシンプルでインパクトがあるネオブルータリズムは、可読性や視認性に優れているデザインです。カラーの使い方やテキストの可読性に工夫をしながら、導入していきましょう。

ネオブルータリズムを用いたサイトの例
水曜日のカンパネラ

ボトルワークス株式会社｜CLEND

NII Recruite 2026

3Dクレイモーフィズム

3Dクレイモーフィズムは、粘土（クレイ）のような質感を持った3D表現を特徴とするデザインスタイルを指します。

クレイモーフィズムとニューモーフィズムは、リアルな質感や立体感を重要視しているという点では同様です。ただし、ニューモーフィズムは、浮き出たり沈んだりしながら、背景と一体化させるデザインスタイルであるという一方、クレイモーフィズムは、背景から浮かびあがり、丸みを帯びているデザインスタイルという違いがあります。

立体感と柔らかい配色で、ポップさを与えられる一方で、カジュアルすぎる印象を与えてしまうこともあります。Webサイト全体のテーマとの調和があるかの見極めや、色合いの選び方を工夫しながら導入していきましょう。

3Dクレイモーフィズムを用いたサイトの例
株式会社amber

株式会社ソニー・ミュージック・エンターテインメント

ブラザーグループ

体験型3Dモデルを生かしたデザイン

近年、3Dモデリング技術は進化し続けています。3Dを利用して立体感のあるデザインにするだけではなく、ユーザーが操作できる体験型を取り入れているWebサイトも増えています。

360°の操作や、色・パースなどの入れ替え、ARを利用したシミュレーションなど、3Dモデルを活用することで、実際の店舗にいるかのような体験を生み出せるのが大きなメリットです。

一方で、操作が難しかったり、実装したことでWebサイト全体が重くなったりすると、逆にUXに悪影響を及ぼしてしまうこともありえます。

使いやすさに配慮しながら、没入感を生み出せるように活用ができれば、体験型3DモデルはUX向上において大きな役割を果たしてくれるでしょう。

体験型3Dモデルを生かしたサイトの例
KOFFIRACHA

TBS

CHOONSIK’s DIARY

タイポグラフィを生かしたデザイン

タイポグラフィにこだわり、デザインの一つとして取り込んだものもトレンドの一つです。

文字にデザイン性を持たせることで、単なる文章の意味を超えて、よりメッセージや世界観を強く訴えかけることができるでしょう。また、タイポグラフィを動的なキネティックタイポグラフィにすることで、サイトの世界観に没入させることも可能です。

一方で、デザインの煩雑さを与えてしまう危険性もあります。また、メッセージがいくつも同じ画面にあると、メッセージを伝えるという意図に対して効果的でなくなることもあるでしょう。

感じて欲しいメッセージや世界観を一つに絞り、読みやすさも意識すれば、デザインの幅が広がり、より自由でオリジナリティのあるデザインにできるはずです。

タイポグラフィを生かしたサイトの例
ステラシード株式会社

BEAMS

ツルハドラッグ

マイクロインタラクション

サイト上で、ユーザーが操作したことに対しての反応としての、小さなアニメーションやフィードバックをマイクロインタラクションと呼びます。

ボタンをホバーで浮かせる、押した時に簡単なエフェクトが出る、スクロールの動きに独自性があるなど、小さなエフェクトがユーザーの体験をより気持ち良いものにしてくれます。

短く分かりやすい、それでいて遊び心のあるマイクロインタラクションは、ユーザーのUXを向上させ、ブランドのファンを生み出すことに役立つでしょう。

マイクロインタラクションを生かしたサイト例
株式会社newt | miruto

株式会社data-X | b→dash

スクロールテリング

スクロールテリングは、スクロールとストーリーテリングを組み合わせた言葉で、スクロールに合わせてアニメーションや画像を自動で表示するデザインです。サービスや製品の内容にストーリーを持たせ、ユーザーの興味をひき続けます。

スクロールテリングは、製品やサービスの世界観を表すのに効果的ですが、ストーリーがターゲット層に合っていないと魅力を発揮できません。ターゲットが求めるストーリーを考え、それに沿って文章や画像、アニメーションを配置する必要があります。

実際にどのようなストーリーにするかは、スクロールテリングを活用したサイトを参考にしながら考えるとよいでしょう。

スクロールテリングを用いたサイトの例
Apple Japan｜AirPods Pro

島根県美郷町 | みさとと

株式会社カオナビ

コンテンツボーダーの可視化

セクションやコンテンツのボーダーをあえて可視化するというデザイン手法です。

コンテンツや情報が整理されることで、デザイン全体がスッキリと見え、洗練された印象になります。また、UIの観点から見ても、ボーダーで分かりやすくすることはシンプルながらも効果的な向上施策と言えるでしょう。

ボーダーが多すぎたり、無秩序に引かれたりしていると、逆にユーザーを混乱させてしまう可能性もあります。ボーダーの引き方を工夫し、余白も効果的に使うことで、ブランド自体の信頼度もアップするようなデザインにできるでしょう。

コンテンツボーダーを生かしたサイト例
目白大学

浜岡鍍金工業所

JXL

過去に話題になったWeb・UIデザイン

WebデザインやUIデザインにはトレンドがあり、時がたつと新しいデザインが生まれ、トレンドも移り変わっていきます。

トレンドのデザインはユーザーの興味をひきやすいため、デザイナーもトレンドのデザインについ目を向けてしまうものです。しかし、トレンドが過ぎてしまったデザインにも魅力があり、その魅力を知っておくと、新しくデザインを考える際の参考になります。

今後の参考にするためにも、過去に話題になったWebデザインやUIデザインを振り返っていきましょう。

スキューモーフィズム

スキューモーフィズムは、ニューモーフィズムの元となったデザインです。既存のデザインに似せることで、操作性や視認性を上げることを目的としており、スマートフォンが普及した頃によく用いられました。

スキューモーフィズムでは、影や装飾によって立体感を生み出し、現実に存在するものを3Dに落とし込んだかのように表現します。

現実に似せようとすればするほどデザインは細かくなっていきますが、細かいデザインは全てのデバイスに受け入れられるわけではありません。あらゆるデバイスで視認性を確保するのは難しいため、スキューモーフィズムは次第にトレンドから外れていきました。

スキューモーフィズムを用いた例
iOSアプリのアイコン

フラットデザイン

フラットデザインは、スキューモーフィズムの衰退に併せてトレンドとなったデザインです。スキューモーフィズムとは対照的に、立体感や過度な装飾がなくなりました。

要素をシンプルにすることで、伝えたい情報を確実にユーザーへ伝えられるのが、フラットデザインのメリットです。スキューモーフィズムが苦手とした多様なデバイスへの対応も、シンプルなフラットデザインなら容易に行えます。

ただし、フラットデザインは全体的に平坦なデザインのため直感的な操作がしづらく、ユーザビリティ観点でのデメリットがありました。 結果的に、ユーザーが困惑する恐れがあるため、フラットデザインもトレンドから外れることになります。

フラットデザインを用いた例
Microsoft ModernUI

マテリアルデザイン

フラットデザインの次に台頭したのが、Googleが発表したマテリアルデザインです。マテリアルデザインは、フラットデザインになかったユーザビリティの実現を目的とし、ユーザーがより理解しやすいデザインとなっています。

マテリアルデザインについては、Googleがガイドラインを公表しているため、ガイドラインに沿ってサイトを作成すれば、デザイン性の高いサイトを作れるでしょう。

ただし、Googleのガイドラインに沿っただけでは、他のサイトとの差別化は図れません。他のサイトとの差別化をするため、マテリアルデザインのガイドラインをふまえた上で、新しいデザインを模索するようにトレンドは移り変わっていったのです。

マテリアルデザインのガイドライン
Google｜Material Design

2025年以降にトレンドとなりそうなデザインスタイル

最後に、今後トレンドとなりそうなデザインスタイルをご紹介します。

近年デザインに大きく与える影響として挙げられるのが、クリエイティブ生成ができるAIの進化です。そのAIを活用したデザインスタイルが今後、トレンドとなる可能性があるでしょう。

参考：adobe

非現実的なデザインで創造性を豊かにしていくファンタスティックフロンティアや、未来と過去の要素を融合させたタイムワープトレンドなどが具体的に挙げられる例です。AIを活用することで、非現実的な要素をデザインに取り入れられるのが特徴といえます。

他にも没入感をさらに深めた体験の提供など、AIやテクノロジーの進化によるデザインの変化からは今後も目を離せないトピックとなっていくでしょう。

まとめ

トレンドになっているデザインにはトレンドになるだけの理由があり、その理由を知ることは、より良いデザインの創作につながります。今回紹介したデザインは2025年に注目すべきものや、それ以前に話題となったものですが、これらのデザインを通して、新しいトレンドをつかんでいきましょう。

トレンドを知るためには情報収集を欠かさないことも大切です。日本国内だけでなく、海外でどのようなデザインが流行しているのかを把握し、取り入れられるものがないかを日頃から探しておきましょう。

ニジボックスでは、サイト制作や開発における情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面のご支援も行っております。
下記資料にて、人間中心設計の考え方をベースとしたUXリサーチ結果に基づいた、ニジボックスのユーザー課題解決型のUIデザインフローや、支援事例を一部紹介しています。

ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください！