Kamon : アイコンセットのデザインとその管理システム
概要
KamonはNOTA Inc.のWebービス内で使用されるアイコンセットおよびその管理システム。企画からデザイン、設計、実装までを担当した。
背景
NOTA Inc.では複数のWebサービスの開発が平行して進められている。それらのプロダクトのUIに使われるアイコンは社外サービスのアイコンフォントやその場しのぎの内制物が入り乱れ、デザインは統一されていない。誰がどんなアイコンを追加したのかといった情報が共有されない状態が続き、統一感の欠如や矛盾が生じている。アイコンセットを一元的に管理する仕組みの必要性を感じていた。この問題を解決するために、プロジェクトでは以下の4点を実施することにした。
1. アイコンの利用状況の調査
2. アイコンデザインの改善
3. アイコンの管理システムの用意
4. アイコン利用に関するガイドラインの作成
アイコンの利用状況の調査
最初にInterface inventory（つまり棚卸し）として現在UIの中で利用しているアイコンを全て洗い出した。その結果以下のような問題点が浮き彫りになった。
意図する意味は同じなのに見た目が微妙に違うアイコンが点在している。
サイズが統一されていない。中途半端にサイズの異なるアイコンが並んでいる。
テイストが統一されていない。柔らかいデザインや硬いデザイン、強い表現や弱い表現が混在している。
不要なアイコン含まれている。
必要なアイコンが含まれていない。
興味深いことに、既に社内で素材が用意されているアイコンに関してもわざわざfontawesomeなど外部のアイコンを利用しているケースが多く見られた。これは内製のアイコン一覧が確認しにくい場所にあること、また実装の手間がかかることが原因であると思われる。
↓ Interface inventoryにより洗い出されたアイコン
アイコンデザインの整理
上記の問題点を踏まえ、まずは使用していないアイコンや重複したものを整理し、純粋に必要なアイコンのみをピックアップした。その結果、この時点でアイコンの数は100個を超えていた。全てを1からデザインし直すにはリソース的に無理がある。そのため既存デザインを元にサイズやテイスト等の詳細部分の調整に徹することにした。外部サービスから取り入れたアイコンに関しては SIL Open Font License 1.1ライセンスに該当するものを使用している。
アイコンに統一感を持たせるために最も重要だと思われる以下の3点に絞って調整を施した。
1. サイズの統一
たとえ数値上のサイズが同じでも、アイコンの形状によって見た目のサイズは大きく異なる。これまではCSS上で調整が行われてきたが、どうしてもズレが生じるしコードも冗長になってしまう。そこで24px四方を基本としたキーラインを設定した。キーラインを元に共通のサイズを与えることで、各アイコンが常に同じサイズに見えるように調整することができる。
2. 線幅の統一
アイコンの線幅が違っていると強弱が全く違って見えてしまう。太いものは強く、細いものはデリケートに。同じサービス内でこれだけ異なる表現を盛り込むのは無駄に認知負荷をあげてしまう。今回のプロジェクトでは基本の線幅を2pxに統一した。
3. 角の形状の調整
丸の形状と角張った形状では見た目の性格がガラリと変わる。ラインの先端形状や湾曲部分の形状を揃えることでアイコンの雰囲気を統一した。
以上3点の調整を100個あまりのアイコンに施した。ツールはSketchとIllustratorを使用している。時間にして1日強くらいの作業ではあるが随分と統一感を出せたと思う。
↓ キーラインを使った調整
アイコンの管理システムの用意
デザインの調整によりアイコンの描画データは用意できた。今度はこれらのアイコンデータの管理方法を考えなければならない。Sketchのデータを用意して「はい どうぞ」では誰もそれを積極的に使う気にはならない。以前のように様々なアイコンが乱立するのは目に見えている。統一アイコンセットを継続的に利用するには、追加や更新の作業、またプロダクト上での実装が簡単でなければならない。今回のプロジェクトで最も迷ったのはこの段階だった。
管理方法を考えるに当たって以下の条件を満たす必要があった。
バージョン管理が可能であること
アイコンは日々更新される。複数人が同時に編集することもあるし、プロダクト側ではバージョンを指定した上で利用したい状況も考えられる。そのためアイコンシステムのバージョン管理は必須だった。
異なるプロダクト間で常に同期できる仕組みであること
プロダクトごとに個別にアイコンを管理してしまうと、それぞれのアイコンセットは時間の経過に伴い統一性を失ってしまう。そのためアイコン管理のためのシステムをプロダクト外に用意する必要がある。
実装が簡単であること
プロダクトのUI実装において、アイコンはできるだけ簡単に利用できなければならない。特にこれまでは色やサイズの調整、アイコン名の指定などでコードが複雑になりがちだった。またアイコンの一覧や使い方をさっと参照できなければ、そもそも実装にたどりつかない。
上記の条件を踏まえて、以下のような仕組みを採用した
アイコンのSVGデータをgitで管理し、npmで配布する。使い方や利用事例などもここに掲載。
プロダクト側ではnpm経由で取得したデータを元にビルド時にSVG Spriteを生成し、アイコンを利用する。
この仕組みをkamonと名付けた。特に意味はない。メインのデザインシステムがtatamiと名付けられていたので、それに合わせただけである。以下がkamonの実際の成果物だ。
以下実際の利用シーン。SVG Spriteを簡単に利用できるようにReactコンポーネントを用意した。開発者はアイコンの一覧から必要なものを選択し、名前を入力するだけでSVGアイコンを利用できるようになっている。
kamon.tsximport React from 'react'
const spritePath = '/dist/sprite.svg'
interface Props {
className: string
name: string
}
export default class Kamon extends React.Component<Props> {
render () {
return (
<svg className={`kamon ${this.props.className}`}>
<use xlinkHref={`${spritePath}#${this.props.name}`} />
</svg>
)
}
} sample.tsx<Kamon name='ICONO_NAME' className='hogehoge' />結果
kamonアイコンシステムを導入することで、UXと開発のそれぞれで以下のようなメリットを実感できた。
UX面
アイコンのテイストやサイズ、使用目的が統一されているのでユーザの認知負荷が減った。
デフォルトサイズを基本にピクセル単位で調整したため、低解像度の画面でもクッキリと表示できるようになった。
開発
デザイナーやエンジニアが開発時にどのアイコンを使用するか、迷う必要がなくなった。
アイコンの追加やアップデートが楽になった。
冗長なコードを減らすことができた。
多くのメリットを感じると同時に課題も見えてきた。例えば複数サイズの必要性。実際にUIで利用しているとデフォルトののサイズだけでは対応しきれない場面が出てくる。ある程度傾向が見えた時点で新たにサイズを追加する必要があると思う。また別の課題としてはブランド性の欠如。今回は統一感の確保を目的に調整を行ったため、Nota社のブランドや独自性を盛り込むまでには至らなかった。アイコンはフォント同様にそのサービスの性格表現に大きく影響する。この辺りもぜひアップデートしたい。
基本的にデザインシステムの類は作って終わりではなく、継続的な更新やメンテナンスが必須であると思う。今回作成したアイコンシステムに関してもサービスの成長に合わせてうまく育ててゆきたい。