Tipshelf — 社内ナレッジ共有ツールのUXケーススタディ
分散チームで共有されにくい会社固有の知識を、検索・理解・再利用しやすい形で残す社内ツールのコンセプト。自身のチーム経験とリフレクションをもとに、架空のペルソナ、投稿テンプレート、タグ・タクソノミー、ロール別ユーザーフロー、ワイヤーフレーム、ハイファイ画面、Figmaプロトタイプを設計した。2025年5月〜7月頃に制作した自発的なUXケーススタディ。
関連サービス：
この実績が活きるご相談
社内固有の知識を共有・再利用しやすい形に整理し、投稿する人と探す人の両方を支える情報構造と操作フローを検討したUXケーススタディです。
- 社内固有の知識を再利用可能な形で残したい
- Slackや個別資料に分散した知見を探しやすくしたい
- 投稿内容の構造とタグ分類を設計したい
- 投稿者の負担と閲覧者の理解しやすさを整理したい
- 分散チームの非同期ナレッジ共有を検討したい
- 社内ツールの構想をユーザーフローとプロトタイプへ展開したい
概要
Tipshelfは、ドキュメント化されていない会社固有の知識を、チーム内で共有・再利用しやすくするための社内ツールのコンセプトです。2025年5月から7月頃に、自発的なUXケーススタディとして制作しました。自身が分散・クロスファンクショナルなチームで働いた経験と、ナレッジ共有についてまとめたリフレクションをもとに、問題設定から画面設計までを行いました。ペルソナ、利用シナリオ、投稿テンプレート、タグ・タクソノミー、サンプル投稿、ロール別ユーザーフロー、ワイヤーフレーム、ミニスタイルガイド、ハイファイ画面、インタラクティブプロトタイプをFigmaで作成しました。
背景
会社固有のフレームワーク、社内ツール、内部プロセス、文脈に依存する解決方法は、一般的な検索では見つけにくく、正式なドキュメントにも残らないことがあります。Slackなどに最終的な決定が残っていても、その判断に至るまでに試したこと、失敗した方法、検討した選択肢、チーム内での背景までは追いにくい場合があります。新しく参加したメンバーや別チームのメンバーは、同じ問題を再び調査することになります。Tipshelfでは、解決策の結論と、その背景・試行・判断・学びを一つの投稿として残し、別のメンバーが後から探して再利用できる形を検討しました。
コアとなる課題
会社固有の知識について、投稿時の負担、情報の構造、発見性、再利用性、継続的な共有動機を一つの仕組みとして設計することが課題でした。
- 社内固有の知識がドキュメント化されず、個人やプロジェクト内に留まりやすい
- 最終的な決定は残っていても、判断の背景や試行錯誤を追いにくい
- 同じトラブルシューティングが複数のメンバーによって繰り返される可能性がある
- 新しいメンバーが、過去の問題解決プロセスを参照しにくい
- 投稿時に何を書けばよいか分からず、共有が負担になり得る
- 情報量が増えたときに、関連する投稿を横断して探せる分類が必要
- 投稿への反応や再利用の状況を、投稿者が認識できる仕組みが必要
- 一般公開情報と社内固有の知識を区別する投稿基準が必要
想定ユーザー（架空のペルソナ）
- Lisa：分散チームへ参加したばかりで、過去の設計課題の検討過程を探したいジュニアUXデザイナー
- Anna：チーム内のプラクティスづくりと新メンバー支援に関わり、経験した問題と解決過程を共有したいミッドレベルUXデザイナー
- Ethan：社内固有のUI、状態管理、API連携などの問題と判断理由を残したいフロントエンドエンジニア
設計対象
投稿テンプレート
- Title：検索しやすいタイトル
- Context / Situation：問題が発生した背景と状況
- Problem / Friction：難しかったこと、分かりにくかったこと
- What I Tried / What I Thought：試した方法、検討過程、判断
- Outcome / Insight：結果、学び、他の人が再利用できる点
- Tags：ツール、状況、テーマ、投稿種別、役割
タグ・タクソノミー
- Tool：Figma、Jira、Git、React、Slackなど
- Context / Situation：Remote、Async、Onboarding、Legacy Systemなど
- Theme / Target Area：Flow Design、Accessibility、API Handling、Error Handlingなど
- Tip Type / Nature：Mistake、Workaround、Lesson Learned、Debug Processなど
- Role / Perspective：Designer、Engineer、PM、QA、Supportなど
主要画面
- Post List：タグ・役割・コンテキストによる絞り込み、並び替え、投稿プレビュー、最近コメントされた投稿
- Post Detail：構造化された投稿、Helpful、コメント、関連投稿、一覧へ戻るナビゲーション
- Post Submission：投稿テンプレートに沿った入力、インラインガイダンス、複数タグ選択、投稿完了フィードバック
- デスクトップとモバイルを想定したレスポンシブデザイン
投稿対象のガイドライン
- 社内ツール、独自フレームワーク、内部プロセスに関係する知識
- 一般的な検索では見つけにくい、文脈依存の解決方法
- 実装結果と、その判断理由や試行錯誤を含む内容
- 別のメンバーが同様の状況で再利用できる知識
- 公開ドキュメントで十分に確認できる内容は対象外
- 短期間で陳腐化する問題や再利用可能性が低い内容は対象外
架空のサンプル投稿
- UXデザイン例：Figmaのモバイルプロトタイプでコメントを見つけやすくする工夫
- 非同期レビューでのコメント見落としに対し、コメントレイヤーやアンカー表示を使う想定例
- フロントエンド例：Reactフォームにおける非同期APIと状態同期
- リクエスト競合による入力値の上書きに対し、デバウンス、キャンセル、保存タイミングを検討する想定例
- いずれも実在する社内事例を匿名化したものではなく、ケーススタディ用に作成した例
実施内容 / 進め方
経験とリフレクションから問題を設定
分散チームで働いた経験をもとに、会社固有の知識が共有・再利用されにくい状況を整理しました。以前まとめたリフレクションの内容を、社内ツールのコンセプトとして具体化しました。
架空のペルソナと利用シナリオを作成
ナレッジを探す人と共有する人の両方を検討するため、Lisa、Anna、Ethanの3人を設定しました。役割、経験年数、チーム環境、課題、動機、利用場面を整理し、それぞれのユーザーフローへ展開しました。
知識を再利用するための投稿構造を設計
投稿内容を、背景、問題、試したこと、結果・学びという順序で整理しました。結論と判断過程を一緒に残し、別のメンバーが自分の状況と比較できる構造を検討しました。
タグによる発見経路を設計
ツール、状況、テーマ、投稿種別、役割という5つの観点でタグを分類しました。複数タグを使い、複数の文脈から同じ投稿へ到達できる構造を作りました。
投稿範囲と共有動機を検討
一般公開情報と社内固有の知識を区別するガイドラインを作成しました。Helpful、コメント、関連投稿、投稿の可視性、チーム内での認識など、共有を続ける動機になり得る要素も設計仮説として検討しました。
ロール別ユーザーフローを設計
3人のペルソナについて、投稿、閲覧、検索、関連情報の発見、フィードバックの流れを整理しました。分散チームの非同期利用を想定し、リアルタイムのやり取りがなくても知識を参照・再利用できる流れを設計しました。
ワイヤーフレームからプロトタイプへ展開
Post List、Post Detail、Post Submissionのワイヤーフレームを作成し、ミニスタイルガイド、レスポンシブなハイファイ画面、インタラクティブプロトタイプへ展開しました。
設計上のポイント
結論と判断過程を一緒に残す
何をしたか、どのような状況だったか、何を試したか、何が結果として残ったかを一つの投稿にまとめました。別のメンバーが解決策の適用条件を判断しやすくするための構造です。
投稿者と閲覧者の負担を両方扱う
投稿フォームでは項目とインラインガイダンスを用意し、書き始めるための手がかりを設けました。閲覧側では投稿内容を同じ順序で表示し、複数の投稿を比較しやすくしました。
複数の文脈から発見できるようにする
Tool、Context、Theme、Tip Type、Roleを分け、複数タグを使って投稿を横断できる構造を作りました。
共有する知識の範囲を定義する
一般的な公開情報、短期間で陳腐化する情報、再利用可能性が低い内容を投稿対象から外す想定とし、社内固有で文脈依存の知識に焦点を置きました。
投稿への反応を共有動機として検討する
Helpful、コメント、関連投稿、可視性を、投稿が役立ったことを確認するための仕組みとして設計しました。実際に共有行動を継続させるかは、今後の検証が必要な仮説です。
アウトプット
- 問題設定とプロダクトコンセプト
- 3人の架空ペルソナ
- ロール別の利用シナリオとユーザーフロー
- 投稿テンプレート
- 5分類のタグ・タクソノミー
- 投稿対象のガイドライン
- 架空のサンプル投稿
- Post List、Post Detail、Post Submissionのワイヤーフレーム
- ミニスタイルガイド
- レスポンシブなハイファイ画面
- Figmaインタラクティブプロトタイプ
このケーススタディで確認できること
- 分散チームでの経験と考察を、社内ツールの具体的なコンセプトへ展開
- ナレッジの投稿、閲覧、検索、関連情報の発見、フィードバックを一連のフローとして設計
- 投稿内容を再利用しやすくするテンプレートとタグ構造を作成
- 3種類の架空ペルソナを使い、知識を探す側と共有する側の利用経路を整理
- ワイヤーフレーム、スタイルガイド、ハイファイ画面、プロトタイプまで作成
画面・設計資料
Post List View
タグ、役割、コンテキストでの絞り込みと、投稿のスキャンを支える一覧画面。
Post Detail View
背景、問題、試したこと、結果・学びを構造化して表示する詳細画面。
Post Submission Form
投稿テンプレートとインラインガイダンスを使った入力画面。
Role-based User Flows
Lisa、Anna、Ethanの投稿・閲覧・発見・フィードバックの流れ。
Mini Style Guide
一覧、詳細、投稿フォームで使用する色、タイポグラフィ、UI要素。
この実績で示せること
会社固有で検索しにくい知識について、投稿内容の構造、タグによる発見経路、投稿と閲覧のフロー、共有動機を一つのプロダクトコンセプトとして整理したケーススタディです。問題設定から、ペルソナ、利用シナリオ、情報構造、ワイヤーフレーム、ビジュアルシステム、インタラクティブプロトタイプまでを一貫して作成しました。実際の利用環境で成立するかは、今後のユーザー検証と実装を通じて確かめる必要があります。
検証範囲と今後の仮説
ペルソナ、利用シナリオ、サンプル投稿、期待効果は、自身の経験とリフレクションをもとに作成した設計仮説です。
- 投稿テンプレートが共有時の負担を軽減するか
- タグ・タクソノミーが必要な情報の発見を支えるか
- Helpfulやコメントが投稿の継続動機になるか
- 投稿対象のガイドラインが情報の質と再利用性を保てるか
- チーム内の評価や認識との接続が、共有行動にどのような影響を与えるか