shisa.vercel.app

概要

Shisa は、私がデザインしたシンプルで視覚的な見やすさを意識して作ったカスタムアイコンのセットです。名前の「Shisa」は日本語の「示唆」に由来し、ユーザーに行動やアイデアを示唆し、コンテンツを素早く理解できるようにという思いで名付けられました。

作成プロセス

アイコンは Figma を使い、24×24 のフレームで作成しました。すべてのアイコンは、シンプルで直感的に理解できることを意識して丁寧にデザインされています。ストロークの太さや角の丸みも統一しました。

特に要素間のバランスや間隔を整えるのが難しいアイコンもありました。例えば設定アイコンは、小さいサイズでもシンプルで認識しやすくする必要があり、特に苦労しました。背景に 32×32 の大きなフレームを置き、それをガイドとしてベクターポイントを調整することで、歯車の形を描くことができました。

アイコンは SVG ファイルとしてエクスポートされ、テキストエディタで再調整しました。そのため、font-size を使用してサイズ変更でき、CSS の color プロパティを使用して色を変更できるようになり、アプリケーションのデザインに合わせて簡単にスタイリングおよびサイズ変更が可能です。

使用方法

これらのアイコンは、私が手掛けてきたさまざまなアプリケーションで使用されています。例えば、Deizu や私のポートフォリオサイト（このウェブサイト）など。カスタムアイコンセットを所有する利点は、一般的なアイコンを拡張し、そのアプリケーションに特有のカスタムアイコンを追加できることです。

また、これらのアイコンは npm (npm i shisa-icon) を通じて利用可能にしているため、任意の React アプリケーションに簡単に統合できます。