鲍齿を视野に入れた鲍滨リニューアルのフ?ロセス冲ペーパープロトタイピングについての尝罢
- 2. 宮島 敬右 Keisuke Miyajima UIデザイナー HCD-Net認定 ?間中?設計スペシャリスト ??紹介
- 4. デザインの制作環境とプロセス ペーパー プロトタイプ SketchAdobe XD Zeplin Storybook Bitbacket （事前に現状のUIをエキス パートレビュー済み） デザイナー（私）、クライア ントのウェブサイトの改善を 提 案 す る 「 コ ン サ ル タ ン ト」、営業とユーザーサポー トを担当する「セールス」、 開発と技術的サポートを担当 する「エンジニア」のリー ダーで、要件と技術的な課題 の確認、ユーザーからの要 望?クレーム、後述のリサー チをインプットしながら、リ アルタイムでペーパープロト タイプを作成。 ペーパープロトタイ プからAdobe XDで 動作するワイヤーフ レームレベルのプロ トタイプを作成して 関 係 者 に 展 開 、 レ ビューを?い合意を 形成。 平?してSketchでUI をコンポーネント単 位 で 作 成 し て 、 Symbolのライブラ リを構築。 ラ イ ブ ラ リ か ら Symbolを呼び出し てプロトタイプの画 ?を精緻化。 Sketchで作成した画 ?とライブラリから 作成したデザインガ イドをZeplinに書き 出して、フロントエ ンドエンジニアに共 有。 画?イメージとデザ インガイドからフロ ントエンドエンジニ ア が V u e . j s の Storybookを構築。 画?の実装に?る前 にコンポーネント単 位で実装後の表?と 動作をチェック。 UIが実装された画? をステージングで確 認して、発?した課 題をBitBacket上で 管理。
- 5. タイトルテキスト
- 11. ! ? そのタスクで「本当に達 成したいこと」はなんで すか？ ? そのデータから「本当に 知りたいこと」はなんで すか？ ? 達成したり知りたいこと がわかると、「どんな気 持ち」になりますか？ ユーザーの求めるゴール を深掘りして、ユーザー の「本質的要求」と最終 的な「ありたい姿?気持 ち」を理解する
- 12. ! ? いつもやっているタス クの?順を実際に?せ てください。 ? くりかえしやっている タスクはありますか？ ? 頻 繁 に 往 復 す る 動 線 や、探したりする画? はありますか？ ?常的な利?状況を把握 して「作業の?動化?省 略化」や「動線のショー トカット」を発?する
- 13. ! ? どの情報を?て「意思 決定∕正誤の判断」を していますか？ ? その情報はデータベー スにありますか？ ? そのデータを表?する のにどのくらい時間が かかりますか？ 実際の利?状況とバック エンドの仕様から、画? の表?内容や表?速度に 対する「効果?効率?満 ?度」を確認する
- 15. AfterBefore
- 17. AfterBefore
- 18. AfterBefore トーン＆マナーの整 理整頓 表?の優先順位を? 直し 重 要 な 画 ? へ の ショートカット
- 19. AfterBefore
- 21. AfterBefore
- 23. AfterBefore
- 25. AfterBefore
- 26. AfterBefore 横に並べて結果をひ と?で?較 縦 ? 向 の み の ス ク ロールを死守
- 27. !まとめ 「 動 く プ ロ ト タ イ プ 」 を 作 る 前 に 「ペーパープロトタイプ」で検討した ら、「その場で?主的に合意の形成」 ができたので、その後のデザインプロ セスがスムーズに進んだ。 「ペーパープロトタイプ」のプロセス は「潜在的な要求や課題の発?」、 「 早 期 の 技 術 的 な 実 現 可 能 性 の 検 証」、「想定外の?戻りの削減」、 「クリティカルな仕様の抜け漏れ防 ?」に有効だった。
- 28. ありがとうございました。