なぜベクターのロゴから始めるの？

ブランドで使うファイルは、16pxのブラウザタブのアイコンから1,024pxのアプリストア用画像まで、すべて1つの元ファイルから作るべきです。元がPNGだと、書き出しのたびにピクセルをリサイズすることになり、小さいサイズはぼやけ、大きいサイズはぼんやりします。元がパスでできたSVGなら、どのサイズも新しく描き直されます。以下の手順では、1つのSVGを中心に置き、ほかのすべてをそこから作ります。

StudyのフクロウのロゴのSVG、続いて同じフクロウの角丸のiOSアプリアイコン、円形のAndroidアダプティブアイコン、ピクセルが見えるように拡大した32pxのfavicon

作例のロゴの1つと、エクスポートツールがそのSVGから作ったiOSアイコン、Androidアダプティブアイコン、favicon。faviconは拡大して表示しています。32pxでは1ピクセルが重要です。

ステップ1：ロゴを説明してアイデアを選ぶ

AIロゴ作成を開き、ロゴに描く内容を書きます。例：「円と三角形で組み立てたフクロウ。勉強アプリ用、インディゴとアンバー」。ロゴに名前を入れたい場合はブランド名を追加します。作りたいロゴの種類が決まっていればスタイルのチップを選んでください。それぞれの違いはロゴのスタイルの選び方で説明しています。送信するたびにアイデアが4つ作られ、料金は先にボタンに表示されます。

ステップ2：1つのアイデアを言葉で手直しする

いちばんイメージに近いアイデアを選び、変えたい点を伝えます。「Rをもっと太く」「羽を少なく」「太陽を山頂の上に」など。手直しでは、ロゴのそれ以外の部分はそのまま残ります。1回の手直しでは、10個の変更を並べるより、1つか2つの具体的な変更にしぼるほうが効果的です。

ステップ3：ベクター化する

選んだロゴでベクター化を選びます。各色が独立したパスになったSVGにトレースされ、使う前に元のロゴと並べて確認できます。SVGエディターで開けば、一部の色を変えたり、余計な図形を消したり、名前の文字間隔を変えたりできます。

先に進む前に、3つの点を確認してください。小さいサイズでもマークが判別できるか。くっついてはいけない図形や文字が接していないか。色が思いどおりになっているか。ここでSVGを直しておけば、そこから作るすべてのファイルが直ります。

ステップ4：アプリアイコンを作る

Android・iOSアプリアイコン作成は、SVGから次のものを作ります。

  • Android： 48〜192pxの各密度のPNG、512pxのPlayストア用画像、セーフエリア内に収めたフォアグラウンドとテーマアイコン用のモノクロレイヤーを含むアダプティブアイコンのXML
  • iOS： Xcode用の不透明な1,024px画像1枚が入ったAppIcon.appiconset

背景色とマークの周りの余白を選びます。周りに透明な余白のあるマークなら、Androidのモノクロアイコンが本来の形になります。取り込みの手順と実機で確認すべきことは、1枚の画像からAndroid・iOSのアプリアイコンを作るで解説しています。

ステップ5：faviconとPWAアイコンを作る

favicon・PWAアイコン作成は、favicon.ico（16・32・48pxを1つのファイルに）、アートワークがきれいなベクターパスならfavicon.svg、16pxと32pxのPNG、180pxのApple touchアイコン、maskable版付きの192pxと512pxのアイコン、site.webmanifest、そしてページの<head>に貼り付けるHTMLを作ります。ブラウザがどれを使うのか、そしてなぜ今もfaviconにICOが必要なのかはfaviconの形式の違い：SVG・PNG・ICOの使い分けで、maskableのセーフゾーンについてはPWAのmaskableアイコン：セーフゾーンと設定方法で解説しています。

まとめて作るなら：ブランドキット

ブランドキットは、同じSVGに同じエクスポートツールを、1組のブランド設定（ブランド名、短い名前、テーマカラー、背景色、余白）で実行し、結果を1つのZIPにまとめます。

フォルダー 内容
favicon/ faviconとPWAのパッケージ
app-icons/ AndroidとiOSのアプリアイコンセット
ios/ アプリ内でロゴを使うためのXcodeのimage set
android/ アプリ内でロゴを使うためのVectorDrawable
png/ 長辺256・512・1,024・2,048pxの透過PNG
svg/ 最適化したSVGと、元の精度のままのオリジナル

各フォルダーの中身は、同じ入力から個別のツールで作るものとまったく同じです。まずキットを作り、あとで一部だけを作り直すこともできます。キットの料金はダウンロード前に表示されます。

公開する前に

販売する各国の商標データベースで、名前と似たマークを検索してください。生成されたロゴは新しいものですが、登録済みの商標と照合する仕組みはありません。SVGをマスターファイルとして保管し、新しいサイズは必ずSVGから作ってください。PNGから作ってはいけません。