制作内容： 自主制作
担当範囲： リサーチ / 要件定義 / ユーザーインタビュー / UI作成
制作期間： 2025年2月-3月(約1ヶ月)
制作点数： 29画面
デザインフィードバックも管理できるプロジェクト管理サービス「Fliq」のサービスデザインを行いました。
UI制作にはAtlassianのデザインシステムを使用しております。
このサービスについて
このサービスを作ろうと決めたきっかけは「Figmaのコメントが増えた際の煩雑さ」にありました。
デザインの確認依頼をしてFigma上のコメントが増えると、コメントの進捗状況が追いきれず困ってしまうという問題を感じていました。他部署のデザイナーと交流した際にも同様の問題を抱えていることを知り、この問題を解決するようなサービスを考えました。
制作の流れ
一連の工程ではダブルダイヤモンドの「発散と収束」を意識して取り組みました。
リサーチによってサービスのあるべき姿を探索し、仮説を立ててペルソナやユーザーインタビューで検証しつつ、プロトタイプを作成していきました。
合計約29日間
| 工程 | 日数 |
|---|---|
| 制作工程立案 | 1日 |
| ペルソナ作成 | 1日 |
| ユーザーインタビュー準備・実施 | 1日 |
| ユーザーインタビュー分析 | 2日 |
| ストーリーボード作成 | 1日 |
| ユーザーフロー作成 | 2日 |
| ペーパープロトタイプ作成 | 2日 |
| プロトタイプ作成 | 13日 |
| ユーザビリティテスト実施 | 1日 |
| 最終調整 | 5日 |
01.問題の探索と定義
はじめにWeb上のリサーチでデザインフィードバックが抱える問題点を調査し、以下のことがわかりました。
- 🏹 フィードバックする側（先輩デザイナー、PdMなど）
- 依頼側のコミュニケーション
- メモに記している仕様と異なる
- デザインのステータス(確定or検討中)がわからない
- どこを見れば良いかわからない
- 確認依頼背景がわからない
- 🎯 フィードバックされる側（後輩デザイナーなど）
- デザインソフトのコメント機能
- コメントが多すぎて把握しきれない
- コメントが異なるページに分散していて把握しきれない
- 優先順位付けが曖昧でどれから着手して良いかわからない
- コメントの内容
- どこを修正すればいいのかわからない - どのように修正すればいいのかわからない
このことからフィードバックする側はコミュニケーション起因、フィードバックされる側はデザインツール起因とコミュニケーション起因の問題が発生することがわかってきました。
ペルソナ作成
メインの顧客を「Figmaを活発に利用する事業会社(SaaS系など)」と仮定し、デザインフィードバックのやり取りのコアパターンを以下に仮定しました。
- デザイナー→デザイナー(上下関係)
- デザイナー以外（ディレクター、マーケター、PdM）→デザイナー
そして上記をもとにChatGPTを使い、事業会社のデザイナー(若手、リードデザイナー) 、PdMのペルソナをまとめました。(フォーマットはNijiboxさんの記事を参考)
ユーザーインタビュー
続いてユーザーインタビューを実施しました。
事前準備として台本を作成し、「サービスの前提となる課題」や「インタビューの目的」、「明らかにしたいこと」をテキストにまとめ、ユーザーから具体的な課題や感情を引き出せる質問内容をペルソナも考慮しながら考えました。
| 項目 | 質問内容 |
|---|---|
| アイスブレイク （5分） | 簡単な自己紹介 |
| インタビューの目的と所要時間の説明 | |
| プロフィール （5分） | あなたの年齢と性別を教えてください。 |
| 普段されている仕事の内容について教えてください。 | |
| チームの規模や構成を教えてください。 | |
| 普段使っているツール （5分） | どのようなツールを使用していますか？ |
| Figmaはどのような用途で使用していますか？ | |
| Figma以外に使っているデザインツールはありますか？ | |
| デザインフィードバックの実態 （15分） | フィードバックを依頼・実施することはありますか？ |
| フィードバックを依頼・実施する相手はどなたですか？ | |
| フィードバックを依頼する際、どのような手順で進めますか？ | |
| フィードバックを実施する際、どのような手順で進めますか？ | |
| 最近のフィードバックで印象的だった経験を教えてください。 | |
| Figmaの利用状況と課題 （10分） | Figmaのコメント機能は使っていますか？ |
| Figmaのコメント機能はどのように使っていますか？ | |
| フィードバックを依頼する際にコメント機能で困ったことはありますか？ | |
| フィードバックを実施する際にコメント機能で困ったことはありますか？ | |
| Figma以外でフィードバック管理に使っているツールはありますか？ | |
| 理想のフィードバック体験 （10分） | フィードバックをもっと効率化するために、どんな機能があると嬉しいですか？ |
| もし理想のフィードバックツールがあるとしたら、どんな特徴が必要ですか？ | |
| まとめ （5分） | ここまででお話しいただいた内容をまとめます。 |
| 最後に付け加えたいことはありますか？ |
インタビューは知人のデザイナーさん1名にご協力頂いたほか、Chat GPTの音声会話機能で3名分(若手/リードデザイナー、PdM)実施しました。
実施中は誘導するような質問はせずに、適宜アドリブの質問を加えていくことでニーズや背景状況を深掘りするように意識しました。
| カテゴリ | 項目 | 回答 |
|---|---|---|
| アイスブレイク（5分） | インタビューの目的と所要時間の説明 | |
| プロフィール（5分） | あなたの年齢と性別を教えてください。 | 27歳 男性 |
| 普段されている仕事の内容について教えてください。 | 自社サービスのバナーのサイトに掲載するものの制作だったり、 自社の商品をBtoC向けの生活用品をサイト用に告知するので作る。 チームで新規LPのデザインやロゴを制作する。 | |
| チームの規模や構成を教えてください。 | 規模は10人、(新卒から入った人が3人、上司2人、それ以外中途)。 全員ビジュアルデザイン系。 コーダーのチームが別であったりする、運用のチームもある。 | |
| 普段使っているツール（5分） | どのようなツールを使用していますか？ | Photoshop、Illustrator、Xd(Figmaが代わりになってきていて、 移行し始めている→情報をキャッチアップしていってる)、 Slack(社外含めたチャット)、Google Meet、Google Chat(社内で一番メイン)、 Miro(資料共有) |
| Figmaはどのような用途で使用していますか？ | 実際に移行しているわけではないのでまだXd | |
| デザインフィードバックの実態（15分） | フィードバックを依頼・実施することはありますか？ | 案件が各々あるので、細かいフィードバックの機会はない。 自分からデザインについて聞いたり、2つ用意してどっちか聞いたりする。 たまにチーム全体でやるデザインでは初稿、2、3でMiroで見てフィードバックする。 |
| フィードバックを依頼・実施する相手はどなたですか？ | 上司からもらう | |
| フィードバックを依頼する際、どのような手順で進めますか？ | 上司の時間を使うので、フィードバックをもらうことができないので、案件のチェックのタイミング。工夫して時間取らせない。どっちがいい？など | |
| フィードバックを実施する際、どのような手順で進めますか？ | するパターンはない。(上司or特定の人にするのがルールなので後輩にはしない) | |
| 最近のフィードバックで印象的だった経験を教えてください。 | 先方からの修正+追加依頼が5,6回続いて修正が続いていた。 上司から度々先方から送る前にチェックしてもらっていたが、先方が細かいフィードバックするようになったら向こうがこだわり出しているので忠実に直すようにする(前のデザインのほうがいいとしても) 密に先方とMTGする機会がないので、提出したものにコメントする方式で進めているので、工数を省エネするためにも。 | |
| Figmaの利用状況と課題（10分） | Figmaのコメント機能は使っていますか？ | Xdのリンク発行して、上司に送って、コメントをもらうようにしている |
| Figmaのコメント機能はどのように使っていますか？ | コメントもらうために使っているが(3割)、 リアルタイムでMTGを上司から依頼されて、口頭でデザイン確認している | |
| フィードバックを依頼する際にコメント機能で困ったことはありますか？ | Xdのコメントは1,2,3,4,5というふうに数字を振れ、1は~と指示されるが、 コメントつける位置が曖昧な時がある。(何回か見たらわかるが)。 番号が多くなるほど1をつけた位置に移動(アンカー)しないので、 目視で探さないといけない(そもそもフォーカスされない。ちょっと光る程度？) | |
| Figma以外でフィードバック管理に使っているツールはありますか？ | Xd、Meet(画面共有。文字でのやり取りは時間がかかるので、 向こうが読むのが時間かかるし、こちらもそういう文章を整える必要がある)、 Google Chat(1,2割) | |
| 理想のフィードバック体験（10分） | フィードバックをもっと効率化するために、どんな機能があると嬉しいですか？ | |
| もし理想のフィードバックツールがあるとしたら、どんな特徴が必要ですか？ | ||
| まとめ（5分） | 最後に付け加えたいことはありますか？ | 他の会社はわからないが、直接Meetするより、Figmaが便利なのか？知りたい。 風土やツールによって口頭より正確性が求められるだろうからどちらがいいのか？ |
| カテゴリ | 項目 | 回答 |
|---|---|---|
| アイスブレイク（5分） | インタビューの目的と所要時間の説明 | |
| プロフィール（5分） | あなたの年齢と性別を教えてください。 | 26歳の男性です。 |
| 普段されている仕事の内容について教えてください。 | 普段は自社プロダクトのUI/UXデザインを担当しています。 主にFigmaを使ってワイヤーフレームやプロトタイプを作成し、 エンジニアやPMと連携しながら機能改善や新機能のデザインを進めています。 ユーザーインタビューで得たフィードバックをもとに、 課題を洗い出してUIの改善提案をすることも多いですね。 また、デザインシステムの運用やガイドラインの整備にも関わっています。 | |
| チームの規模や構成を教えてください。 | デザインチームは私を含めて4人で構成されています。 内訳は、シニアデザイナー1人、ミッドレベルデザイナー2人、新卒のジュニアデザイナー1人です。 プロジェクトごとにPM、エンジニア（フロントエンド・バックエンド）と クロスファンクショナルなチームを組んでおり、 普段はそのメンバーと密に連携しながら仕事を進めています。 特に週1回のデザインレビューでフィードバックをもらう機会が多いです。 | |
| 普段使っているツール（5分） | どのようなツールを使用していますか？ | - |
| Figmaはどのような用途で使用していますか？ | - | |
| Figma以外に使っているデザインツールはありますか？ | はい、Figma以外にもいくつかのツールを使っています。 まず、Slackでチーム内のコミュニケーションをとっています。 デザインのフィードバックや簡単な相談もここでやり取りすることが多いです。 次に、Notionを使ってドキュメント管理や議事録の共有、デザインの意図をまとめるのに活用しています。 タスク管理はJiraで行っていて、開発チームとの進捗共有やステータス管理に便利です。 あとは、Zeplinを使うこともありますが、最近はFigmaだけで完結することが増えてきました。 このあたりが日常的に使っている主なツールです。 | |
| デザインフィードバックの実態（15分） | フィードバックを依頼・実施することはありますか？ | はい、フィードバックの依頼も実施も日常的に行っています。 デザインの初期段階では、方向性がずれていないか確認するために シニアデザイナーやPMに早めにレビューを依頼します。 プロトタイプがある程度固まったら、週1回のデザインレビュー会で チーム全体からフィードバックをもらいます。 逆に、同僚のデザインに対してフィードバックをすることもあります。 その際は、見た目だけでなくユーザー体験の観点や、 開発実装のしやすさも考慮してコメントするようにしています。 Slackで簡単なフィードバックをもらうこともあれば、 Figma上で直接コメントを残すことも多いですね。 状況によって使い分けています。 |
| Figmaの利用状況と課題（10分） | Figmaのコメント機能は使っていますか？ | はい、Figmaのコメント機能はよく使っています。 主にデザインレビュー前後のフィードバックや、 エンジニアとのコミュニケーションで活用しています。 具体的には、デザインの細かい修正点や疑問点を ピンポイントで指摘できるので便利です。 特に非同期でやり取りしたいときには重宝していますね。 ただ、課題も感じていて、コメントが増えると どれが重要なのか分かりづらくなることがあります。 また、解決済みのコメントが埋もれてしまい、 後から振り返りにくいのも少し不便ですね。 フィードバックの履歴管理がもっとしやすくなると助かるなと思っています。 |
| フィードバックを依頼する際にコメント機能で困ったことはありますか？ | フィードバックする側としては、特に複数のコメントを残すときに「どれが優先度高いのか」を明確に伝えるのが難しいです。重要な指摘が他の軽いコメントに埋もれてしまうことがあります。 | |
| フィードバックを実施する際にコメント機能で困ったことはありますか？ | フィードバックされる側としては、特に複数人からコメントが集まった場合に、どれを先に対応すべきか迷うことがあります。さらに、解決済みのコメントが整理しづらいので、「あれ、この指摘ってもう対応したんだっけ？」と見返すのに手間取ることもあります。 どちらの立場でも、コメントの優先度やステータス管理がしやすくなると、もっと効率的になると感じています。 | |
| Figma以外でフィードバック管理に使っているツールはありますか？ | はい、Figma以外では主にSlackとNotionを併用しています。 Slackでは、デザインレビュー後にまとめてフィードバックを整理したり、簡単な確認事項を投げたりしています。 特に急ぎの修正や議論が必要な場合は、スレッド機能を使ってやり取りすることが多いです。 Notionは、フィードバックの履歴をドキュメント化するために使っています。 たとえば、レビュー会で出た意見を議事録として残したり、タスク化が必要なフィードバックをまとめたりしています。 ただ、コメントとタスクが別々の場所に散らばるので、情報が分断されやすいのが少し課題ですね。 個人的には、Figma内でフィードバックが完結するともっと効率的だと思うことが多いです。 | |
| 理想のフィードバック体験（10分） | フィードバックをもっと効率化するために、どんな機能があると嬉しいですか？ | 理想のフィードバック体験として、次のような機能があるとうれしいです。 まず、「フィードバックの優先度設定機能」です。 コメントごとに「高」「中」「低」などの優先度をつけられると、 どれから対応すべきか一目で分かります。 次に、「フィードバックのステータス管理」も欲しいですね。 たとえば「未対応」「対応中」「完了」などのラベルを付けられると、 どのコメントが進行中かすぐに把握できます。 Figmaのコメント機能では解決済みにできるだけですが、それだと少し曖昧なんです。 さらに、「フィードバックの一括管理ビュー」もあると便利です。 複数のファイルやページに散らばったコメントを一覧で確認できる ダッシュボードのような機能があると、見落とし防止になります。 あとは、「SlackやJiraとの連携強化」も理想です。 コメントをそのままタスク化したり、Slackに通知を飛ばしてすぐ確認できると、 ツール間の行き来が減って効率的になると思います。 こういった機能があれば、フィードバックの抜け漏れや対応の遅れが減って、 もっとスムーズに進められると感じます。 |
| もし理想のフィードバックツールがあるとしたら、どんな特徴が必要ですか？ | 理想のフィードバックツールには、以下のような特徴が必要だと思います。 まず、直感的で簡単に操作できるインターフェースが大前提です。複雑な操作が多いと、チーム全員が使いこなせない可能性があるので、シンプルでスムーズな体験が重要です。 次に、コメント機能の高度なカスタマイズができると便利です。たとえば、コメントのカテゴリ分けや、優先度やステータスの設定ができること。また、コメントをタスクに変換して、進行状況をトラッキングできるといいですね。 さらに、リアルタイムでのフィードバックの集約も大切です。チームメンバーが異なるタイムゾーンで働いている場合でも、すぐにコメントを追加したり確認したりできる、非同期のやり取りがスムーズにできると助かります。 通知機能の柔軟性も求めます。必要なときに通知が来るように、例えば重要なフィードバックや修正が加えられた際に即座に通知されると便利です。 逆に、コメントの量が多すぎる場合は、通知頻度を調整できると良いですね。 最後に、他のツールとの連携機能も欠かせません。たとえば、FigmaやJira、Slackなどとの統合がスムーズで、ツール間での情報のやり取りが一貫して行えると、作業が一層効率化されます。これらが揃ったフィードバックツールがあれば、チーム全体のコミュニケーションが円滑になり、作業の進行がよりスムーズになると感じます。 | |
| まとめ（5分） | 最後に付け加えたいことはありますか？ | 最後に付け加えるとすれば、フィードバックの質を高めるためには、ツールだけでなく文化やコミュニケーションの仕組みも重要だという点です。 ツールが便利でも、フィードバックが一方的だったり、曖昧だったりすると、効率的に進めるのは難しいです。 フィードバック文化として、建設的な意見交換を重視し、意図や背景を明確に伝えることが大切だと思っています。 例えば、単に「ここが悪い」と言うのではなく、「なぜその部分がうまくいかないのか」「どう改善したらユーザー体験が良くなるか」といった具体的な提案があると、次のアクションが明確になりやすいです。コミュニケーションの透明性も大事ですね。 フィードバックに対する感謝の気持ちや解決状況の共有ができていれば、チームメンバーがより積極的にフィードバックを出してくれると思います。 こうした文化や仕組みが整っていれば、ツールがより効果的に活用できると感じます。 |
| カテゴリ | 項目 | 回答 |
|---|---|---|
| プロフィール（5分） | あなたの年齢と性別を教えてください。 | はい、私は35歳の男性です。 普段のデザインフィードバックについてお話しするのは楽しみです。 よろしくお願いします。 |
| 普段されている仕事の内容について教えてください。 | 普段は、新しい機能のデザインや、既存のUIを改善することが多いです。 また、デザインレビューを通じてチームと協力し、ユーザー体験の向上を目指しています。 | |
| チームの規模や構成を教えてください。 | チームは10人規模で、プロダクトマネージャー、エンジニア、デザイナーがバランス良くいます。 それぞれが密に連携して動いています。 | |
| 普段使っているツール（5分） | どのようなツールを使用していますか？ | 主にFigmaを使ってデザインしています。 他にも、プロトタイピングツールやコミュニケーションツールを併用しています。 |
| Figmaはどのような用途で使用していますか？ | デザインの作成や共有、フィードバックの反映に使っています。 チームでのコラボレーションが非常にスムーズになります。 | |
| Figma以外に使っているデザインツールはありますか？ | はい、たまにSketchやAdobe XDも使用しますが、メインはFigmaです。 他にはプロトタイプ作成にPrincipleを使うこともあります。 | |
| デザインフィードバックの実態（15分） | フィードバックを依頼・実施することはありますか？ | はい、デザインの各段階でフィードバックを頻繁に依頼します。 特にプロジェクトの初期と中間で重要視しています。 |
| フィードバックを依頼・実施する相手はどなたですか？ | 主にチームのエンジニアやプロダクトマネージャー、他のデザイナーに依頼します。 また、時にはユーザーからのフィードバックも取り入れます。 | |
| フィードバックを依頼する際、どのような手順で進めますか？ | Figma上でコメント機能を使ったり、定期的なミーティングで直接話し合ったりします。 スクリーンショットを共有することもあります。 | |
| フィードバックを実施する際、どのような手順で進めますか？ | 主にFigmaのコメント機能を活用して進めます。 必要に応じて、チャットやビデオ会議で直接話すこともあります。 | |
| 最近のフィードバックで印象的だった経験を教えてください。 | 最近、新機能のデザインを提案した際に、チームから非常に具体的なフィードバックをもらいました。 そのおかげで、デザインが大きく改善されました。 | |
| Figmaの利用状況と課題（10分） | Figmaのコメント機能は使っていますか？ | はい、Figmaのコメント機能は頻繁に使っています。 とても便利ですが、時々コメントが増えすぎて混乱することもあります。 |
| Figmaのコメント機能はどのように使っていますか？ | デザイン案に対する具体的なフィードバックをもらうために使います。 また、修正点や質問を残す際にも活用しています。 | |
| フィードバックを依頼する際にコメント機能で困ったことはありますか？ | コメントが増えると、重要なフィードバックが埋もれてしまうことがあります。 また、コメントの意図が分かりにくいこともあり、解釈に時間がかかることがあります。 | |
| フィードバックを実施する際にコメント機能で困ったことはありますか？ | フィードバックが具体的でない場合、どう修正すべきか迷うことがあります。 また、コメントが多すぎて整理が難しいこともあります。 | |
| Figma以外でフィードバック管理に使っているツールはありますか？ | はい、SlackやTrelloなども活用しています。 特にタスク管理やディスカッションのために使うことが多いです。 | |
| 理想のフィードバック体験（10分） | フィードバックをもっと効率化するために、どんな機能があると嬉しいですか？ | フィードバックの優先度を簡単に設定できる機能や、 コメントをカテゴリーごとに整理する機能があると助かります。 |
| もし理想のフィードバックツールがあるとしたら、どんな特徴が必要ですか？ | 一元管理できるフィードバックツールが理想です。 優先度の設定、カテゴリ分け、リアルタイムでのコラボレーション機能があると便利ですね。 | |
| まとめ（5分） | 最後に付け加えたいことはありますか？ | はい、フィードバックは製品の質を高める重要なプロセスだと思います。 効率的なツールが増えれば、もっとスムーズになると感じます。 |
| カテゴリ | 項目 | 回答 |
|---|---|---|
| プロフィール（5分） | あなたの年齢と性別を教えてください。 | 私は現在40歳の男性です。 |
| 普段されている仕事の内容について教えてください。 | 主に新製品の企画や開発、チームのマネジメントをしています。 | |
| チームの規模や構成を教えてください。 | 私のチームは20人ほどで、デザイナー、エンジニア、マーケターが含まれています。 | |
| 普段使っているツール（5分） | どのようなツールを使用していますか？ | 普段はFigma、Jira、Confluenceなどをよく使っています。 |
| Figmaはどのような用途で使用していますか？ | Figmaは主にデザインの共有やフィードバックに活用しています。 | |
| Figma以外に使っているデザインツールはありますか？ | - | |
| デザインフィードバックの実態（15分） | フィードバックを依頼・実施することはありますか？ | はい、頻繁にフィードバックを依頼し、実施しています。 |
| フィードバックを依頼・実施する相手はどなたですか？ | 主にデザインチームやステークホルダーです。 | |
| フィードバックを依頼する際、どのような手順で進めますか？ | まずFigmaでデザインを共有し、具体的なポイントを記載してフィードバックを依頼します。 | |
| フィードバックを実施する際、どのような手順で進めますか？ | まずデザインを詳細に確認し、具体的な改善点をコメントします。 | |
| 最近のフィードバックで印象的だった経験を教えてください。 | あるプロジェクトで、細かな改善点を具体的に指摘してもらい、それが最終的に製品のクオリティ向上に大きく貢献したことです。 | |
| Figmaの利用状況と課題（10分） | Figmaのコメント機能は使っていますか？ | はい、Figmaのコメント機能は頻繁に利用しています。 |
| Figmaのコメント機能はどのように使っていますか？ | デザインの具体的な箇所にコメントを残し、フィードバックや修正依頼をしています。 | |
| フィードバックを依頼する際にコメント機能で困ったことはありますか？ | はい、コメントが多くなると管理が難しくなることがあります。 | |
| フィードバックを実施する際にコメント機能で困ったことはありますか？ | 特に長文のコメントは埋もれがちで、見逃すことがある点が課題です。 | |
| Figma以外でフィードバック管理に使っているツールはありますか？ | はい、Figma以外にJiraを使ってフィードバックを管理しています。 | |
| フィードバックはどのように管理されていますか？ | Jiraでタスクを作成し、進捗や対応状況を追跡しています。 | |
| 理想のフィードバック体験（10分） | フィードバックをもっと効率化するために、どんな機能があると嬉しいですか？ | フィードバックの優先度を簡単に設定できる機能があると助かります。 |
| もし理想のフィードバックツールがあるとしたら、どんな特徴が必要ですか？ | フィードバックを一元管理でき、優先度やステータスをリアルタイムで追跡できる機能が必須です。 | |
| まとめ（5分） | 最後に付け加えたいことはありますか？ | 特にありません。質問ありがとうございました。 |
インタビューの発言は付箋にまとめてグルーピングを行い、以下の示唆が得られました。
- ユーザーはどのようにデザインフィードバックしているのか？
- 主にプロジェクトの初期や中間、定期的なデザインレビュー会のタイミングでフィードバックを行う。フィードバックはデザイナー間やシニアデザイナーやPM、エンジニアで行う。Figmaのコメント機能を使用するほか、時間を優先する際にはSlackなどのチャットツールや、ミーティングツールを使用する。
- デザインフィードバックする上での課題や気をつけていることは何か？
- フィードバックの際には意図や背景を伝え、具体的な内容になるように気をつける。また、A,B案を作成して意思決定をしやすくしたり、ユーザー体験の観点や開発実装のしやすさも考慮する。
- フィードバックする上でFigmaでの機能面に課題を感じているのか？
- コメントが多くなった際や複数人からコメントが来た際の優先順位、修正を反映したかといったステータスの確認、解決済みのフィードバックを振り返りづらいといった課題。
ストーリーボード(定義)
調査によって浮き彫りとなったペインとニーズをもとにストーリーボードを作成し、「ユーザーとサービスの関係性」を可視化しました。
サービスのあり方見直し
当初は「デザインフィードバック管理SaaSを作ること」を目的にしていましたが、ユースケースを整理する中で、「デザインフィードバック専用のツールは、いずれ使われなくなるのではないか？」 という懸念が生まれサービスのあり方を見直すことにしました。
懸念が生まれた理由としてはサービスの影響範囲が限定的でありインパクトが少なく、導入によってスイッチングコストが発生し、かえって生産性を下げる可能性があるためです。
過去のユーザーインタビューを振り返ると、多くのユーザーが Jiraなどのプロジェクト管理ツールを活用してフィードバックを管理している ことが分かりました。そこで、「デザインフィードバックも管理できるプロジェクト管理サービス」 にすることで、普段使いのツールにデザインフィードバック機能を組み込み、ユーザー体験を向上できると考えました。
この方針に基づき他社のプロジェクト管理ツールBacklog・Asana・Jiraを参考にしながら、プロジェクト内でタスクを作成し、そのタスク内でデザインのやり取りを行う仕組みにしました。
ユーザーフロー(定義)
サービスの再検討を踏まえ、コア体験を以下の4つに分けてそれぞれユーザーフローを作成しました。（フォーマットはbroadmixさんの記事を参考）
【フロー①】タスクを立ててフィードバック依頼（若手デザイナー想定）
【フロー②】Fliqで通知を受け取り、フィードバックをする（リードデザイナー想定）
【フロー③】フィードバックの通知を受けた後に優先順位を確認（若手デザイナー想定）
【フロー④】フィードバック反映ステータスを確認（PdM想定）
各フローをまとめたものが以下の図になります。
02.解決策の展開と提供
これまでの問題の定義と解決策の展開を踏まえてプロトタイプを作成していきました。
プロトタイプ作成
Figmaは開かずにはじめはペーパープロトタイプを作成することで、イメージの具体性を段階的に上げていきました。
ペーパープロトタイプVer.1
ペーパープロトタイプVer.2
ペーパープロトタイプを作成しオブジェクトのあたりがついてきたため、OOUIに則りサービス全体のオブジェクトを整理しました。
FigmaでのプロトタイピングにはAtlassian Design System(通称ADS。プロジェクト管理ツールJiraを展開しているAtlassianのデザインシステム)を使用しました。
選定した理由としては業務を想定した場合、一からデザインシステムを作るよりも既存のものを活用するケースの方が多いと考えたためです。Atlassianはプロジェクト管理ツールJiraのコンポーネントも提供しているため、そのコンポーネントを一部再利用しユーザー体験に注力して設計しました。
フローごとのプロトタイピングで工夫した点をご紹介します。
- サイドピークの活用
タスクはプロジェクト以上に作成する頻度、開く頻度も高いため、毎回フルサイズで開くとユーザーが迷う懸念がありました。そこでNotionを参考にサイドピークで開くようにし、ユーザーの操作性を損なわないようにしました。
- スラッシュコマンドの活用
デザインフィードバック依頼の際に「デザインの背景・意図を伝えることが重要である」とリサーチ結果などから感じていました。そのためコメント欄で「”/”スラッシュコマンド」を採用し、省スペースで依頼フォーマットを呼び出し、それに沿ってコメントすることでコミュニケーションコストを減らせるようにしました。
- Figmaに馴染むUI
Figmaのコメント機能に「優先順位を割り当てる機能」を追加するにあたり、既存のアイコンの動作と違和感が生じないよう配慮しました。さらに、アイコンの意味が直感的に伝わるようTooltipを追加し、ユーザーが迷わず操作できる工夫を施しました。
- 柔軟性のあるフィルター機能
「複数ページにまたぐコメントの管理がしにくい」というユーザーの悩みから、適用するフィルター次第でリストに表示するコメントを変更できるようにしました。
専用のプラグインを実行することで、FigmaのコメントをFliqの指定したプロジェクトに自動で集積できる仕様にしました。また、Figmaのコメント機能に「優先順位を割り当てる機能」（実装可否は未確定）を追加し、優先順位が設定されたコメントのみを集積します。
各コメントはプロジェクトに紐づいており、プロジェクト配下のタスクごとにフィルタリングして表示できるため、フィードバックの進捗状況を簡単に確認できます。タスクの作成頻度が高く、タスクごとにFigmaのコメントを手動で紐づけるのは負担が大きいと考え、この仕様を採用しました。
ユーザビリティテスト実施
デザイナーさん1名にユーザビリティテストを実施しました。ユーザビリティテストは「プロトタイプで作成した4つの主要なフローが問題なく簡単にできるか」の検証を行いました。
形式：思考発話法（オンライン）
実施日：2025/02/27
ユーザー：グラフィックデザイナー（男性 5年目）
| フロー | 行動 | 発言 |
|---|---|---|
| フロー①【FB依頼者】 タスクを立ててフィードバック依頼 | サイドメニューからプロジェクトを開く（プロジェクトがあるからまず開いた） プロジェクトTOPで「タスクを追加」が見当たらず迷う プロジェクトキーを押してプロジェクト単体ページを開く 「タスクを追加」ボタンを見つけて押す タスクの詳細情報を入力する（Clickのみ） コメント入力欄を押す 「フォーマット一覧」から依頼フォーマットを選択する コメントを送信する | 【プロジェクトTOP】 プロジェクトを追加はわかりやすい 「タスクを追加」がプロジェクトページにないのでわかりづらい 【タスクページ】 アイコンがあれば誰宛にコメントを送っているのかがわかりやすい 【ホーム】 タスクを追加する頻度が高いのであれば上に置くなど優先順位を上げると良さそう ウィジェットが4分割なので優先順位がわからない。 視線的に色々できるけど、優先順位を整理するといいかも 「プロジェクトを追加」も青くして、「ユーザーを追加」よりも重要度を上げると良さそう。 サイドピークのホームとプロジェクトが同じ色味なので差分があるとわかりやすいかも |
| フロー②【FB請負人】 Fliqで通知を受け取り、フィードバックをする | ナビゲーションの通知アイコンを押す（すぐ見つかっていた） 最新のコメントをクリックしてタスクページを開く タスクページの下部にいく コメントを見る コメント入力欄を押す （コメントの内容を見てFigmaページに飛ぶ前にコメント） （Figmaのフィードバック依頼してきたページに移動することを促す） Figmaへの遷移がわからず迷う 埋め込みの中の遷移リンクを見つけてFigmaに移動する コメント箇所をクリックしてコメント。優先順位を設定して送信 | 【タスクページ】 ホームとサイドピークの色味が同じなので変えたほうがいいかも 「Figmaのコメント」も色の要素が必要か。線で区切るといい？ Figmaのページに飛ぶ前にコメントエリアをすぐに押す 優先順位のアイコンはユーザーアイコンのように丸いアイコンだといい気がする。 シンプルなのはいいが、図形のアイコンだけだとわかりづらい。 コメントのフォーマット呼び出しのタイトルは文字だけじゃなくてチェックマークや色別で分けるとわかりやすいかも？ 左に色味を入れるなど コメントは入れ子にするのはわかりづらい。 案件管理ツールによるところがあるから。 返信と普通のコメントが2つもいらないと思う。 Backlogのように濃淡が欲しい。 階層構造を理解していても視線が定まらない。 色を使わないことでメモ感がある。 色をつけたら急激に完成度が上がる？ |
| フロー③【FB依頼者】 フィードバックの通知を受けた後に優先順位を確認 | ナビゲーションの通知アイコンを押す 最新のコメントをクリックしてタスクページを開く タスクページの下部に移動してコメントを確認 上に戻ってFigmaコメントの優先度を確認 | 迷わずに操作はできていた 【タスクページ】 優先度は文字と一緒に使うとしても、別案があってもいいかも。 丸い縁の中にマークがあるなど。 発信者アイコンのようにすると視線がそこにいくのでわかりやすいと思う |
| フロー④【FB請負人】 フィードバック反映ステータスを確認 | プロジェクトTOPに飛ぶ フィードバックのタブに切り替える フィードバック進行状況を確認（すぐ見つかっていた） | 【プロジェクト】 概要は初見ではわかりやすいが、常に置いておくにはサイズ感が大きいので縮めて優先度つけるといい タスクの状況がいきなり出てきたら概要の説明が要らなくなるかもしれない タスクの状況を大きくするなど？縦に長くするなど？ 「最近の更新」と「タスクの状況」のサイズを同じにせず、「最近の更新」を1/3にするなど？ 「タスクの状況」を左上に欲しい 【フィードバック一覧】 一個一個のリストの違いがわかりづらい 「ファイル」がステータスのような色使いだったり、ページと内容の間に線があるなどが良い（間が空いているなどがいい） 内容の左にタイトル（内容の要約）があるとわかりやすい 内容にタイトルがあるのはメールやBacklogなどを見ると普通だと思う リストにするほどフィードバックの重要度が高いのか？ グラフィックの仕事だとそこまで大事ではないがUI制作だと大事そう。 リストのページから実際にFigmaに遷移する絵が欲しい。 ホーム画面に優先度や色の濃淡が欲しい |
フィードバックの反映
ユーザビリティテストで得られたことは表にまとめ、重要度や反映するかどうかを判断していきました。
重要度については「想定していたコアのフローを阻むものの改善」を最重要とし、「機能に直接は関係しない意匠の改善」は一つ下げたものにしています。
ユーザビリティテストではタスクと機能について以下のような気づきがありました。そしてユーザビリティテスト結果の反映に加えて「サービスがシンプルであり、タスク中心で操作がしやすい」ことを目指して調整を加えていきました。
- タスクの重要性
- プロジェクトを中心にサービス設計を考えていたが、ユーザー視点ではタスク中心でアクションを起こしていく
- 機能の複雑性
- 「コメントの入れ子構造」や「タスクとプロジェクトとの関係」などの概念はユーザーによってはメンタルモデルがなく理解しづらい
ホームの情報整理
| Before | After | |
|---|---|---|
| ホーム | ウィジェットやプロジェクトを追加の重要度が伝わらない | タスクウィジェットを左上に配置し、その横にカレンダーウィジェットを配置することで 自分が担当しているタスクとその期限を確認できるようにしました。 複数人での作業中に容易にタスクのステータスを変更できてしまうと トラブルにつながる懸念があるため、タスク横のチェックボックスを削除しました。 |
プロジェクトTOPの情報整理
| Before | After | |
|---|---|---|
| プロジェクト | 概要が大きすぎる（プロジェクトTOP） | 「概要」の優先度を下げコンパクトに配置し、「タスクの状況」の優先度を上げて大きく配置しました。 「最近の更新」を「アクティビティ」に変更し、メンバーの行動ログを把握できるようにしました。 |
サイドメニューの項目追加
| Before | After | |
|---|---|---|
| サイドメニュー | 「タスクを追加」の場所がわからない | サイドメニューにマイタスクを追加し、どのページからでもタスクを追加できるようにしました（プロジェクトに紐づかないタスクの格納場所としても機能） |
タスクの「コメントの宛先」と「コメントフォーマットの視認性」
| Before | After | |
|---|---|---|
| タスク | コメントが誰宛かわかりづらい | コメントのメンションの際にサジェストUIを追加しました |
| コメントフォーマットが文字だけでわかりづらい | コメントのフォーマットタイトルの表示領域を広げ、すみカッコ【】を使いラベリングしました |
| ステータス | ページ | タイトル | 概要 | 対応内容 |
|---|---|---|---|---|
| ✅ 完了 | プロジェクトTOP | 「タスクを追加」ボタンの配置 | プロジェクトTOPでタスクの追加方法を迷う | サイドメニューの「マイタスク」横の追加ボタンからタスクを作成できるようにしました。 プロジェクトに紐づけられていないタスクを格納する場所としてマイタスクを追加しました。 リンクを全て青くしていたことでアクションボタンが埋もれていたため、リンクの色を整理しました。 |
| ✅ 完了 | ホーム | ホームの優先順位整理 | 「タスクを追加」頻度が高い | 「マイタスク」ウィジェットを左上に移動し、タスクに対するアクションの優先度をあげました。 |
| ✅ 完了 | ホーム | ホーム画面の優先度 | ウィジェットやプロジェクトを追加の重要度が伝わらない | 「あなたのフィードバック状況」と「マイタスク」を削除して「タスク」ウィジェットとしてまとめました。 「カレンダー」を追加してタスクの期限を意識しやすいようにしました。 自分に紐づく情報の優先順位を上げました。 |
| 対応しない | サイドメニュー | プロジェクトとホームの視認性 | 色味が同じで区別しづらい | サイドメニューの項目はそれぞれすでにアイコンとテキストで差別化されているので対応なし。 |
| ✅ 完了 | タスク | コメントの宛先の明示 | 誰宛かわかりづらい | コメントのメンションをする際にユーザーがサジェストされるようにしました。 |
| 対応しない | タスク | 優先順位アイコンのデザイン | 直感的に理解しづらい | 低い優先度から高い優先度まで、認知コストをそこまでかけず表現する方法になっているので、現状から変更せず、可能な限りテキストとともに提供して学習を助ける。 |
| ✅ 完了 | タスク | コメントフォーマットの視認性 | 文字だけでわかりづらい | 余白を調整して表示できるフォーマット見出しの文字数を増やしました。 フォーマット見出しをすみカッコ【】でラベリングし、認知の負荷を減らしました。 |
| ✅ 完了 | タスク | コメントの入れ子構造 | 仕組みを理解していないとわかりづらい | 入れ子構造の概念が複雑性を増すため、削除しました。 |
| 対応しない | タスク | サイドピークの区別 | タスクを開くのにサイドピークを使用しているが、元画面との区切りがわからない。視線が散らばる | スケジュールを見ながらタスクを確認したいなど、ながらでの操作は強みでもあるため現状のまま。 |
| ✅ 完了 | タスク | タスクの項目の区切り | 簡素とのコメントあり | タスク情報のラベルのコントラストや余白を調整し、文字文字しい印象を解消しました。 タスクの各項目の情報密度が高かったため、区切り線を追加しました。 |
| ✅ 完了 | プロジェクト | Figma遷移の改善 | 遷移方法がわかりづらい | 「Fliqで開く」ボタンを「Figmaで開く」ボタンに変更しました。 |
| ✅ 完了 | プロジェクト | プロジェクトのレイアウト | 概要が大きすぎる | プロジェクトに訪れる目的を整理し、ウィジェットのサイズを調整しました。 |
| ✅ 完了 | プロジェクト | フィードバック一覧の視認性 | リスト(行)の違いが不明瞭（タイトルがないなど） | テーブルの体裁を整えました。宛先（メンション）を追加することで自分に関係があるタスクか判断しやすくしました。 |
| ✅ 完了 | プロジェクト | Figma遷移の可視化 | 遷移が不明瞭 | コメントがついたFigmaページへの移動導線と遷移先ページを作成しました。 |
03.終わりに
ここまでお読みいただきありがとうございます。
他社のデザインシステムを使用してのデザインの経験が少なかったため、カラーのルールやエレベーションの使用用途など知る機会になり学びとなりました。
また顧客目線になることが、プロダクトが提供できる価値に大きく影響することを身をもって感じ、改めて顧客理解の重要性を感じました。世に出されているプロダクトはその辺りを考え抜かれており、体験がシームレスで学ばせていただくことが多かったです。
より多くの人をプロダクトを通じて豊かにしていくというミッションを実現していくために、これからも顧客目線で精進していけたらと思います。
