はじめに

こんにちは。今回は、Yづドン／テクノロジー合同 Advent Calendar 2021 10日目の記事ということで、 サブタイにもある通り、私のUIデザインに対する基本的な考えをだべった上で、このWebページの（見た目的な）設計理念と今後の展望について語れたら、と思います。

UIデザインの類型

まずお話をするにあたって、基本的な前提情報の確認を。
ここ20年ぐらいの、GUI（Graphical User Interface）については、ざっくり2種類に分類できると思います。
現実世界に存在する物質に寄せた装飾をまとい、ユーザーの理解を促進することを目的としたスキューモーフィックデザインと、影やグラデーションなどの装飾を可能な限り排し、シンプルさを志向するフラットデザインです。
両方の特徴を持ったインターフェイスも存在しますが、「どちらに近いか」という次元の話で、この2極から外れた説明がされることは少ない気がします。
で、先にぶっちゃけますが、私は（どちらかといえば）スキューモーフィズムのほうが好きです。まあ後半でこの二元論を否定しますが。

Aquaインターフェイスについて

私がスキューモーフィックデザインを推すようになったきっかけが、Mac OS Xから採用されている「Aquaインターフェイス」です。厳密には現行のmacOSもこの流れを引いていますが、この記事ではiOS6と揃えてOS X Mountain LionまでをAquaとして位置づけます。
この章では、UIデザインについて論ずるのに先立って、2010年頃までのAquaインターフェイスの変遷について簡単に追っていきます。

上の画像はMac OS X v10.3のスクリーンショットで、白色基調に水色のアクセントカラーが施されたUIに金属のようなモチーフが組み合わされていたことがわかります。
Dockには、コンピュータを扱ったことがない人でも、どれが何を意味するかなんとなく想像がつくようなアイコンが並んでいます。

配色や透明度、陰影によって階層が表され、ウィンドウの角は丸められ、すべての要素は立体的です。

また、10.3まではウィンドウやプルダウンメニューの背景に横縞模様が入っていましたが、

10.4では多くの部分で無地になりました。

ここまでで最も劇的な変化がMac OS X v10.5と言えるでしょう。
まずウィンドウの角丸半径が小さくなり、全体的に引き締まった印象になりました。
加えて、10.4以前まではウィンドウの背景などに入れられていた、縞模様や金属基調のテクスチャがなくなりました。
また、水色基調の要素が用いられる箇所は、重要なアクセントカラーに限定されました。

Mac OS X v10.7では、全体としてiOS寄りのインターフェイスになりました。
ここで、10.3~10.4頃のUIデザインである「Motion4」と、10.7に合わせて再設計された「Motion5」のデザインを以下で並べてみます。
メジャーバージョンは異なりますが、基本的なUI配置は同じなので比較しやすいはずです。

次のような差異があることがわかります。
・画面を構成する要素が単一のウィンドウにまとめられた ・配色が統一された（同じ階層の背景に同じ色が使われるようになった）
・ボタンの大きさが見直され、特にタブなどはクリック可能な面積が広がった
・小さいアイコンは抽象化され、情報量が抑えられた

ここまで見てきた中で、Mac OS Xに関わるUIデザインの変化を簡単にまとめるなら、「情報量が減った」「シンプルになった」と言えるでしょう。
では、これは「フラットデザインに近づいた」と評価できるのでしょうか？

UIデザインを二元論で語るな

ここまでの議論をひっくり返すようでアレですが、「このデザインがスキューモーフィズムなのかフラットデザインなのか」という表層の議論にはあまり意味がありません。
今まで見てきたMac OS XのUIデザインの変遷は、製品とそれを取り巻く技術が進歩する中で、順当に洗練されてきたというだけの話で、それ以上でもそれ以下でもないのです。
また、iOS7／OS X Yosemiteからフラットデザインが採用されたのも、デザイン統括の担当者が変わったから、という要因が大きく、これまでのUIデザインの変遷と直接の連続性は無いと言っていいでしょう。
そして、ここで着目すべきは「順当に洗練されてきた」という部分です。
まず、UIデザインのトレンドというものは、

・技術的背景（ハードウェア側の制約など）
・社会的背景（利用者需要などの潮流）
・行動心理的背景（ユーザーにとっての“使いやすさ”）
・マーケティング的背景

が複雑に絡み合った結果生まれるものです。
これらを前提に、2010年代に入ってからのスキューモーフィックデザインの退潮（Modern UIやiOS7によるフラットデザインの普及）に敢えて理由をつけるのであれば、次のような説明なら一応筋が通ります。
・利用者がコンピュータに慣れたため、現実世界を完全に模倣する必要はなくなった（社会的背景・行動心理的背景）
・スマートフォンなどの小型タッチデバイスを考慮したときに、スキューモーフィズムは情報量が多すぎる（技術的背景・行動心理的背景）
・「保存」を示す「フロッピーディスクのアイコン」など、現実のモノを模倣してもジェネレーションがギャップすると伝わらない要素がある（社会的背景）
・作るのが面倒くさい（技術的背景か？？？？）

要するに、デザインの類型というものは原因に対する結果でしかありません。その結果ありきで表層だけを模倣する大会が起こると、最悪なソフトウェアが生まれることになります（自戒）。
次章では、UIとUXについてもう少しだけ掘り下げてみます。

UXの5階層とか

以下にUX（User eXperience）の5階層モデルを示します。

表層たるビジュアルデザインは、そのプロダクトに関わるすべての要素を土台にしています。
このモデルから分かるのは、製品の性格によって、適したデザインも変わるということであり、また一般的にこの5階層が一貫していれば、使いやすいインターフェイスが生まれるであろうということも言えます。
つまり、当然のことですが、UI設計は表層部分以前に考えることがたくさんあり、突き詰めて考えれば、“正解”はだいたい決まってくるのです。
これを一貫させようという試みが、Material Designだったりした（過去形）わけです。

それはそれとして

それはそれとして、私はAquaインターフェイスが好きなのです。なので、このWebページの表層部分は後期のAquaインターフェイスを模倣しているのです。
もちろん、Aqua（Mac OS X）の操作体系全般が好きなのですが、WebページとOSでは当然求められるものが違うため、私の考えるWebページのあるべきレイアウトに、Aquaっぽい見た目をかぶせた感じです（これを“中途半端”って言うんですよ！）。
まず大前提として、デスクトップ向けサイトでは、より多くの情報量を一覧性が高い形で、かつ分かりやすく表示できる必要があると考えていますそのため、画面サイズに合わせて最適な情報量を表示し、意味のないアニメーションをほとんど排し、使用する色の種類も抑えています。
まあしかし、これも試行錯誤の途中でして、デスクトップ表示ではまあまあ見られたデザインになっていますが、モバイルでの操作性はまだまだなので研究の余地がありますね。

さいごに

締まらないけど力尽きたのでこのあたりでお話を終えます。
結局何が言いたかったんだろう……。
まあ、表層のUIテーマなんて洋服みたいなものなんだから、ユーザーフレンドリーな階層構造と動きさえ伴っていればエエねん。
自分好みの見た目は、自分が好きな見た目だから、ユーザー体験（自分限定）が最高なのは自明ですね？？？？（某元環境相構文的な）