UIの進化 – あっぴゃのひみつきち

みなさま、こんにちは。
今週のブログは小松がお届けします。

先日部屋を整理していたところ、昔使っていたiPodを発見しました。
久しぶりに電源を入れてみると、当時の画面のデザインが今と少し異なり、アイコンがやけに立体的になっていたりしてUIの進化を感じました。

そこで今回は、UIデザインにおける表現の歴史をデザインの流れとあわせて振り返ってみたいと思います。

① スキューモーフィズム（1990年代後半〜2010年代前半）

現実にある物の質感（革・金属・ガラスなど）を忠実に再現したスタイルで、
デジタル機器がまだ珍しかった頃、「これはボタンですよ」「触れますよ」と直感的に伝えるために、物理的な見た目をそのまま取り入れていました。

影は立体感や素材感を強調するために使われ、画面の中の要素を“物”として認識させる役割を担っていました。

代表的なデバイスは、iOS 6以前のiPhoneやiPodで、小松が昔使っていたipodがこれです。

② フラットデザイン（2010年代前半〜中盤）

スマートフォンが普及し、多くの人が操作に慣れてきたことで、過剰な装飾を削ぎ落としたフラットデザインが登場しました。

影や光沢をほとんど使わず、鮮やかな色とシンプルな図形だけで構成され、画面全体がすっきりとした印象になります。

Windows 8のメニューに並んだ、カラフルなタイル状のUIが代表的な例です。

③ マテリアルデザイン（2014年頃〜）

「画面の中に“高さ”を再導入した時代」です。

フラットデザインは見た目がすっきりする一方で、
「どこがボタンかわかりにくい」という課題も生まれました。

それを解決するためにGoogleが提唱したのが、マテリアルデザインです。
机の上に置いた紙のように、「高く浮いているものほど影が大きく、薄く広がる」という現実世界のルールをUIに取り入れました。

これにより、どの要素が手前にあり、どこを押せばよいのかが視覚的に分かりやすくなりました。

GoogleマップやGmailなどのアプリが代表的です。

④ ニューモフィズム（2019年頃〜一時的流行）

背景から盛り上がる、不思議な心地よさのあるデザインです。
背景とボタンが一体化したように見え、影というよりも「光の当たり方」で凹凸を表現します。

とても柔らかく、触り心地の良さを感じさせる一方で、
文字やボタンが見えにくくなることもあり、実用面では課題もありました。

⑤ グラスモーフィズム（2020年頃〜現在）

現在のトレンドは、すりガラスのような半透明パネルを重ねるスタイルです。
背景のぼかしに、白い繊細な輪郭線と非常に薄い影を組み合わせることで、ガラスの質感を表現しています。

影はガラスの「縁（ふち）」を際立たせ、どのパネルが手前にあるのかを整理する補助的な役割を担っています。

Windows 11やmacOSの最新版など、身近なOSにも広く取り入れられています。

いかがだったでしょうか。
こうして振り返ると、UIにおける影の役割は、時代とともに大きく変化してきたことがわかります。

次にスマートフォンを操作するとき、アイコンやボタンの下にある小さな変化に、少し注目してみてください。
そこには、デザイナーたちが試行錯誤してきた、長年の歴史が詰まっているかもしれません。

それでは次回のブログでまたお会いしましょうー！