ざっくりUIデザインの歴史をたどってみる
こんにちは。SOMPO Digital Labで駆け出しUIデザイナーをしているrine(https://twitter.com/HAYASHIRINE)と言います🤲 この間Spotifyのpodcastで聞いたreseize.fmで、UIデザインの歴史について詳しく言及されておりとても興味深かったので、お話されていたことを参考にしながらUIデザインの歴史をざっくり辿ってみることにしました。
🙆♀️ とりあえず抑えておくべきキーパーソン
アラン・ケイ (Alan Curtis Kay)
GUI(グラフィカルインタフェース)開発の主な先導者は、アラン・ケイそしてマウスを開発したダグラス・エンゲルバードと言われています。
彼の考案したデスクトップPC「Alto」、そして「Smalltalk」と呼ばれるオブジェクト指向プログラミング言語(現在でいうOSに相当)は、Appleの初期型PC『Lisa』『Macintosh』にも大きな影響を与えました。(ここらへんの開発の話はスティーブ・ジョブズの映画でも描かれてました)
1984年〜はAppleのフェローを務め、初期のHIG(Human Interface Guidelines)にも影響を与えています。
ドン・ノーマン (Don Norman)
ノーマンは『誰のためのデザイン?』という著作が最も有名で、デザイナーの必読書として各所で紹介されています。この本の中では、認知心理学の観点からわかりやすいデザインとは何かを問うており、人間中心設計(HCD)という考え方が提唱されています。(以前要旨を簡単にまとめた記事を書いたのでよければご覧ください!)
ノーマンの人間中心設計の考え方は『ヤコブ・ニールセンの「ユーザビリティヒューリスティックス10原則」』にも引き継がれています。(ニールセンはノーマンと共同でUXコンサルティング企業、Nielsen Norman Groupを創設した人物です)
アラン・ケイと同じくノーマンも1993年〜Appleのフェローになっています。
ちなみに、ノーマンは最近はHCDの定義について「人間中心設計(Human-centerd Design)」から 「人類中心設計(Humanity-centered Design)」に移行したという考えを持っているようです。2023年に出ると言われている新書で、詳しい内容が触れられるかもしれません。
アラン・クーパー (Alan Cooper)
アラン・クーパーはGUIプログラミング黎明期のプログラマーです。今では日常的にフレームワークとして使われている「ペルソナ」ですが、このペルソナの活用方法は、クーパーがマイクロソフト社でVisual BASIC(プログラミング言語)を開発している際に生み出されたと言われています。
『About Face』では「思慮深いデザインの特徴」として、立ち返るべきポイントをわかりやすく提示してくれています。(タトゥーにして掘りたい)
またこの本の中では、デザインのディテールを詰める際に注意すべき点を示すとともに、「ペルソナが最終的に達成したい行動原理になる『ゴール』はどこなのか考えるのが大事やで」という「ゴールダイレクテッドデザイン」というインタラクションデザインの方法についても提唱されています。(この著作についてもトークされているresize.fmの回があり非常に参考になります!↓)
🙆♀️ インターフェースのトレンド
続いて、インターフェースのトレンドの移り変わりをゆるく追っていきます。
スキューモーフィズム (Skeuomorphism)
タッチデバイスが世の中に普及してきた当初によくみられたデザインで、iOS6まではスキューモーフィズムがメインで用いられていました。
現実にあるもののメタファーをそのままディスプレイに持ち込むことで、まだタッチデバイスに慣れていないユーザーに直感的に使い方をイメージさせるためのデザインです。
初めてのマイiPhoneは確かにアイコンもだいたいスキューモーフィズムで作られていたな…。
スキューモーフィズム全然関係ない小ネタですが、iPhone持ち始めた頃は「ラップムシ」っていうアプリがめちゃくちゃ流行ってた記憶あります。
フラットデザイン (Flat Design)
2010年代に入ると、スキューモーフィズムからフラットデザインに流行が移り変わっていきます。Appleでは、iOS7以降フラットデザインに大きく移行しました。Windowsでは、Windows8以降に取り入れられたMetro UI(Modern UI)がフラットデザインを取り入れたものとなっています。
タッチデバイスがある程度浸透し、多くのユーザーが操作に慣れリテラシーが高まったことで、リアルな質感を追求せずとも画面上の機能を理解できるようになりました。そこで、よりシンプルで柔軟性の高い(マルチデバイスへの対応がしやすい)フラットデザインという手法が使われるようになった、というのが通説です。
Windowsのこのスタート画面は、学校のPCでよく目にしていた気がします…..。遠い記憶…。
フラットデザイン2.0(Flat Design2.0)
フラットデザインは、スキューモーフィズムと比較すると効率的で見た目もスマートでしたが、シンプルさを追求するあまりにUIが直感的ではなくなり操作性が悪くなってしまうという行き過ぎた事象が発生するようになります。
そこで、ユーザビリティを考慮したフラットデザインとして、シャドウやテクスチャといった要素を加えた2.0が編み出されました。Appleでは、iOS11以降フラットデザイン2.0の要素が多数反映されています。
マテリアルデザイン (Material Design)
この動画はマテリアルデザインが現実世界の物質歴な法則をどのように取り入れて作られているのかとてもわかりやすく解説してくれています!(本家Googleが出してる動画なのですが、このプロセスに感動…)
現実世界の物理的法則を取り入れる
紙とインクの要素で組み立てる
色の数を少なく配色する
影を活用して立体感を作る
連続性のあるアニメーション
主要な特徴はこの5つと言われており、GoogleのあらゆるサービスはこのMaterial Designに則ってデザインされています。
最近ではGoogleで「Material You」という新しいビジュアルスタイルが採用され、Gmaiなど主要なサービスに反映されていますが、このMaterial Youも基礎はMaterial Designに則ったものです。
ニューモフィズム (Neumorphism)
2020年頃からは、ニューモーフィズムと言われるデザインのトレンドが生まれてきました。実装面でのコストや要素の区別がしにくいという懸念点があるため、高いユーザビリティが求められる場面には適していませんが、近代的で洗練された印象を与えたい場合には効果的です。
グラスモーフィズム (Glassmorphism)
ニューモフィズムと合わせて2020年頃から存在感を増してきたのがグラスモーフィズムです。2020年11月にAppleによって「Mac OS BigSur」に採用されたことで注目されました。要素の背景にぼかし効果を加えることで視認性を保ち、高いユーザビリティを実現します。
🙆♀️ まとめ
なんとなく点で理解していたものの、今回デザインのトレンドを線として追ってみたことで、様々な人物の功績が積み重なって辿り着いた今のデザインに一層重みが感じられてきました…。改めて見ると、2007年に「初代iPhone」が誕生し、タッチデバイスが急激に世の中に浸透してからは特に、デザインのトレンドはとても早い流れで変化してきていたんですね。ありがとう偉人たち!(雑)
トレンドは理解しながらも本当にユーザーにとって使いやすいデザインのできるデザイナーになりたいですね〜と思ったのでした。
resize.fmを起点に、いろんな方の記事を漁ったりして、ざっくり理解を深めることができて楽しかったです!