なぜ言葉の選び方がSVGに影響するのか
スタジオで作るロゴ、アイコン、ステッカー、バッジは、まず絵として描かれ、それからベクターのパスにトレースされます。平坦な色の領域1つにつき、図形が1つです。少数の大胆でフラットな図形でできた絵は、少数のきれいなパスになります。陰影、質感、グラデーションは、何百もの細かい破片になります。つまり、説明でいちばん役に立つのは、最初からフラットなアートワークを頼むことです。スタジオ自身の指示でもそう頼んでいるので、あなたの言葉でそれを打ち消さないようにしましょう。
ロゴの説明には何を書けばいい？
1つの文に3つのこと、つまり何を描くか、誰のためのものか、色を書きます。
上向きの矢印にも見えるシダの葉。貯蓄アプリ"Fernvault"のロゴ。濃いネイビーと温かみのあるゴールド
- アイデアは1つ。「矢印にもなっている葉」はロゴになります。「葉、コイン、グラフ、盾、鍵」では詰め込みすぎです。
- 具体的な名詞で。「信頼」や「成長」は描けません。「2つの手」「芽」「上向きの矢印」なら描けます。
- 名前は引用符で囲むか名前欄に入力します。ただし、ロゴに名前を入れたい場合だけです。名前そのものがロゴなら、ロゴタイプのチップを選びます（ロゴのスタイルの選び方）。
アイコンセットはどう説明する？
アイコンをチップとして並べます（動作ではなくモノを）：コーヒーカップ、クロワッサン、マップピン、ポイントカード。そしてスタイルを一度だけ、スタイル欄に書きます。スタイルはすべてのアイコンに使われるので、それがセットの統一感を保ちます。
このガイドで使っているアイコンは、この方法で作った1つのセットです。チップ12個、フラットカラー、角丸、色は#0061fc、#0a2d8f、#ef6e50、スタイルの言葉は "clean modern product illustration icons, simple bold shapes, flat fills, no outlines, no gradients"（すっきりしたモダンな製品イラスト風のアイコン、シンプルで力強い形、フラットな塗り、輪郭線なし、グラデーションなし）です。
よいスタイルの言葉は、雰囲気ではなく描き方についての言葉です。「線の端は丸く」「均一な太い線」「角はシャープに」「輪郭線なし」「ぽってりした形」「70年代のレトロなポスターの色」など。「リアル」「精密」「3D」「細かい陰影」のように、24pxのアイコンでは表しきれない細部を足す言葉は避けましょう。リスト全体で細かさのレベルをそろえることも大切です。「点」と「街のスカイライン」を並べると、どんなスタイルでもちぐはぐに見えます。
ステッカーやバッジはどう説明する？
- ステッカー： キャラクターの場合は、それが誰なのかを一度だけ、正確に書きます。動物の種類やモノ、体の形、2〜3色、特徴を1つ（「クリーム色のお腹とピンクのほっぺをした、丸くてぽっちゃりした茶トラ猫」）。それから表情を並べ、キャプションは引用符で囲みます：
手を振る “やっほー！”。キャプションは2〜3語に。文字はすべて絵として描かれるので、送る前につづりを確認してください。 - バッジ： 上段には実績の名前、下段には短いルールか共通の文言を入れます。バッジのリングの曲線には、文章より2〜3語のほうがずっときれいに収まります。中央の絵は、「ランニングシューズ」「旗の立った山」のように、シンプルなモノ1つで説明します。
書かないほうがいいこと
| 避けたい言葉 | 理由 | 代わりに頼むこと |
|---|---|---|
| グラデーション、「光る」「つやつや」 | 平坦な色の縞模様になる | 2つのフラットな色調 |
| 写真のような光、影、「リアル」 | たくさんの細かい破片にトレースされる | 「フラット」「塗りつぶしの図形」 |
| 細かい質感、「グランジ」「水彩」 | 点々にトレースされる | きれいな輪郭。質感はあとでエディターで追加 |
| 小さな文字、マーク内のキャッチコピー | 小さいサイズでは読めない | マークの横に、フォントで組んだ名前 |
| 4色以上 | セットがにごり、パスが増える | 3色まで（色名かHEX値で） |
仕上がりを直すには
一度に変えるのは1つだけにします。セットがほぼ思いどおりなら、最初からやり直すのではなく、ラウンドで個別のアイコンを短いメモ付きでやり直します（「もっとシンプルに、無地の丸めたマット」）。ロゴがほぼ思いどおりなら、言葉で手直しします（「Rをもっと太く」）。色や余分な図形1つだけが気になるなら、SVGエディターでSVGを開くほうが、もう1ラウンド回すより早く済みます。そして、絵にある図形よりもSVGのパスがずっと多いときは、絵が十分にフラットではなかったということです。「フラットな塗り、陰影なし」と頼んで、もう一度描いてください。