はじめに

デザイナーでなくとも、フロントエンド / アプリケーションエンジニアがUI/UXデザインに関わる場面は少なくありません。また、デザイナーがいない小規模チームや個人開発においては、エンジニアが全てのUI/UXを設計することになります。

一方で、エンジニアがUI/UXについて学ぶ機会は意外と少ないのではないでしょうか。悲しいことに「エンジニアが作る画面はダサい…」などと揶揄されてしまうことも。せっかく優れた機能を開発しても、UI/UXが悪いせいで評価を落とすのは非常にもったいないですよね。

そこで、本記事ではデザインを専門としないエンジニアがUI/UXを改善するための参考書籍 / 記事を5つ紹介します。

想定読者

UI/UXデザインに関わる機会があるフロントエンド / アプリケーションエンジニア
おしゃれで使いやすいアプリケーションを開発したい方
画面設計やコンポーネント設計において「何となく」のデザインを脱したい方

1. ノンデザイナーズ・デザインブック［第4版］

「デザイナーではない人」のために書かれた、デザイン基礎の世界的ロングセラーです。

本書ではデザインの4原則として「近接 / 整列 / 反復 / コントラスト」を提示しており、良い例と悪い例を挙げながら原則の具体的な適用方法を解説しています。
取り扱う題材は印刷物が中心ですが、4原則そのものは普遍的であり、UIに限らずドキュメントやプレゼン資料などあらゆる成果物に応用することができます。

「作成したUIや資料がなんとなく見づらい」「なぜこれは綺麗に見えるのか言語化できない」といった悩みを抱える方には特におすすめです。
一読するだけで、普段私たちが目にする様々なデザインの見え方が変わると思います。

2. UIデザインのアイデア帳アプリ・Web制作の現場で使える基本＋実践ノウハウ83

その名の通り、UI設計でよく使われるパターンを「アイデア帳」として収録した一冊です。

フォーム、リスト、ナビゲーション、エラー表示など、現場で頻出するUIパターンについて、グッドプラクティスが具体的なサンプルと共に83項目にわたって紹介されています。
「このパターンはどう実装するのが正解だろう？」と迷ったとき、辞書のように引いて参照できる構成になっています。
また、アイデア帳ではありますが、UIデザインの基礎となる考え方についても体系的に解説しています。

UI/UXを学びたいエンジニアにとりあえず一冊だけ推薦するなら本書を選択します。
コンポーネントを日常的に作るようなエンジニアには特におすすめです。

3. オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理

タスク（やること、動詞）を起点とするのではなく、オブジェクト（もの、名詞）を起点としてUIを設計する方法論について解説した一冊です。

タスク指向でUIをデザインすると、タスクが多く複雑になるほど、UIもそれに引っ張られて煩雑で扱いづらいものになっていきます。
一方、オブジェクト指向でデザインすると画面数が減って作業効率が高まり、また開発効率や拡張性も向上します。「先にユーザーが扱う対象（オブジェクト）を決め、操作（アクション）は後から付与する」というアプローチは、エンジニアに馴染み深いオブジェクト指向開発のメンタルモデルともそのまま重なります。

特に、タスクや処理フローが多く複雑な業務用アプリケーションなどにおいては、要件をそのまま実現しようとするとタスク指向になってしまいがちです。
私は実務で業務アプリケーションを開発することが多いので、本書にある手法が一番適用しやすいと感じました。

4. Sociomedia ヒューマンインターフェースガイドライン

ソシオメディア社が公開している、ヒューマンインターフェースデザインにおける100個の指針がまとめられたガイドラインです。

Apple Human Interface Guidelines や Google Material Design と比較して簡潔にまとめられていて、100個の設計原則・コンポーネント・パターンを一問一答のような形式で読み進めることができます。
全コンテンツがWeb上で公開されており、無料で参照可能なのも嬉しいポイントです。

ちなみに前述の「オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理」も、ソシオメディア社の方が執筆されています。
オブジェクト指向UIデザインと合わせて学ぶことで、UIデザインの基礎を一通り網羅することができるでしょう。

5. なぜエンジニアが作る画面はダサいのか…?『理由』と『対策』を徹底解説【エンジニア向け画面デザイン講座】

エンジニア（SE）とデザイナーの画面設計プロセスの違いを、具体的なシナリオを用いて対比した記事です。

情報を起点として段階的に積み上げていくエンジニア的アプローチと、使用シーンを想定して必要な情報を載せていくデザイナー的アプローチを対比的に並べており、完成画面の「パッと見の伝わりやすさ」に差が生まれる理由が丁寧に解き明かされています。
末尾には6つの心得が簡潔にまとめられており、エンジニアが明日からの画面設計にそのまま持ち込める内容になっています。

拝読して、確かに私たちエンジニアはアプリケーション内部の情報やデータ構造を知っているばかりに、設計するUIもそれに引っ張られがちだと感じました。
一気に読み切れるボリュームなので、UI/UXデザインにそれほど興味がない方も是非一読していただきたいです。

おわりに

UI/UXは奥が深く、ある程度のベストプラクティスはあっても唯一の正解は存在しません。私もデザインに日々悪戦苦闘していますが、ここで紹介した書籍 / 記事から学んだ原則やパターンは実際に活かせる場面が多く、揺るがない指針として非常に役に立っています。

この記事がエンジニアの方々にとってUI/UXデザインを学ぶ第一歩になれば幸いです。