Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WEBデザイン×UXデザイン
Search
naa
September 16, 2019
Design
0
170
WEBデザイン×UXデザイン
naa
September 16, 2019
Tweet
Share
More Decks by naa
See All by naa
Open Hack U 2020 vol.4 発表資料
naa
0
49
技育祭 学生LightningTalks!
naa
0
310
よわよわ大学生がKaggleの世界を覗いてみた話
naa
1
780
世界中を敵に回してもあなたの味方bot_技育祭学生LT大会登壇資料
naa
0
270
実際のコードで流れを感じるDeepLearning超入門
naa
0
340
HTML/CSS 1カラムレイアウト勉強会資料
naa
0
39
Other Decks in Design
See All in Design
最速で価値を届けるUXリサーチ
degudegu2510
5
1.2k
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
350
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
240
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2k
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2.2k
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
3
560
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
1
2.1k
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
260
新しいemoji😄のアイデアをUnicodeが募集中‼️🏃♀️💨💨💨傾向を学んでみんな提案しよう💪
oguemon
2
600
Mitra Manual
nnidhz
0
190
Design System for training program
mct
0
260
Featured
See All Featured
Clear Off the Table
cherdarchuk
91
320k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.9k
Visualization
eitanlees
143
15k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Scaling GitHub
holman
458
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Agile that works and the tools we love
rasmusluckow
327
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
38
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Atom: Resistance is Futile
akmur
261
25k
Transcript
WEBデザイン×UXデザイン 1
Agenda ▪ UXとは? ▪ WEBデザインとUXデザイン ▪ UXにおける4つのタイムスパン ▪ UXを高めるために必要な7つの要素 ▪
まとめ ▪ 参考文献 2
UXとは? ▪ User Experienceの略語で、直訳すると「ユーザー体験」 ▪ 当時のApple Computer社に勤務していたアメリカ認知心理学者のDonald A. Norman博士が考案し造語したといわれている ▪
一般的に言うと、UXとはユーザーが特定の製品やサービスを 使った時に得られる経験や満足等全体を指す用語 3
UXとは? 使いやすさ (ユーザビリ ティ) 行動の変化 感動 心地よさ 楽しさ 4
UXとは? ユーザーが真にやりたいことを、 いかに楽しく 心地よく 実現できるかを重視した概念 ここ数年かなり注目されている! 5
WEBデザインとUXデザイン WEBデザイン 利便性や使用感に加えて、 独自性や他との差別化 にも重点を置いたデザイン UXデザイン ユーザーの利便性や使用感 が第一に考えたデザイン ・オシャレさ ・かっこよさ
・ユーザ目線 の機能性 6
WEBデザインとUXデザイン どちらかが求められるわけではなくて… 両方が求められる × 7 UXはホームページの価値を最大化する基本戦略
UXデザインについて考えていこう ▪ ここからは、UXデザインについて少し考えていきます 8
UXにおける4つのタイムスパン ▪ UXをデザインする際にはユーザーの視点で商品を知る段階から使った後のこと まで考える ▪ 2010年にドイツで行われたUXセミナーの成果をまとめた「UX白書」では、UX を期間(タイムスパン)によって分類している 「UXは時間を演出することが求められる」 9
UXにおける4つのタイムスパン 経験を想像する (予期的UX) 経験をする (一時的UX) 経験を伝える (エピソード的UX) 経験を振り返る (累積的UX) 10
UXにおける4つのタイムスパン ・商品やサービスを利用する前の「わくわくする」などの期待感や「難 しいものかもしれない」という不安感などを抱く段階 ・商品やサービスを知った瞬間から買って利用するまでの時間軸 経験を想像する (予期的UX) 経験をする (一時的UX) 経験を伝える (エピソード的UX)
経験を振り返る (累積的UX) 11
UXにおける4つのタイムスパン ・利用時に「楽しい」「使いづらい」「便利だ」など感じる体験すべて ・ユーザーインターフェース(UI)はこの一時的UXを構成する要素の一 部 経験を想像する (予期的UX) 経験をする (一時的UX) 経験を伝える (エピソード的UX)
経験を振り返る (累積的UX) 12
UXにおける4つのタイムスパン ・商品やサービスを利用した「楽しかった」「面白かった」「感動し た」「ムカついた」などの経験を第三者に伝えること ・口頭ではもちろん、SNSやブログへの投稿なども含まれる 経験を想像する (予期的UX) 経験をする (一時的UX) 経験を伝える (エピソード的UX)
経験を振り返る (累積的UX) 13
UXにおける4つのタイムスパン 経験を想像する (予期的UX) 経験をする (一時的UX) 経験を伝える (エピソード的UX) 経験を振り返る (累積的UX) ・商品やサービスを利用した後になって「あれは楽しかった」「また
使ってみたい」「もう二度と触りたくない」などと回想すること ・次の体験に影響を与え、良いイメージで振り返ってもらえたら商品や サービスをリピートしてもらえる可能性が高くなる 14
UXにおける4つのタイムスパン ▪ WEBサイトのデザインを考えるときに、ターゲット(ペルソナ)の「体験」を具体 的に想像することが大切 ▪ カスタマージャーニーマップを作成することも分析手法の一つ – カスタマージャーニーマップとは、ユーザがどの順序でサービスへ興味を 持って買って使っていくかの行動推移を具体的に表したもの –
インターネット技術の発展とともに、ターゲットとしている顧客の姿をよ り深く理解するプロセスの重要性が大きく高まった。 マーケティングで よく使われたりする 顧客を線で深く捉えるのにカスタマージャーニーマップが有効! 15
(補足)カスタマージャーニーマップ ▪ キャンペーンサイトにおけるカスタマージャーニーマップの簡単な例 ▪ 実際はペルソナをもっと具体的にし、もっと具体的に考えていく 16
UXを高めるために必要な7つの要素 ▪ 情報アーキテクチャ論の先駆者で ある ピーター・モービル氏のハ ニカム構造 UXを構成する7つの要素 17
UXを高めるために必要な7つの要素 18
UXを高めるために必要な7つの要素 19
UXを高めるために必要な7つの要素 それぞれの施策を単一的に行う 全てを総合的に考え実行していく Web領域にとどまらず、 ユーザーのリアルな「体験」とリン クしたサービスを創り出すために! 20
まとめ ▪ WEBサイト制作には、WEBデザインだけでなくUXデザインも重要である – UXデザインはWEBサイトの価値を最大化する! ▪ UXデザインはユーザの「体験」を想像することで形成される – UXにおける4つのタイムスパン –
UXを構成する7つの要素(ハニカム構造) 21
(補足①)WEBデザインのトレンド ▪ ウェブサイトのデザインにちょっと興味を持ったそこのあなた! WEBデザインのトレンドについてのリンクがまとめられたサイトを貼っておくので よかったら参考にしてください! 【2019年版】ウェブデザインのトレンドガイド集 https://www.seleqt.net/design/a-guide-to-all-the-2019-design-trend-guides- 940abde499bf/ 特にこのサイトは、ちょっとわくわくします!(英語ですが…) Behanceの2019年デザイントレンド
22
(補足②)具体的なUXデザインの手法 ▪ 具体的なUXデザイン(UIデザイン)の手法を知りたい方はこのサイトが結構参考 になると思います! UI/UXとは?知っておきたいUI/UXデザイン50の知識 https://saruwakakun.com/design/tips/ui-ux 23
参考文献 ▪ UI/UXデザインとは?Webデザインとの違いや必要なスキルについて解説 – https://tech-camp.in/note/pickup/59214/ ▪ ホームページの価値を最大化させるUXデザインの基本戦略 – https://mrgishi.com/user-experience/ ▪
Webサイトにおけるユーザーエクスペリエンス(UX)とは? – https://www.micro-wave.net/column/detail/user_experience.html ▪ ホームページ制作のためのカスタマージャーニーマップ作成のポイント – https://innova-jp.com/3250/ 24
ご清聴ありがとうございました! 25