Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
ユーザー中心設計を取り入れたアプリの開発
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
1k
Agile Japan 2022 北陸サテライト 小さな変化から始めるアジャイル
motikoma
1
730
モブプロをやってみて「作業工程を分担する」という固定観念から脱出した話
motikoma
1
2.4k
アジャイルなチームへの道 - はじめの一歩 -
motikoma
1
4.1k
職能割りからプロダクト割りのチーム運営へ
motikoma
1
1.8k
新規プロダクト開発の流れ
motikoma
0
1.5k
成果を出す販売施策を立案するためのUXデザインワークショップ
motikoma
0
160
Other Decks in Design
See All in Design
Look Dev Meetup #50
baku89
1
510
Debiasing Your Software Design Decision-Making @ Flowcon '26
baasie
1
190
Jun Wei | Information Design & Presentation Portfolio
wjw100788
PRO
0
110
【CEDEC2026】『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ~継承と挑戦を両立するデザイン手法~
cygames
PRO
4
5.3k
Claudeもくもく会、はじめませんか?
yusukeiyoda
0
230
Basket_of_love.pdf
terencebasart
0
320
【CEDEC2026】派手さと見やすさは両立できる!『Shadowverse: Worlds Beyond』エフェクト・3D背景の超進化したビジュアル設計
cygames
PRO
2
2k
Decksh keywords
ajstarks
0
140
StartDesignEngineering
uchiyama886
0
130
PLATEAUで白い街を作る
aikautau
0
190
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
securecat
1
270
富山デザイン勉強会_プレゼンテーション.pdf
keita_yoshikawa
0
150
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
28
2.8k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
3.1k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
6
1.2k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
600
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
880
Designing Powerful Visuals for Engaging Learning
tmiket
1
580
Into the Great Unknown - MozCon
thekraken
41
2.7k
A Tale of Four Properties
chriscoyier
163
24k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
240
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
58k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
530
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を仕組み化できる
理想の開発ディレクションを目指して