Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
Submit search
EN
Uploaded by
shinta rock
PDF, PPTX
25,227 views
アプリデザインのお勉強 UI/UXのお話
アプリデザインとは UI/UXデザインなんじゃないの? っていうお話です 社内勉強会用
Design
◦
Read more
40
Save
Share
Embed
Embed presentation
Download
Download as PDF, PPTX
1
/ 64
2
/ 64
3
/ 64
4
/ 64
5
/ 64
6
/ 64
7
/ 64
8
/ 64
9
/ 64
10
/ 64
11
/ 64
12
/ 64
13
/ 64
14
/ 64
15
/ 64
16
/ 64
17
/ 64
18
/ 64
19
/ 64
20
/ 64
21
/ 64
22
/ 64
23
/ 64
24
/ 64
25
/ 64
26
/ 64
27
/ 64
28
/ 64
29
/ 64
30
/ 64
31
/ 64
32
/ 64
33
/ 64
34
/ 64
35
/ 64
36
/ 64
37
/ 64
38
/ 64
39
/ 64
40
/ 64
41
/ 64
42
/ 64
43
/ 64
44
/ 64
45
/ 64
46
/ 64
47
/ 64
48
/ 64
49
/ 64
50
/ 64
51
/ 64
52
/ 64
53
/ 64
54
/ 64
55
/ 64
56
/ 64
57
/ 64
58
/ 64
59
/ 64
60
/ 64
61
/ 64
62
/ 64
63
/ 64
64
/ 64
More Related Content
PDF
アプリUI勉強会 in ネットイヤーグループ
by
Kenichi Suzuki
PDF
UXの考え方とアプローチ
by
Masaya Ando
PDF
コンテンツで改善する UI デザインの極意
by
Yasuhisa Hasegawa
PDF
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
by
Masaya Ando
PDF
UX / UIデザインって何?
by
JustSystems Corporation
PDF
心地よいUIの温度 - 言葉と気遣いで高めるUI -
by
wariemon
PDF
ユーザーエクスペリエンスの分解
by
Takehisa Gokaichi
PDF
[UX]は投げ捨てろ!
by
c-mitsuba
アプリUI勉強会 in ネットイヤーグループ
by
Kenichi Suzuki
UXの考え方とアプローチ
by
Masaya Ando
コンテンツで改善する UI デザインの極意
by
Yasuhisa Hasegawa
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
by
Masaya Ando
UX / UIデザインって何?
by
JustSystems Corporation
心地よいUIの温度 - 言葉と気遣いで高めるUI -
by
wariemon
ユーザーエクスペリエンスの分解
by
Takehisa Gokaichi
[UX]は投げ捨てろ!
by
c-mitsuba
What's hot
PDF
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
by
Kazuki Yamashita
PDF
ゲームUI/UX勉強会予習資料「ゲームにおけるUXデザイン」
by
Akihiro Moriyama
PPTX
UX設計の第一歩-インテリジェントネット社内勉強会
by
INI株式会社
PDF
“UI/UX”?~恥をかかないための15分UXD入門
by
Masaya Ando
PDF
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
by
Masaya Ando
PDF
UXデザインの為のIA(情報アーキテクチャ)
by
インターリンク株式会社
PPTX
UI設計の土台になる考え方-インテリジェントネット社内勉強会
by
INI株式会社
PDF
ニコニコ超デザイン-Metro考察編-
by
Mizushima Kazuhiro
PDF
UXとブランド
by
Takehisa Gokaichi
PDF
UXはじめの一歩
by
井上 誠
PDF
なぜなに?ユーザエクスペリエンスマップ(概要編)
by
Naoki Hashimoto
PDF
ゲームに学ぶUXデザイン
by
Akihiro Moriyama
PDF
UIデザインの基本
by
Roy Kim
PDF
つくるべきモノをつくる
by
Mikihiro Fujii
PDF
ネイティブアプリにおける、UI/インタラクションのトレンド
by
yosuke sato
PPTX
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
by
Yu Morita
PPTX
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
by
Hiroyuki Arai
PDF
磨いて光らせる UX入門
by
yohei sugigami
PPTX
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
by
Hiroki Takaba
KEY
テックヒルズ
by
tomo tsubota
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
by
Kazuki Yamashita
ゲームUI/UX勉強会予習資料「ゲームにおけるUXデザイン」
by
Akihiro Moriyama
UX設計の第一歩-インテリジェントネット社内勉強会
by
INI株式会社
“UI/UX”?~恥をかかないための15分UXD入門
by
Masaya Ando
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
by
Masaya Ando
UXデザインの為のIA(情報アーキテクチャ)
by
インターリンク株式会社
UI設計の土台になる考え方-インテリジェントネット社内勉強会
by
INI株式会社
ニコニコ超デザイン-Metro考察編-
by
Mizushima Kazuhiro
UXとブランド
by
Takehisa Gokaichi
UXはじめの一歩
by
井上 誠
なぜなに?ユーザエクスペリエンスマップ(概要編)
by
Naoki Hashimoto
ゲームに学ぶUXデザイン
by
Akihiro Moriyama
UIデザインの基本
by
Roy Kim
つくるべきモノをつくる
by
Mikihiro Fujii
ネイティブアプリにおける、UI/インタラクションのトレンド
by
yosuke sato
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
by
Yu Morita
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
by
Hiroyuki Arai
磨いて光らせる UX入門
by
yohei sugigami
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
by
Hiroki Takaba
テックヒルズ
by
tomo tsubota
Similar to アプリデザインのお勉強 UI/UXのお話
PDF
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
by
Akiko Ohtsuka
PDF
はじめてのUXとUIの話
by
Kazuki Yamashita
PDF
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
by
takaaya
PDF
福井で「しあわせデザイナー」になるために
by
Miho Yamamori
PDF
AstroBlasterUI研修
by
Shinsuke Kubo
PDF
なぜUXをデザインしているのか
by
Mikihiro Fujii
PDF
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
by
schoowebcampus
PDF
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
by
Takashi Sakamoto
PDF
『UXデザインの教科書』を書きました
by
Masaya Ando
PDF
UI/UXなUXのお話
by
Kenji Minamoto
PPTX
Schoo講演資料130409
by
schoowebcampus
PDF
Schoo講演資料130409
by
Ryosuke Matsumoto
PDF
Schoo講演資料130409
by
schoowebcampus
PDF
体験をデザインするとは何か
by
Sunami Hokuto
PDF
UXD教育の実態と課題
by
Masaya Ando
PDF
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
by
Takashi Sakamoto
PDF
Bonfire Design #2 アプリ開発におけるデザイナーの成長について
by
Yahoo!デベロッパーネットワーク
PDF
Approach of Prototyping for making Application User Interface about iOS
by
Fumiya Sakai
PDF
UXから考えるスマホアプリ〜レシピアプリ構築事例〜
by
Mari Takahashi
PDF
0528 kanntigai ui_ux
by
Saori Matsui
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
by
Akiko Ohtsuka
はじめてのUXとUIの話
by
Kazuki Yamashita
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
by
takaaya
福井で「しあわせデザイナー」になるために
by
Miho Yamamori
AstroBlasterUI研修
by
Shinsuke Kubo
なぜUXをデザインしているのか
by
Mikihiro Fujii
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
by
schoowebcampus
UX-Sapporo x CSS Nite "Hypothesis-based Design within UX Design"
by
Takashi Sakamoto
『UXデザインの教科書』を書きました
by
Masaya Ando
UI/UXなUXのお話
by
Kenji Minamoto
Schoo講演資料130409
by
schoowebcampus
Schoo講演資料130409
by
Ryosuke Matsumoto
Schoo講演資料130409
by
schoowebcampus
体験をデザインするとは何か
by
Sunami Hokuto
UXD教育の実態と課題
by
Masaya Ando
UX design for #01 ウェブサイトやアプリを成功に導くUXデザイン
by
Takashi Sakamoto
Bonfire Design #2 アプリ開発におけるデザイナーの成長について
by
Yahoo!デベロッパーネットワーク
Approach of Prototyping for making Application User Interface about iOS
by
Fumiya Sakai
UXから考えるスマホアプリ〜レシピアプリ構築事例〜
by
Mari Takahashi
0528 kanntigai ui_ux
by
Saori Matsui
アプリデザインのお勉強 UI/UXのお話
2.
UCHIYAMA SHINTARO Designer
3.
これまでやってきたことは・・・
4.
かみ
5.
web
6.
web
7.
え
8.
One show Interactive
Bronze Pencil 文化庁メディア芸術祭 審査委員会推薦作品 東京インタラクティブアドアワード アド部門 入賞 New York festivals International AdvertisiOne show Interactive Bronze Pencil ng Awards Digital and Interactive Finalists 自分で言うのもなんだが意外とちゃんとしてる
9.
あぷり そして…最近やっているのが
10.
• 画 面
が 小 さ い スマホアプリの特徴 • 操 作 が マ ウ ス や キ ー ボ ー ド で は な く 指 • 持ち歩き、常に利用できる • 生活が中心にあり、いつでもやめることができる
11.
デザインの分類 広告 パッケージ プロモーションサイト ゲームアプリ ツール系アプリ ニュース系 アプリ ツール系アプリ サービスサイト 厳密には違うと思うけど 大体こんな感じ
12.
UI/UXデザイン キーワード
13.
サービスや製品とそれを使う人間とをつなぐもの 操作感 UI
14.
システムやサービスを使うことで得られる体験 使ったとき、使ったあとなに得られる満足感 UX
15.
おんなの子に例えてみると UI 見 た 目 UX 性格 心地よさ 性格も良くて気が利くし、 話していて楽しいななどの 体験 ファッション
16.
自販機に例えてみると UI 暑い…喉が渇いた UX デザインが爽やかで 飲みたくなる! 開けたときのプシュって音ジュースを買おう さあ飲むぞ 甘い香り 潤った!また飲もう (飲みやすさ) (購入のしやすさ)
17.
ある問題を解決するために思考・概念の組み立てを行い、 それを様々な媒体に応じて表現すること デ ザ イ
ン 問題を解決するための設計
18.
UI/UXデザイン ユ ー ザ
ー に ど ん な 体 験 を し て も ら い ど う 感 じ て も ら う か そ の た め に ど う す れ ば 心 地 よ く 使 っ て も ら え る か を 設 計 す る
19.
デザイン
20.
要素をルールに合わせて設計していく
21.
デザイン要素
22.
色 カタチ文字 線 質感空間 色相・彩度・明度 フォントの種類 大きさ、間隔 四角、円、三角、 幾何学形など 直線、破線、波線 斜線、二重線など ホワイトスペース 触覚的テクスチャ 視覚的テクスチャ
23.
デザインの原則
24.
統一 強調バランス 類似・対比 多様性リズム デザインが統一されているか フォント、色、形
要素の位置や面積の割合 強調することで ユーザーの関心を集める 要素を調整することで 統一性がもてる 反復させることで 統一性がもてる 要素に変化をつけたり 異なった要素を使用する ことで単調さをなくす
25.
基礎をしっかり抑えるのがコツ
26.
メジャー感
27.
細部にこだわってデザインすること 一つ一つは細かくて誰も気付かないような 工夫であったとしても、それが全体と調和して デザインに詳しくない人でも 「なんとなくいい」と思わせること!
28.
UXデザイン
29.
人の体験を軸に設計
30.
設計対象 ①インターフェイス ②コンテンツ ③コンテクスト
31.
インターフェイス
32.
価値観、意味など一旦無視して 画面上にどう提示すればどう感じるか どう見えるかなどを考える ただ触っているだけで気持ちいいなと 思わせる感覚の提供 人間の振る舞いを捉える
33.
ユーザーの行為の意味を み取る 仕組みづくりが重要
34.
コンテンツ
35.
ユーザーに取って意味のあるコンテンツかどうか 個々のライフスタイルから適切な利用価値を探る 見る、知る、感じるといった 満足感の提供
36.
コンテンツをモリモリ詰め込むと ボタンが大量にあったり テキストの量がおおかったり 親切でおいたオプションなどが逆に邪魔になったり
37.
webブラウザと同じ感覚で1画面にいろいろ詰め込むと ユーザーに意思決定する場が増えてしまう ユーザーにとって負担になる
38.
機能がいっぱいあったらそれを使わなければいい 「使わない」という判断がストレスになる
39.
旅行に行くときのスーツケースと同じ 便利だと思って詰め込み過ぎても 逆に不便になる
40.
アプリに何を詰め込むか? 何を詰め込まなくても大丈夫か?
41.
コンテクスト
42.
ユーザーの考えや気持ちの流れ 時間の流れなどの設計
43.
クリックする、タップする ページが変わる 認知・共感・理解 (見る、知る、感じる) 満足感 (ワクワクする、楽しいなどの感情) アクションを起こす (買う、投稿するなど、コンバージョン)
44.
スマホアプリの特徴 ・持ち歩き、常に利用できる ・生活が中心にありいつでもやめることができる スマホアプリのサービスや製品は ユーザーにとって生活のごく一部でしかない
45.
わざわざ そうさせる感覚ではなく もともと なにかえをする中で利用される 文脈を生活中心に考える
46.
UXデザイン ユーザーの行為の意味を み取って 意味のあるコンテンツを ユーザーの生活を中心に わかりやすく設計する
47.
UIデザイン
48.
・簡単である(やれそうだと思わせる) ・効率が良い(面倒だと思わせない) ・一貫性がある(学習させる、間違えにくくさせる) ・「できる」ではなく「やれそう」 操作感
49.
メタファ (比喩、見立てること) よく用いられるキーワード
50.
タブやフォルダ アイコン (虫眼鏡、ゴミ箱、メールなど) など
51.
なんにでも見立てられる自由さと柔軟さがある 無理やり見立てると誤解を招く可能性もある 時代の流れに影響されやすかったり
52.
アフォーダンス よく用いられるキーワード シグニファイア もしくは
53.
環境に対して知覚的に判断できる ある行為の可能性 そのものをどう扱えばいいのか どのような性質があるのかという 視覚的なサイン
54.
押して開けるドアは 押すのに適した場所に 平らな板を付けることで そのドアは押して開けるものだ 引いて開けるドアは 引くのに適した場所に 持ちやすい取っ手をつけることで そのドアは引いて開けるものだ
55.
意識しないで自然に行動を起こさせる ユーザーの行動を考えてデザインする
56.
潜在的に持つ意識を利用する 青は進め、赤は止まれ 青色のテキストで下線が引いてあれば リンクしている タブをタップすると切り替わる など
57.
「当然そうだろうと思う」ユーザの認識を、 デザイン上の理由や 意外性を持たせ印象付けるなどの目的で 裏切るのはよろしくないです
58.
OSのインターフェイスとあわせる というのもあり
59.
UIデザイン ユーザーに一番してほしいことを わかりやすく 意識させずに自然と行えるような 設計をする
60.
まとめ
61.
スマホの特性を知る デザインの基礎を把握し 細部までこだわって制作する ユーザーの行為の意味を み取って設計する 詰め込み過ぎない 文脈を生活中心に考える ユーザーに一番してほしいことを しやすいように設計する
62.
最後に
63.
遠くで見たり、近くで見たりしよう 柔軟にかんがえよう パクるのではなくオマージュしよう 誰のために仕事をしているのかもう一回感がえよ♡ シンプルにいきよう
64.
END ありがとうございました
Download