ベクターアイコンのデータ管理方法

サービス上で使われるアイコンなどのデザインデータをみなさんはどのように管理していますか？

ベクターアイコンなどの元データは大抵の場合、 Illustrator（.ai）ファイルであって、デザイナーのみなさんは Adobe Creative Cloud ライブラリ（以下CCライブラリと表記）を使って管理していることが多いかと思われます。

CCライブラリに登録して共有すればアイコンデータを一元管理でき、 Photoshop でも Illustrator でも XD でも呼びだすことができ、元データを編集すれば各アプリケーションの参照も自動で更新されるのでとても便利です。

CCライブラリに登録されてるアイコンデータをSVGファイルで欲しい…！

フロントエンドエンジニア的には、デザインを実装に落とし込む段階でアイコンデータをSVGに変換します。Webで取り扱うベクターデータといえばSVGだから、ということもありますが、

SVGファイルから iconfont を使ってWebフォントを生成
SVGファイルから svgsprite を使ってスプライト画像ファイルを生成

のように、タスクランナーを使ってデータ処理をするときもソースファイルがSVGであった方が都合が良いからです。
なので、CCライブラリに登録されてるアイコン群をSVGで一括エクスポートしたいなぁ…と思いつつも、実はこの機能がどこにも見当たらない…！（2019年9月現在）

CCライブラリに登録されてるベクターデータは余白情報を持たない

アイコンコンポーネントとしてSVGを取り扱う時、縦長や横長のデザインのアイコンであっても正方形グリッドの中に配置して処理されることが多いです。アイコンごとに縦横比が違うとコンポーネントとして取り扱いにくくなるためです。
つまり、正方形の縦横幅で余白を含めてSVGファイルとして出力する必要があります。

しかし、XDファイルに貼り付けられたCCライブラリを個別にSVGエクスポートすると、ベクターデータの実体の縦横幅で出力されます。
これはCCライブラリに登録されてるデータがアートボード情報を持っていても同様です。
SVGエクスポート後に毎回余白情報を手動で付与するのはちょっとメンドイ…

フロントエンドエンジニア向けのアイコンセットファイルを作る

フロントエンドエンジニアもデザイナーのCCライブラリ一元管理の恩恵に預かりたい
アイコンデータをCCライブラリから一括でSVGファイル出力したい
SVGファイルの余白情報はフロントエンドエンジニア側でコントロールしたい
これらの設定をプロジェクトチームで共有したい

上記を同時に満たす方法として、フロントエンドエンジニアでWebサイト管理用のaiファイルを作るのが良さそうでした。ちなみに illustrator を使いますが、必要最低限の設定とSVGジェネレータとしての利用なので、illustrator スキルはほぼ不要です。
その作成手順を紹介していきます。

1. 新規作成 > 詳細設定でテンプレート用のアートボードを設定する

設定は以下のような値を設定します。

アートボードの数 40（設定するアイコンの数）
間隔 4px （お好みで。縦横の1/8くらいがちょうど良いかも）
横列数 10 （お好みで）
幅 高さ 32px （Webデザインの実寸に合わせておくと良い）
カラーモード RGB

作成をすると以下のような画面になります

2. CCライブラリから管理したいアイコンをアートボードに配置する

【注】事前にデザイナーから該当のアイコンが格納されているCCライブラリを共有してもらう必要があります。
CCライブラリからアイコンのデータをドラッグ＆ドロップで先ほどのアートボードに配置していきます。

こうすることでデザイナー側でCCライブラリのアイコンを更新すると、このaiファイルにも自動で更新が反映されます。

3. アートボードに名前をつける

アートボードの名前は最終的に出力されるファイル名にもなるので、ファイル名＝タスクランナーを中継したclass名になることなども考慮して名前を入力します。

4. 一括でSVGファイルを出力する

別名で保存を選択して、保存オプションを以下のようにして保存します。

出力対象のフォルダを指定
ファイル形式 SVG（svg）を選択
アートボードごとに作成 をチェック
範囲 先ほど名前を追加したアートボードの範囲を指定

出力対象のフォルダ以下に範囲で指定したアートボード名前が付与されたSVGファイルたちが出力されます。

5. テンプレートaiファイルを共有する

プロジェクトの共有フォルダやCCファイル、リポジトリなどに作成したテンプレートaiファイルを格納してプロジェクトメンバーと共有することで、毎回XDファイルからSVGファイルをエクスポートしたり余白設定をやり直したりする必要がなくなり、再利用性が高まります。

この手法のメリット

CCライブラリのデータを一定のルールで一括SVGファイル出力できる
XDファイルからアイコンを切り出す際のワークフローとして機能する
テンプレートaiファイルを中間に置くことで、フロントエンドエンジニア側で必要とする情報を取捨選択した上で集約管理できる
デザイナーは従来の管理方法を変えることなく、フロントエンドエンジニア側の管理方法に強制されない
Webサイトで利用されるアイコンのカタログとしても機能する

といった点が挙げられます。
作業者ごとにXDファイルから個別にエクスポートされている方、ぜひ試してはいかがでしょうか。