はじめに
こんにちは！ピクトリンク事業部開発部の今川です。
今回は、フロントエンドエンジニアとして普段どんなことを考えながらUI/UX設計をしているかを、自分なりに言語化してみようと思います💪
前半のこの記事ではUIに関する5項目をまとめます！
UI/UX設計ってデザイナーさんの仕事とちゃうん？
弊社では、お客様に使っていただくサービスの開発には基本的にデザイナーさんがアサインされます。
ピクトリンクにも見ているだけでわくわくするような素敵なデザインのページがたくさんありますが、これらのUI/UX設計は主にデザイナーさんのお仕事です✨
では、フロントエンジニアがUI/UX設計を意識するのはどういうときかというと、社内ツールを開発するときです。
社内ツールにおけるUI/UXはいかに効率的に業務ができるかが肝になります。
この記事では効率的に業務ができる（＝円滑・安全に操作できる）UI/UXを作るために、フロントエンジニアとして私が普段気をつけているポイントを書いていこうと思います！
デザインガイドラインを作る
社内ツールではUIの分かりにくさがそのまま業務ミスにつながることがあります。
例えば、
こっちではキャンセルが青ボタンで実行が赤ボタンだったのに、別の画面では色が逆になっている
→ キャンセルするつもりで青ボタンを押したら、実行されてしまった！😱
こういった誤認からの誤操作は、社内ツールとしては極力避けたい事態です。
そこでまず意識しているのがデザインの意味やルール（＝デザインガイドライン）を明確にすることです。
1. 色の意味
私の場合、色は装飾というより情報を伝えるための手段として使うようにしています。
- お客様に影響がある操作
- 他の人に影響がない操作
- エラーや警告
といった違いが色を見るだけである程度分かる状態が理想です。
ここで気をつけているのは色を増やしすぎないことです。
色が増えるほどユーザーが覚えるルールも増えてしまい、結果的に認知負荷が高くなります。
2. 文字や要素の大きさ
シンプルに大きさ＝情報の重要度と考えてそれぞれの要素の大きさを決めています。
重要度が低い情報を大きく表示すると画面スペースを無駄にしてしまいますし、
よく使うボタンが小さすぎると操作性が悪くなります。
パッと見で重要な情報が分かって、
よく見ると必要な情報がきちんと揃っている、
そんな画面を目指しています。
3. 余白を揃える
- 要素の端が揃っていない
- 意味なく要素ごとの間隔の大きさが違う
これだけで視認性は一気に下がります。
「なんかこのページ、色やパーツは綺麗なのに読みづらいな…」と感じるときは
余白が原因なことがめちゃくちゃ多いと思っています。
個人的にはBlock spacingとPadding-based layoutの組み合わせがイチオシです🫶
- 情報のまとまりごとにブロック化する
- そのブロックの周りに、ガイドラインで決めた大きさの余白（Padding）をつける
- ブロックを組み合わせて、画面を構成していく
という手法なのですが、初心者でも迷いなく適切に余白を付けられるので大好きな考え方です。
余白を適切に使うことでどこまでが同じ属性の情報なのかが一目で分かり、迷いはかなり減ります。
- 似た情報は近くに置く（＝同じブロックに入れる）
- 種類が違う情報を近くに置くときは、余白や枠などでしっかり区切る
など、常に情報のまとまりを意識しています。
再利用性を考える
4. パーツ分け
UIを作るときは、うまくパーツ分けできるか・そのパーツを再利用できそうかを考えます。
これはコーディング量の削減というより
迷わずデザインガイドラインを守ったUIを作れる状態を保ちたい
という意味合いが強いです。
ReactやVueに代表されるコンポーネント指向のUIフレームワークで開発していると、
UIのパーツ分けはそのままコンポーネント設計に直結します。
汎用的に使える小さなコンポーネントほどデザインガイドラインを意識して実装しておくことで、結果的にサービス全体にガイドラインを反映しやすくなります。
パーツが再利用しやすいということはデザインガイドラインがきちんと守られているサインでもあります👏
逆に、
- この画面のためだけにパーツを作らないといけない
- 他の場所に使い回そうとすると違和感がある
みたいなことを感じたときは
- デザインガイドラインが守られていない
- そもそもガイドライン自体が適切ではない
という可能性があるので見直すきっかけにしています。
5. 同じ操作が同じ見た目になっているか
同じ意味の操作には極力同じUIパーツ（見た目）を使うようにしています。
例えば、表示／非表示の切り替え操作が
- ある画面ではトグルボタン
- 別の画面ではラジオボタン
のようにバラついていると、
ユーザーは毎回「これは何の操作だろう？」「今どんな状態なんだろう？」と考えることになります🤔
こうした一瞬の迷いが積み重なるとUXを下げてしまうので、
アイコンや表現の統一は意識しているポイントです。
後半につづく！
次の記事ではUX設計する際に考えていること5つをまとめます✍️
