以下、UIデザインを行う上で50点を取るためのルールです。
ルールは３つ
- 原則・法則を厳守し、アンチパターンを徹底的に避けること
- 難易度の高いデザインを行わないこと
- アプリケーションで扱う情報の全体像と、各情報の関連、そして、各画面で中心的に着目する情報を整理すること
上記を守れば 100点は取れないですが、50点を取るまでは可能です。
原則・法則の厳守とアンチパターンの回避
「近接」「整列」「強弱」「反復」の4原則は徹底的に守りましょう。
自分は「守破離」の「守」段階だと考えましょう。
アンチパターン同士が競合した場合は、そうなっている状況自体が何かおかしいと考えましょう。
どうしても解消できない場合は、いったんマシな方のアンチパターンを取っておきます。
以下書籍の紹介です。徹底的に守ってください。
- 「ノンデザイナーズ・デザインブック」（https://www.amazon.co.jp/dp/4839955557 ）
- 「インターフェースデザインのお約束」（https://www.amazon.co.jp/dp/4873118948 ）
以下Sociomedia社がまとめているガイドラインです。こちらも徹底的に守ります。
- 「ヒューマンインターフェース ガイドライン」（https://www.sociomedia.co.jp/category/shig ）
難易度の高いデザイン禁止
以下は禁止です。
- UIコンポーネントの自作
- 色の利用
- アニメーションの利用
UIコンポーネント
自作はNGです。世の中のCSSフレームワークが提供しているUIコンポーネントを使いましょう。
できれば「マテリアルデザイン」を使いましょう（https://materializecss.com/ ）
できなければ「Bootstrap」を使いましょう（https://getbootstrap.jp/ ）
他にもたくさんありますが、欲をかいて手を出すのはNGです。
UIデザインを上記の規定のコンポーネントで表現できない場合は、それは何かがおかしいです。
色
色はNGです。白～黒のグレースケールで作成しましょう。
当然良いプロダクトは良い色を使っています。良いデザイナーは良い色の選択ができます。
ただし、初級UIデザイナーにとっては、色は邪魔です。
CSSフレームワークが提供するグレースケールのパレットから選択するようにしましょう。
どうしても色が欲しい場合は、UIデザインが完成したあとにちょっとだけ色付けする程度としましょう。
アニメーション
アニメーションはNGです。魅力的に感じますが、それは罠です。
作成に時間がかかる割に、ユーザー体験を悪くする可能性が高いです。
「守破離」の「守」を守りましょう。
ただし、元々UIコンポーネントにあるアニメーションを消す必要までは無いです。（ローディングのUI等）
アプリケーションで扱う情報の整理
情報はUIデザインの要です。
これまで記載したルールを守りつつ、アプリケーション上で扱う情報を過不足無く配置していきます。
これでようやく50点を取ることができます。
以下のプロセスを踏んでいきます。
用語の統一
「同じ情報は同じ用語で呼ぶ。違う情報は違う用語で呼ぶ」を徹底しましょう。
用語集（日本語、英語、説明）が無ければ作成しましょう。
アプリケーション上で使う用語は、用語集の中からのみ使えるようにしましょう。
用語集の作成は、マネージャー、クライアントにも協力してもらい、全員で共有しましょう。
情報同士の関連整理
いわゆる「ドメインモデル」や「情報モデル」「概念ER図」と呼ばれるような、四角が線で繋がれた一枚絵を探しましょう。
もし無ければ、マネージャー、クライアント、エンジニアと協力して作成しましょう。
これは用語集とセットで使います。
以下の点などを考慮しつつ作成します。
- 情報同士は、直接つながるのか間接的につながるのか
- 情報は別の情報に所属する属性か、別の情報の具体化／抽象化した情報か、別の情報の構成要素か
- 情報同士は、一対一でつながるのか、一対多でつながるのか、多対多でつながるのか
- 情報は「発生時刻」を伴う情報か否か
- 情報は更新されるか否か
画面への情報配置
情報同士の関連が整理ができた後は、アプリケーションで扱う情報を参照できる画面のUIを設計していきます。登録や更新フォームなどは後回しとします。
関連図の中で注目する情報をピックアップし、その情報の周辺の関連情報を関連を明示できるようにUIコンポーネントを使って表現していきます。
その後、アプリケーションに求められる機能に沿って、各画面で表示する情報の取捨選択します。
参考書籍
- 「オブジェクト指向UIデザイン」（https://www.amazon.co.jp/dp/4297113511 ）
- 「ユースケース駆動開発実践ガイド」（https://www.amazon.co.jp/dp/4798114456 ）
あとがき
「デザインには正解が無い」と言われることがあります。
UIデザインにおいては「UIの表現方法の選択肢が無数に存在すること」がその要因の一つだと思います。
UIデザイン初学者はそのUIの表現方法の選択肢の多さに圧倒されてしまい、情報設計が不十分なままでアプリケーションのデザインを完了してしまいます。
そのような事態を防ぐことができればと思い、記事では厳し目のルールを記載しています。
画面への情報配置についてはかなり端折っています。書籍「オブジェクト指向UIデザイン」の中で、習得していただけると幸いです。