Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

お任せではなく一緒に作るUIデザイン - SaCSS Special24 福岡コラボ Special(SaCSS vol.106)

3,623 views

Published on

UIデザインをデザイナーに任せるとき、要件定義がガチガチに決まった後で、依頼されてませんか?
クライアント、システム会社、デザイン会社で一緒に作る、私たちの作り方を紹介します。

Published in: Design
  • Be the first to comment

お任せではなく一緒に作るUIデザイン - SaCSS Special24 福岡コラボ Special(SaCSS vol.106)

  1. 1. 一緒に作るUIデザイン お任せではなく 合同会社CGFM 所属デザイナー かねうち  かずこ SaCSS Special24  福岡コラボ Special(SaCSS vol.106) 金内 和子
  2. 2. 自己紹介 合同会社CGFM 所属デザイナー 金内 和子 Web・印刷系デザイン会社勤務を経て、2006年に仲間と合同会社CGFMを設立。  個人・企業・大学・自治体などのWebサイト企画・デザイン制作の他、  業務系サービスのUIデザインを手がける。  WordPress 日本公式キャラクター「わぷー」の母でもある。 かねうち   かずこ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  3. 3. SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  4. 4. Webサイトの実績 福岡市姉妹都市ニュースサイト VAddy  クラウド型Web脆弱性診断ツール 株式会社エール http://sister.city.fukuoka.lg.jp/ https://vaddy.net/ja/ http://ailes.tv/ その他実績は、弊社サイトをご覧ください。 https://cgfm.jp/ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  5. 5. UIデザインの実績 (スマホアプリ) i広報紙 cosmee2016年9月まで SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  6. 6. UIデザインの実績 ・特定業界向けマッチングサービス  ・職人向け情報共有サービス  ・電子カルテ系  ・特定業界向けECサイト  ・クラウド運用自動化サービス  ・某アプリのひかりTV対応  ・画像編集  ⋯など、色々表に出せません。 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  7. 7. SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  8. 8. これからお話しすること 1. かつてのUIデザインの進め方と課題  2. 現在の、私たちのUIデザインの進め方  3. 一緒に作る理由  4. デザイナーの役割  (時間が余り次第、 実際のSketch制作画面をお見せします) SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  9. 9. 1. かつてのUIデザインの進め方と課題 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  10. 10. かつてのUIデザインの進め方と課題 要件定義 公 開組込 テストシステム開発 システム開発 パーツデザイン コーディング デザイナー参加 (構成そのままで) いい感じに  デザイン  お願いします SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  11. 11. かつてのUIデザインの進め方と課題 ユーザー情報 Service Name 備考 定型文挿入 ログアウト福岡太郎さん、こんにちは 01234567 山田花子 1980/06/18 調査日2019/0928 種別 菓子 たけのこ派に勝つための、きのこのレシピです。 担当者メモ 担当者メモ履歴 基本レシピ 西日本エリア 東日本エリア 海外向け アレルギーフリー ■ スナック 生地配合 ナッツ  アーモンド  くるみ ドライフルーツ  ごま 前回 g3150 3250 1500 50 500 520 g g cc g 初期値 アレルギー成分(  小麦  卵) きのこ派   たけのこ派 印刷 メニュー戻る 展開図 配置 在庫 設備 Excel 登録 所属組織情報 チョコ スナック パッケージ 項目A 項目B 項目C エリア 施設 担当者 優先度 強力粉 コーンスターチ 重曹 サラダ油 卵白 ■チョコ 配合 ナッツ  アーモンド  くるみ ドライフルーツ  ごま 前回 g 3250 1500 50 500 520 g g cc g 初期値 アレルギー成分(  りんご  もも) 優先度 テキストが入ります カカオマス 全粉乳 ココアバター 砂糖 乳化剤 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  12. 12. ユーザー情報 Service Name 備考 定型文挿入 ログアウト福岡太郎さん、こんにちは 01234567 山田花子 1980/06/18 調査日2019/0928 種別 菓子 たけのこ派に勝つための、きのこのレシピです。 担当者メモ 担当者メモ履歴 基本レシピ 西日本エリア 東日本エリア 海外向け アレルギーフリー ■ スナック 生地配合 ナッツ  アーモンド  くるみ ドライフルーツ  ごま 前回 g3150 3250 1500 50 500 520 g g cc g 初期値 アレルギー成分(  小麦  卵) きのこ派   たけのこ派 印刷 メニュー戻る 展開図 配置 在庫 設備 Excel 登録 所属組織情報 チョコ スナック パッケージ 項目A 項目B 項目C エリア 施設 担当者 優先度 強力粉 コーンスターチ 重曹 サラダ油 卵白 ■チョコ 配合 ナッツ  アーモンド  くるみ ドライフルーツ  ごま 前回 g 3250 1500 50 500 520 g g cc g 初期値 アレルギー成分(  りんご  もも) 優先度 テキストが入ります カカオマス 全粉乳 ココアバター 砂糖 乳化剤 かつてのUIデザインの進め方と課題 情報詰め込みすぎ  作業手順が煩雑・長い  あまり使われてない機能で画面が埋まる  操作の重要度が異なるのにボタンの見た目が一緒  色がビビッド過ぎる      SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  13. 13. かつてのUIデザインの進め方と課題 印象は多少良くなったとしても  使い勝手は相変わらずだし。  こんなんで本当にいいのかなぁ⋯ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  14. 14. かつてのUIデザインの進め方と課題 思い込みの  思いやり設計 こんな需要 あるかも? でも、利用者に聞いた訳でもない なぜ、そうなるの? SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  15. 15. かつてのUIデザインの進め方と課題 操作シーンの  シミュレーション不足 OH! 想定外の操作 あれ なぜ、そうなるの? SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  16. 16. かつてのUIデザインの進め方と課題 ガチガチに仕様・納期を固める  ウォーターフォール型開発 なぜ、そうなるの? 後戻りはできないの もう SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  17. 17. かつてのUIデザインの進め方と課題 今なら低予算で実装できる技術もあったり。 開発当時の技術では  実装が困難だった なぜ、そうなるの? その技術、未来には出来るよ マジで?! SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  18. 18. かつてのUIデザインの進め方と課題 そもそも、  何を解決するサービスなのか  把握した上で  課題解決に貢献したい。 困った → 解決した SaCSS Special24  福岡コラボ Special(SaCSS vol.106) せっかくデザイナーとして参加するからには⋯
  19. 19. かつてのUIデザインの進め方と課題 利用者にとって  使いやすいか?使いたいか?  の視点を入れたい。 字が小さすぎて 読めなーい! SaCSS Special24  福岡コラボ Special(SaCSS vol.106) せっかくデザイナーとして参加するからには⋯
  20. 20. かつてのUIデザインの進め方と課題 視覚化することで  問題の発見を早める  手助けをしたい。 SaCSS Special24  福岡コラボ Special(SaCSS vol.106) せっかくデザイナーとして参加するからには⋯
  21. 21. 2. 現在の、私たちのUIデザインの進め方 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  22. 22. 2. 現在の 私たちのUIデザインの進め方 After Before 要件定義 公 開組込 テストシステム開発 システム開発 パーツデザイン コーディング デザイナー参加 要件定義 公 開 運 用 組込 テスト 微調整 システム開発 システム開発 画面設計 デザイン ガイドライン・テンプレートヒアリング  /企画 コーディング デザイナー参加 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  23. 23. 要件定義 組込 システム開発 システム開発 画面設計 デザイン ガイドライン・テンプレートヒアリング  /企画 コーディング 2. 現在の 私たちのUIデザインの進め方 プロジェクト初期のヒアリング・打ち合わせが肝心! 要件定義 画面設計 デ ガイドラヒアリング  /企画 デザイナー参加 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  24. 24. 2. 現在の 私たちのUIデザインの進め方 ワークショップ形式な打ち合わせ 参加メンバー クライアント 決裁権持つ人か  上司を説得できる人 エンドユーザーと  接点のある社員 PM的な人 デザイナー ファシリテーター 兼  マークアップエンジニア エンジニア システム開発会社 CGFM SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  25. 25. 2. 現在の 私たちのUIデザインの進め方 1. アイスブレイク(即興演劇など)  2. ビジネスモデルキャンバス  3. ペルソナ作成  4. ユーザーシナリオ作成  5. 手書きワイヤーフレーム作成  6. 簡易ユーザーテスト タイムスケジュール ワークショップ形式な打ち合わせ 所要時間  6時間~ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  26. 26. 2. 現在の 私たちのUIデザインの進め方 ビジネスモデルキャンバス 対象サービスの価値、対象ユーザー、  利益の仕組み等を視覚化して  チームで共有します。 ワークショップ形式な打ち合わせ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  27. 27. 2. 現在の 私たちのUIデザインの進め方 ペルソナ&シナリオ作成 対象ユーザーが、  そのサービスを利用するシーンを設定し  シナリオを作成します。 ワークショップ形式な打ち合わせ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  28. 28. 2. 現在の 私たちのUIデザインの進め方 手書きワイヤーフレーム シナリオに沿って  各ステップに必要な情報を洗い出します。 ワークショップ形式な打ち合わせ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  29. 29. 2. 現在の 私たちのUIデザインの進め方 簡易ユーザーテスト ペルソナになりきって  操作シミュレーションします。 ワークショップ形式な打ち合わせ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  30. 30. 2. 現在の 私たちのUIデザインの進め方 簡易プロトタイプ 実寸大のプロトタイプを作成して  操作感を検証します。 ワークショップ以降の打ち合わせ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  31. 31. 2. 現在の 私たちのUIデザインの進め方 ワイヤーフレーム共有 全画面プリントアウトして  1部を全員で見ながら意見出しします。 ワークショップ以降の打ち合わせ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  32. 32. 各画面への意見出し 2. 現在の 私たちのUIデザインの進め方 気になった点は  各々ふせんに書き出し、共有します。 ワークショップ以降の打ち合わせ SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  33. 33. 3. 一緒に作る理由 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  34. 34. 3. 一緒に作る理由 ① 本来の目的を見失わず、制作に取り組むため ペルソナなど、  みんなで共有できる指針を作る。  すると、制作過程で迷った時に  本来の目的に沿った判断ができる。 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  35. 35. 3. 一緒に作る理由 ② 各メンバーの視点を最大限に活用するため オラにチカラを!みんな ビジネスの視点、  接客を通しての視点、  開発者としての視点。  それぞれの視点を集約して  デザインに反映する。 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  36. 36. 3. 一緒に作る理由 ③ 認識のズレ・問題点を早期発見するため 店舗責任者の ことでしょ? オーナーのこと だと思ってた… ここでいう 管理者って 最高権限者 じゃないの? SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  37. 37. 4. デザイナーの役割 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  38. 38. 4. デザイナーの役割 ① 利用者の視点を、設計に盛り込む。 デザイナーは、チームの中で一番  利用者のことを忘れてはいけない人。 自分がどう思うか?ではなく  ペルソナだったら、どんな画面が必要? の視点で考える。 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  39. 39. 4. デザイナーの役割 ② 画面デザインのルールを決める。 基本的なUIガイドラインはチェックしておく。 Material Designhttps://material.io/components/ https://developer.apple.com/design/human‑interface‑guidelines/ Human Interface Guidelines SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  40. 40. 4. デザイナーの役割 ② 画面デザインのルールを決める。 デザインのガイドラインを作る。 後からのデザイン変更は、  システム開発側に負担がかかる。  決めてしまう覚悟を持つ。 理由なく、ルールと異なるデザインにしない。
  41. 41. ③「視覚化できる」という強みを活かす。 早めにラフなたたき台を作る。図解する。 視覚化することで、懸念点が浮かび上がる。 開発に入る前に  やらなくていいこと、の発見ができる。  技術検証が必要なこと等が発見できる。 4. デザイナーの役割 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  42. 42. 良いビジュアルデザインは  チームのモチベーションを上げる。 作る前から、もう できた気になったよいいねー! ③「視覚化できる」という強みを活かす。 4. デザイナーの役割 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  43. 43. これが売れたら…次は、アレもしたい デザインの力で  ビジネスを後押しする。 4. デザイナーの役割 ③「視覚化できる」という強みを活かす。 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  44. 44. まとめ 一緒に作れる関係ができる 「関係者みんなが、楽しく仕事に取り組めること」が、私の理想です。 デザイナーとして  求められる役割に集中できる メンバーと指針を共有して  ブレずに制作できる SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  45. 45. 参考書籍 DesignSystems デザイニング  Webアクセシビリティ UXデザインの教科書 SaCSS Special24  福岡コラボ Special(SaCSS vol.106)
  46. 46. ご清聴ありがとうございました。 SaCSS Special24  福岡コラボ Special(SaCSS vol.106) 時間の許す限り  Sketchの作業データをお見せします。

×