Submit Search
Upload
プロトタイピングツール投入のケーススタディ
•
6 likes
•
1,989 views
力也 伊原
Follow
2016年8月25日に開催されたイベント「Design-JP 第1回 勉強会 : プロトタイピングの回」で使用したスライドです。公開向けに編集した抜粋版となっています。
Read less
Read more
Design
Report
Share
Report
Share
1 of 40
Download now
Download to read offline
Recommended
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
働き方のプロトタイピング
働き方のプロトタイピング
力也 伊原
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
あなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティ
力也 伊原
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態
力也 伊原
年末調整の情報設計
年末調整の情報設計
力也 伊原
Recommended
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
働き方のプロトタイピング
働き方のプロトタイピング
力也 伊原
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
あなたの価値を高めるWebアクセシビリティ
あなたの価値を高めるWebアクセシビリティ
力也 伊原
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
今やWeb制作者じゃなくなった私の仕事実態
今やWeb制作者じゃなくなった私の仕事実態
力也 伊原
年末調整の情報設計
年末調整の情報設計
力也 伊原
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
高本 徹
アクセシブルなナビゲーションデザインの考え方
アクセシブルなナビゲーションデザインの考え方
力也 伊原
フロントエンドからの発想
フロントエンドからの発想
力也 伊原
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
Satoru MURAKOSHI
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
力也 伊原
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
情報構造設計の基礎知識
情報構造設計の基礎知識
力也 伊原
Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌
Yoshinori OHTA
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
可能性のデザイン
可能性のデザイン
力也 伊原
サイトをアクセシブルにするための受発注のセオリー
サイトをアクセシブルにするための受発注のセオリー
力也 伊原
More Related Content
What's hot
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
高本 徹
アクセシブルなナビゲーションデザインの考え方
アクセシブルなナビゲーションデザインの考え方
力也 伊原
フロントエンドからの発想
フロントエンドからの発想
力也 伊原
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
Satoru MURAKOSHI
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
力也 伊原
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
情報構造設計の基礎知識
情報構造設計の基礎知識
力也 伊原
Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌
Yoshinori OHTA
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Keisuke Imura
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Seiko Kuchida
What's hot
(20)
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Web制作 あとで揉めないための確認のポイント
Web制作 あとで揉めないための確認のポイント
アクセシブルなナビゲーションデザインの考え方
アクセシブルなナビゲーションデザインの考え方
フロントエンドからの発想
フロントエンドからの発想
ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
20150205 schoo Webディレクションに必要なスキルセットとマインドセット
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
あなたの価値を高めるWebアクセシビリティ(アクセシビリティの祭典バージョン)
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
情報構造設計の基礎知識
情報構造設計の基礎知識
Web制作会社とBA、ここ15年の変貌
Web制作会社とBA、ここ15年の変貌
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Web Design Process for The Future
Web Design Process for The Future
イマドキWebメディアの制作手法
イマドキWebメディアの制作手法
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Web制作の幅が広がる! プロジェクトの傾向から考える、 2つ目•3つ目のCMS選び
Viewers also liked
可能性のデザイン
可能性のデザイン
力也 伊原
サイトをアクセシブルにするための受発注のセオリー
サイトをアクセシブルにするための受発注のセオリー
力也 伊原
15分でわかるモバイルアクセシビリティ
15分でわかるモバイルアクセシビリティ
力也 伊原
公認会計士協会 青年部 設立総会 プレゼン(トーマツベンチャーサポート斎藤)
公認会計士協会 青年部 設立総会 プレゼン(トーマツベンチャーサポート斎藤)
Saito Yuma
0から1の新規事業の創り方 ビジネスモデル編
0から1の新規事業の創り方 ビジネスモデル編
アイディアメーカー
150906 bottom up japan #4 osaka(新事業と風土活性化_中村雄志)
150906 bottom up japan #4 osaka(新事業と風土活性化_中村雄志)
Yushi Nakamura
0から1の新規事業の創り方 伝わることが10倍になるプレゼンテーション法
0から1の新規事業の創り方 伝わることが10倍になるプレゼンテーション法
アイディアメーカー
エンジニアのためのお金の話
エンジニアのためのお金の話
bpstudy
0から1の新規事業の創り方アイデア発想編
0から1の新規事業の創り方アイデア発想編
アイディアメーカー
【HARES 西村】働き方改革講演資料(17/01/31)
【HARES 西村】働き方改革講演資料(17/01/31)
Souichirou Nishimura
リクルートにおけるVDI導入 ~働き方変革とセキュリティ向上の両立を目指して~
リクルートにおけるVDI導入 ~働き方変革とセキュリティ向上の両立を目指して~
Recruit Technologies
20131218 schoo 共有用 大企業での新規事業のつくり方(1限目:新規事業が失敗する理由)
20131218 schoo 共有用 大企業での新規事業のつくり方(1限目:新規事業が失敗する理由)
Saito Yuma
オフィスに縛られないIBM流の働き方
オフィスに縛られないIBM流の働き方
Hikaru Matsuura
IBM Verse のコンセプトと機能(画面ショット集)
IBM Verse のコンセプトと機能(画面ショット集)
Hikaru Matsuura
IBM Verse の開発に至る背景を導いたデザイン思考
IBM Verse の開発に至る背景を導いたデザイン思考
Hikaru Matsuura
大企業イノベーションに関する考察メモ
大企業イノベーションに関する考察メモ
yasuhiro yoshizawa
企業内新規事業開発のトリセツ Vol.1 【概論:企業で新規事業を立ち上げるということ】 先生:伊藤 羊一
企業内新規事業開発のトリセツ Vol.1 【概論:企業で新規事業を立ち上げるということ】 先生:伊藤 羊一
schoowebcampus
大企業での新規事業のつくり方(1限目:新規事業が失敗する理由) 先生:斎藤 祐馬
大企業での新規事業のつくり方(1限目:新規事業が失敗する理由) 先生:斎藤 祐馬
schoowebcampus
基幹システムから学ぶ業務知識 ~販売業務を知る~
基幹システムから学ぶ業務知識 ~販売業務を知る~
Hideto Masuoka
kintoneで実現 リモートワークという働き方 Cloud days 2016 Tokyo
kintoneで実現 リモートワークという働き方 Cloud days 2016 Tokyo
JOYZO
Viewers also liked
(20)
可能性のデザイン
可能性のデザイン
サイトをアクセシブルにするための受発注のセオリー
サイトをアクセシブルにするための受発注のセオリー
15分でわかるモバイルアクセシビリティ
15分でわかるモバイルアクセシビリティ
公認会計士協会 青年部 設立総会 プレゼン(トーマツベンチャーサポート斎藤)
公認会計士協会 青年部 設立総会 プレゼン(トーマツベンチャーサポート斎藤)
0から1の新規事業の創り方 ビジネスモデル編
0から1の新規事業の創り方 ビジネスモデル編
150906 bottom up japan #4 osaka(新事業と風土活性化_中村雄志)
150906 bottom up japan #4 osaka(新事業と風土活性化_中村雄志)
0から1の新規事業の創り方 伝わることが10倍になるプレゼンテーション法
0から1の新規事業の創り方 伝わることが10倍になるプレゼンテーション法
エンジニアのためのお金の話
エンジニアのためのお金の話
0から1の新規事業の創り方アイデア発想編
0から1の新規事業の創り方アイデア発想編
【HARES 西村】働き方改革講演資料(17/01/31)
【HARES 西村】働き方改革講演資料(17/01/31)
リクルートにおけるVDI導入 ~働き方変革とセキュリティ向上の両立を目指して~
リクルートにおけるVDI導入 ~働き方変革とセキュリティ向上の両立を目指して~
20131218 schoo 共有用 大企業での新規事業のつくり方(1限目:新規事業が失敗する理由)
20131218 schoo 共有用 大企業での新規事業のつくり方(1限目:新規事業が失敗する理由)
オフィスに縛られないIBM流の働き方
オフィスに縛られないIBM流の働き方
IBM Verse のコンセプトと機能(画面ショット集)
IBM Verse のコンセプトと機能(画面ショット集)
IBM Verse の開発に至る背景を導いたデザイン思考
IBM Verse の開発に至る背景を導いたデザイン思考
大企業イノベーションに関する考察メモ
大企業イノベーションに関する考察メモ
企業内新規事業開発のトリセツ Vol.1 【概論:企業で新規事業を立ち上げるということ】 先生:伊藤 羊一
企業内新規事業開発のトリセツ Vol.1 【概論:企業で新規事業を立ち上げるということ】 先生:伊藤 羊一
大企業での新規事業のつくり方(1限目:新規事業が失敗する理由) 先生:斎藤 祐馬
大企業での新規事業のつくり方(1限目:新規事業が失敗する理由) 先生:斎藤 祐馬
基幹システムから学ぶ業務知識 ~販売業務を知る~
基幹システムから学ぶ業務知識 ~販売業務を知る~
kintoneで実現 リモートワークという働き方 Cloud days 2016 Tokyo
kintoneで実現 リモートワークという働き方 Cloud days 2016 Tokyo
Similar to プロトタイピングツール投入のケーススタディ
デ部会 プロトタイプ
デ部会 プロトタイプ
Nobuhiko Futagami
産業技術大学院大学履修証明プログラム「人間中心デザイン」参加レポート
産業技術大学院大学履修証明プログラム「人間中心デザイン」参加レポート
Hiroko Harada
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
ownCloudについて
ownCloudについて
Shinya Saita
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
Yoshiki Hayama
とりあえず30分でひととおり分かった気にはなれるアジャイル入門
とりあえず30分でひととおり分かった気にはなれるアジャイル入門
陽一 滝川
はじめてのScrumこれから大切にしたいこと Release#2
はじめてのScrumこれから大切にしたいこと Release#2
Takenori Takaki
アジャイル開発&TFS導入
アジャイル開発&TFS導入
You&I
Machine Learning Bootstrap
Machine Learning Bootstrap
Takahiro Kubo
Financial Planner の為のITの活用
Financial Planner の為のITの活用
Kenichi Takeuchi
「納品のない受託開発」にみるソフトウェア受託開発の未来
「納品のない受託開発」にみるソフトウェア受託開発の未来
Yoshihito Kuranuki
Why prototype ? / なぜプロトタイプが必要か?
Why prototype ? / なぜプロトタイプが必要か?
Shunsuke Kawai
アジャイルマネジメントとは?
アジャイルマネジメントとは?
Kiro Harada
デザインスプリントを実践して分かったこと
デザインスプリントを実践して分かったこと
sizucca
Scrumワークショップ
Scrumワークショップ
You&I
var dumpを使わないWordPress開発フロー
var dumpを使わないWordPress開発フロー
優也 田島
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_upload
Shinsuke Miyaki
Roo
Roo
terahide
connpass特徴と開発の流れ
connpass特徴と開発の流れ
Ikeda Yosuke
顧客のニーズを捉えて、システム統合していますか?
顧客のニーズを捉えて、システム統合していますか?
You&I
Similar to プロトタイピングツール投入のケーススタディ
(20)
デ部会 プロトタイプ
デ部会 プロトタイプ
産業技術大学院大学履修証明プログラム「人間中心デザイン」参加レポート
産業技術大学院大学履修証明プログラム「人間中心デザイン」参加レポート
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
ownCloudについて
ownCloudについて
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
メンタルモデル・ダイアグラムで学ぶ定性(質的)分析・親和図法 :2015年1月31日 ワイワイCAFE BITTER
とりあえず30分でひととおり分かった気にはなれるアジャイル入門
とりあえず30分でひととおり分かった気にはなれるアジャイル入門
はじめてのScrumこれから大切にしたいこと Release#2
はじめてのScrumこれから大切にしたいこと Release#2
アジャイル開発&TFS導入
アジャイル開発&TFS導入
Machine Learning Bootstrap
Machine Learning Bootstrap
Financial Planner の為のITの活用
Financial Planner の為のITの活用
「納品のない受託開発」にみるソフトウェア受託開発の未来
「納品のない受託開発」にみるソフトウェア受託開発の未来
Why prototype ? / なぜプロトタイプが必要か?
Why prototype ? / なぜプロトタイプが必要か?
アジャイルマネジメントとは?
アジャイルマネジメントとは?
デザインスプリントを実践して分かったこと
デザインスプリントを実践して分かったこと
Scrumワークショップ
Scrumワークショップ
var dumpを使わないWordPress開発フロー
var dumpを使わないWordPress開発フロー
Vantan shinsuke miyaki_upload
Vantan shinsuke miyaki_upload
Roo
Roo
connpass特徴と開発の流れ
connpass特徴と開発の流れ
顧客のニーズを捉えて、システム統合していますか?
顧客のニーズを捉えて、システム統合していますか?
More from 力也 伊原
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
力也 伊原
あなたの価値を高めるWebアクセシビリティ(!importantバージョン)
あなたの価値を高めるWebアクセシビリティ(!importantバージョン)
力也 伊原
実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ
力也 伊原
なぜ、サイボウズでアクセシビリティなのか?
なぜ、サイボウズでアクセシビリティなのか?
力也 伊原
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
力也 伊原
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
力也 伊原
NTTデータグループウェブサイトのマルチデバイス対応
NTTデータグループウェブサイトのマルチデバイス対応
力也 伊原
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
力也 伊原
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
More from 力也 伊原
(9)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(JAC Special Ver.)
あなたの価値を高めるWebアクセシビリティ(!importantバージョン)
あなたの価値を高めるWebアクセシビリティ(!importantバージョン)
実はできている!? Webアクセシビリティ
実はできている!? Webアクセシビリティ
なぜ、サイボウズでアクセシビリティなのか?
なぜ、サイボウズでアクセシビリティなのか?
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
NTTデータグループウェブサイトのマルチデバイス対応
NTTデータグループウェブサイトのマルチデバイス対応
アクセシビリティ対応をプロジェクトに取り入れるには?
アクセシビリティ対応をプロジェクトに取り入れるには?
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
プロトタイピングツール投入のケーススタディ
1.
プロトタイピングツール投入のケーススタディ 2016/08/25|Design‑JP 第1回 勉強会 : プロトタイピングの回 伊原 力也 / BA 1
2.
@magi1125 BA IA プロトタイピング アクセシビリティの書籍出しています 2
3.
BA 受託のデザイン会社 Webサイトのリニューアルから運用まで アプリの新規立ち上げ、リニューアル、継続改善も 3
4.
プロトタイピングツールって いつ / どこで / 誰が / なにを / どのように / 使うと良い? 事例をもとに考えてみる 4
5.
ツール遍歴 HTML / CSS / JS PowerPoint Keynote Googleスライド InVision Prott Adobe XD Axure RP Pixate (練習中) 5
6.
今日は特にProttとXDにフォーカス Prott Adobe XD 最近よく使っている / 周りで使われている 概要は……会場に詳しい人が居そうです 6
7.
本日の流れ 1. アウトプットに合ったツールを 2. チームに合ったツールを 3. ポイントを絞って投入を 7
8.
1. アウトプットに合ったツールを 8
9.
1‑1. 会社概要ページの新規デザイン提案 1分でわかる感じにしつつ未来感も演出したい 9
10.
誰が? いきがかり上、伊原が どの局面で? デザイナーがデザインを起こし終わったあとに 何を使って? Prottを使って画面遷移イメージを作成 10
11.
作ったらどうなった? 「1分でスッと伝わってくる感じがしない」 11
12.
学び RFPより推察できる方向性 / コンセプトをカバーできるツールを選択する必要があった コンペのデザイン提案なのでそれなりに期待感が持てるインタラクションが必要だった 止まった画面で詰めてから最後に繋ぐのではなく、動きによる印象の伝わり方をベース に検討を進めるべきだった 12
13.
1‑2. 決済アプリの全体リニューアル 初期リリース後に建て増し続けたツギハギ状態を解消したい KPIに寄与している機能をより全面に出したい 13
14.
誰が? IAとデザイナーが どの局面で? ユーザー調査後にコンセプト立案 ペーパープロトでパターン検討後 何を使って? Sketch + Prott + After Effects 14
15.
作ったらどうなった? 「機能のまとめ方の方針がよくわかった」 「演出の必然性がよくわかった」 ぜひ引き続き詳しく…… 15
16.
学び 画面を作って繋いでいくツールでは、用意されたインタラクションしか表現できない 連続性を適切に伝えるためには、それに向いたツールによる組み合わせが必要 16
17.
2. チームに合ったツールを 17
18.
2‑1. 運用におけるサービス告知ページ作成 詳細が決まってない状態だが、進められる部分から着手 役員までの社内承認を順次取っていく必要がある 18
19.
誰が? IA兼デザイナーが どの局面で? 構成・原稿・図版をクライアントとキャッチボールする中で 何を使って? 最初のワイヤーはGoogleスライドで 中盤はPowerPointによるワイヤー+原稿テキストで 後半は作業効率化のため、制作側の判断でXDに移行 19
20.
作ったらどうなった? 後半、忠実度が上がった状態で手直しが頻発し、作業効率が低下 クライアントが「これはデザインなのか?原稿なのか?」と混乱 クライアント側でもいじるため、パワポ版が必要になり、XDからパワポに「逆移植」 20
21.
学び 発注側も編集に参加するフローなのであれば、そもそも(環境面、スキル面で)相手側 が使えるツールに合わせる必要がある WindowsかつWeb閲覧に縛りがある環境だと、ほとんどのプロトタイピングツールが封 印されるし、大手企業には割とよくある Tips XDのファイルからテキストを抜き出すにはSVG出力すべし。PDF出力だとアウトライン 化されて抜けない 21
22.
2‑2. 情報提供アプリの継続改善 アプリのリニューアル後、継続改善 月2回リリースで改修やA/Bテスト IAが半常駐して対応 22
23.
誰が? クライアント担当者とIAが協同で どの局面で? 改善版のスタディ開始から ビジュアルデザインの手前まで 何を使って? Prott + XD Prottのワイヤーフレーム機能で互いに案出し 両者で編集、コメント機能でやりとり 適宜XDでパーツを作ってProttにコンポーネント登録 23
24.
作ったらどうなった? 1年半の継続的改善のサイクル維持 発注側と受注側という分断ではなく、チーム感ある(主観) 24
25.
学び Web閲覧の制限が突破できれば(やる気さえあれば)ツールベースの進行に移行できる 共同編集・コメント・バージョン管理はやっぱり重要 Prottのワイヤーフレーム、PowerPoint乗換組にはフレンドリー。でも歯がゆさある Tips XD、パーツ単位でも書き出せる(要素選択→cmd+E)。軽量デザインツールとして活用 25
26.
3. ポイントを絞って投入を 26
27.
3‑1. サービス紹介ページ再構成A 訪問調査サービスの紹介ページがある 申込みまでのCVRが低いので改善してほしい すでにコンポーネントがあるのでそれを使って欲しい 27
28.
誰が? IAが どの局面で? 現状のアクセスログに基づくヒューリスティック評価後に 何を使って? XDを使ってはじめから最終形を作成 28
29.
作ったらどうなった? 「何が理由で離脱しているのか理解できた」 「文言も完成しているのでこのまま実装へ」 あっさり完了…かと思いきや 最後に画像切り出しのため精緻化したPSDファイルが必要になり、起こし直す 29
30.
学び 単独で最終形まで持っていけるなら、XD作りきってしまうのもアリだが…… どこかでアタマを切り替えて、納品物を作る!モードになる必要がある 30
31.
3‑2. サービス紹介ページ再構成B サービス全体を説明するページを、新しいビジネス戦略に基づいて作りなおす 詳細が決まってない状態だが、進められる部分から着手 役員までの社内承認を順次取っていく必要がある 31
32.
誰が? デザイナーが どの局面で? 「とりあえず形にしてみます」と言い放って IAと共に手書きで構成を検討してから 何を使って? XDを使ってラフデザインを作成 32
33.
作ったらどうなった? 「まとまった姿がイメージできた」 「議論の土台ができた、これで社内に説明できる」 以降、詳しいコンテンツの詰めはPowerPointで、デザインはPhotoShopで 33
34.
学び XDの「本物感あるものを素早く」という特性が「立脚点を示す」ことにフィット 使いどころを絞り、それを宣言して共有することで「帯に短し~」状態は回避できそう 打ち合わせ単位や機能単位などでフォーカスするのがよさそう 34
35.
まとめ 35
36.
アウトプットに合ったツールを 方向性 / コンセプトに適したツールを予想して選択する 画面を作って繋いでいくツールでは、用意されたインタラクションしか表現できない 動きによる体験が重要なら、それに応じたツールを組み合わせる そのために引き出しを増やしておく(ツールや実装スキルの習得) 36
37.
チームに合ったツールを コラボレーション前提なのかを確認したうえで、まわりが使えるツールを選ぶ 「Windows ✕ Web閲覧に制限のある環境」よくあるので要注意 共同編集・コメント・バージョン管理はやっぱり重要 Prottのワイヤー機能、パワポ乗換組にはフレンドリー XDはソロ活動用(今後に期待)。パーツづくりでの活用も 37
38.
ポイントを絞って投入を XDはそれなりに忠実度が高いものをサッと作れる 最初から終盤まで作りきるなら、どこかで納品仕様にアタマを切り替えよう 逆に使いどころを絞り、宣言&共有することで「帯に短し~」状態を回避する方向も 打ち合わせ単位や機能単位などでフォーカスするのがよさそう 38
39.
とにかくトライ & エラー、そしてシェア プロトタイピングですから! 39
40.
ありがとうございました @magi1125 40
Download now