Submit Search
Upload
UIデザインの基本
•
54 likes
•
157,101 views
Roy Kim
Follow
このデザインのどこが悪いか?をより具体的に伝えることができるようになるため、これだけはしっておきたいUIデザインの基本の「き」
Read less
Read more
Design
Report
Share
Report
Share
1 of 50
Download now
Download to read offline
Recommended
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
Yoshiki Hayama
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
Yoshiki Hayama
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
プロダクトの強い軸を作るプロダクトマネジメントフレームワーク
プロダクトの強い軸を作るプロダクトマネジメントフレームワーク
kumiko koshiro
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
Yoshiki Hayama
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
Recommended
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
Yoshiki Hayama
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
Yoshiki Hayama
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
プロダクトの強い軸を作るプロダクトマネジメントフレームワーク
プロダクトの強い軸を作るプロダクトマネジメントフレームワーク
kumiko koshiro
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
もしプロダクトマネージャー・プロダクトチームにUXリサーチのメンターがついたら <レクイエム>
Yoshiki Hayama
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Yoshiki Hayama
液晶ディスプレイ購入者の心理マップ(EIZO FORIS FG2421 を中心に):2014年6月21日 リンクシェア フェア 2014
液晶ディスプレイ購入者の心理マップ(EIZO FORIS FG2421 を中心に):2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
Yoshiki Hayama
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
Yoshiki Hayama
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
Yoshiki Hayama
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
toshihiro ichitani
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
Yoshiki Hayama
UXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよ
Masaya Ando
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Yoshiki Hayama
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
Yoshiki Hayama
『UXデザインの教科書』を書きました
『UXデザインの教科書』を書きました
Masaya Ando
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
More Related Content
What's hot
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Yoshiki Hayama
液晶ディスプレイ購入者の心理マップ(EIZO FORIS FG2421 を中心に):2014年6月21日 リンクシェア フェア 2014
液晶ディスプレイ購入者の心理マップ(EIZO FORIS FG2421 を中心に):2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
Yoshiki Hayama
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
Yoshiki Hayama
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
Yoshiki Hayama
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
Yoshiki Hayama
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
toshihiro ichitani
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
Yoshiki Hayama
UXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよ
Masaya Ando
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Yoshiki Hayama
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
Yoshiki Hayama
『UXデザインの教科書』を書きました
『UXデザインの教科書』を書きました
Masaya Ando
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
What's hot
(20)
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
液晶ディスプレイ購入者の心理マップ(EIZO FORIS FG2421 を中心に):2014年6月21日 リンクシェア フェア 2014
液晶ディスプレイ購入者の心理マップ(EIZO FORIS FG2421 を中心に):2014年6月21日 リンクシェア フェア 2014
確実に良くするUI/UX設計
確実に良くするUI/UX設計
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
誰も教えてくれないペルソナのひみつ 〜ペルソナの上手な使いかた〜
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
実録 ペルソナが死ぬとき 〜ペルソナの上手な使いかた〜
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
UXデザインの海外最新「UXトレンドレポート2022」を読んで、考える
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
UXデザインとコンセプト評価~俺様企画はだめなのよ
UXデザインとコンセプト評価~俺様企画はだめなのよ
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
Data × UX - 定量分析と定性分析のシナジーをガチUXデザイナーが語る
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
『UXデザインの教科書』を書きました
『UXデザインの教科書』を書きました
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Viewers also liked
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
yosuke sato
はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
Konomi Kawaharada
UXはじめの一歩
UXはじめの一歩
井上 誠
0528 kanntigai ui_ux
0528 kanntigai ui_ux
Saori Matsui
UXとブランド
UXとブランド
Takehisa Gokaichi
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
UIの話は会議室でするな
UIの話は会議室でするな
Shingo Katsushima
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
Viewers also liked
(20)
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
UX / UIデザインって何?
UX / UIデザインって何?
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
UXのためのUIデザイン
UXのためのUIデザイン
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
はじめてのUXとUIの話
はじめてのUXとUIの話
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
UXはじめの一歩
UXはじめの一歩
0528 kanntigai ui_ux
0528 kanntigai ui_ux
UXとブランド
UXとブランド
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
UIの話は会議室でするな
UIの話は会議室でするな
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
Similar to UIデザインの基本
分かりやすいUXデザインの紹介
分かりやすいUXデザインの紹介
Roy Kim
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
Roy Kim
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
AIビジネス推進人材育成プログラム
AIビジネス推進人材育成プログラム
munjapan
UXMILKallnight_システム開発でデザイナーは何をすればいい?
UXMILKallnight_システム開発でデザイナーは何をすればいい?
Takami Yusuke
LT38テーマ1-1
LT38テーマ1-1
GIG inc.
Think User : UXデザインにおけるユーザー設計とは?
Think User : UXデザインにおけるユーザー設計とは?
Kazumi Miyamura
Business designer
Business designer
Daisuke Sugai
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_upload
Shinsuke Miyaki
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
本間 和城
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Jiji Kim
Poがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたか
英明 伊藤
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
Fixel Inc.
明日から使える業務向けデザインシステムのご紹介
明日から使える業務向けデザインシステムのご紹介
Fixel Inc.
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」
Shigeyuki Kameda
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
Ryohei Sogo
AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介
munjapan
AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介
munjapan
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
Hub DotnetDeveloper
Similar to UIデザインの基本
(20)
分かりやすいUXデザインの紹介
分かりやすいUXデザインの紹介
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
AIビジネス推進人材育成プログラム
AIビジネス推進人材育成プログラム
UXMILKallnight_システム開発でデザイナーは何をすればいい?
UXMILKallnight_システム開発でデザイナーは何をすればいい?
LT38テーマ1-1
LT38テーマ1-1
Think User : UXデザインにおけるユーザー設計とは?
Think User : UXデザインにおけるユーザー設計とは?
Business designer
Business designer
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_upload
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
【設計編Ver2】0からのディレクション講座
【設計編Ver2】0からのディレクション講座
0から始めるUXデザイン(UXデザインの組織を作る)
0から始めるUXデザイン(UXデザインの組織を作る)
Poがuxデザインをする上で何を指標にしてきたか
Poがuxデザインをする上で何を指標にしてきたか
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
明日から使える業務向けデザインシステムのご紹介
明日から使える業務向けデザインシステムのご紹介
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」
UXしくじり先生から学ぼう「AI&RPA開発に必要なUXデザインとは?」
AppPotモバイルアプリ開発『内製化』
AppPotモバイルアプリ開発『内製化』
AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介
AIビジネス推進人材育成プログラムのご紹介
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
More from Roy Kim
Customer Experience vs User Experience
Customer Experience vs User Experience
Roy Kim
Ux for lean startups
Ux for lean startups
Roy Kim
Githubのブランチ運用戦略
Githubのブランチ運用戦略
Roy Kim
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
Roy Kim
Summary of Digital Information from Understanding Context
Summary of Digital Information from Understanding Context
Roy Kim
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Roy Kim
More from Roy Kim
(6)
Customer Experience vs User Experience
Customer Experience vs User Experience
Ux for lean startups
Ux for lean startups
Githubのブランチ運用戦略
Githubのブランチ運用戦略
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
Summary of Digital Information from Understanding Context
Summary of Digital Information from Understanding Context
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
Swiftで説明する「モナド」:Swiftにおける関数型プログラミングの使い方
UIデザインの基本
1.
Basics of UI
Design これだけは知っておこう NCデザイン&コンサルティング株式会社 Roy Kim / 金 成哲 @Roy_S_Kim
2.
自己紹介 金 成哲 / @Roy_S_Kim kim@ncdc.co.jp ソリューションディレクター NCデザイン&コンサルティング株式会社 http://ncdc.co.jp K
3.
企業システム コンサルティング & ソリューション開発 やっていること スマートフォン & タブレットPC UX Design NCDC
4.
やっていること (コンサルティングの他に) スマートデバイスと 企業システムについて語った 有一の本
5.
やっていること (コンサルティングの他に) Enterprises Mobile
BaaS サーバー開発不要! 低コスト、短納期! AppPot
6.
UIデザインの基礎 (基本要素) 基本の中の基本
7.
UIデザインの基本? ‣ UIのヴィジュアルデザインにも論理的思考は存在 する ‣ これをデザインの理論と呼ぶ ‣
デザインの基本的な要素とその背景にある理論 を知るとそれなりのUIデザインはできる。 (美的センスがなくても最悪のUIにはならない)
8.
UIデザインの基本要素 ‣ 近接 ‣ 整列 ‣
反復 ‣ コントラスト ‣ フォント 各要素の特性を理解して 適切に使えばそれなりの デザインはできる!
9.
近接 ‣ 関連が強いものを近くに配置する ‣ 要素間の距離を持って各要素間の関係の強さを 表現する ‣
情報を視覚的に構造化、組織化することに よってユーザーの理解を助ける ‣ 空間(スペース)は近接の大事な要素
10.
近接 UI要素間の論理的な グルーピング
11.
近接 余計なスペースが多くて もったいない!?
12.
近接 ‣ 関連が強いものを近くに配置する ‣ 要素間の距離を持って各要素間の関係の強さを 表現する ‣
情報を視覚的に構造化、組織化することに よってユーザーの理解を助ける ‣ 空間(スペース)は近接の大事な要素 スペースの重要性を 見せましょう!
13.
近接 ‣関連が強いものを近くに配置する ‣要素間の距離を持って各要素間の 関係の強さを表現する ‣情報を視覚的に構造化、組織化す ることに よってユーザーの理解を助ける ‣空間(スペース)は整列の大事な 要素 スペースを排除す るとこうなる!! ものがあふれるリ ビングの例
14.
近接 適切なスペースで 余裕と高級感を出す 情報量は増えるが 窮屈な感じになる
15.
近接 適切なスペースで 余裕と高級感を出す 情報量は増えるが 窮屈な感じになる
16.
近接の悪い適用例
17.
整列 ‣ 画面内の全ての要素を意図をもって配置する ‣ 内容が明快に伝わり、洗練されたイメージを 与える
18.
整列
19.
整列 接近の要素も
20.
反復 ‣ 画面内の要素を統一してそれを繰り返して使う事 でパターン化すること ‣ ユーザーの学習コストを減らし、誤操作を防ぐ ‣
ブランドや世界観を作り出す
21.
反復の例 Good!
22.
反復の例
23.
反復の例 実は全部同じ製品の画面 ですが・・・ No Good!
24.
反復の誤用例 位置と色の誤用 OKCancel OK Cancel
25.
コントラスト ‣ 画面の要素に特徴を与えて他の要素と 区別し易くすること ‣ ユーザーの注意を意図した方向に向かせるに 有効 ‣
多様な要素を活用してコントラストを生成 ‣ 色、サイズ、形、スペース、フォント等
26.
コントラスト コントラストの強い デザイン コントラストの弱い デザイン
27.
コントラスト生成の例 向き 色
28.
コントラスト生成の例 形サイズ
29.
フォント ‣ 画面に表示する書体で各要素の意味と要素間の 関係を表現する ‣ フォントのイメージを理解し適切に使うことが 大事 ‣
各環境で使用可能なフォントは異なるので注意
30.
フォント 日本語のふぉんと 日本語のふぉんと 日本語のふぉんと 日本語のふぉんと 日本語のふぉんと 日本語のふぉんと
31.
ITエンジニアに易しい 実践的UI/UXデザイン NCデザイン&コンサルティング株式会社 金 成哲 (Roy S.
Kim) @Roy_S_Kim フォント: Hiragino Maru Gothic ProN
32.
ITエンジニアに易しい 実践的UI/UXデザイン NCデザイン&コンサルティング株式会社 金 成哲 (Roy S.
Kim) @Roy_S_Kim フォント: Hiragino Gaku Gothic StdN
33.
さらに使い易いUIにするには、 ‣ 近接 ‣ 整列 ‣
反復 ‣ コントラスト ‣ フォント ‣ インタラクション ‣ メタファー ‣ アフォーダンス ‣ デザイン言語 +
34.
インタラクション ‣ ユーザーの操作に対する適切な反応を示すこと ‣ ボタンのオン/オフ、画面移動のアニメーション等 ‣
音、振動、光による通知 ‣ 砂時計、プログレスバーによる状況の表示等 ‣ ユーザーに安心感と信頼感、楽しさ等を与える
35.
メタファー ‣ 現実のもの等、ユーザーがその使用方法に慣れ ているものを真似てUIを作成する ‣ ユーザーが分かり易い。(やり過ぎには注意)
36.
アフォーダンス(=シグニファイア) ‣ 物、環境に対する人間の反応を上手く利用する ‣ アフォーダンスを利用してユーザーが気づくようにデザインされた物 をシグニファイアと言う ‣
「ボタンっぽいのがあれば押したくなる∼」
37.
デザイン言語 ‣ ユーザーが既に慣れているUI要素を利用する これはリンクです。 これはリンクではありません。 何がリンクに見える? 今は多くの人が 知っている「スライドして削除」
38.
これさえ覚えれば、できる ‣ 近接 ‣ 整列 ‣
反復 ‣ コントラスト ‣ フォント ‣ インタラクション ‣ メタファー ‣ アフォーダンス ‣ 既存デザイン言語 + ような気がする
39.
One More Thing Some
more things
40.
ユーザーの特徴を考慮する あなたのユーザー?
41.
デバイスの特徴を考慮する
42.
使われる環境を考慮する
43.
やってはいけないこと 映画Monsters vs Aliensから ※映画の宣伝にもなるので画像の利用にはご理解を!
44.
やってはいけないこと アメリカ大統領: 「コーヒー飲みたい」
45.
やってはいけないこと 閣僚達: 「やめて下さい!!」Oh My God!!
46.
やってはいけないこと
47.
やってはいけないこと 実は、この人がUIデザイナー: 「このボタンの何が問題なんだ?」
48.
やってはいけないこと 近い!似てる!意味が分からない!寄りかかりたくな る!押し易い!押したくなる!取り返しがつかない!
49.
ユーザーは絶対やっちゃう!!
50.
ユーザーは絶対やっちゃう!! ありがとうございました!
Download now