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
ユーザー中心設計を取り入れたアプリの開発
Search
Sakamoto Keisuke
May 01, 2015
Design
1.3k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
ユーザー中心設計を取り入れたアプリの開発
Sakamoto Keisuke
May 01, 2015
More Decks by Sakamoto Keisuke
See All by Sakamoto Keisuke
TSKaigi Hokuriku 2025 フロントエンドアーキテクチャの設計方法論 Feature-Sliced Designの紹介
motikoma
1
980
Agile Japan 2022 北陸サテライト 小さな変化から始めるアジャイル
motikoma
1
710
モブプロをやってみて「作業工程を分担する」という固定観念から脱出した話
motikoma
1
2.3k
アジャイルなチームへの道 - はじめの一歩 -
motikoma
1
4k
職能割りからプロダクト割りのチーム運営へ
motikoma
1
1.8k
新規プロダクト開発の流れ
motikoma
0
1.5k
成果を出す販売施策を立案するためのUXデザインワークショップ
motikoma
0
160
Other Decks in Design
See All in Design
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
2.4k
CULTURE DECK/Frontend Engineer
mhand01
0
1.3k
CULTURE DECK/Marketing Director
mhand01
0
1.3k
20260309_3月ICTデザイン勉強会_地域創生2.0
a2k
0
130
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
securecat
1
200
2026年、デザイナーはなにに賭ける?
0b1tk
0
580
図面資産×AI 眠れる資産を起こす挑戦
aonomasahiro
0
150
デザインを信じていますか
sekiguchiy
1
1.3k
Of Ordination and Rebellion exploration sketches
rezaline
0
140
ClaudeCodeでマーケターの課題を解決する
kenichiota0711
11
14k
絵や写真から学ぶ、要素がもたらす副作用
kspace
0
380
工房としてのAI ── デザイナー、作家、ビルダー
hiranotomoki
0
220
Featured
See All Featured
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
Practical Orchestrator
shlominoach
191
11k
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
580
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.3k
RailsConf 2023
tenderlove
30
1.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
160
Side Projects
sachag
455
43k
Facilitating Awesome Meetings
lara
57
7k
Visualization
eitanlees
152
17k
How STYLIGHT went responsive
nonsquared
100
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
Transcript
ユーザー中心設計を取り入れた アプリの開発ディレクション ナイル株式会社 坂本 圭佑
社名の由来 「Near Your Life」という言葉の頭文字と最後の文字 人々のそばに当たり前にあるようなサービスを作り続ける会社にしていきたい。 ロゴの意味 古来より人々の「そばにあった」ものである「自然」、とくに人々の生活を彩ってきた「花」を メインイメージに、上下を違う青色で色分けすることで「空」と「海」もモチーフとしています。 「空」と「海」はボーダレスに広がるものとしての無境界性も表現しており、ナイルが「グローバルな 世界企業になる」という宣言を表しています。
坂本 圭佑 ▪ディレクター ・Appliv アプリ版の開発ディレクションを担当 ▪主な業務内容 ①ユーザー調査、分析、評価 ・ユーザーテスト、アクセス解析 etc. ②ディレクション
・要件定義、進捗管理、品質管理 etc.
Appliv アプリ版 サービスコンセプト アプリのおすすめコメントを主役とした ユーザー参加型のアプリレコメンドサービス
今日はユーザー中心設計というものを取り入れつつ、 どのようにアプリの制作ディレクションを 回しているかをお話しします。 サービス立ち上げのときの話を知りたい方は、こちらの記事を読んでみてください。 プロトタイプから100%を目指す~3カ月で100万DL突破の『Appliv』に学ぶ、効率的なUIデザインの3ステップ http://engineer.typemag.jp/article/appliv-ui
ユーザー中心設計とは ユーザー中心設計(UCD:User Centered Design) 別名:人間中心設計( HCD:Human Centered Design)とも呼ばれる。 ユーザー中心設計とは設計思想です。 ユーザー中心設計を実施する上で、
人や会社によって具体的に使用するプロセスは様々です。 ただし、骨格となるパターンがあります。 参考:ユーザビリティエンジニアリング第 2版 p18
ユーザー中心設計のプロセス 人間中心設計プロセスの計画 利用状況の把握と明示 ユーザーの要求事項の明示 ユーザーの要求を満たす 解決策の作成 要求に対する設計の評価 システムがユーザーの 要求事項を満足する 参考:ユーザビリティエンジニアリング第
2版 p22 「人間中心設計活動の相互依存性の図」
ユーザー調査 →アクセス解析 →ユーザーテスト(観察&インタビュー) ・ユーザーシナリオ&ニーズの検証 ・ユーザビリティの検証 →重要度と頻度で評価 デザイン案の作成 デザイン案の ユーザビリティの検証 →簡易ユーザーテスト
ニーズに沿った施策を ユーザビリティを担保した 状態でリリース ①責任者会議で方針決定 ②全体会議で施策決定 ディレクターが主導 (ユーザーテストデイ) Appliv アプリ版開発フロー シニアデザイナーによる デザインチェック プロデューサー チェック Zenhubによるタ スク管理
ユーザー調査 ①ユーザーの利用状況についてインタビューする ②状況とタスクを設定し実際にサービスを使ってもらい、思考を口に出してもらう。 ③タスクがひと段落したら、行動と心理について質問する。 【準備編】ユーザーテストで課題を発見するための基本的な考え方と 5つの準備プロセス http://uideal.net/basic/588
ユーザー調査 →アクセス解析 →ユーザーテスト(観察&インタビュー) ・ユーザーシナリオ&ニーズの検証 ・ユーザビリティの検証 →重要度と頻度で評価 デザイン案の作成 デザイン案の ユーザビリティの検証 →簡易ユーザーテスト
ニーズに沿った施策を ユーザビリティを担保した 状態でリリース ①責任者会議で方針決定 ②全体会議で施策決定 ディレクターが主導 (ユーザーテストデイ) Appliv アプリ版開発フロー シニアデザイナーによる デザインチェック プロデューサー チェック Zenhubによるタ スク管理
ユーザーシナリオ&ニーズの検証 ターゲット ユーザー 状況と行動 発話 ニーズ 解決策 暇つぶしでアプリを 探すユーザー 電車の中で、Applivの
ゲームチャンネルからア プリを探すとき 「出先ではアプリを見るだけ、ダウンロード しない」 「アプリをダウンロードしていて、通信制限 に引っかかったことがあるので、アプリを見 つけてもすぐにダウンロードしたくない」 欲しいアプリを記録してお き、WIFIがある環境で、後 からダウンロードしたい あとでリスト機能をつけ てはどうか? ※注意: ユーザーに解決策を聞くのではなく、開発チームが解決策を考える
ユーザーシナリオ&ニーズの検証 参考:2時間で作るカスタマージャーニーマップ ――実例とともに考える新しい「おもてなし」のカタチ http://web-tan.forum.impressrd.jp/e/2013/11/27/16409
デザイン案の作成 ①ユーザーシナリオ(ToBe)を考える ②ユーザーシナリオ(ToBe)に沿ってデザイン案を作成 ・点ではなく線で考える ページ単体で見るとユーザーの行動や心理状態といった文脈に、 そぐわないUIやコンテンツになってしまう。 ※①②を並行して実践することが多い
ユーザー調査 →アクセス解析 →ユーザーテスト(観察&インタビュー) ・ユーザーシナリオ&ニーズの検証 ・ユーザビリティの検証 →重要度と頻度で評価 デザイン案の作成 デザイン案の ユーザビリティの検証 →簡易ユーザーテスト
ニーズに沿った施策を ユーザビリティを担保した 状態でリリース ①責任者会議で方針決定 ②全体会議で施策決定 ディレクターが主導 (ユーザーテストデイ) Appliv アプリ版開発フロー シニアデザイナーによる デザインチェック プロデューサー チェック Zenhubによるタ スク管理
ユーザビリティの検証 ユーザビリティとは 特定のコンテキストにおいて、特定のユーザによって、ある製品が、 特定の目標を達成するために用いられる際の、 効果、効率、ユーザの満足度の度合い ※国際規格ISO9241による定義 引用:ユーザビリティエンジニアリング 第2版 p4
満足度 効率 効果 効果:ユーザが目標を達成できるかどうか 効率:なるべく最短経路で目標を達成できるかどうか 満足度:ユーザーに不愉快な思いをさせていないかどうか 重要度:高 重要度:低
ユーザビリティを重要度と頻度で評価 対応 判断 重要度 頻度 問題点 画面 行動 発話 ◯
高 鈴木さん 佐藤さん 田中さん すすめるボタンの機能 を、FBやtwitterでAppliv アプリ自体をシェアする 機能と間違って認識 フィード ヘッダーのすすめるボタンを押 した 「あ、ApplivをFBとかですすめ ることができるんですね」 ◯ 高 鈴木さん 田中さん フィードをスワイプする と、チャンネルが切り替 えられることに気がつか ない フィード カテゴリチャンネルを移動する 際に、チャンネルをタッチしてい く こちらの質問に対し、 「気づかなかった」 ◯ 中 鈴木さん 佐藤さん FB会員登録時に勝手に FBに投稿されるかもし れないという不安がある 新規会員 登録画面 新規会員登録 「安心できるアプリなら連携す るけど、勝手に行動が公開さ れないか不安です」
Zenhubにおけるタスク管理 カラムを追加することができ、タスクの状態を管理できる Zenhub https://www.zenhub.io/
Zenhubにおけるタスク管理 Zenhub の issue に ・目的 ・実装内容 ・イベントの修正 ・KPI を記述しておくことで、
①実装者が目的に沿ったより良い実装内容を提案してくれる土壌ができる ②イベントの修正の抜け漏れがなくなり、効果検証のPDCAを仕組み化できる
理想の開発ディレクションを目指して