マルチブランドのアイコンシステム
Client
Leading Company in Apparel Industry
Team
Art Director
Designer (me)
Platform
Web
Mobile APP
Tool
Figma
Illustrator
Teams
Timeline
2022.10- 8 weeks
Overview
大手アパレル企業のデザインシステムプロジェクトにおいて、複数ブランド間でアイコンの統一性がなく、明確なルールも存在しなかったことから、アイコンの再整備が求められました。
私はクライアントのアートディレクターと連携し、3ブランドに対応するアイコンルールの策定、アイコンの再制作、および運用ルールの整備を担当しました。
Problems & Goals
大手アパレル企業のECサービスは、3つの主要ブランドが共通のデザインシステムで構築されています。 本プロジェクトでは、1つのアイコンモチーフに対して、それぞれのブランドトーンを反映した3つのバリエーションを制作する必要がありました。 各ブランドのビジュアルアイデンティティを尊重しながら、共通ルールに基づいた柔軟な設計が求められていたためです。
再整備前に現場で使用されていたアイコンの抜粋
クライアントからは、以下のような課題が提示されました：
同一ブランド内のアイコンでも、線幅や角の丸みにバラつきがあり、コンセプトの統一がされていない
制作スピードを優先した結果、一部のアイコンはブランドごとの違いが反映されず、ブランドイメージが正しく伝わっていない
一方で、プロジェクトに参画する中で私は、運用面にも深刻な課題があることに気づきました：
アイコンのデータ管理が属人化しており、後からの修正や再利用が難しい
開発との連携フローが不明確で、実装Assetとのギャップが発生していた
これらの背景と複層的な課題をふまえ、私は「3ブランドに対応できる柔軟性と一貫性を両立したアイコンルールの策定」と「持続可能な運用体制の構築」を本プロジェクトの核心テーマとして取り組みました。
My role
3つのブランドのコンセプトから視覚トーンを抽出し、それに基づいたアイコンデザインルールを策定
クライアントのアートディレクターに提案しながら、主要アイコンを再デザイン
デザインと実装をつなぐアイコン運用フローを整理
アイコンデザインガイドラインおよび運用ルールを含むドキュメントを作成し、チームと共有
Design Rules & Redesign
使われているアイコンをピックアップし、UI Iconの全量を洗い出し
アイコンの全量を洗い出し、各ブランドのコンセプトに沿ったアイコン制作ルールを定義しました。線幅、角の形状、角丸、コーナーラウンドなどのスタイルを細かく設計し、ルールに基づいてすべてのアイコンを再制作しました。
Brand A
Brand B
Brand C
Guideline＆Design Ops
策定したアイコンデザインルールは、Figma上のデザインドキュメントとして体系化しました。スタイルや命名ルールなどのデザイン仕様に加え、制作から開発連携・運用までを一連のプロセスとして明文化しています。
ガイドラインは項目ごとに視認性を高め、リンク機能を活用することで必要な情報へすぐにアクセスできる構成にしました。
また、プラットフォームがWebとアプリ（Flutter）で分かれているため、ブランド別・用途別のアイコン使用状況を管理できる一覧表も作成しました。この表はデザイナーだけでなく開発者にも共有されており、実装時の確認・連携がスムーズに行えるようになっています。
さらに、Flutterベースのデザインシステムへ移行中という状況をふまえ、「このアイコンはどこで管理されているのか」「誰に確認すべきか」といった運用上の疑問に対応するため、アイコン利用のフローチャートも整備しました。
デザイナーが安心して再利用・連携できる環境づくりを重視しました。
Achivement
マルチブランド対応のアイコンシステムを再構築することで、3ブランド間におけるアイコンの一貫性を確保しました。ユーザーに違和感なくブランドイメージを伝えながら、各サービスをスムーズに利用してもらえるビジュアル設計が実現しています。
また、サービス開発チームに対しても複数のメリットを提供できました：
開発とデザインチーム間におけるアイコンデータの認識・管理のギャップを解消
アイコンデータはデザインシステム配下で一元管理され、再利用性が向上
デザイナーはアイコンを利用する際に、必要に応じてデザインシステムチームと迷わず連携できるようになり、業務上の不安や手間が軽減された
プロジェクト完了後、クライアントおよびデザインチームのメンバーからは「わかりやすくて非常に助かる」「導入後の運用が格段に楽になった」といったフィードバックも複数寄せられました。
