デザインシステム【アイコンライブラリ】〜一般公開の裏側〜
エクサウィザーズで開発しているアイコンライブラリを、MIT ライセンスで一般公開しました。個人、商用利用にかかわらず、どなたでもご使用いただけますので、ぜひご活用ください！
この記事では、アイコンライブラリを一般公開した目的や、社内で取り組んだことを紹介させていただきます。デザインシステムを公開しようと考えている方の参考になれば幸いです。
前回の「アイコンデザインルール設計」も、合わせてご覧ください。
デザインで社会に貢献する
「デザインシステムを自社だけにとどまらず、社会全体で使えるようにしたい」
エクサウィザーズは、「AIを用いた社会課題解決を通じて幸せな社会を実現する」ことをミッションとして、AIの社会実装に取り組んでいます。多種多様なお客様にサービスを提供しており、自社のプロダクトもさまざまです。
AI写真サービスのとりんく: 保育園や幼稚園でのお子さまの様子をカメラで記録して配信するサービス
exaBase: AI・DXの理解促進から戦略の立案、開発・実装まで、サービスを一気通貫で提供するAIプラットフォーム
会社は社会全体に事業を展開していますが、デザイナーという立場からも会社のミッションを後押しし、社会貢献につなげたいと考えました。そこで、デザインシステムのアイコンライブラリを誰でも自由に使えるように、一般公開することにしました。
社内で仲間を増やす
デザインシステムを使うのはデザイナーやエンジニアですが、公開するとなると、法務や知財、広報、情報システム部門などの協力が必要になります。デザイナーやエンジニアだけでは進められないので、どんどん関係者を巻き込んでいかなければなりません。
そこで、公開に関する取り組みの最初の一歩として、デザインシステムの存在を社内で認知してもらうために、全社会で発表しました。
大企業の場合、全社規模の場でデザインシステムを発表するというのは、現実的ではないと思いますが、私たちの会社はグループ会社を含めて400人弱の会社ですので、全社に向けて取り組みを紹介する機会が頻繁にあります。
デザインシステムを全社に共有するとしても、開発にかかわっていない社員には響きません。多くの人にメリットがあり、興味を持ってもらうための工夫として、会社の PPT テンプレートにもアイコン一覧スライドを追加する改善をして、同時に紹介しました。
おかげで、開発から少し離れた営業からも、「PPT 資料に使えるアイコンに困っていたので助かります！」、などの良い反応をもらえました。
なぜオープンにするのか
デザイナーやエンジニアにとって、作ったものが世の中にリリースされるのは嬉しいことですし、自己の成長につながります。しかし、デザインノウハウがつまったデザイン資産を、目的を明確にしないまま公開するわけにはいきません。
私たちは、デザインシステムの目的を以下の４つに整理しました。
①業界貢献：ノウハウを公開することでデザイン業界に貢献する
日本企業において、昨今の Figma の盛り上がりもあり、Figma コミュニティでデザインファイルを公開している会社や、note やブログでデザインシステムの取り組みを発信する方が増えています。しかし、自社のデザインシステムのドキュメントサイトを公開している会社や、コードレベルでデザインシステムを公開している会社は、まだまだ限られています。
私たちは今回、アイコンライブラリ資産そのものを公開いたしました。これはデザインシステムのうちの一部だけですが、ライブラリとして提供されているものとしては、数少ない事例の一つになると考えています。
デザイナーの皆様に何か参考にしていただける点があれば、嬉しく思います。
また、この記事のように、公開までの取り組みをご紹介することで、同じようにデザインシステムを公開したいと考えている方を、後押しできないかという思いがあります。デザインシステムを公開する会社が増え、日本のデザインシステム業界が、今以上に盛り上がることを期待しています。
②採用：デザインチームやエンジニアチームのプロモーション
エクサウィザーズという会社を知ってもらえているデザイナーやエンジニアの方は、残念ながらまだまだ多くありません。
今回の発信をきっかけに、当社の魅力や私たちのことを知っていただければ幸いです！
③ブランディング：一貫性に関する取り組みや思想を示す、説明責任を果たす
私たちは、複数のプロダクトを exaBase というプロダクトブランドで展開しています。それぞれのプロダクトがバラバラにデザインされていると、良い UX を提供できません。デザインシステムという形で、一貫性に関する取り組みや思想を示すことは、導入や使っていただける方への一つの説明責任であり、ブランディングにつながります。
④効率化：アクセス性と生産性の向上
情報を社内だけにアクセス制限するのは、デザインシステムをメンテナンスする側だけでなく、使う側でも手間が増えます。特に、社内ネットワークにアクセスできない業務委託先への情報提供が大変ですし、プライベートリポジトリを運用する場合でもコストがかかります。
世の中には、簡単に入手できるオープンソースのライブラリがあふれているので、それらと比較してアクセスずらい場合、使用者のモチベーションが下がるなど、優れた開発体験を生むことができません。
ライブラリを npm などでパッケージ化してパブリックに公開すると、誰でも簡単に、自由にアクセスできるようになります。
公開するリスク
資産を公開するにはもちろんリスクがあります。基本的なリスクとして以下のようなものがあります。
他者の特許権、著作権、商標権等の知的財産権の侵害
他社および自社の秘密情報の流出
これらのリスクについてはすべてのデータを確認して、リスクなしと判断しています。
なお、Twitter などの SNS のアイコンはシェアボタンなどで使う機会が多いですが、exaBase Design System Icons には含まれていません。これらのアイコンを含んでいるアイコンライブラリは多数あり、個人的にも含んでいる方が便利だと思いますが、一企業として他社の商標を再ライセンスして配布することはできません。
他にも以下のようなリスクがあります。
ー ブランディングリスク
誰でも使えるようになることで、他社に使われたり、模倣される可能性があります。公開しているのに、他社に使われることがリスクになるのはおかしいと感じるかもしれません。しかし、デザインシステムはブランディング要素を含んでいますので、他社に使われるのを認めるというのは、懸念点と言えるでしょう。
この点については、むしろウェルカムだとデザインチームでは考えています。先日、Microsoft 社が Fluent Emoji をオープンソースで公開し、その Medium の記事でオープンにする理由が語られていますが、その言葉をお借りするなら、
「かつての、閉鎖的で階層的な製品開発プロセスは変化している。人々がつながり、協力し、認め、称え、創造することこそに力がある」（筆者翻訳&要約）
ということです。ぜひどんどん使ってください！
exaBase Design System Icons のアイコンは、汎用的でシンプル、かつ自然なデザインにしていますので、みなさんのブランドに影響を与えることは少ないはずです。
ー 事業リスク
デザイン事業や受託開発している会社にとって、資産を無料で提供するということは、お客様からいただけるはずであった、その分のデザイン費用がなくなることにつながります。
しかし本当に、そのようなリスク、デメリットはあるのでしょうか？
お客様のコーポレートブランドやデザインルールを守らなければならないケースでは、そもそもデザインシステムを使えないので、アイコンを新規で作成するか、お客様の許可をもらった上で OSS のアイコンを使うことになります。
そうでなければ、デザインシステムを使うことで、デザインや開発コストを効率化し、もっと大切な UX デザインに注力できるようになります。
また、（アイコンが好きな私にとっては残念なことですが）、市場では UI アイコン 1 個の制作単価は数千円程度とごくわずかです。アイコン集の制作依頼でもなければ、全体の受注の中で UI アイコン製作費だけを切り出すケースはそれほどありません。したがって、事業に影響を与えることはないと考えられます。
アイコンの品質を高める
以前にアイコン制作についての記事を公開したあと、業務で必要になったタイミングで、適宜アイコンを増やしていましたが、その中で十分に考慮できていなかったデザインルールが見つかってきました。細かい内容ですが、いくつかご紹介します。
低解像度ディスプレイでの明瞭性
私たちは普段、高精細なディスプレイでデザインしていますが、低解像度のディスプレイ環境のユーザーもいます。オリジナルで 32px のキャンバスで作っているアイコンを、16px に縮小してピクセルプレビューをしたときに、ぼやけて見づらいアイコンが多くありました。
「高精細ディスプレイだけの想定でいいのでは？」と、ラクをする考えもよぎりましたが、デザインチームとして、「そこまで考慮してこそ美しいデザインである！」という想いからデザインし直す決断をし、多くのアイコンを修正しました。
! と ? と i の修正
「!」や「?」の文字を使ったアイコンはいくつかありますが、それぞれの文字を別々に作っていたため、「!?」としてセットにした時に、高さや太さのバランスが合わなくなることが分かりました。「!」と「?」単体でも、「!?」として組み合わせて使ったときでも、適度なバランスになるようにデザインし直しました。
縦横比固定オプションの設定
Figma には、サイズの縦横比固定のオプションがありますが、これが設定されていないアイコンがありました。アイコンの検証ができる独自の Figma プラグインに、新しいルールを加えた上で、すべてのアイコンで縦横比固定オプションが設定されるように、修正しました。
オープンソース化について
exaBase Design System Icons は MIT License ですが、真のソースはまだ公開できていません。いわゆるオープンソースではないので、残念に思われるかもしれません。これには、メンテナンス体制の調整や、ソースのリファクタリングが十分にできていない、などの理由があります。
今後、Figma のデザインファイルの公開を含めて、オープンソース化の検討と調整を進めていけることを楽しみにしています。
さいごに
再利用可能なライセンスで資産を公開することに、ハードルがないわけではありません。組織文化、思想によっては難しいかもしれませんし、組織戦略上、公開すべきではないものの方が多いでしょう。
私たちの場合、デザインチームとしては公開についてポジティブでしたし、フロントエンドギルドという、社内のフロントエンドエンジニアが集まるコミュニティでも歓迎ムードでした。
エクサウィザーズは、社長の石山さんが全社員の前で、ターミナル（コマンドライン）を開き、自分で開発したメタバースをデモして Web3 を紹介するような会社です。このようなおもしろい会社だからなのか、スムーズに公開まで進めることができました。
デザインシステムの開発をスタートさせてからまだ 1 年程度で、アイコンもまだ 400 個くらいと十分な数ではありませんが、これからも継続的にアップデートしていきますので、楽しみにしていてください！
筆者: 吉田 (UI/UXデザイナー)
エクサウィザーズでは、一緒に働く人を募集しています。興味のある方はぜひご応募ください！