SVGアイコンをオンラインで作る

Rayzia でSVGアイコンセットを作る手順

1. エディタを開く。 rayzia.com/vector/ にアクセスします。無料プランですべてのツール、AI、クラウドファイル3件が使えるので、追加の支払いや登録なしにアイコンセットを始められます。
2. 正方形のアートボードとグリッドを用意する。 正方形のアートボードを作り（24x24 が無難な初期値です）、グリッドをオンにします。キャンバスを揃えることこそが、セットをバラバラの寄せ集めではなくひとつのファミリーに見せる鍵です。
3. アイコンを描くか、AIにセットの下描きを頼む。 ペンとベジェノード、編集可能なシェイプ、ブール演算を使って各グリフを描きます。あるいは、すでにお持ちの Claude や GPT のアカウントを接続してキャンバス上にセット全体の下描きを頼み、手作業で仕上げます。
4. 線幅とサイズを揃え、シンボルを再利用する。 すべてのアイコンで線幅をひとつに統一し、図形を同じグリッドに揃えます。繰り返し使う部品は再利用可能なシンボルにしておけば、一度の編集がすべてのインスタンスに反映されます。
5. きれいな SVG を書き出す。 各アイコンを、コードベース向けの SVG やモックアップ向けの PNG として書き出せます。出力は本物の SVG ジオメトリなので、そのままコンポーネントやスタイルシートに入れたり、アイコンフォントのビルドに流し込んだりできます。

アイコンメーカーに SVG が最適な理由

アイコンは配置されるあらゆるサイズに耐えなければなりません。PNG はネイティブ解像度を超えて拡大された瞬間にぼやけます。SVG はピクセルではなく数式を保持するため、16px でも 512px でもシャープに描き直されます。アイコンをベクターで作るべき理由はこれに尽きます。

Rayzia は SVG を書き出し時のおまけではなくドキュメントそのものとして扱うため、編集しているものがそのまま成果物になります。本格的なアイコンメーカーに期待される描画ツールが揃っています。ペンとノード編集、編集可能なシェイプ、グラデーション、ブール演算とシェイプビルダー、さらに自分のフォントでのパス上テキストと、タイ語などの複雑な文字体系の正しい表示。Rayzia はテンプレート集ではなく本物のエディタなので、正真正銘のカスタムアイコンをデザインし、ずっと編集可能なまま保てます。

アイコンセットの統一感を保つ

セット作りの難所は最初の1個ではなく、40個目になっても仲間に見え続けることです。共通グリッド、揃えた線幅、視覚的な太さの統一がその大半を担い、残りは再利用可能なシンボルが引き受けます。ひとつのマスターシェイプがすべてのコピーを駆動するからです。

手早く始めたいときは、お手持ちのAIアカウントをキャンバスに向けて、目の前で配置・色変更・バリエーションの下描きをさせましょう。AIの操作はすべてアンドゥ1回で戻せ、お手持ちのキーで動くため、Rayzia にAIの追加料金を払う必要はありません。セットが増えてきたら、レイヤー、複数アートボード、名前付き履歴、150+ のライブエフェクトが役に立ちます。

アイコン作成：よくある質問