UIはインフラ

今日はUIの正体、概念に迫りたいと思います。

使いやすいUI、UXが良いUI、そんな言い方をされると、
「あれ？UIってそもそもなんだっけ？」
ボタンとかフォームとかをUIっていうんだっけ？
キービジュアルとかも含まれるんだっけ？

キービジュアルは製作者側が見せたいものの場合が多く、ユーザーの操作性には影響しないので、UIではありません。
ただキービジュアルの配置やサイズによってはUXを損ねることがありますので広義の意味では無関係ではありません。

では何が正解と判断する基準なのか？
どういうルールブックがあるのか？

そんなものを調べたり、教わったりしなくても「効率」を基準に判断すると即ち解答が得られます。

UIは二次元だけで発生するものではなく三次元にも沢山存在します。

とりわけわかりやすいのは、

UIはインフラと捉えると良いでしょう。

道路の新設や都市計画など規模は様々ですが、

1. 渋滞しないこと

2. 迷わないこと

3. 回遊性が高いこと

4. 事故が少ないこと　　

この親切さは全てユーザーの「効率性」をあげることに貢献しています。
次はそ

のためにとる手段を考えてください。

1. 道幅を整理する

2. 車道と歩道、可能であれば自転車用の専用道路がある

3. 標識を見やすい場所に見やすいサイズで配置する

4. 規則性を持たせる

5. 将来的なメンテナンス制や都市計画も視野に入れる

まだまだあげたらキリがないですが、こんなところでしょうか。

次にWEBの画面をイメージしてください

1. 道幅を整理することは余白を整えること

2. 専用道路があることはCSSをデバイス用に複数用意すること

3. 標識は見出しやラベル（ボタンに載るテキストも含む）のこと

4. 規則性を持たせるにはフレームワークやデザインシステムを導入すること

5. 前項は将来的なメンテナンス性にも貢献しますが、具体的にはデザインツール内に粒度の違うコンポーネントを用意し、実装単位で管理するとより良いでしょう。

最近はfigmaにdevモードが誕生したことで、デザイナーも実装コードに触れる機会ができたのではないかと思っています。

アトミックデザイン

Udemy メディア

figma「開発者のための開発モード」

figma

「手を洗うところが近いほうがいいなぁ」
＝関連性のある機能と機能の間隔を狭くする
「ゴミを簡単に出せたらいいなぁ」
＝削除やアーカイブがワンクリックでできるようにする
こんな日常で感じる不満や期待は全てUIに活かすことができます。

WEB＝コードが乱立してて専門性が高い世界、ではなく見た瞬間に誰もが理解できる、より学習コストが少ないものが良いUIUXではないでしょうか。