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

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） お任せではなく 一緒に作るUIデザイン 合同会社CGFM 所属デザイナー 金内 和子 かねうち かずこ

自己紹介 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 金内 和子 かねう ち かず こ 合同会社CGFM 所属デザイナー Web・印刷系デザイン会社勤務を経て、2006年に仲間と合同会社CGFMを設立。 個人・企業・大学・自治体などのWebサイト企画・デザイン制作の他、 業務系サービスのUIデザインを手がける。 WordPress 日本公式キャラクター「わぷー」の母でもある。

SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

Webサイトの実績 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 福岡市姉妹都市ニュースサイト VAddy 株式会社エール http://sister.city.fukuoka.lg.jp/ http://ailes.tv/ クラウド型Web脆弱性診断ツール https://vaddy.net/ja/ その他実績は、弊社サイトをご覧ください。 https://cgfm.jp/

• http://sister.city.fukuoka.lg.jp/
• https://vaddy.net/ja/
• http://ailes.tv/

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） UIデザインの実績 (スマホアプリ) i広報紙 2016年9月まで cosmee

UIデザインの実績 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） ・特定業界向けマッチングサービス ・職人向け情報共有サービス ・電子カルテ系 ・特定業界向けECサイト ・クラウド運用自動化サービス ・某アプリのひかりTV対応 ・画像編集 ⋯など、色々表に出せません。

SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） これからお話しすること 1. かつてのUIデザインの進め方と課題 2. 現在の、私たちのUIデザインの進め方 3. 一緒に作る理由 4. デザイナーの役割 （時間が余り次第、 実際のSketch制作画面をお見せします）

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 1. かつてのUIデザインの進め方と課題

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） かつてのUIデザインの進め方と課題 デザイナー参加 要件定義 パーツデザイン コーディング システム開発 組込 システム開発 いい感じに デザイン お願いします （構成そのままで） 公 テスト 開

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） かつてのUIデザインの進め方と課題 Service Name ユーザー情報 01234567 山田花子 調査日 2019/0928 種別 菓子 きのこ派 担当者メモ 担当者メモ履歴 ■ スナック 印刷 西日本エリア 東日本エリア 展開図 在庫 海外向け ■チョコ 優先度 強力粉 コーンスターチ 重曹 サラダ油 卵白 配合 3150 g 3250 g 1500 g 50 cc 500 g 520 初期値 優先度 たけのこ派に勝つための、きのこのレシピです。 項目A 項目B 項目C 配置 設備 アレルギーフリー アレルギー成分（ りんご もも） テキストが入ります カカオマス 全粉乳 ココアバター 砂糖 乳化剤 ログアウト 定型文挿入 ナッツ アーモンド くるみ ドライフルーツ ごま アレルギー成分（ 小麦 卵） 前回 福岡太郎さん、こんにちは 備考 登録 エリア 施設 担当者 ナッツ アーモンド くるみ ドライフルーツ ごま 生地配合 Excel メニュー たけのこ派 所属組織情報 チョコ スナック パッケージ 1980/06/18 基本レシピ 戻る 前回 g 3250 g 1500 g 50 cc 500 g 520 初期値

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） かつてのUIデザインの進め方と課題 Service Name 戻る  情報詰め込みすぎ  作業手順が煩雑・長い  あまり使われてない機能で画面が埋まる  操作の重要度が異なるのにボタンの見た目が一緒  色がビビッド過ぎる ユーザー情報 01234567 山田花子 調査日 2019/0928 種別 菓子 きのこ派 担当者メモ 担当者メモ履歴 ■ スナック 西日本エリア 東日本エリア 展開図 在庫 海外向け ■チョコ 優先度 強力粉 コーンスターチ 重曹 サラダ油 卵白 配合 3150 g 3250 g 1500 g 50 cc 500 g 520 初期値 優先度 たけのこ派に勝つための、きのこのレシピです。 項目A 項目B 項目C 配置 設備 アレルギーフリー アレルギー成分（ りんご もも） テキストが入ります カカオマス 全粉乳 ココアバター 砂糖 乳化剤 ログアウト 定型文挿入 ナッツ アーモンド くるみ ドライフルーツ ごま アレルギー成分（ 小麦 卵） 前回 福岡太郎さん、こんにちは 備考 登録 エリア 施設 担当者 ナッツ アーモンド くるみ ドライフルーツ ごま 生地配合 Excel たけのこ派 所属組織情報 チョコ スナック パッケージ 1980/06/18 基本レシピ 印刷 メニュー 前回 g 3250 g 1500 g 50 cc 500 g 520 初期値

かつてのUIデザインの進め方と課題 印象は多少良くなったとしても 使い勝手は相変わらずだし。 こんなんで本当にいいのかなぁ⋯ SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

かつてのUIデザインの進め方と課題 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） なぜ、そうなるの？ 思い込みの 思いやり設計 でも、利用者に聞いた訳でもない こんな需要 あるかも？

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） かつてのUIデザインの進め方と課題 なぜ、そうなるの？ 操作シーンの シミュレーション不足 ! H O 外 定 想 あれ 作 操 の

かつてのUIデザインの進め方と課題 なぜ、そうなるの？ ガチガチに仕様・納期を固める ウォーターフォール型開発 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） う も で は り 戻 後 の い きな

かつてのUIデザインの進め方と課題 なぜ、そうなるの？ 開発当時の技術では 実装が困難だった 今なら低予算で実装できる技術もあったり。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） その 技術 、 未来 には 出来 るよ マジ で ?!

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） かつてのUIデザインの進め方と課題 せっかくデザイナーとして参加するからには⋯ そもそも、 何を解決するサービスなのか 把握した上で 課題解決に貢献したい。 困った 解決した →

かつてのUIデザインの進め方と課題 せっかくデザイナーとして参加するからには⋯ 利用者にとって 使いやすいか？使いたいか？ の視点を入れたい。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） て ぎ す さ 小 ！ が い 字 ー な め 読

かつてのUIデザインの進め方と課題 せっかくデザイナーとして参加するからには⋯ 視覚化することで 問題の発見を早める 手助けをしたい。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 2. 現在の、私たちのUIデザインの進め方

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 2. 現在の 私たちのUIデザインの進め方 Before 要件定義 デザイナー参加 パーツデザイン コーディング システム開発 組込 システム開発 公 テスト 開 After デザイナー参加 ヒアリング ／企画 画面設計 要件定義 デザイン ガイドライン・テンプレート コーディング システム開発 組込 システム開発 微調整 テスト 公運 開用

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 2. 現在の 私たちのUIデザインの進め方 プロジェクト初期のヒアリング・打ち合わせが肝心！ デザイナー参加 ヒアリング ／企画 画面設計 要件定義 デデザイン ガイドライン・テンプレート ガイドラ コーディング システム開発 組込 システム開発

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 2. 現在の 私たちのUIデザインの進め方 ワークショップ形式な打ち合わせ クライアント 決裁権持つ人か エンドユーザーと 上司を説得できる人 接点のある社員 参加メンバー システム開発会社 PM的な人 エンジニア CGFM デザイナー ファシリテーター 兼 マークアップエンジニア

2. 現在の 私たちのUIデザインの進め方 ワークショップ形式な打ち合わせ SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 所要時間 時間～ 6 1. アイスブレイク（即興演劇など） タイムスケジュール 2. ビジネスモデルキャンバス 3. ペルソナ作成 4. ユーザーシナリオ作成 5. 手書きワイヤーフレーム作成 6. 簡易ユーザーテスト

2. 現在の 私たちのUIデザインの進め方 ワークショップ形式な打ち合わせ ビジネスモデルキャンバス 対象サービスの価値、対象ユーザー、 利益の仕組み等を視覚化して チームで共有します。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

2. 現在の 私たちのUIデザインの進め方 ワークショップ形式な打ち合わせ ペルソナ＆シナリオ作成 対象ユーザーが、 そのサービスを利用するシーンを設定し シナリオを作成します。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

2. 現在の 私たちのUIデザインの進め方 ワークショップ形式な打ち合わせ 手書きワイヤーフレーム シナリオに沿って 各ステップに必要な情報を洗い出します。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

2. 現在の 私たちのUIデザインの進め方 ワークショップ形式な打ち合わせ 簡易ユーザーテスト ペルソナになりきって 操作シミュレーションします。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

2. 現在の 私たちのUIデザインの進め方 ワークショップ以降の打ち合わせ 簡易プロトタイプ 実寸大のプロトタイプを作成して 操作感を検証します。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

2. 現在の 私たちのUIデザインの進め方 ワークショップ以降の打ち合わせ ワイヤーフレーム共有 全画面プリントアウトして 1部を全員で見ながら意見出しします。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

2. 現在の 私たちのUIデザインの進め方 ワークショップ以降の打ち合わせ 各画面への意見出し 気になった点は 各々ふせんに書き出し、共有します。 SaCSS Special24 福岡コラボ Special（SaCSS vol.106）

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 3. 一緒に作る理由

3. 一緒に作る理由 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） ① 本来の目的を見失わず、制作に取り組むため ペルソナなど、 みんなで共有できる指針を作る。 すると、制作過程で迷った時に 本来の目的に沿った判断ができる。

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 3. 一緒に作る理由 ② 各メンバーの視点を最大限に活用するため ビジネスの視点、 接客を通しての視点、 開発者としての視点。 それぞれの視点を集約して デザインに反映する。 ！ を ラ カ チ に ラ オ な ん み

3. 一緒に作る理由 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） ③ 認識のズレ・問題点を早期発見するため オーナーのこと だと思ってた… ここでいう 管理者って 最高権限者 じゃないの？ 店舗責任者の ことでしょ？

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 4. デザイナーの役割

4. デザイナーの役割 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） ① 利用者の視点を、設計に盛り込む。 デザイナーは、チームの中で一番 利用者のことを忘れてはいけない人。 自分がどう思うか？ではなく ペルソナだったら、どんな画面が必要？ の視点で考える。

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 4. デザイナーの役割 ② 画面デザインのルールを決める。 基本的なUIガイドラインはチェックしておく。 Material Design https://material.io/components/ Human Interface Guidelines https://developer.apple.com/design/human‑interface‑guidelines/

• https://material.io/components/

4. デザイナーの役割 ② 画面デザインのルールを決める。 デザインのガイドラインを作る。 後からのデザイン変更は、 システム開発側に負担がかかる。 決めてしまう覚悟を持つ。 理由なく、ルールと異なるデザインにしない。

4. デザイナーの役割 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） ③「視覚化できる」という強みを活かす。 早めにラフなたたき台を作る。図解する。 視覚化することで、懸念点が浮かび上がる。 開発に入る前に やらなくていいこと、の発見ができる。 技術検証が必要なこと等が発見できる。

4. デザイナーの役割 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） ③「視覚化できる」という強みを活かす。 良いビジュアルデザインは チームのモチベーションを上げる。 ！ ー う ね も 、 い い 前から ったよ な る に 作 気 た き で

4. デザイナーの役割 SaCSS Special24 福岡コラボ Special（SaCSS vol.106） ③「視覚化できる」という強みを活かす。 デザインの力で ビジネスを後押しする。 これが売 れたら… 次は、ア レもした い

まとめ SaCSS Special24 福岡コラボ Special（SaCSS vol.106） 一緒に作れる関係ができる メンバーと指針を共有して ブレずに制作できる デザイナーとして 求められる役割に集中できる 「関係者みんなが、楽しく仕事に取り組めること」が、私の理想です。

参考書籍 DesignSystems デザイニング Webアクセシビリティ SaCSS Special24 福岡コラボ Special（SaCSS vol.106） UXデザインの教科書

SaCSS Special24 福岡コラボ Special（SaCSS vol.106） ご清聴ありがとうございました。 時間の許す限り Sketchの作業データをお見せします。