こんにちは。アークコミュニケーションズ Web&クロスメディア事業部です。
Webデザインのトレンドは刻一刻と変化しています。
そのトレンドを強力に牽引してきた存在が、Appleです。
iPhoneの登場以降、UIデザインのトレンドは大きく変化してきました。
この記事では、UIデザインの代表的な潮流である「スキューモーフィズム」「フラットデザイン」「ニューモーフィズム」「グラスモーフィズム」を軸に、Webデザインにも波及するトレンドの変遷を紹介します。
スキューモーフィズム...現実の質感を再現（2007年頃）
スマートフォン黎明期のUIデザインを代表するのがスキューモーフィズム（skeuomorphism）です。
これは、現実世界の素材感や形状をデジタル画面上で忠実に再現する手法です。
例としては
・光沢のある立体的なボタン
・革の手帳のようなカレンダー
・木製の本棚のような電子書籍アプリ
が挙げられます。
このスタイルは、iOS 6までのiPhoneに用いられていました。
当時はタッチ操作に不慣れなユーザーが多く、現実世界のメタファー（比喩）を使うことで直感的な操作を助けるという役割を担っていました。
フラットデザイン...装飾を削ぎ落としたミニマルUI（2013年頃）
2013年、iOS 7の登場によってUIデザインは大きく方向転換します。それがフラットデザインです。
立体感や質感を表現せず、鮮やかな色面とタイポグラフィで構成されるのが特徴で、現代のモダンなUIの基礎となりました。
この変化の背景には
・ユーザーのスマートフォン操作への慣れ
・レスポンシブデザインの普及
があります。
ニューモーフィズム...フラットと立体の中間（2019年ごろ）
フラットデザインの流行から数年を経て、2019年頃から注目を集めたのがニューモーフィズム（neumorphism）です。
これは
・フラットデザインのシンプルさ
・スキューモーフィズムの立体感
を掛け合わせたような表現です。
背景と要素を同系色でまとめ、柔らかい影で凹凸を表現するのが特徴です。
プラスチックを成形したような美しい質感で話題となりましたが、一方で「コントラストが低く、ボタンの境界が分かりにくい」というアクセシビリティ上の課題も指摘されました。
そのためOS全体に採用されることはありませんでしたが、先進的なアプリやWebサイトの一部でアクセントとして取り入れられています。
グラスモーフィズム...透明感のあるレイヤー表現（2020年～）
現在、Apple製品（macOS Big Sur以降やiOS 15以降）を中心に広く普及しているのがグラスモーフィズム（glassmorphism）です。
すりガラスのような透明感を持つUI表現で、以下の特徴があります。
・背景のぼかし
・パネルの重なりで画面内の階層関係を表現。
これは「Windows 11」やAppleの空間コンピュータ「Vision Pro」のvisionOSでも中核をなすデザインです。
Webサイトでも、ナビゲーションバーやカード要素をすりガラス風にすることで、奥行きと洗練された印象を与えるために多用されています。
揺り戻しながら進化するデザイン
デザインの歩みを振り返ると、
「リアル」→「抽象」→「半リアル」
と、振り子のように揺れながら新しいバランスを模索していることが分かります。
こうした変化は、デバイスの進化やユーザーの習熟といった「ユーザーの変化に応える」ものであり、同時に新しい操作体験を提示することで「ユーザーの変化をもたらす」ものでもあります。
近年では3D表現や空間UIなど、さらに新しいフェーズへと移行しつつあります。
Webサイト制作でも、単に見た目の流行を追うのではなく、「なぜ今このデザインが求められているのか」というユーザー体験（UX）の視点を持って、これからのデザインを考えていく必要がありそうです。
アークコミュニケーションズでは、トレンドをいち早く捉え、お客様のビジネスゴールに合わせて最適なご提案・開発をいたします。ぜひお気軽にご相談ください。
関連サービス
一緒に考えます。
最適なカタチ、見つけましょう。
お急ぎの案件などはお電話でも！
本サイト（www.arc-c.jp）は、快適にご利用いただくためにクッキー（Cookie）を使用しております。
Cookieの使用に同意いただける場合は「同意する」ボタンを押してください。
なお本サイトのCookie使用については、「プライバシーポリシー」をご覧ください。