Figmaもデザイナーも不要！個人プロジェクト向けのかんたんアイコン作成術

こんな経験はないだろうか。MVPの完成間近、テストを書き、ビルドを設定し、ようやく終わったと思ったところでプロジェクトにアイコンが必要になった。シンプルなグラデーションとグリフだけのバッジを作成するためだけに、重いFigmaを開くのは面倒だ。コード内で適当に描いたり、广告ばかりの怪しいオンラインコンバーターを探すのも避けたい。

最近AppIcon Forgeリポジトリを見つけた。これはまさにこのような場面のために作られた、軽量なオープンソースのWebツールだ。モバイルやデスクトップアプリケーション向けの正方形や角丸アイコンの配置という面倒な作業をすべて自動化してくれる。

ジェネレーターでできること

核となるコンセプトはシンプルだ。ベクターグラフィックスツールの複雑さなしに、スライダーとリアルタイムプレビューを提供するクリーンなインターフェースを разработчикам に提供すること。

数回のクリックで以下のようなアイコンを作成できる:

主な機能を詳しく解説すると、このサービスは基本的なニーズをすべてカバーしている:

• Iconifyカタログ統合。20万以上のシンボルを含む大規模なベクターアイコンデータベースを検索できるインターフェースが含まれている。キーワードを入力してグリフを選び、背景上で即座にプレビューできる。
• テキストとタイポグラフィサポート。1〜2文字のロゴを作成し、フォント、文字間隔、グラデーションを適用できる。
• 独自アセットのアップロード。標準アイコンが合わない場合は、ローカルSVGやラスター画像をドロップしてアップロードできる。
• 背景スタイルのカスタマイズ。線形・放射状グラデーション、ブラー付きドロップシャドウ、ボーダー幅と色、角の丸みをサポート。

ちなみに、プロジェクトの作者はREADME内でフォントに関する有益な警告を残している。テキストベースのアイコンを生成すると、アプリがデフォルトでOSのシステムフォントを読み込む可能性がある。商用リリースでは、ライセンス問題を避けるためオープンソースのGoogle Fontsに切り替えるのがおすすめだ。

プロジェクトの実行方法

一番シンプルな方法は、GitHub Pages上の完成版を開き、すぐにアセットの作成を開始することだ。インストールは不要。

このようなユーティリティをローカルで管理したい場合や、クローズドネットワーク内にコピーをデプロイしたい場合は、数コマンドでプロジェクトを起動できる。

pnpmでの実行

ローカルでのTypeScriptとVite開発用:

# Клонируем репозиторий
git clone https://github.com/zhangyu1818/appicon-forge.git

# Переходим в папку проекта
cd appicon-forge

# Ставим зависимости
pnpm install

# Запускаем локальный dev-сервер
pnpm dev

その後、インターフェースはブラウザの http://localhost:5173/appicon-forge/ で利用可能になる。

Dockerでの実行

Node.jsやパッケージマネージャーと関わりたくない人のために、 готовのDockerfileが用意されている:

git clone https://github.com/zhangyu1818/appicon-forge.git
cd appicon-forge

# Собираем и запускаем контейнер
docker build -t appicon-forge .
docker run -d --name=appicon-forge --restart=always -p 5173:80 appicon-forge

すでにホームサービスインフラを持っている場合は、Docker Compose経由でも利用可能:

docker-compose up -d

どんなタスクに役立つか

もちろん、このツールは複雑なブランディングにおけるグラフィックデザイナーの仕事を代替するものではない。しかし、日常的な開発タスクには十分すぎる:

• デフォルトの白い正方形の代わりに整洁なプレースホルダーが必要なクイックプロトタイプや個人プロジェクト。
• 起動速度がユニークなスタイルよりも重要な、内部企業ユーティリティや管理パネル。
• WebサイトのファビコンやPWAマニフェスト用アイコンの作成。
• ブラウザ拡張機能のスタイリング。

プロジェクトは許容的なMITライセンスの下で配布されている。コードベースはクリーンでコンパクトなので、必要に応じてリポジトリをフォークして、独自のグリッドテンプレートやiOS/Android用の特定のエクスポート形式を追加することも可能だ。