new_window arrow_01 arrow_02 arrow_03 arrow_04 arrow_05 arrow_06 arrow_07 arrow_08 arrow_09 menu close metaphase facebook instagram twitter tumblr logo_metaphase

受託制作会社がProttを導入して制作フローを変更した結果

UX/UI

2017.07.21

こんにちは。XD(エクスペリエンスデザイン)事業部の吉本です。

XD事業部では昨年から、Prottを利用し「プロトタイピング」をワークフローに導入しています。

プロトタイピングの有用性については以前から話題になっていますが、スマホアプリや自社プロダクトに関する話が多いと思うので、今日は弊社のような「受託Web制作」の現場で取り入れたらどうだったのかというお話をします。

#ProttとはGoodPatchさんが提供しているプロトタイピングツールです。

Prott導入前に抱えていた課題

Prott導入前、僕らは設計〜制作の工程で以下の課題を抱えていました。

従来のXD事業部の工程

このような流れの中で、設計工程でクライアントと共通認識を持つことができない。(故に制作工程で手戻りが数多く発生する)という課題です。

これは結果として、制作工程の最後、「テスト」にかけられる時間が不十分になり、求められている品質どころか、最低限の品質も満たせなくなるリスクになり得る、プロジェクトにとって重大な問題でした。そこで、なぜ共通認識が持てないのかをクライアントの立場で考えてみました。

まず、設計時のクライアントの気持ち

まず僕らは最初に、サイトのページリストを整理したディレクトリファイルリストをサイト構造として共有していました。これはクライアントにとっては、ファイル名とURLが縦に並ベられた一覧表に過ぎないので、この資料ではサイトの完成イメージは湧きづらいです。

次に、各画面の要素をレイアウトしたワイヤーフレームをPower Pointで作成し、印刷して共有していました。各画面の要素が明らかになっていて、レイアウトされているので、ページ単体のイメージはなんとなくわかるのですが、所詮「紙の資料」なので、やはりこれも完成イメージとは程遠いと思います。(Webサイトの1ページがPPTで3ページに分割されている資料などもよくありますので…。)

それでも先に進めないといけないので「とりあえずわかりました」ということで進んでしまうことが多いです。

次に、デザイン時のクライアントの気持ち

デザインに入るとクライアントも完成イメージが湧いてきます。が、今まで具体的なイメージが湧いていない分、ここに来て修正も増えてきます。また、デザイン時点も確認・共有は印刷された紙で行うことが多いので、実機での閲覧イメージや操作感はイメージできません。

次に、テストサイト確認時のクライアントの気持ち

 

ここに来て初めてブラウザでサイトを見て、操作をします。今まで「紙」で確認してきているので、「リンク要素にマウスを乗せた時、もっと乗せた感を出したい」「ボタンの位置やラベルが適切ではない気がする」など、実際に操作してみて実感する問題が多く出てきます。

当たり前のことですが、こう考えてみると、「実機で触らないとやっぱりわからない!」ということがわかります。

 

ちなみに余談ですが、この流れで進んだ時の制作側の気持ちはこんな感じです。

テストサイト公開時の気持ち

 

本番サイト公開時の気持ち

これは結構まずいですよね…。「あれ?テストは?」って状態になってます。もちろん全てのプロジェクトでこうなっているわけではないですが、この様に公開直前で修正が重なりバタバタしてしまうケースも正直ありました。

このような背景から、”もっと設計段階から実機で触っているのと同じ状態を作りたい”と思いProttの導入を決めました。

 

Prottの導入で変わったこと

まずワイヤーフレーム制作とデザイン工程が完全に変わりました。

Prott導入後の制作工程

導入前 設計→印刷→確認(紙) だった工程が、

導入後 設計→プロトタイプ作成→実機検証 という工程に変わりました。

また、新たに増えた「プロトタイプ作成」の工程自体も、とても簡単な作業なので、導入前と比較して、「検証→改善」のプロセスを多く実践できるようになりました。

もう一つはサイトマップ作成とワイヤーフレーム作成の順序が変わりました。

Prott導入後の制作工程

厳密にはワイヤーフレーム作成の前に、ざっくりしたサイトマップを作るのですが、「ページリストの精緻化」という意味では完全に順番が変わりました。理由は、実機で触って見た結果、「このページは長いから分割しよう(または統合しよう)」といった変更が結構入るので、ページリストはプロトタイプでイメージを掴んでから精緻化した方が効率的なのです。

Prott導入の結果としては、

・ワイヤーフレームの制度(特に導線設計)

・制作段階に入ってからの認識ズレ

については大きく改善された感触があります。

社内メンバーからも、

・クライアントがワイヤーフレームを見てくれるようになった!

・ワイヤーフレームを作るのが楽しくなった!

といった声も出ており、Prott導入はひとまず成功だったのではと思っています。

 

さらに、Prottにはフィードバックが簡単にできる「コメント機能」があるので、制作メンバーの作業効率も改善が見られました。実際に社内でアンケートを取って見たところ、43%のメンバーが「10〜30%の工数削減」につながったと答えてくれています。

Prott導入時の苦労と今後に向けて

Prott導入から1年程経ち、やっと社内に浸透してきたところですが、導入には結構な苦労もありました。

中でも、使い慣れたPowerpointから離れることは心理的ハードルも結構高かったようで、メンバーが誰も使ってくれないという問題にぶち当たったことを覚えています。この問題は「まずは自分がプロジェクトで使ってメンバーを強制的に巻き込む」「自分の使い方を見せる」「使ってよかったことをこまめに共有する」という地道な啓蒙活動と使い方のフォーマットを作ることで乗り越えることができました。

また、現在メインで利用しているのはディレクターですが、設計工程自体はデザイナーやフロントエンドエンジニアなど他の制作メンバーも交えて、みんなで考えた方が良いものができると思っていますので、今後は職種を横断してプロトタイピングしていける様なプロセスを作り、XD事業部のサービス向上を目指していきます。

このブログを読んで頂いた方で、「こんなやり方あるよ!」とアドバイスなど頂ける方がいらっしゃったらご連絡頂ければ幸いです!あとPrott Blogでも取り上げて頂いたのでご興味のある方は是非ご覧ください!

Prott Blogはこちら

 

※補足

本記事で記載した内容は、僕らがお手伝いさせて頂いている全てのプロジェクトで行っているわけではありません。スピードを優先するプロジェクトやルーチンワーク化している運用のお仕事や、UIよりグラフィックの作り込みが求められる案件など、本フローが向いていないケースもあるので、その場合は従来通りのフローでお手伝いさせて頂いているケースもあります。

ヤモリ

吉本 健太 / エクスペリエンスデザイン事業部クリエイティブグループリーダー

マネジメント業務を主務としながら、UXディレクターとしてWebサイトのクリエイティブディレクションや、業務系アプリのUX/UIディレクションを担当。

最新のブログ記事