PointChips

ポイントサイト「PointChips」において、2名のデザイナーと協働しながらUI/UX設計・ブランド設計を統括。社内初のデザインシステム導入とチームコミュニケーション設計により、スピードと品質を両立したデザイン基盤を構築した。

課題

ポイントサイト「PointChips」の新規立ち上げにあたり、短期間でのリリースが求められていた。デザイナー2名・ディレクター・エンジニアという体制の中で、スピードと品質を両立しながら、認識齟齬を最小限に抑えて進める必要があった。

アプローチ

まず、チーム合流前の3〜4月に単独でフローチャート・サイトマップ・必要画面分のストーリーを先行して作成。合流時にすぐ共有できる状態を整え、チームの立ち上がりを早めた。

スピードと品質を両立するため、社内初となるMUI(外部デザインシステム)の導入を決断した。既存コンポーネントを活用することで設計・実装を効率化し、さらにMUIを共通言語とすることでデザイナーとエンジニア間の認識齟齬も最小限に抑えた。

開発中は、フローチャート→ラフ→プロトタイプの各フェーズごとに細かなヒアリングを実施。コアタイムを設けて「すぐに聞ける」環境を整えることで、デザイン意図を正確に反映した。

1. フローチャート

チーム合流前に作成し、サービス全体のユーザーフローを可視化。合流後すぐにチーム全員が全体像を共有できる状態を作った。

2. ワイヤーフレーム → プロトタイプ

各フェーズごとにヒアリングを挟みながら段階的に精度を上げ、手戻りを最小限に抑えた。

3. MUIコンポーネント設計

MUIの既存コンポーネントをベースに、PointChipsに必要な構成を選定・カスタマイズ。コンポーネント利用率44%を達成した。

4. ロゴ制作

ポイント獲得というサービス特性を踏まえ、「親しみやすさ」と「信頼感」の両立を意識したブランドトーンを設計した。

• 先行準備2ヶ月＋デザイン3ヶ月で完了
• MUIコンポーネント利用率：44%達成
• 現在は広告流入後のLP・初回体験の最適化を継続中

学び

デザインシステムの導入は、チーム間のコミュニケーションコストを抑えるだけでなく、その後の開発体制にも大きく影響した。AIデザインやコーディングが黎明期だったこともあり当初は戸惑いもあったが、のちにFigma Makeによるデザイン補助や、エンジニアサイドのMCP活用によりデザインコーディングを最小限に抑えることができた。デザインシステムはエンジニア主導でのページ制作も可能にし、先行投資として正しい判断だったと実感している。