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

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

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

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

UIデザインの実績 (スマホアプリ)
i広報紙 cosmee2016年9月まで

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

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

1. かつてのUIデザインの進め方と課題

かつての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
初期値
アレルギー成分（　りんご　　もも）
優先度テキストが入ります
カカオマス
全粉乳
ココアバター
砂糖
乳化剤

ユーザー情報
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
初期値
アレルギー成分（　りんご　　もも）
優先度テキストが入ります
カカオマス
全粉乳
ココアバター
砂糖
乳化剤
情報詰め込みすぎ
作業手順が煩雑・長い
あまり使われてない機能で画面が埋まる
操作の重要度が異なるのにボタンの見た目が一緒
色がビビッド過ぎる






印象は多少良くなったとしても
使い勝手は相変わらずだし。
こんなんで本当にいいのかなぁ⋯

思い込みの
思いやり設計こんな需要
あるかも？
でも、利用者に聞いた訳でもない
なぜ、そうなるの？

操作シーンの
シミュレーション不足
OH!
想定外の操作
あれ
なぜ、そうなるの？

ガチガチに仕様・納期を固める
ウォーターフォール型開発
なぜ、そうなるの？後戻りはできないの
もう

今なら低予算で実装できる技術もあったり。
開発当時の技術では
実装が困難だった
なぜ、そうなるの？その技術、未来には出来るよ
マジで?!

そもそも、
何を解決するサービスなのか
把握した上で
課題解決に貢献したい。
困った
→
解決した
せっかくデザイナーとして参加するからには⋯

利用者にとって
使いやすいか？使いたいか？
の視点を入れたい。
字が小さすぎて
読めなーい！

視覚化することで
問題の発見を早める
手助けをしたい。

2. 現在の、私たちのUIデザインの進め方

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

要件定義組込
システム開発
システム開発
画面設計デザイン
ガイドライン・テンプレートヒアリング
／企画
コーディング
プロジェクト初期のヒアリング・打ち合わせが肝心！
要件定義
画面設計デ
ガイドラヒアリング
／企画

ワークショップ形式な打ち合わせ
参加メンバー
クライアント
決裁権持つ人か
上司を説得できる人
エンドユーザーと
接点のある社員
PM的な人デザイナーファシリテーター兼
マークアップエンジニア
エンジニア
システム開発会社 CGFM

1. アイスブレイク（即興演劇など）
2. ビジネスモデルキャンバス
3. ペルソナ作成
4. ユーザーシナリオ作成
5. 手書きワイヤーフレーム作成
6. 簡易ユーザーテスト
タイムスケジュール
所要時間
6時間～

ビジネスモデルキャンバス
対象サービスの価値、対象ユーザー、
利益の仕組み等を視覚化して
チームで共有します。

ペルソナ＆シナリオ作成
対象ユーザーが、
そのサービスを利用するシーンを設定し
シナリオを作成します。

手書きワイヤーフレーム
シナリオに沿って
各ステップに必要な情報を洗い出します。

簡易ユーザーテスト
ペルソナになりきって
操作シミュレーションします。

簡易プロトタイプ
実寸大のプロトタイプを作成して
操作感を検証します。
ワークショップ以降の打ち合わせ

ワイヤーフレーム共有
全画面プリントアウトして
1部を全員で見ながら意見出しします。

各画面への意見出し
気になった点は
各々ふせんに書き出し、共有します。

① 本来の目的を見失わず、制作に取り組むため
ペルソナなど、
みんなで共有できる指針を作る。
すると、制作過程で迷った時に
本来の目的に沿った判断ができる。

② 各メンバーの視点を最大限に活用するため
オラにチカラを！みんな
ビジネスの視点、
接客を通しての視点、
開発者としての視点。
それぞれの視点を集約して
デザインに反映する。

③ 認識のズレ・問題点を早期発見するため
店舗責任者の
ことでしょ？
オーナーのこと
だと思ってた…
ここでいう
管理者って
最高権限者
じゃないの？

① 利用者の視点を、設計に盛り込む。
デザイナーは、チームの中で一番
利用者のことを忘れてはいけない人。
自分がどう思うか？ではなく
ペルソナだったら、どんな画面が必要？の視点で考える。

② 画面デザインのルールを決める。
基本的なUIガイドラインはチェックしておく。
Material Designhttps://material.io/components/ https://developer.apple.com/design/human‑interface‑guidelines/
Human Interface Guidelines

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

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

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

これが売れたら…次は、アレもしたい
デザインの力で
ビジネスを後押しする。

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

参考書籍
DesignSystems デザイニング
Webアクセシビリティ
UXデザインの教科書

ご清聴ありがとうございました。
時間の許す限り
Sketchの作業データをお見せします。

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to お任せではなく一緒に作るUIデザイン - SaCSS Special24 福岡コラボ Special（SaCSS vol.106） (20)

More from kazuko kaneuchi

More from kazuko kaneuchi (8)

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