「UI/UX」この言葉を聞いたことがあるだろうか？
秋葉原駅前にある大きな建物？
否。
それは「秋葉原UDX」だ。
👉 秋葉原UDX
では本当の意味でのUI/UXとは一体何か？
この記事を読み終わる頃には読者の皆様には、少なからずご理解いただけることだろう。
ではまず各セクションについて連ねよう。
UI/UXについての基礎的なことを少し深ぼって綴るので是非最後までご覧いただこう。
UI/UXとは何だ？🤔
早速結論から申し上げよう。
UI/UXとは UI(User Interface) と UX(User Experience) を略して縮めた略語のことだ。
英単語だとややこしくて分かりにくいだろう。
そのまま日本語で直訳すると
UI 👉 "ユーザー接点" UX 👉 "ユーザー体験"
となる。
つまり、 UIは
「人とモノをつなぐ窓口のようなもの」
UXは、
「人がモノやサービスに触れて得られる体験や経験」
ということになる。主に iPhone や Android といった電子デバイス関連の用語として使われることが多い。
優れたUI/UXとは「とにかくデザインが優れていて、機能も優れておりストレスフリーなサービス」と言えるだろう。
みなさんが普段使うアプリでUI/UXの良し悪しを図るとなると下記になる。
| 良い例👍 | 悪い例👎 |
|---|---|
| 国税庁HP | |
 |  |
大きく3つの差を挙げるならば、
- 文字数の多少
- コンテンツ配置(写真やオブジェクトなど)
- デザインのユーザーフレンドリーさ
この辺りだろうか。
失礼。冗談だ。
今度はちゃんと真面目に比較するので許していただきたい。
| 良い例👍 | 悪い例👎 |
|---|---|
| Zenn | Qiita |
 |  |
両者を見比べた時皆様はどちらが、優れているUI/UXか判断できるだろうか？
私は「Zenn」の方が「Qiita」よりもUI/UXが優れていると考えている。
理由を3つ挙げよう。
- Zennの方が1画面で表示できるコンテンツが多い(UX)
- Zennの方がタブメニューが剥き出しになっているためページ遷移が容易(UX)
- ユーザーフレンドリーなデザイン(UI)
これは人によっては好みが分かれるだろうが、私はZenn推しだ。
上記が良いUI/UX・悪いUI/UXの比較だ。
なんとなくイメージが掴めただろうか？
続いてはUI・UXそれぞれについてもう少し具体的に解説していこう。
UIとはこういうものだ
前述した通りUIとは(User Interface)の略語であり、意味合いとしては「ユーザーとデバイスへの接点を作り出すこと」である。
つまり、めちゃくちゃざっくり言うと「見た目的なデザイン」のことだ。
分かりやすく先ほど使った画像で解説しよう。
🧚♂️Instagram VS 国税庁💥
| 国税庁HP | |
|---|---|
| |
どちらの画面が見やすいか？
私は断固としてInstagramと答える。
単純にデザイン的なところが優っていると言うこともあるが、私は何より
文字の有無
が決め手となっていると思う。
Instagramは「投稿者」・「タグ名」といったコンテンツに必要不可欠なところだけ文字を使用し、他のコンテンツはアイコンで補っているのがわかる。つまり誰が見ても直感的に操作できると言うことだ。
対して国税庁はほぼ全てのコンテンツに対して文字を起用している。これでは一つ一つのコンテンツに対して「黙読」しなくては干渉することができない。故に優れたUIとは言い難いだろう。
他単純に「見た目のデザインが良い」ということが優れたUIとは言えないのだ。
あくまでユーザー目線に立って、実際に触ってみて
「どうしたらユーザーが目的を達成するのに気持ちよく・快適に誘うか」
それを見た目からデザインすること。 それがUIであり、UIの役目である。
UXとはこういうものだ
UXは UX(User Experience) の通り、ユーザー体験を指す単語だ。UI(見た目)が良かったとしても、中身スカスカで使いにくかったら本末転倒というものだ。UI/UXデザイナーは「どのコンテンツにどんな機能が付与されているのか」をユーザー目線に立って実装する。
先ほど挙げたZennとQiitaを比較しながらUXがどんな役割を果たしているのか見てみよう。
🐈Zenn VS Qiita🐥
| Zenn | Qiita |
|---|---|
| |
注目すべき点はタブ(メニュー)だろう。 下記にサンプルの動画を載せたのでご覧いただこう。 👇👇👇まずはZennから👇👇👇
👇👇👇続いてQiitaの動画👇👇👇
お分かりいただけただろうか？
Zennはメニューコンテンツを廃止し、全て画面上にリンクを貼り付けることですぐに行きたいページに遷移することができる。
Qiitaはドロップダウンのメニューを採用することで見た目上はスッキリして見えるが、ページ遷移するたびにドロップダウンメニューを開くという手間が生じる。細かい話だがこれはUX的にあまりよろしくない。
しかしZennはQiitaよりも後発のサービスのため、まだコンテンツが少なく既存のUI/UXで問題ない。しかしQiitaほど大きなサービスになると、必然的にメニューの多さも増す故、ドロップダウンメニューで実装することになるのだ。
人材にも適材適所がある通り、UI/UXデザインにも適材適所があるのだ。
とはいえ、コンテンツが肥大化するサービスで如何に優れたUI/UXを実現できるか？といったところもUI/UXデザイナーの腕の見せ所であり、役目なのだ。
Googleの提唱するMaterial Designとは？
様々な実装方がある中デザイナーたちは大変苦労しながら、独自のUI/UXを実装しここまでやってきた。
そんな中Googleが2014年に推奨したデザインフレームワークがMaterial Designだ。
このフレームワークを簡単に要約すると
わかりやすさを追求したオープンソースなデザインフレームワーク
といったところだろう。
まずは簡単にマテリアルデザインの詳細から綴ろう。
マテリアル(物質的)デザインとは？
デバイスがどれだけ多様化しても対応できるよう、全デバイスに適用できる統合フレームワークを作ろうとしたのがマテリアルデザインの起源。どのデバイスでもわかりやすい操作性を実現するにはどうしたらいいかを突き詰めた結果、現実世界と同じ法則（物理法則）を踏まえたデザインが生まれた。
つまりは誰でもどのデバイスでも実世界に近い感覚で操作できるようにデザイン・設計されたものがマテリアルデザインというもの。
さらにGoogleのAndroidデザイン責任者でるマティアス・デュアルテは、物理法則を採用した背景について下記のように述べている。
これは見ばえを良くするために実世界を模倣したりコピーしたりということではありません。木製馬車みたいなラグジュアリー感を出すためにステーションワゴンにニセのウッドパネルをくっつけるのとは違います。そうじゃなくて、脳に対して実世界と同じ刺激を与えて、脳の負担を軽くしてやるってことなんです。
デザインとはただ単に、カッコいいもの・かわいいもの・綺麗なものを作れば良いというわけではなく、如何にしてユーザーの目的達成のために実装するかが根幹にある。それを考えずに実装するのは「芸術家」か何らかのアーティストだろう。
文字面で説明してもMaterial Designがどんなものかわかりかねるだろう。実際のコンテンツ(コンポーネント)をご覧いただきながらこの章を閉じよう。
Principles(色の原則)
マテリアルデザインは、光を反射して影を落とす方法など、物理的な世界とそのテクスチャに触発されている。素材の表面は紙とインクの媒体を再現した。
Bold(強調) graphic(グラフィック) intentional(意図的な)
マテリアルデザインは、タイポグラフィ・グリッド・スペース・スケール・色・画像などの印刷デザイン手法に基づいてユーザーをその体験に入り込ませるための階層・意味・焦点を作り出す。
Motion
モーションは、微細なフィードバックと一貫した遷移を通じてユーザーを継続的に集中力を維持させる。要素が画面に表示されると、要素は環境を変換および再編成し、相互作用によって新しい変換を作り出す。
Components
マテリアルコンポーネントは、UIを作成するためのインタラクティブな構成要素であり、フォーカス・セレクト・アクティブ・エラー・ホバー・プレス・ドラッグ・および無効な状態を伝達するための組み込みを提供している。コンポーネントライブラリは、Android、iOS、Flutter、およびWebで利用される。
最後に
いかがだっただろうか？
今回はUI/UXの基礎的なことを綴ったがご理解いただけただろうか？
UI/UXデザイナーは無作為にかっこいいもの・可愛いもの・美しいものを作り出そうとしているわけではないのだ。
そのデザインには必ず意味があり、そこに至るまでのロジックが隠されているのだ。
これらを理解した上で普段お使いのアプリと、今一度向き合って欲しい。無意識にストレスフリーなUI/UXを皆様は体感しているはずだ。
また、実際に手を動かし実装してみても良いかもしれない。楽しい反面デザイナーの偉大さに大きな関心を抱くことだろう。
ご意見ご感想はぜひコメント📝していただけると嬉しい。
それではまた！
