UX/UIデザイン

ねらい

使いやすく心地よい体験を設計する方法を学びます。このレッスンを終えると、UXデザインの五段階モデル、情報デザインの原則、入力チェックとコード設計の種類、Webデザインの手法、ユニバーサルデザインの考え方を説明できるようになります。

UXデザイン：体験を5つの段階で設計する

UX（User Experience）は、システムやサービスを通じて利用者が得る体験の全体を指します。UXデザインの進め方を整理したものがUXデザインの五段階モデルで、抽象から具体へ、戦略、要件、構造、骨格、表層の順に積み上げます。何のために作るのかという戦略から始まり、最後に色や文字などの見た目である表層に至る、という順序が肝心です。

情報デザイン：分かりやすさの原則

情報を可視化し構造化して伝える設計を情報デザインといいます。レイアウトの基本がデザインの原則で、関係の近いものを近くに置く近接、端をそろえる整列、同じ様式を繰り返す反復、違いを際立たせる対比の4つです。データを図解で伝えるインフォグラフィック、文字の書体と組み方の設計であるタイポグラフィ、デザインの方向性をイメージ画像で集めて共有するムードボードといった手法があります。

画面設計・帳票設計・コード設計

入力チェック

画面設計では、誤った入力を早く見つける入力チェックを組み込みます。

コードの誤入力を検出するために付け加える検査用の文字をチェックキャラクターといいます。帳票設計では、定型の枠をあらかじめ用意して印字と重ねるフォームオーバーレイが使われます。

コード設計

商品番号のようなコードには設計の型があります。連番を振る順番コード、意味のある区分で分ける区分コード（分類コード）、桁の位置に意味を持たせる桁別コード、内容を連想できる文字を使う表意コード、複数の方式を組み合わせる合成コードです。将来の件数の増加に耐えられる桁数を確保することが設計の要点です。

Webデザイン

Webデザインでは、スタイルシートでデザイン全体を統一し、複数の環境で正しく表示されるように設計します。押さえておきたい手法と用語を挙げます。

1. レスポンシブWebデザインは、画面の幅に応じてレイアウトを切り替え、PCでもスマートフォンでも読みやすくする手法です。切り替えの条件はメディアクエリで記述します。
2. クロスブラウザは、複数種類のWebブラウザで同じように使えるようにする考慮です。基本機能をすべての環境に届け、対応環境では段階的に表現を高めるプログレッシブエンハンスメントという方針もあります。
3. 設計の初期には、画面の構成を線画で表すワイヤーフレームを作り、ナビゲーションやサイト内検索機能、画像を順に切り替えるカルーセルなどの配置を検討します。ボタンや案内の文言を体験の一部として設計することをUXライティングといいます。

人間中心設計とユニバーサルデザイン

利用者を中心に据えて設計と評価を繰り返す考え方を人間中心設計といい、JIS Z 8530（ISO 9241-210）として規格化されています。

年齢、文化、障害の有無、能力の違いにかかわらず、できる限り多くの人が使えることを目指す考え方がユニバーサルデザインです。絵文字で意味を伝えるピクトグラム、読み間違えにくい字形のユニバーサルデザイン（UD）フォントが実例です。Webのアクセシビリティについては、W3CのWAIが策定するWCAGというガイドラインと、日本のJIS X 8341という規格があります。

できあがったインタフェースの使いやすさは、専門家が経験則に照らして点検するヒューリスティック評価や、実際の利用者に操作してもらうユーザビリティテストで評価します。

例題

次の問いに答えてください。

問1 デザインの4原則のうち、関係の近い要素を近くに配置する原則を何といいますか。

問2 言語が分からなくても意味が伝わるように、絵文字で情報を表す表現を何といいますか。

解答と解説

問1の答えは近接です。整列、反復、対比と合わせた4つが、情報デザインのレイアウトの基本原則です。

問2の答えはピクトグラムです。非常口の案内表示が身近な例で、ユニバーサルデザインの代表的な手法です。

応用

本試験を意識した問題を解いてみましょう。

問 入力された値が、あらかじめ定めた上限と下限の範囲内に収まっているかを検査する入力チェックはどれでしょうか。次の中から選んでください。

1. リミットチェック
2. ニューメリックチェック
3. フォーマットチェック
4. 照合チェック

解答と解説

答えは1のリミットチェックです。たとえば「年齢は0から120まで」のように、値の範囲で誤りを検出します。2のニューメリックチェックは、数値であるべき欄に数値以外が入っていないかという「型」の検査であり、範囲までは見ません。3のフォーマットチェックは日付の形式などの「形」の検査です。4の照合チェックは、台帳などに登録済みの値と一致するかという「実在」の検査であり、範囲の検査ではありません。