Webサイト制作の視点で考える、WebアプリのUI/UX設計で気をつけたいこと

私がこの業界に初めて入ったのは5年ほど前です。Webサイト制作を行う会社でした。

入社後にフロントエンド、バックエンドどちらに興味あるかを聞かれたとき、やっぱり直接目に見えるほうがわかりやすいと感じたため、フロントエンドを希望しました。

以降、Webサイト制作のフロントエンドをメインに業務を行っていましたが、徐々にWebアプリケーション（以降、単にWebアプリとします）開発にも挑戦するようになってきて、今日に至るという状況です。

業務内容は変わっても、最終的に向き合うのは「ユーザーにとって使いやすい体験」を届けること。その点はWebサイトもWebアプリも共通しています。

ただ、Webアプリに関わるようになってから「これはWeb制作の視点があれば、もう少し違ったかもしれない」と感じるUIの設計に出会うことも少なくありませんでした。

今回は、そうした体験の中で特に印象に残った気をつけておきたいUIの落とし穴をいくつかご紹介しつつ、日頃どのようにUI/UXの引き出しを増やしているかについても触れてみたいと思います。

1. 通知バーがナビゲーションに重なり、操作が妨げられる

ある案件で、ファイルをアップロードした際に「アップロードしました」という通知バーが画面上部に表示される仕様がありました。

この通知バーは全幅に広がり、しかも 左上にあるハンバーガーメニューと重なってしまうレイアウトになっておりました。

✕ボタンで非表示にすることもできるようになってはいましたが、通知が表示されている間はメニュー操作ができないという状態になっていました。

一見すると「10秒で消えるだけの通知」かもしれませんが、ユーザーからするとその数秒がストレスになります。実際、別機能の開発時にもアップロードするたび毎回✕ボタンをクリックしてからハンバーガーメニューを選択するような手順を踏んでいました。

こうしたケースを見て、個人的に参考になると感じたのが Material UI や shadcn/ui のようなコンポーネントライブラリです。

たとえば Material UI の Snackbar コンポーネントでは、通知を画面の右上や右下など任意の位置に表示できるうえに、基本的には UIと干渉しないエリアにふわっと表示され、数秒で自然に消える設計になっています。

実装も洗練されており、「ユーザーの操作を邪魔しない」「情報を適切に伝える」というバランスが非常に優れていると感じます。

こうした実例を見ながら学ぶことは、UI/UXの理解を深める上でも有効だと日々実感しています。

2. ファーストビューで送信ボタンが見えず、次の行動がわかりにくい

別の事例では、簡単な入力フォームの画面で 送信ボタンがファーストビュー内に表示されないレイアウトになっていました。

いざ画面を開いても、入力欄しか表示されず「どうやって送信するの？」と戸惑ってしまう構成です。スクロールすればボタンが見えるのですが、一見するとそれに気づきにくい設計でした。

これはWebサイト制作の現場でよく意識される「ファーストビュー設計」の重要性が、Webアプリ側では見落とされてしまったケースだと感じました。

業務の制約上で小型モニターを使っているユーザーがいる場合であれば、見えないボタンは「存在しないボタン」と同じです。

最低限、送信ボタンはファーストビュー内に収めるよう調整するか、スクロールを促すアニメーション（たとえば矢印やフェードエフェクト）を加えるなど、次の行動につなげる工夫があれば、ユーザー体験は大きく変わっていたはずです。

3. チェックボックスUIの設計が操作を難しくしてしまう

チェックボックスで検索条件を選ぶUIも、気をつけたい点が多くあります。

ある画面では、「すべて選択」ボタンはあるのに、「すべて解除」ボタンが存在せず、一度全選択してしまうと一つ一つ手動で外すしかないという不便な設計になっていました。

さらに別の検索画面では、チェックを入れた瞬間に「必須チェック」が走ってしまい、間違ってチェックを入れたのに、他の選択肢を入れないと外すことすらできないという仕様になっていたこともあります。

このような実装では、ユーザーが自由に試行錯誤することを妨げてしまいます。

バリデーションは「検索」ボタンを押したときなど、操作確定のタイミングで行うようにすれば、こうしたストレスは防げるはずです。

また、チェックボックスに限らず、一度の操作で元に戻せる設計（Undo、リセット、解除など）はUXを考えるうえで非常に重要です。

UI/UXを学ぶうえで参考になるもの

私はUI/UXの学習については、Material UI や shadcn/ui のデモ画面やドキュメントを見ることが一番参考になるのではないかと感じています。

とくに、これらのライブラリは 「ユーザーにとって自然な挙動とは何か？」を高いレベルで追求した設計思想が感じられます。

一つひとつのコンポーネントがどこにどう表示されるか、どうアニメーションするか、どうやってユーザーの操作を妨げないか──そういった観点で「いいUIは何が違うのか」を観察することは、日々の開発にも活かせる気づきが多いです。

おわりに

Webアプリケーションの開発では、技術的な要素やAPIとのやり取り、状態管理など多くの工夫が必要ですが、最終的にユーザーが触れるのはUIであり、そこが「使いにくい」と感じられてしまえば、どんなに裏側が良くできていても良い評価は得られにくいです。

Web制作で培ってきた「ユーザー目線」の感覚は、Webアプリ開発でも活きる部分がたくさんあると感じています。

今後も「ユーザーにとって自然か」「気持ちよく操作できるか」という視点を持ちつつ、少しずつ引き出しを増やしていけたらと思っています。