Basics of UI Design
これだけは知っておこう
NCデザイン＆コンサルティング株式会社
Roy Kim / 金 成哲
@Roy_S_Kim

自己紹介
金 成哲 / @Roy_S_Kim
kim@ncdc.co.jp
ソリューションディレクター
NCデザイン＆コンサルティング株式会社
http://ncdc.co.jp
K

企業システム
コンサルティング
＆
ソリューション開発
やっていること
スマートフォン
＆
タブレットPC
UX Design
NCDC

やっていること (コンサルティングの他に)
スマートデバイスと
企業システムについて語った
有一の本

やっていること (コンサルティングの他に)
Enterprises Mobile BaaS
サーバー開発不要！
低コスト、短納期！
AppPot

UIデザインの基礎
（基本要素）
基本の中の基本

UIデザインの基本？
‣ UIのヴィジュアルデザインにも論理的思考は存在
する
‣ これをデザインの理論と呼ぶ
‣ デザインの基本的な要素とその背景にある理論
を知るとそれなりのUIデザインはできる。
（美的センスがなくても最悪のUIにはならない）

UIデザインの基本要素
‣ 近接
‣ 整列
‣ 反復
‣ コントラスト
‣ フォント
各要素の特性を理解して
適切に使えばそれなりの
デザインはできる！

近接
‣ 関連が強いものを近くに配置する
‣ 要素間の距離を持って各要素間の関係の強さを
表現する
‣ 情報を視覚的に構造化、組織化することに
よってユーザーの理解を助ける
‣ 空間（スペース）は近接の大事な要素

近接 UI要素間の論理的な
グルーピング

近接
余計なスペースが多くて
もったいない！？

近接
‣ 関連が強いものを近くに配置する
‣ 要素間の距離を持って各要素間の関係の強さを
表現する
‣ 情報を視覚的に構造化、組織化することに
よってユーザーの理解を助ける
‣ 空間（スペース）は近接の大事な要素
スペースの重要性を
見せましょう！

近接
‣関連が強いものを近くに配置する
‣要素間の距離を持って各要素間の
関係の強さを表現する
‣情報を視覚的に構造化、組織化す
ることに
よってユーザーの理解を助ける
‣空間（スペース）は整列の大事な
要素
スペースを排除す
るとこうなる！！
ものがあふれるリ
ビングの例

近接 適切なスペースで
余裕と高級感を出す
情報量は増えるが
窮屈な感じになる

近接 適切なスペースで
余裕と高級感を出す
情報量は増えるが
窮屈な感じになる

近接の悪い適用例

整列
‣ 画面内の全ての要素を意図をもって配置する
‣ 内容が明快に伝わり、洗練されたイメージを
与える

整列

整列
接近の要素も

反復
‣ 画面内の要素を統一してそれを繰り返して使う事
でパターン化すること
‣ ユーザーの学習コストを減らし、誤操作を防ぐ
‣ ブランドや世界観を作り出す

反復の例
Good!

反復の例

反復の例
実は全部同じ製品の画面
ですが・・・
No Good!

反復の誤用例
位置と色の誤用
OKCancel OK Cancel

コントラスト
‣ 画面の要素に特徴を与えて他の要素と
区別し易くすること
‣ ユーザーの注意を意図した方向に向かせるに
有効
‣ 多様な要素を活用してコントラストを生成
‣ 色、サイズ、形、スペース、フォント等

コントラスト
コントラストの強い
デザイン
コントラストの弱い
デザイン

コントラスト生成の例
向き 色

コントラスト生成の例
形サイズ

フォント
‣ 画面に表示する書体で各要素の意味と要素間の
関係を表現する
‣ フォントのイメージを理解し適切に使うことが
大事
‣ 各環境で使用可能なフォントは異なるので注意

フォント
日本語のふぉんと
日本語のふぉんと
日本語のふぉんと
日本語のふぉんと
日本語のふぉんと
日本語のふぉんと

ITエンジニアに易しい
実践的UI/UXデザイン
NCデザイン＆コンサルティング株式会社
金 成哲 (Roy S. Kim)
@Roy_S_Kim
フォント：
Hiragino Maru Gothic ProN

ITエンジニアに易しい
実践的UI/UXデザイン
NCデザイン＆コンサルティング株式会社
金 成哲 (Roy S. Kim)
@Roy_S_Kim
フォント：
Hiragino Gaku Gothic StdN

さらに使い易いUIにするには、
‣ 近接
‣ 整列
‣ 反復
‣ コントラスト
‣ フォント
‣ インタラクション
‣ メタファー
‣ アフォーダンス
‣ デザイン言語
+

インタラクション
‣ ユーザーの操作に対する適切な反応を示すこと
‣ ボタンのオン／オフ、画面移動のアニメーション等
‣ 音、振動、光による通知
‣ 砂時計、プログレスバーによる状況の表示等
‣ ユーザーに安心感と信頼感、楽しさ等を与える

メタファー
‣ 現実のもの等、ユーザーがその使用方法に慣れ
ているものを真似てUIを作成する
‣ ユーザーが分かり易い。（やり過ぎには注意）

アフォーダンス（=シグニファイア）
‣ 物、環境に対する人間の反応を上手く利用する
‣ アフォーダンスを利用してユーザーが気づくようにデザインされた物
をシグニファイアと言う
‣ 「ボタンっぽいのがあれば押したくなる∼」

デザイン言語
‣ ユーザーが既に慣れているUI要素を利用する
これはリンクです。
これはリンクではありません。
何がリンクに見える？
今は多くの人が 知っている「スライドして削除」

これさえ覚えれば、できる
‣ 近接
‣ 整列
‣ 反復
‣ コントラスト
‣ フォント
‣ インタラクション
‣ メタファー
‣ アフォーダンス
‣ 既存デザイン言語
+
ような気がする

One More Thing
Some more things

ユーザーの特徴を考慮する
あなたのユーザー？

デバイスの特徴を考慮する

使われる環境を考慮する

やってはいけないこと
映画Monsters vs Aliensから
※映画の宣伝にもなるので画像の利用にはご理解を！

やってはいけないこと
アメリカ大統領：
「コーヒー飲みたい」

やってはいけないこと
閣僚達：
「やめて下さい！！」Oh My God!!

やってはいけないこと

やってはいけないこと
実は、この人がUIデザイナー：
「このボタンの何が問題なんだ？」

やってはいけないこと
近い！似てる！意味が分からない！寄りかかりたくな
る！押し易い！押したくなる！取り返しがつかない！

ユーザーは絶対やっちゃう！！

ユーザーは絶対やっちゃう！！
ありがとうございました！