要求定義やUXから一緒に考える
デジタルプロダクト・UIデザイン会社

業務システムを開発する中でこんなことありませんか?

開発終盤で重要な要望が出てきてしまった。プロジェクト初期段階で言って欲しかった
システム開発のデザイン面で悩んでいるPdM
クライアントの要望通に作ったのに「何か違う」と突っ返された。でも「何か」って何だ?
システム開発のデザイン面で悩んでいるPdM
CGFMができること

ユーザー中心のデザインで顧客満足度を向上

CGFMは、UX視点でユーザーの感情や行動に基づいた
UIデザインを専門とするデザイン会社です。
ユーザーのニーズや目的を理解した上で
ユーザーがストレスを感じる要素を取り除き、
楽しくて魅力的なユーザー体験のあるデザインを提案します。

CGFMメンバー

開発者だけでなく関係者みんなを巻き込んで
一緒に作ることを大切にします

利用者のためにCGFMとクライアントPdMと開発者の4人が手を取り合ってる様子
疑問に思ってる関係者たち でもどうやって?
疑問にCGFMが流れを説明しようとしている

具体的には次の流れで
一緒に作っていきます

CGFMができること

上流工程から参加して情報を視覚化して
初期段階の議論を促進

私たちはプロジェクトの初期段階から参加して議論を推進します。
デザイナーが議論を構造化し分かりやすく視覚化。
メンバー間の意見の相違があればすり合わせ、情報共有を強化します。

CGFMメンバー

キックオフ

フラットに話し合える関係づくり

お互いの特性や個性を動物占いや性格分析など利用してマッピングしてチームビルディングしてる様子

サービス理解

ビジネスモデルキャンバス等を使って
メンバーと一緒にサービスの解像度を上げていきます

疑問に思ってる関係者たち どんな人が
利用する
サービスですか?
それはね...
疑問に思ってる関係者たち 主要活動は? なるほど
ビジネスモデルキャンバス上の枠[顧客セグメント]に該当し、課題を抱えて泣いているユーザー「作業が煩雑でストレス溜まるよー」
疑問に思ってる関係者たち この人を会議に
読んでもらえますか?
いいですよ

簡易ペルソナ作成

インタビューを通して利用者の解像度を高めます

疑問に思ってる関係者たち「どんな時に使いますか?」「一番ミスが多い工程は?」
簡易ペルソナを作りながらペルソナの気持ちに理解し心から「大変だなー」と言っている

業務フロー理解

利用者解像度の高い人に仕事の流れを演じてもらい
業務フローの解像度を高めます

利用者解像度が一番高い人達に(営業やコールセンターの人など)に実際に業務フローを演じてもらっている様子
演じてもらってる時に出てきたセリフや行動を付箋などにメモして時系列に並べている様子 次の作業は...

ヒアリング後の振り返り

ヒアリングを通して見えてきた課題や
改善点についてメンバーで話し合います

疑問に思ってる関係者たち

簡易プロトタイプ

ヒアリングを通して見えてきた課題や
改善点についてメンバーで話し合います

簡易プロトタイプを作っているCGFMメンバー
プロトタイプうを使ったワークショップ風景

簡易ユーザーテスト

ペルソナになりきって
ヒントなしで操作を完了できるか
メンバーで検証します

簡易プロトタイプを使ってユーザーテストを行っている様子

ユーザーテスト後すぐに振り返って
気づきを共有します

振り返り中の対話の様子。期待されるセリフ「○○○○の画面で何が起こると思いましたか?」「△△△△かなと思ってました」「ふむふむ」「△△△△の動線を変えてみよう」

“早く試して早く失敗”を繰り返す

すぐにプロトタイプを修正してユーザーテストを試して
短期間で画面設計の精度を上げていきます。

ワイヤーフレームなどを手書きで書き、壁に並べて貼っているワークショップ風景

2回目のテスト

2回目のユーザーテスト風景
観察者たちの期待されるセリフ「前回より操作がスムーズだな-」「□□□□の位置の改善の余地あり...っと」
CGFMができること

方向性の共通認識を揃える
初期段階の議論を促進

大まかな画面設計が見えた段階で
開発の方向性をすり合わせて
作るものとスケジュールを協議します

優先度を検討しているチームメンバー達「これが全部できたら最高だよ!」「ただ、納期までの全機能リリースは難しそうだね」
ポジショニングしながら優先度を議論しているチームメンバー達「では、どこから手をつけますか?」「サービスの根幹を考えると機能Cが優先か...」 スケジュールを協議中のチームメンバー達「じゃ、次のミーティングは ○月△日で!」「あの画面からいきましょう!」「それぞれのタスクも決めよう」

プロトタイプ作成

デバイス上で確認できる
プロトタイプを弊社で作成します

Figma等でプロトタイプ作成します 「その日までに要件定義の資料まとめるよ」「○○○に使う技術について調査するよ」

プロトタイプ検証とフィードバック

メンバーで画面共有してプロトタイプを確認し
意見を出し合います

「この画面では□□□の情報は要らないかも」「形になると不足しているものが見えてくるなー」「△△△のログ見たら判断できるかな」

実機でもプロトタイプ確認して
操作感も検証します

ワイヤーフレームにフィードバックを
反映することを繰り返します

弊社のUIデザインの流れ

デザインの流れのフロー図です。ワイヤーフレーム→プロトタイプ→画面構成確定→画面デザイン→画面デザイン確定→組み込み後にデザインチェック。次のフローに進む際は必ずレビューを行い、修正が発生した場合は前のフローに戻ります。

実装後のデザインチェック

システムにデザインを組み込んだ後の
レイアウトや情報などをチェックします

「この画面では□□□の情報は要らないかも」「形になると不足しているものが見えてくるなー」「△△△のログ見たら判断できるかな」

細かい調整を繰り返し、最終チェックへ

「○○の機種では情報が取得できないそうです」「メッセージどの形で出そうか」

ついにリリース

リリースされてメンバーが輪になって喜んでいる様子

リリース後のデザイン改修

サービスは世に出してからが本番
ご要望に応じてリリース後のデザイン改修も行います

「この画面では□□□の情報は要らないかも」「形になると不足しているものが見えてくるなー」「△△△のログ見たら判断できるかな」
CGFMのプロジェクト進行の考え方

プロジェクト初期の打ち合わせをしっかり行い
以降の進行をスムーズにする

←左右にスクロールできます→ 早く手を動かしたい気持ちを抑えて、序盤にきちんと打ち合わせすることで手戻りが少ない開発進捗を目指します

会社概要

社名 合同会社 CGFM(シージーエフエム)
業務内容 Web企画・制作・デザイン・プログラミング
オフィス 〒813-0001 福岡県福岡市東区唐原1-18-13
設立 2006年7月31日
資本金 1,000,000円
業務執行社員 金内 透(代表社員)
金内 和子
理念 Create a Good Future Meeting
打ち合わせ風景のbeforeとafterの図。beforeは活性化しない会議、afterは活性化している会議の様子。CGFMにとって、クリエイティブとは上流工程の打ち合わせから生まれると信じてます。