SlideShare a Scribd company logo
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デザイナー:
「このボタンの何が問題なんだ?」
やってはいけないこと
近い!似てる!意味が分からない!寄りかかりたくな
る!押し易い!押したくなる!取り返しがつかない!
ユーザーは絶対やっちゃう!!
ユーザーは絶対やっちゃう!!
ありがとうございました!

More Related Content

What's hot

「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライドTakayuki Fukatsu
 
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語るData × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語るYoshiki Hayama
 
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜Yoshiki Hayama
 
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018Yoshiki Hayama
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回Yoshiki Hayama
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割Kenichi Suzuki
 
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜Yoshiki Hayama
 
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論Yoshiki Hayama
 
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回Yoshiki Hayama
 
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTERメンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTERYoshiki Hayama
 
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~Yoshiki Hayama
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!Yoshiki Hayama
 
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」Kazuki Yamashita
 
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!!  Vol.1 UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!!  Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1 Yoshiki Hayama
 
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよUXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価 ~俺様企画はだめなのよMasaya Ando
 
視聴者に優しいプレゼン資料の作り方
視聴者に優しいプレゼン資料の作り方視聴者に優しいプレゼン資料の作り方
視聴者に優しいプレゼン資料の作り方akihiro_0228
 
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考えるUXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考えるYoshiki Hayama
 
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールスお客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールスYoshiki Hayama
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEYoshiki Hayama
 

What's hot (20)

「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
 
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語るData × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
 
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
 
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
はじめてのUXデザイン、はじめてのデザイン思考 〜現場で使えるように〜:ISE Technical Conference 2018
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
 
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
“UXデザイン”のキモ『ユーザーインタビュー』の具体的テクニックを詳解!| UXデザイン基礎セミナー 第2回
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
 
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
 
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
 
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
 
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTERメンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
 
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
 
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
 
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!!  Vol.1 UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!!  Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
 
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよUXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価 ~俺様企画はだめなのよ
 
視聴者に優しいプレゼン資料の作り方
視聴者に優しいプレゼン資料の作り方視聴者に優しいプレゼン資料の作り方
視聴者に優しいプレゼン資料の作り方
 
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考えるUXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
 
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールスお客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
 

Viewers also liked

UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会INI株式会社
 
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン企画が考えるスマホUIデザイン
企画が考えるスマホUIデザインKatsumi Mizushima
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -wariemon
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意Yasuhisa Hasegawa
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! Akiko Ohtsuka
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインRoy Kim
 
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -Shoko Tanaka
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザインHironobu Aoki
 
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループアプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループKenichi Suzuki
 
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例yosuke sato
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話Kazuki Yamashita
 
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美schoowebcampus
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1Yu Morita
 
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザインKonomi Kawaharada
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩井上 誠
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_uxSaori Matsui
 
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化Hiroki Takaba
 
UIの話は会議室でするな
UIの話は会議室でするなUIの話は会議室でするな
UIの話は会議室でするなShingo Katsushima
 

Viewers also liked (20)

UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
 
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
UX / UIデザインって何?
UX / UIデザインって何?UX / UIデザインって何?
UX / UIデザインって何?
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
 
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザイン
 
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループアプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
 
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
 
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
 
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_ux
 
UXとブランド
UXとブランドUXとブランド
UXとブランド
 
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
 
UIの話は会議室でするな
UIの話は会議室でするなUIの話は会議室でするな
UIの話は会議室でするな
 

Similar to UIデザインの基本

分かりやすいUXデザインの紹介
分かりやすいUXデザインの紹介分かりやすいUXデザインの紹介
分かりやすいUXデザインの紹介Roy Kim
 
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Roy Kim
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮schoowebcampus
 
AIビジネス推進人材育成プログラム
AIビジネス推進人材育成プログラムAIビジネス推進人材育成プログラム
AIビジネス推進人材育成プログラムmunjapan
 
UXMILKallnight_システム開発でデザイナーは何をすればいい?
UXMILKallnight_システム開発でデザイナーは何をすればいい?UXMILKallnight_システム開発でデザイナーは何をすればいい?
UXMILKallnight_システム開発でデザイナーは何をすればいい?Takami Yusuke
 
LT38テーマ1-1
LT38テーマ1-1LT38テーマ1-1
LT38テーマ1-1GIG inc.
 
Think User : UXデザインにおけるユーザー設計とは?
Think User : UXデザインにおけるユーザー設計とは?Think User : UXデザインにおけるユーザー設計とは?
Think User : UXデザインにおけるユーザー設計とは?Kazumi Miyamura
 
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_uploadVantan shinsuke miyaki_upload
Vantan shinsuke miyaki_uploadShinsuke Miyaki
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるためにMiho Yamamori
 
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座本間 和城
 
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)Jiji Kim
 
Poがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたかPoがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたか英明 伊藤
 
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」Fixel Inc.
 
明日から使える業務向けデザインシステムのご紹介
明日から使える業務向けデザインシステムのご紹介明日から使える業務向けデザインシステムのご紹介
明日から使える業務向けデザインシステムのご紹介Fixel Inc.
 
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」Shigeyuki Kameda
 
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』Ryohei Sogo
 
AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介munjapan
 
AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介munjapan
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923Hub DotnetDeveloper
 

Similar to UIデザインの基本 (20)

分かりやすいUXデザインの紹介
分かりやすいUXデザインの紹介分かりやすいUXデザインの紹介
分かりやすいUXデザインの紹介
 
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
 
AIビジネス推進人材育成プログラム
AIビジネス推進人材育成プログラムAIビジネス推進人材育成プログラム
AIビジネス推進人材育成プログラム
 
UXMILKallnight_システム開発でデザイナーは何をすればいい?
UXMILKallnight_システム開発でデザイナーは何をすればいい?UXMILKallnight_システム開発でデザイナーは何をすればいい?
UXMILKallnight_システム開発でデザイナーは何をすればいい?
 
LT38テーマ1-1
LT38テーマ1-1LT38テーマ1-1
LT38テーマ1-1
 
Think User : UXデザインにおけるユーザー設計とは?
Think User : UXデザインにおけるユーザー設計とは?Think User : UXデザインにおけるユーザー設計とは?
Think User : UXデザインにおけるユーザー設計とは?
 
Business designer
Business designerBusiness designer
Business designer
 
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_uploadVantan shinsuke miyaki_upload
Vantan shinsuke miyaki_upload
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
 
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
 
Poがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたかPoがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたか
 
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
 
明日から使える業務向けデザインシステムのご紹介
明日から使える業務向けデザインシステムのご紹介明日から使える業務向けデザインシステムのご紹介
明日から使える業務向けデザインシステムのご紹介
 
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」
 
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
 
AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介
 
AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
 

More from Roy Kim

Customer Experience vs User Experience
Customer Experience vs User ExperienceCustomer Experience vs User Experience
Customer Experience vs User ExperienceRoy Kim
 
Ux for lean startups
Ux for lean startupsUx for lean startups
Ux for lean startupsRoy Kim
 
Githubのブランチ運用戦略
Githubのブランチ運用戦略Githubのブランチ運用戦略
Githubのブランチ運用戦略Roy Kim
 
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイントRoy Kim
 
Summary of Digital Information from Understanding Context
Summary of Digital Information from Understanding ContextSummary of Digital Information from Understanding Context
Summary of Digital Information from Understanding ContextRoy Kim
 
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方Roy Kim
 

More from Roy Kim (6)

Customer Experience vs User Experience
Customer Experience vs User ExperienceCustomer Experience vs User Experience
Customer Experience vs User Experience
 
Ux for lean startups
Ux for lean startupsUx for lean startups
Ux for lean startups
 
Githubのブランチ運用戦略
Githubのブランチ運用戦略Githubのブランチ運用戦略
Githubのブランチ運用戦略
 
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
 
Summary of Digital Information from Understanding Context
Summary of Digital Information from Understanding ContextSummary of Digital Information from Understanding Context
Summary of Digital Information from Understanding Context
 
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
 

UIデザインの基本