広告事業を展開するフォーイットが新規立ち上げたポイントサイト「PointChips」において、CDとしてUI/UX設計・ブランド設計を統括。2名のデザイナーと協働し、社内初のデザインシステム（MUI）導入とチームコミュニケーション設計により、先行準備2ヶ月＋デザイン3ヶ月でリリースを実現した。
※本プロジェクトは、グループ会社の「株式会社LinkAd」の新規サービスとしてリリースしています。
課題
ポイントサイト「PointChips」の新規立ち上げにあたり、最大の課題はスピードだった。短期間でのリリースが求められる一方、デザイナー3名・ディレクター1名・エンジニア3名という小規模体制のため、認識齟齬が生じれば即座に手戻りとなりスケジュールを圧迫する。スピードと品質を両立させるには、チーム全員が同じ前提で動ける仕組みづくりが不可欠だった。
アプローチ
まず、チーム合流前の3〜4月に単独でフローチャート・サイトマップ・必要画面分のストーリーを先行して作成。合流時にすぐ共有できる状態を整え、チームの立ち上がりを早めた。
スピードと品質を両立するため、社内初となるMUI（外部デザインシステム）の導入を決断した。既存コンポーネントを活用することで設計・実装を効率化し、さらにMUIを共通言語とすることでデザイナーとエンジニア間の認識齟齬も最小限に抑えた。
開発中は、フローチャート→ラフ→プロトタイプの各フェーズごとに細かなヒアリングを実施。毎日の共有タイムを設けて気軽に相談できる環境を整えることで、デザイン意図を正確に反映した。
チーム設計
CDとして、自分が不在でもチームが回る体制を意図的に設計した。MUIへの理解が高くフローチャートやサイトマップも熟知していたデザイナー1名にデザインリードの権限を付与し、もう1名はそのリードの指示のもとでデザインを推進。藤巻は最終的なデザイン判断を担いつつ、いつ発生するかわからない社内の他の優先タスクに対応できる余地を確保した。
1. フローチャート（先行作成）
過去のプロジェクトでフローチャートがなく、画面間の関係性が属人化していた経験から、チーム合流前にサービス全体のユーザーフローを先行作成した。スピードが求められる中、アプリ開発ができないデザイナーとディレクターの先行フェーズで最もチームに貢献できる成果物は何かを考えた結果の判断だった。
合流後、フローチャートはチーム全員の共通基盤として機能した。エンジニアはデータフローの観点で修正を加えつつ設計の起点として活用し、デザイナーはサイトマップの作成と必要デザイン数の算出に展開。ユーザー行動が可視化されていたため、各メンバーが自走できる状態を初期から実現できた。
2. ワイヤーフレーム → プロトタイプ（段階的精度向上）
画面設計はデザイナーに権限を持たせつつ、ワイヤーフレーム完了時・プロトタイプ完了時の2段階でエンジニアやディレクターとの方向性確認を必ず実施した。「認識のズレをゼロにする」のではなく「ズレが小さいうちに検知する」ことを設計方針とし、手戻りを最小限に抑えた。メンバーから意見があった場合は都度合意のうえで設計に反映した。
3. MUIコンポーネント設計（デザインシステム導入）
MUIを選定した理由は、既存のデザインシステムの中でドキュメントが充実しており、かつ安価だったため。Figmaがたびたびデザインシステムに関するセミナーを開催しており、現代では一からデザインシステムを構築するのではなく、既存のものを活用し、グロースしてから独自化を検討するという考え方に合理性を感じていた。スピードリリースが求められていたことも踏まえ、ディレクターと事業部長に提案し承認を得た。
導入にあたっての課題は、初期学習コストの確保だった。社内では業務時間中の学習に対して消極的な文化があったため、学習時間をプロジェクトとして認めてもらえるかが懸念点だったが、最終的に承認を得られた。また、アサインされたエンジニアがフロントエンドに特化していなかったため、PoCを実施して実現性を確認したが、実際の開発フェーズでMUIのデバッグが難しいという問題が生じた。PoCの期間をもう少し確保し、使いやすさまで検証すべきだったと感じている。
全画面のUI要素のうち、MUI標準コンポーネントでカバーできた割合は44%。残りはサービス固有のカスタムコンポーネントとして設計したが、MUIのデザイントークン（色・余白・タイポグラフィ）を踏襲することで、全体の一貫性を維持した。
4. ロゴ制作（ブランド設計）
ロゴ制作はCDとして裁量を任され、ビジネスサイドの承認を得たうえで進めた。エレベーターピッチとペルソナをもとに、後発ポイントサイトとしてのポジショニングを定義。「ワクワク感」と「誠実さ（怪しくない印象）」の両立をコンセプトに設定した。チーム全員でロゴ案を出し合う社内コンペを開催し、多様な視点を取り入れながら最終案を決定した。
リリースまでにサービス名が2度変更される中でも、コンセプトを軸にブレなくリデザインを進められたのは、初期段階でブランドの方向性を明文化していたことが大きかった。
- 先行準備2ヶ月＋デザイン3ヶ月で全画面のデザインを完了3（当初想定スケジュール内で完了）
- MUIコンポーネント利用率：44%（全UI要素のうちMUI標準でカバー）
- デザインシステムの共通言語化により、デザイン実装時の手戻りを大幅に削減
- 運用フェーズでは、広告流入ユーザーの初回体験最適化に向けた仮説検証を継続中
学び
デザインシステムの導入は、チーム間のコミュニケーションコストを抑えるだけでなく、その後の開発体制にも大きく影響した。AIツールを活用したデザイン補助（Figma Make）や、エンジニアサイドでのAIによるコーディング支援により、デザインの実装コストを最小限に抑えることができた。デザインシステムはエンジニア主導でのページ制作も可能にし、先行投資として正しい判断だったと実感している。
また、自分が不在でもチームが回る体制を初期から設計したことで、突発的な社内タスクへの対応とプロジェクト推進を両立できた。CDとして「自分が手を動かすこと」と「チームが自走できる仕組みをつくること」のバランスを意識する重要性を学んだ。