チュートリアル5 分読み
SVG アイコンをオンライン作成する方法
2026年6月公開 · Svggramチーム
アイコンは Web やアプリのデザインに不可欠です。このガイドでは、Svggram のオンライン SVG エディターを使ってアイコンを作成する方法を解説します。
なぜアイコンに SVG を使うのか？
- スケーラビリティ — どんなサイズでも鮮明
- ファイルサイズが小さい — PNG より小さい
- 編集しやすい — 色や形を簡単変更
手順
手順 1: キャンバスを設定する
正方形のキャンバス（24×24、32×32、または 48×48 ピクセルが標準的なアイコンサイズ）から始めます。
手順 2: ツールを選択する
基本のシェイプには四角形ツール、カスタムフォームにはパスタイプ、微調整には選択ツールを使います。
手順 3: アイコンをデザインする
四角形、円、線を組み合わせてアイコンを作ります。対称性には配置ツールを活用します。
手順 4: 色とスタイルを追加する
統一感のあるカラーパレットを選び、塗りつぶしとストロークのカラーピッカーを使います。
手順 5: アイコンをエクスポートする
Web 用には SVG として保存し、他のアプリ用には PNG としてエクスポートします。
ベストプラクティス
- シンプルに保つ
- ストロークの太さを統一する
- グリッド上でデザインする
- 小さいサイズでテストする