はじめに

サイバーエージェント26卒内定者 Advent Calendarの16日目の記事です。

フロントエンドエンジニアとして26卒で入社予定の森です。
本記事では、フロントエンドエンジニアにとっても重要な領域であるUIデザインについて学ぶため、「プロセス・オブ・UI/UX［UIデザイン編］実践形式で学ぶワイヤーフレームからビジュアルデザイン・開発連携まで」という本を読みました。その感想と得られたTipsを共有したいと思います。

読み始めたきっかけ

私はフロントエンドエンジニアでありながら、綺麗なスタイリングや画面構成を作れないことにモヤモヤを感じていました。また、さまざまな場所でプロダクト作成に携わる中で、プロダクトの品質が企業の信頼性に直結すると実感したことが、本書を手に取ったきっかけです。

勉強になったこと

1. ステップ数を減らす ≠ ユーザの目的達成に近づく

本書では、ユーザの設定画面を例に挙げて説明されていました。ここでいうユーザの目的は「設定を編集できること」です。
私たちは設定画面ですべての項目を一度に表示させるような画面を作りがちですが、特定の項目を編集したいときに、どこにその項目があるのかを見つけるのが大変になってしまうこともあります。そのため、ステップ数が増えても、名前や住所などセクションごとに分ける等の工夫をし、ユーザが目的達成に集中できる設計にすることが大切だと学びました。

2. 様々なモーダルの使い分け

モーダルにもフルモーダル、セミモーダル、ハーフモーダルなど、さまざまな種類があります。フルモーダルは一時的に機能を大きく切り替えるときに使います。セミモーダルは、条件設定や検索など、一時的に関連する情報を操作・編集していることを伝えるときに使用します。ハーフモーダルは、地図のスポットの詳細情報を示すときなど、元の画面と両方見せたいときに適しています。これまでフィーリングで実装していたことが多かったので、ユーザのアクションの属性に基づいてきちんと使い分けていきたいと思います。

フルモーダル

セミモーダル

ハーフモーダル

3. メニュー構成の軸

タブ内に入れる機能を選定するときなどに重要な考え方として、メニュー構成の軸があります。メニュー構成の決め方には、要件から機能をグルーピングする「情報整理軸」、ユーザの行動から考える「行動軸」、実装する機能単位で整理する「機能軸」、ビジネス上の目的を達成できそうな機能を優先する「ビジネス軸」などがあります。
これまで情報整理軸で考えることが多かったので、他の視点が増えて勉強になりました。プロダクトの要件達成やユーザに対するコンセプトを遵守することが前提にありますが、これらの軸で複数の構成案を考えることで、どちらにも寄り添った最適な案が生み出せると感じました。

4. ユーザの視線を意識する

ユーザの視線が戻ることは想定しない設計が望ましいです。たとえば、「すべてをみる」「もっとみる」などの追加情報を示すボタンは、タイトルの横に置くよりも、スクロールした先に置くほうが視線移動が自然で良いです。また、ファーストビュー（画面を開いたときに最初に見える画面）に、なるべくユーザの欲しい情報を置くことで離脱を防ぐことができます。

「すべて見る」と「もっと見る」

5. ボタンの文言は動詞にする

ボタンの文言は、「保存」よりも「保存する」、「次へ」よりも「次に進む」など、動詞形式にすることが推奨されます。ユーザのアクションを表現することで、そのボタンを押下した結果をユーザに想像しやすくするためです。

まとめ

AIによってコーディングが人間の手から代替されつつある中で、コーディング以前の設計やプロダクトデザインに、より重きが置かれるようになると考えています。
プロダクトの品質は、その企業の信用に直結します。だからこそ、フロントエンドエンジニアとしても、ただコードを書くだけでなく、ユーザ視点に立った設計思想を持つことが重要です。今回学んだUIデザインの原則を意識しながら、ユーザにとって使いやすく、ビジネス目標の達成にも貢献できるプロダクト作りを目指していきたいと思います。