UI（ユーザーインターフェース）デザインとは？
UIデザインとは、ユーザーがサービスをスムーズに使い、その価値を最大限に享受できるようにプロダクトの設計をすることを意味します。特に、アプリやWebサービスなどのプロダクト自体がサービス提供者とユーザーをつなぐ接点となるITサービスでは、いかにUIデザインを最適化するかがビジネスの成否に直結する重要なポイントとなっています。
UI（ユーザーインターフェース）とは？
UIとは、User Interface（ユーザーインターフェース）の略称です。インターフェースには、「接点」と言う意味があり、UIとはユーザーと製品とのすべての「接点」のことを意味します。具体的には、ボタンやフォント、ナビゲーションなどのユーザーがサービス利用時に目にするもの、操作するものすべてをUIと呼ぶことができます。
UIデザインとUXデザインの違い
UIデザインとよく一緒に語られる言葉に、「UXデザイン」があります。UX（ユーザーエクスペリエンス）デザインとは、「ユーザーがサービスや製品を通して得られる顧客体験」の設計を意味します。アプリやWebサービスなど、プロダクト上での体験が顧客体験のほぼ全てを形作るようなサービスでは、顧客体験全体の設計を指してUXデザインと呼ぶこともあります。
UIデザインとUXデザインの違いをまとめるとそれぞれ、
UIデザイン = 「ユーザーとサービスの接点の設計」
UXデザイン = 「ユーザー体験の設計」
となります。UXデザイナーが主にリサーチやプロトタイピング、ユーザーテストを通してユーザー体験の設計を担当するのに対し、UIデザイナーは実際にユーザーが操作する画面の具体的なデザインの作成を担当します。また、UXデザインがユーザー体験全体の設計を意味することから、UIデザインはUXデザインの中の一要素として考えることもできます。UIデザインとUXデザインはそれぞれ異なる意味をもった言葉ですが、UIの最適化によるUX改善が主な業務となる場合などは、UI/UXデザインとしてまとめられることも多いです。
UIデザインとビジュアルデザインの違い
デジタルプロダクトデザインの文脈においては、UIデザインもビジュアルデザインもユーザー体験を形作る要素として捉えることができます。書籍「5段階モデルで考えるUXデザイン」の著者Jesse James Garrett氏が定義したUXデザインの5段階モデルに基づいて考えると、UIデザインがユーザー体験の「骨格」を形作るのに対し、ビジュアルデザインはユーザーの感覚に訴える「表層」のデザインに用いられ、中でも視覚的に機能をサポートしたりメッセージを伝えるようなデザイン領域のことを指します。
なぜUIデザインが重要なのか？UIデザインの役割
近年のITサービスでは、前述のようにアプリやWebサービスのUI自体がサービス提供者とユーザーのほぼ唯一の接点となっている場合が多いです。例えば、YouTubeを利用しているときにYouTubeで働いている人と直接やり取りしたり、おすすめの動画を選んでもらうことはなく、サービス利用時にユーザーが触れるのはアプリやブラウザを通して表示されるUIだけですよね。このようにプログラムによって自動化された形でサービスを提供するITサービスにとっては、UIが使いやすいかどうかはビジネスの成否に関わるとても重要なポイントなのです。
また、直接接客することなくサービスを展開できるということは、コストを抑えて多くのユーザーにサービスを提供できる可能性があると同時に、世界規模で競合他社と競争しなくてはならないということを意味します。このような状況で、使いにくいUIを提供してしまってはすぐにユーザーが離れてしまいます。競争が激化するIT業界では、「使いやすいUIデザイン」は最低限担保しなくてはならない品質となりつつあり、さらにその先の「心地よいUIデザイン」を目指してデザイナー達が日々リサーチと検証を重ねています。
使いやすいUIデザインとは？の一つの基準、直感的に使えるUIデザイン「Don’t Make Me Think」
では、「使いやすいUIデザイン」とは具体的にどのようなデザインのことを指すのでしょうか？HCI（ヒューマンコンピュータインタラクション）とユーザビリティの専門家であるSteve Krug氏による書籍、「Don’t Make Me Think」では、「使いやすいUIデザインとは、ユーザーに考えさせないデザインである」と述べられています。つまり、直感的に操作できるUIであることが使いやすいUIの重要なポイントとなります。
では、さらに掘り下げて「直感的に操作できる」とはどういうことなのでしょうか？この「直感」にはユーザーの過去の経験が大きく関係しており、ユーザーが過去に見たことのあるものや使ったことのあるものを「連想させる」ことがUIデザインの重要なポイントとなります。逆にいうと、類似した経験を持たないユーザーに何かを直感的に操作させることはとても難しいです。例えば、車の運転に慣れている人は、初めて乗る車であってもある程度操作することができると思います。しかし、車を運転したことがない人が、始めて運転席に乗った時に「直感的に」運転ができるとは考えにくいですよね、、
ユーザーに過去の経験を連想させる、メタファーとは？
このような過去の経験を連想させるようなデザインを「メタファー」と呼びます。メタファーとは、直訳すると「隠喩」と言う意味です。UIデザインの世界では、現実世界に存在する物体や概念を平面的なデザインとして表現するときに、そのままの形で表現するのではなく、元となる物体が「連想されるような形」で表現します。例えば、オンオフを切り替えるためのスイッチUIは現実世界のスイッチを連想させような形でデザインされています。これは、初めてUIを使うユーザーであっても、現実世界でスイッチを使った経験からUI上のスイッチの役割を推測できるようにという思想で設計されています。
このように、UIデザインにとって重要となる「過去の経験からの連想」ですが、近年は「現実世界のメタファー」ではなく、他のITサービスの利用経験から の連想も重要なポイントとなります。初期のiPhoneのUIを思い浮かべてみてください。iPhoneが新しく発売された当時は、タッチUIによる画面操作はまだ一般的ではなく、ユーザーに操作方法を連想させるためには「現実世界における過去の経験を連想させるメタファー」を使ったUIデザインが必要でした。現在一般的となったUIデザインよりも、ボタンやスイッチなどのパーツがより立体的でリアルだったと思います。
しかし、iPhoneが大きな成功を収め、現在では「スマートフォンの操作」という行動が「現実世界のスイッチの操作」と同じくらい一般的なものとなりました。このような状況では、ユーザーはスイッチUIの操作方法を経験的に知っており、スイッチのUIデザインは現実世界のスイッチを模倣する必要がなくなりました。（とはいえ、これによって本当に初めてiPhoneを操作するユーザーにとっての使いやすさが低下したことは事実ですが、、）
UI操作という行動自体が一般化した現代で重要となるのが、「他のITサービスの利用経験からの連想」です。毎日数多くのアプリを使うユーザーが、新しいアプリを直感的に操作できるかどうかは、簡単にいうと、それまでに使ったことのあるアプリと操作感が似ているかどうかと大きく関係します。つまり、あまりにもオリジナリティに富んだUIデザインを作るのではなく、プラットフォーム（iOS、Android、Webなど）上の他のサービスと一貫性を持った操作感を提供することが使いやすいUIを作るための重要なポイントとなってい ます。
ユーザビリティとは？「ユーザビリティ = 誰にとっても使いやすい」ではない！
優れたUIデザインは、ユーザーの過去の経験に沿ったデザインであることが重要であることはわかったと思います。しかし、過去の経験というものは人それぞれであることから、世の中の誰にとっても直感的に操作できるUIを作るということは現実的に難しいと思いますよね。
実は、優れたUIデザインとは「誰にとっても」使いやすいUIデザインという意味ではないのです。 デザインの世界では、「使いやすさ」のことを「ユーザビリティ」と表現します。この、ユーザビリティとは単に「使いやすいこと」を意味する言葉ではなく、「想定する利用者がサービス利用の目的を達成できる」というより詳細な定義を持っています。
ここで重要となるのが、「想定する利用者（ユーザー）」が誰なのかを明確にする必要があるということです。前述したように、誰にとっても使いやすいものを作るのは現実的に難しい上、これを目指そうとすると、誰にとっても100点のプロダクトは生まれにくいです。多種多様な人のニーズに合わせようとすると誰にとっても70点のプロダクトができてしまい、確かに使いやすいけど、使いたいとは思わないというようなサービスとなってしまいます。
優れたUIデザインを目指すには、「誰に」「何をさせたいか」を明確に定義し、ターゲットとなるユーザーに最適化していくことが重要となります。また、そのためには実際にターゲットペルソナに当てはまる人を招いて、ユーザビリティテストを繰り返すことも優れたUIデザインを作るためのポイントとなります。
UIデザインの基本ルール
優れたUIデザインのためには、ターゲットに対する理解が重要となることはわかりました。とはいえ、UIデザインのアウトプットは具体的なデザインです。UIデザイナーにはFigmaやSketch、Adobe XDといったグラフィックデザインツールを使って、最終的なデザインを設計することが求められると思います。ここでは、UIデザインにとってまず必要となる、ユーザーが正しく情報を把握できるようなレイアウトを構成するポイントを紹介します。
UIデザインの基本ルール、CRAPとは？
CRAPとは、 レイアウトデザインの４つの原則である「強弱（Contrast）」「反復（Repetition）」「整列（Alignment）」「近接（Proximity）」の頭文字をとった言葉です。ちなみに「Crap」はアメリカ英語でちょっと下品な意味があるので、「C.R.A.P」のように区切って記述される場合も多いです、、
1. 強弱（Contrast）：情報の優先度を明確に表現する
優先順位に合わせて画面上の要素に強弱をつけましょう。強弱の付け方は多様で、テキストのサイズや色、スタイル、コンポーネントの背景色など様々な方法が考えられます。
ちなみに、はじめてモバイルアプリのデザインをするデザイナーがよく悩むのがこの「強弱」の基準となるサイズです。アプリ内で強弱のバランスが取れていても、他のアプリとサイズ感がずれているとちょっとおかしな感じがしてしまいますよね。モバイルアプリではiOS、Androidなどのプラットフォームごとにガイドラインが設けられてお り、タイトル、見出し、本文などそれぞれの要素に合ったフォントサイズが指定されています。はじめは、このガイドラインを参考にしながら進めると、他のアプリと比較しても違和感のないサイズ感でデザインができると思います。
2. 反復（Repetition）：同じ情報は一貫性を持って表現する
UIはユーザーが視覚的に情報を把握できるようにするためのデザインです。「視覚的に」というのは、画面内のすべての文字を読まずとも、何が表示されているのかを「過去の経験的から理解できる」ということです。例えば、アプリ内で一貫性のある文字サイズで見出しが表現されていれば、ユーザーは迷うことなく画面内の情報構成を把握することができます。悪い例として、例えば本のレイアウトがページ毎に大きく異なっていたら、ページを開く毎にどこに何が書いてあるのかを理解する必要が出てきてイライラしてしまいますよね。
この「過 去の経験からUIの要素の意味を理解する」というユーザー行動はUI設計にとって、とても重要な原理となります。
そして、ユーザーが「過去の経験からUIの要素の意味を理解する」ということは、ユーザーが過去に使ったことのある他のサービスの経験もUIへの理解に影響するということです。例えば、iPhoneを使っているユーザーは経験的に「赤いドット」を「通知」として認識するかと思います。仮に、とあるアプリが通知の表示に「黄色いドット」を使ったとしたら、いくらアプリ内で一貫性を持って使われていたとしてもユーザーは他のアプリを使う時とは「別の記憶を」頼りにしなくてはいけなくなり、フラストレーションを生む原因となります。
つまり、作成しているUI内での一貫性はもちろん、ユーザーの持っている過去の経験との一貫性にも気をつけてデザインすることがUIデザインにとっての「反復（Repetition）」のポイントとなります。
ユーザーの記憶を考慮した設計は、UXデザインの重要な要素である「ユーザービリティ」の構成要素である「学習しやすさ」と「記憶しやすさ」にも関連するポイントです。こちらは、ユーザビリティに関する記事でも詳しく説明しています。
3. 整列（Alignment）：要素を揃える
基本的なものだと「左揃え」「右揃え」から、複雑なものだと「グリッドレイアウト」まで、要素を整列することもユーザーが視覚的に情報を把握するためには重要な原則です。画面上の情報を把握するために、視点を上下左右斜めに忙しく動かさなくてはいけないようなページは読みにくいですよね。ユーザーがストレスなく情報を把握できるように、UI要素は揃えて配置しましょう。
4. 近接（Proximity）：関係する情報を近づける
関連性のある情報はまとめて、関連性のない情報は分けて配置しましょう。こちらは、モバイルアプリのデザインで特に重要になる場合が多いです。小さな画面領域に様々な情報を表示する必要があるモバイルアプリでは、すべての情報に細かい説明を加えることはできません。そのため、要素間の距離だけで意味を表現することが多々あります。例えば、Lineのチャット画面のメッセージの隣には「15:00」といったように時間が表示されていますね。これは「送信日時: 15:00」のように冗長に説明しなくてもわかるようにメッセージと近づいた位置に時間を表示して、UI要素の意味を伝えようとしていることがわかります。
UIデザインの歴史
「直感的に操作できるUIデザイン」に関する解説で、iOSの初期デザインに多くみられた「現実世界のメタファー」が近年ではあまり重視されなくなったと述べました。他の多くのデザイン分野と同じように、UIデザインも時代背景と共に変化してきました。ここでは、そんなUIデザインの歴史に焦点を当ててUIデザインに対する理解をより深めましょう。
GUI以前: CUI（キャラクタベースユーザインタフェース）はエンジニアにとって最高のユーザビリティを持ったUI？
現在一般的にUIと呼ばれているものは、厳密にはGUI（グラフィカルユーザインタフェース）のこと指します。GUIとは、画面上に表示された グラフィックを操作しながら操作するUIのことです。GUIでコンピュータやスマートフォンを使うことが、あまりに一般的になった現在では、それが「普通の」コンピューターの操作方法であり、当たり前に聞こえるかもしれませんね。
しかし、初期のコンピューターでは画面上の文字表示を使った対話形式で操作する「CUI（キャラクタベースユーザインタフェース）」が一般的でした。これは、CLI（コマンドラインインタフェース）とも呼ばれ、現在でもエンジニアにとってはとても一般的なコンピューターの操作方法です。映画などで、コンピューターハッカーがPCに表示された文字の羅列を見ながら操作しているあれです。
UIデザインと同じように、CUIにもデザイン（見た目ではなく、操作方法の設計としてのデザイン）があり、その操作方法は異なるアプリケーション間でもある程度一貫性のあるものとなっています。それゆえ、一般のユーザーにとっての「直感的な操作感」とは程遠いものの、CUIの使い方に慣れたエンジニアにとってはアプリケーションごとに新しく操作方法を学ぶ必要の少ないCUIは、実は現在でも一番「ユーザービリティ」の高いUIだったりします。
1980年代: GUIの登場
GUIの元祖は1960年代のアメリカの軍事システムとも言われていますが、ディスプレイ、キーボード、マウスを使った現在の操作方法で一般に普及したのは、1984年に誕生したAppleのMacintoshによるものでした。専門的な知識が必要であったコンピューターの操作をGUIで簡易化し、商用の製品として販売したことによって、それまで業務利用が多かったコンピューターが一般家庭でも利用されるきっかけとなりました。
1980年代 - 1990年代: デスクトップアプリケーションの時代
この頃のPC用のアプ リケーションは、主にAppleのOSXやMicrosoftのWindowsといったプラットフォーム上で動作するものが多く、そのUIはプラットフォームから提供されているパーツを組み合わせて作るという方法が一般的でした。
また、この時期はまだソフトウェア開発を行う企業も現在のように多くはなかった上、インターネット経由での配布ではなく、フロッピーディスクやCDROMを物理的に販売する形でした。ユーザーからすると、今のように無料でアプリをダウンロードしてから比較検討するということはなく、特定の目的に合ったソフトウェアを購入してから「使い方を学ぶ」というような時代だったため、ソフトウェア開発者にとっても、UIデザインがビジネスにおいて占める重要性は今ほど高くはなかったのではないでしょうか？
1990年代: Webデザインの登場
このような状況を大きく変えたのは、インターネットの 登場でした。1991年に初めのWebサイトが公開されたときには、Webサイトは文字だけで構成されたものでした。インターネットの速度が遅かったことも、この時期のWebサイトが強いデザイン性を帯びなかった一つの要因でした。しかし、1996年にAdobeがFlashを発表したことで状況が一変します。Flashはブラウザ上で動作するソフトウェアで、開発者がWebサイトをより自由にデザインし、アニメーションや音をつけることを可能にしました。
FlashによってWebサイトで自由なデザインを表現できるようになったことをきっかけとして、「Webデザイン」というコンセプトが生まれました。この時代には、多くのデザイナーがFlashを使って独創的なWebサイトを生み出していました。この頃のWebデザインは、デザイナーにとっての「表現の場」としての性質が強く、今のようなユーザービリティ重視のWebサイトというよりは、世界観や面白さを表現するようなものでした。
2000年代初期: Googleの登場とCSSによるWebサイトのデザイン
2000年代にGoogleが検索エンジンを発表したことにより、Web上のユーザー体験における「検索」の重要性が増しました。Webサイト上の文字を認識して検索結果に表示するGoogleの検索エンジンの仕組みは、Flashで作られたサイトにとってはとても都合の悪いものでした。この時期から、Flashを使って作られていたWebデザインは徐々に検索エンジンに認識されやすい、HTMLとCSSでの表現に移行します。また、「検索」の登場によりWebはマーケティングのためのツールという意味合いを持つようになりました。サイト内でユーザーの行動を促すことが必要となったこの頃のWebデザインの世界では、ユーザーがより的確に求める情報に辿り着けるよう、ナビゲーションやタイポグラフィの工夫をはじめとした、「ユーザービリティ」への意識が高まりました。
2000年代中期: Webアプリケーションの登場からモバイルへの移行
2000年代中期以降は、UIデザインにとって大きな転換期となりました。それまでは、多くのデジタルデザインの仕事は「情報を効率的に伝える」という観点で行われていました。それが、2000年代中期にYouTubeやGoogle Mapのような操作可能はUIを持った「Webアプリケーション」が登場したことによって大きく変わります。Webアプリケーションの登場によって、Webサイトが 「機能性」を提供し始めたこの時代から、ユーザーとソフトウェアの「インタラクション」という現在に近い観点でのUIデザインが重視され始めました。
また、2007年に登場したiPhoneもこの状況を大きく後押しします。画面上に表示されたグラフィックを直接タップすることで操作できるモバイルデバイスが一般化したことで、UIデザインはより直接的な操作を想定したものへと形を変えていきました。
また、インターネット通信速度の高速化によって、ソフトウェアを物理的に店頭で購入する必要がなくなりました。物理的な流通チャネルを用意することなく、インターネット経由でアプリを配布・販売ができるようになったことで、開発者間の競争がより激しくなり、ソフトウェアビジネスにおけるUIデザインの重要性も高まったのです。
この時期のUIデザインの特徴として、「スキューモーフィズム」が挙げられます。スキューモーフィズムとは、現実世界の物質に似せた表現を施したデザインのことです。例えば、メモアプリの背景を紙のようなテクスチャで表現したり、ボタンを3Dに見えるようにするに表現したりといった形です。「初期のiPhoneのUIデザイン」というとわかりやすいかもしれませんね。それまで、画面上でのUI操作を経験したことがなかったユーザーに対して、「わかりやすい」操作感を提供する方法としてはこのスキューモーフィズムが最適だったのです。Webデザインにおいても、UIパーツに奥行きや影、光の反射をつけるなどしてリアル感を出す工夫をすることがデザイナーの腕の見せ所でした。
2010年代以降: フラットデザインへの移行
2010年代以降に、モバイルデバイスがさらに普及し、ほとんどの人がタッチスクリーンでの操作感に慣れた時代となりました。この状況では、もうユーザーは立体的な表現がなくてもボタンやスイッチといったUIの操作方法を認識できるようになっており、UIデザインにおけるパーツのリアルさの重要性が急速に下がりました。そこで、よりモダンなグラフィック的なUIをデザインする動きが進み、影や立体感などの表現をできる限り排除したデザインは、「フラットデザイン」と呼ばれ流行しました。
また2010年代は、シリコンバレーをはじめ、ソフトウェア企業がベンチャー投資による資金と開発力をもとに、急成長を目指すスタートアップ・ムーブメントが起きた時代です。この時期にはインターネットを通じて継続的にソフトウェアアップデートを配信することで、ユーザーのニーズに合わせてソフトウェアを進化させていく「継続的デリバリー」という開発手法が一般的になりました。この継続的デリバリーによって、サービスをよりユーザーに合ったものに進化させていくという考え方を支えることになったのが、デザイン思考的な手法でした。ユーザーを巻き込んだ形で、リサーチ、プロトタイピング、検証を繰り返す手法が、競合他社よりもより優れた製品を短期間で開発することが求められる状況で注目を集め、これらを実行するUXデザイナーという仕事が一般化し始めました。
2020年以降: 技術的な制約のない時代の新たな表現
UIデザインの表現という観点から見ると、この2020年代以降は「技術的な制約がほぼ なくなった」という点がそれ以前との大きな違いとなります。インターネット速度、プログラミング環境、ソフトウェアの実行環境の進化によって、それまで表現が難しかったようなUIデザインも技術的には可能となりました。その一方、UXやユーザビリティといった概念への理解も深まり、Flashの時代のように自由で独創的なデザインを作れば良いという状況でもなくなってきました。「技術的に可能なことが増える中で、ユーザビリティに配慮しながらも新たな表現を模索する」というのが、近年のUIデザインの特徴ではないでしょうか？次に、そんな近年の状況を表すようなUIデザイントレンドを紹介したいと思います。
近年のUIデザインの最新トレンド紹介
1. ミニマリズム x 大胆なタイポグラフィ
https://www.uber.com/
ミニマリズムは、ここ数年感主にシリコンバレーのテック系スタートアップ界隈などで特に人気のスタイルで、AirbnbやUberなどのWebサービスをはじめ、Oculusなどのプロダクト紹介サイトまで近年はこのミニマルなデザインスタイルを貫いています。このミニマリズムデザインに新しく加わった特徴として、大胆なタイポグラフィの使用があります。英語で、Bold Design（大胆なデザイン）と呼ばれるようなスタイルで、ミニマルなスタイルの中でも見出しなどを思いっきり大きなサイズの太いタイポグラフィで表現するうようなデザインが増えました。
ミニマリズムの基本に沿って、グラフィックデザインの4大要素である「レイアウト・色・文字・形」を使い、少ない要素と装飾でデザインを構成しようとすると、タイ ポグラフィが担う役割がとても大きくなります。タイポグラフィには、それ自体に目に留まる魅力やブランドらしさを表現できるという特徴があり、特に周りを最小限の要素で構成されているような場面では、タイポグラフィの使い方一つで大きく印象を変えることもできるのです。近年、見出しなどの重要なメッセージを大胆に思いっきり大きなサイズで表示することで、伝えたい情報の優先度を明確にするという機能性を叶えながら、ブランドらしさを持った魅力的なデザインを作ることを実現したサイトが多く登場しました。
2. ブルータリズム x 90’s
https://virgilabloh.com/free-game/
主にファッション系などのブランド感を表現したいWebサイトでよく見られるようになった表現が、Brutalism（ブルータリズム）です。ブルータリズムとは、「荒々しく冷酷」といった意味の言葉で、もともとは1950年代に唱えられた建築形式の名前です。建築の世界でのブルータリズムがモダニズム建築の「機能主義」に立ちかえることを目指していたのに対し、近年のデザイントレンドのブルータリズムは単純に、ビジュアル面での「荒々しさを持ったデザイン」といった意味で使われています。
この「荒々しいデザイン」は、技術的な制約が多く、ユーザビリティに対する理解もまだ広まっていなかった90年代のWebサイトのデザインに似たものになることが多く、それを意識的に利用して90年代テイストのデザインエレメ ントを使ってノスタルジックな表現とするWebサイトも多く見られます。
ブルータリズムや90'sのように、過去のトレンドが形を変えてもう一度注目を集めることはデザインの世界で多くみられます。世代が変わることにより古いものが目新しくなり、解釈を変えて受け入れられるのです。ブルータリズムの「荒々しさ = 配慮されていないデザイン」は、デジタルデバイスに使い慣れた今の時代のユーザー（特に若者）にとっては軽快で新しく、魅力的に映ったのではないでしょうか？また、近年の退廃的な世の中の情勢を表現する物理世界でのデザイン表現に触れる中で、自然とそれを好むようになっていったことも考えられます。このようにデジタル世界に限らず、世の中の流れに目を向けてみると、ユーザーにとって今の感性に合った、受け入れられやすいデザインを作るために役に立つヒントが見つけられそうです。
ヴァージル・アブロー（Virgil Abloh）によるファッションブランドを始めることを目指す人のためのリソース集、FREE-GAMEはブルータリズムデザインの良い例です。Brutalist Websitesにも、たくさんのブルータリズムのデザインが紹介されています。
3. グラスモーフィズム x オーロラ表現
https://dribbble.com/shots/15056096-Earnings-Management
UI要素を画面上で平面的に表現するフラットデザインに対し、マテリアルデザインがUI要素に厚みを与えて、適度なスキューモーフィズムへの回帰を目指していることはUIデザインの歴史を見るとわかります。実は、マテリアルデザイン以外にもスキューモーフィズムを適度に取り入れようとする動きがあり、2020年ごろにはNeumorphism（ニューモーフィズム）と呼ばれるデザインが話題になりました。単色の上に表現したなめらかな凹凸と明るいシャドウを使ってUIに立体 感を持たせようとしたニューモーフィズムに対して、2021年ごろから登場したのがすりガラスのような光の透過表現を使ってUI要素の重なりを表現した「グラスモーフィズム」です。
このように、「物理世界をどのようにソフトウェア上で表現するか？」というテーマはUIデザインの世界で常に模索され続けています。スキューモフィズムからフラットデザインに移行した頃から、「物理世界のリアルさ」を空間的な奥行きで表現するような動きが始まりました。このように、平面上で奥行きを表現する際に鍵となったのが、要素を重ねるレイヤー表現です。ただし、このレイヤー表現には一つ欠点があります。要素を重ねることで、見た目がどうしても「重く」なるのです。
そこで、レイヤー表現において「軽さ」を表現する手段として取り入れられたのが「透過表現」です。レイヤーを透過させることによって、明確なシャドウなどを使わずとも奥行きを表現できるようになりました。ただし、この背景透過で軽さを表現する際にも一つ課題がありました。後ろのレイヤーがベタ塗りだと上手く奥行きが表現できないのです。そこで、透過表現とともに取り入れられたのが、背景をグラデーションにした上で、すりガラスに見立てたぼかしを入れた表現です。これにより、境界線が混ざり合うことでオーロラのような表現となり、レイヤー表現の一つの形としてオーロラ的な表現を持ったグラスモーフィズムが見受けられるようになりました。
まとめ
ここまで、UIデザインの基本的な概念からその歴史、近年のトレンドまで紹介してきました。ITサービスの世界では、UIデザインはUX最適化のために常に更新されていくものです。そのため、どのようなスタイルでデザインをする場合でも全体のデザインシステムとしての一貫性と拡張性が大変重要となります。
このような一貫性を持ったデザインシステムを作る方法として、Component Driven User Interfaces（コンポーネントドリブン・ユーザーインターフェース）という、UIコンポーネント単位でデザインガイドラインを作り、コンポーネントを組み合わせることで最終的な画面デザイ ンを作る手法が主流となりつつあります。
