お店やサービス、自分のブログのロゴを作ろうと思っても、何から始めればいいのか、どんな形にすればいいのか迷ったことはありませんか。
ロゴデザインは、センスだけで決まるものではなく、順番に沿って考え、いくつかのポイントを確認すれば、初心者でも失敗しにくくなります。
この記事では、ロゴとは何か、ロゴマーク・ロゴタイプとの違い、ロゴの種類、ロゴの作り方の手順、フォントや色の選び方、やってはいけない例、商標登録の注意点までを、架空のブランドで作った見本を使って解説します。
ロゴの基本と種類
まずは、ロゴという言葉の意味と、似た言葉との違い、そしてロゴにはどんな種類があるのかを押さえましょう。
ロゴとは?ロゴマーク・ロゴタイプ・シンボルマークの違い
ロゴとは、会社・お店・商品・サービスなどを見分けてもらうための、決まった形の文字や図形のことです。
名前を毎回同じ形で見せることで、見た人に「あのお店だ」と覚えてもらい、ほかと区別してもらうためにあります。
ロゴのまわりには似た言葉がいくつかあり、日本では次のように使い分けられることが多いです。
| 呼び方 | 指すもの |
|---|---|
| ロゴタイプ | 名前の文字を、そのブランド用にデザインしたもの(文字の部分) |
| シンボルマーク | 文字を使わず、図形や絵だけでブランドを表したもの(マークの部分) |
| ロゴマーク | ロゴタイプとシンボルマークを組み合わせたもの、またはロゴ全体を指す日本でよく使われる呼び方 |
| ロゴ | 上のどれも含めた、ブランドを表す文字・図形の総称 |
たとえば、名前の文字だけで作ったものはロゴタイプ、りんごの形だけで作ったものはシンボルマーク、その2つを並べたものはロゴマークと呼ばれます。
ただし、会社やデザイナーによって呼び方の範囲は少しずつ違うので、ふだんの会話では「ロゴ」と「ロゴマーク」をほぼ同じ意味で使っても問題ありません。
大切なのは呼び方よりも、「文字の部分」と「マークの部分」の2つの要素でロゴができている、と理解しておくことです。
ロゴの種類一覧
ロゴは、文字とマークをどう組み合わせるかによって、大きく5つの種類に分けられます。
種類ごとに得意な場面が違うため、先に種類を知っておくと、自分のロゴをどの形にするか決めやすくなるからです。
次の見本は、架空のブランドで5つの種類を作ったものです。
それぞれの特徴と向いている場面を表にまとめます。
| 種類 | できているもの | 向いている場面 |
|---|---|---|
| ワードマーク | 名前の文字だけ | 名前が短く覚えやすいとき。名前そのものを覚えてもらいたいとき |
| レターマーク | 名前の頭文字だけ | 名前が長いとき。アプリのアイコンなど小さな場所で使うとき |
| シンボルマーク | 図形や絵だけ | すでに名前が知られているとき。文字を読まない人にも伝えたいとき |
| コンビネーションマーク | マークと文字の組み合わせ | 始めたばかりのお店・サービス。いちばん使い回しやすい |
| エンブレム | 枠の中に文字やマークを収めたもの | 伝統や信頼感を出したいとき。看板・スタンプ・パッケージなど |
初めてロゴを作るなら、コンビネーションマークにしておくと、場所に合わせて「マークだけ」「文字だけ」に分けて使えるので便利です。
名前の文字だけで作る「文字ロゴ」(ワードマーク)も、図形を描く必要がない分、初心者が最初に挑戦しやすい形です。
ロゴデザインの作り方
ここでは、ロゴを作る手順を7つのステップに分けて紹介し、つまずきやすいフォント・色・データの書き出しを詳しく説明します。
ロゴを作る7つの手順
ロゴは、いきなりパソコンで描き始めるのではなく、「言葉で考える→紙に描く→データにする→確かめる」の順に進めると失敗しにくくなります。
何を伝えたいかが決まっていないまま描くと、見た目の好みだけで迷い続けてしまい、あとから「このロゴで何を表したかったのか」を説明できなくなるからです。
具体的には、次の7つの手順で進めます。
- コンセプトを言葉にする:
誰に向けたものか、見た人にどんな印象を持ってほしいかを書き出し、「やさしい」「誠実」「元気」のような言葉を3つほどに絞ります。
この言葉が、あとで形・フォント・色を選ぶときの判断の基準になります。 - 紙にラフスケッチを描く:
ラフスケッチとは、細かいところを気にせず手早く描く下書きのことです。
名前の文字の形、頭文字、名前から連想するもの(「ひだまり」なら太陽)などを、上手い下手を気にせず数十案描きます。 - 形をデータにする:
良さそうな案を2〜3個選び、FigmaやIllustratorなどのデザインツールで描き直します。
このとき、写真のような画像ではなく、点と線で形を記録する「ベクター形式」で作ります(理由はデータの書き出しの節で説明します)。 - フォント(文字)を決める:
コンセプトの言葉に合う書体を選び、文字と文字の間隔などを整えます。 - 色を決める:
まずは白黒で形を完成させてから、1〜2色を選んで色を付けます。 - モノクロと小さいサイズで確かめる:
白黒だけにしても、親指の爪くらいの大きさに縮めても、何のロゴか分かるかを確かめます。
分かりにくければ、線を太くする・要素を減らすなどして手順3に戻ります。 - データを書き出す:
SVG・PNGなどの形式で、カラー版・白黒版・白抜き版(濃い背景用)をそろえて保存します。
たとえば架空の「ひだまり農園」なら、手順1で「あたたかい」「素朴」「安心」という言葉を決め、手順2で太陽と畑を組み合わせた案を選び、丸みのある書体と黄色・焦げ茶の2色に決める、という流れになります。
このように、手順1で決めた言葉に立ち返りながら進めると、ロゴ全体に一貫性が生まれます。
ロゴに使うフォントの選び方と商用利用
ロゴのフォントは、コンセプトの言葉に合う書体を選び、ロゴに使ってよいライセンスかどうかを必ず確かめます。
書体はそれだけで「かたい」「やわらかい」「高級」といった印象を持っていて、ロゴの印象を大きく左右するうえ、フォントごとに使ってよい範囲が決められているからです。
書体の種類と、ロゴにしたときの印象の目安は次のとおりです。
| 書体 | 特徴 | ロゴにしたときの印象 |
|---|---|---|
| ゴシック体・サンセリフ体 | 線の太さがほぼ均一で、飾りがない | すっきり・現代的・親しみやすい |
| 明朝体・セリフ体 | 線に強弱があり、線の端に小さな飾り(うろこ・セリフ)がある | 上品・伝統的・信頼感 |
| 丸ゴシック体 | 線の端や角が丸い | やさしい・かわいい・あたたかい |
| 手書き風・筆記体 | 手で書いたような線 | 個性的・カジュアル・おしゃれ |
日本語の名前なら和文フォント(ひらがな・カタカナ・漢字を含むフォント)、英語の名前なら欧文フォント(アルファベット用のフォント)から選びます。
ロゴでは、フォントで打った文字をそのまま使うのではなく、文字と文字の間隔を1組ずつ調整する「カーニング」をして、見た目の間隔をそろえるのが一般的です。
完成したら、文字をフォントのデータではなく図形に変換する「アウトライン化」をしておくと、フォントが入っていないパソコンでも同じ形で表示できます。
注意したいのが、フォントのライセンス(使ってよい範囲のルール)です。
無料のフォントでも、商用利用やロゴへの使用、商標登録に使うことに条件を付けている場合があるので、配布元の利用規約で「ロゴに使ってよいか」を確かめてから使いましょう。
ライセンスで確認する項目はフォントライセンスとは?、ロゴに使える無料の書体はフリーフォントおすすめ一覧、ロゴと見出し・本文の書体のそろえ方はブランドとタイポグラフィとは?で解説しています。
ロゴの色の決め方
ロゴの色は、コンセプトに合う色を1〜2色に絞り、白黒でも成り立つようにしておくのが基本です。
色が多いと印象がぼやけて覚えにくくなるうえ、ロゴは白黒のコピーや1色刷りのスタンプなど、色が使えない場面でも使われるからです。
色選びの手順は、次のように考えると決めやすくなります。
- コンセプトの言葉から色を選びます。
たとえば「あたたかい」ならオレンジや黄色、「誠実」なら青や紺のように、言葉と色の印象を結び付けます。 - 同じ業界でよく使われる色を調べ、似すぎないかを確かめます。
- 決めた色は、
#FFBD07のようなカラーコード(色を英数字で表したもの)で記録し、いつでも同じ色を使えるようにします。
次の見本は、架空の「ひだまり農園」のロゴを、カラー・白黒・白抜き・小さいサイズで並べたものです。
形がシンプルなので、白黒にしても、マークだけを小さくしても「太陽と畑」の形が分かります。
このように、色は形を引き立てる役に回し、色がなくても伝わる形を先に作っておくと、どんな場面でも使えるロゴになります。
言葉から色の候補を探す方法や、同じ業界の色とかぶったときの工夫は、商品・サービスに合わせた色選びとは?で詳しく解説しています。
ロゴデータの書き出し(SVG・PNG)
ロゴの元データはベクター形式で作り、Webで使うときはSVG、SVGが使えない場所ではPNGで書き出すのが基本です。
ベクター形式は形を点と線の情報で記録しているので、どれだけ拡大しても輪郭がぼやけず、名刺から看板まで同じデータで使えるからです。
反対に、写真のように小さな点(ピクセル)の集まりで記録する形式を「ラスター形式」と呼び、作ったときより大きく表示すると輪郭がぼやけたり、ギザギザになったりします。
ロゴでよく使う形式の違いは次のとおりです。
| 形式 | 種類 | 背景の透明 | 使う場面 |
|---|---|---|---|
| SVG | ベクター | できる | Webサイトのロゴ。拡大・縮小しても劣化しない |
| PNG | ラスター | できる | SNSのアイコンなど、SVGが使えない場所。使う大きさに合わせて書き出す |
| JPEG | ラスター | できない | 写真向けの形式なので、ロゴにはあまり向かない |
MDNの画像ファイルの種類と形式ガイドでも、SVGはアイコンや図のように大きさを変えても正確に描画したい画像に適していること、PNGは透明に対応し、JPEGは透明に対応していないことが説明されています。
背景を透明にしておくと、白以外の背景の上にロゴを置いても、ロゴのまわりに白い四角が出ません。
Figma・Illustrator・InkscapeでSVGを書き出す手順や、文字をアウトライン化して書き出す方法は、SVG入門 #3 SVGの作り方で紹介しています。
ロゴデザインで失敗しないコツ
ここでは、初心者がやってしまいがちなロゴデザインの失敗と、ロゴを長く使うために決めておきたい余白・サイズ・使い分けのルールを紹介します。
ロゴデザインでやってはいけないこと
ロゴデザインでやってはいけないのは、小さくすると見えなくなる形にすることと、他の人のデザインに頼ることです。
ロゴはファビコンのような小さな場所から看板のような大きな場所まで使われ、しかも何年も使い続けるものなので、一部の場面でしか通用しない形や、権利の問題を抱えた形は、あとで作り直すことになるからです。
よくある失敗は次のとおりです。
- 線が細すぎる・文字が小さすぎる:
大きな画面ではきれいに見えても、小さくすると線がかすれて消えてしまいます。 - 要素を詰め込みすぎる:
マーク・名前・キャッチフレーズ・飾りを全部入れると、小さくしたときにつぶれ、何を覚えてほしいのかも伝わりにくくなります。 - ラスター画像でしか作らない:
画像編集アプリで作ったPNGやJPEGしかないと、看板や大きな印刷物に使うときに拡大できず、作り直しが必要になります。 - フリー素材のイラストをそのまま使う:
誰でも同じ素材を使えるので、ほかのお店とロゴがかぶるおそれがあります。
素材サイトの利用規約で、ロゴへの使用や商標登録を禁止している場合もあります。 - 有名なロゴに似せる:
見た人が本物と勘違いするおそれがあるうえ、相手の商標権を侵害する可能性もあります。 - 色やグラデーションに頼る:
色を取ると形が分からなくなるロゴは、白黒印刷やスタンプで使えません。
次の見本は、細い線と小さな文字を重ねたロゴと、太い線でシンプルにまとめたロゴを、同じ大きさまで縮めて比べたものです。
NGのロゴは大きく表示すると繊細で素敵に見えますが、ファビコンほどの大きさでは線がくっつき、ただの丸にしか見えません。
ロゴは「小さく、白黒で、一瞬見ただけ」でも分かるくらいシンプルにすることが、失敗を避けるいちばんの近道です。
余白(アイソレーション)と最小サイズを決める
ロゴが完成したら、ロゴのまわりに空ける余白と、これ以上小さくしてはいけない大きさを決めておきましょう。
ほかの文字や写真がロゴにくっつくと、ロゴがまわりに埋もれて目立たなくなり、小さくしすぎると形が読み取れなくなるからです。
ロゴのまわりに確保する、ほかの要素を置かない余白のことを「アイソレーション」(アイソレーションエリア)と呼びます。
余白の大きさは「ロゴの高さの半分」や「マークの太陽の直径ぶん」のように、ロゴの一部を基準にして決めると、ロゴを拡大・縮小しても同じ比率で保てます。
最小サイズは、実際にロゴを縮めて表示・印刷してみて、文字が読めなくなる手前の大きさを「画面では横幅○px以上」「印刷では横幅○mm以上」のように数字で決めておきます。
余白・最小サイズ・色・使ってはいけない例などをまとめた資料は「ロゴガイドライン」(ロゴマニュアル、ロゴレギュレーション)と呼ばれ、ほかの人にロゴを使ってもらうときに、形や色を崩されないようにする役割があります。
個人のブログやお店でも、余白と最小サイズ、カラーコードの3つをメモしておくだけで、ロゴの見え方がぶれにくくなります。
使う場所ごとにロゴを使い分ける
ロゴは1種類だけでなく、横長・正方形・マークだけなど、使う場所に合わせた形を用意しておくと便利です。
Webサイトのヘッダーは横長、SNSのアイコンは正方形、ブラウザのタブはとても小さい、というように、場所によって使える形と大きさが違うからです。
主な使い場所と、向いているロゴの形は次のとおりです。
| 使う場所 | 向いている形 | 気をつけること |
|---|---|---|
| Webサイトのヘッダー | マークと文字を横に並べた横長の形 | ヘッダーの高さを取りすぎない大きさにする。SVGで置くと画面の大きさが変わってもくっきり表示される |
| ファビコン | マークだけ、または頭文字だけ | ブラウザのタブなどにとても小さく表示されるので、文字は入れない |
| SNSのアイコン | マークだけを正方形に収めた形 | 多くのSNSでは丸く切り抜かれて表示されるので、四隅に大事な部分を置かない |
| 名刺・看板・印刷物 | 場所に合わせて横長・縦長 | ベクター形式の元データを使い、印刷会社にはSVGやPDFなど拡大できる形式で渡す |
ファビコンとは、ブラウザのタブやブックマークに表示されるサイトの小さなアイコンのことで、MDNの用語集では、通常は16×16ピクセルで保存されると説明されています。
16×16ピクセルは、この記事の文字1つ分ほどの大きさなので、コンビネーションマークの文字まで入れることはできず、マークだけを使うことになります。
ヘッダーでのロゴの置き場所(左端か中央か)や、ロゴを押したらトップページに戻る作りについては、Webサイトのヘッダーとは?で見本付きで解説しています。
ロゴを作るときの注意点(商標登録)
ロゴを仕事やお店で長く使うなら、ほかの人の権利とぶつからないか、自分のロゴをどう守るかも考えておく必要があります。
似たロゴがないかJ-PlatPatで調べる
ロゴを使い始める前に、同じ名前や似たマークがすでに商標として登録されていないかを調べておきましょう。
商標とは、商品やサービスに付ける名前やマークのことで、他の人が登録している商標と同じ・似たものを同じ分野で使うと、商標権の侵害になるおそれがあるからです。
日本で登録されている商標は、独立行政法人 工業所有権情報・研修館(INPIT)が運営する「特許情報プラットフォーム(J-PlatPat)」で、無料で調べられます。
J-PlatPatには商標検索の機能があり、文字の商標だけでなく、図形の種類で分類した「図形等分類表」を使って、似たマークを探すこともできます。
検索で見つからなくても「絶対に問題ない」とは言い切れないので、気になるときは弁理士(特許や商標の手続きを専門に扱う国家資格者)に相談すると安心です。
ロゴを商標登録するには
自分のロゴを商標として守りたいときは、特許庁に出願して登録を受ける必要があります。
商標法では、商標権は設定の登録によって発生すると定められていて、ロゴを作って使い始めただけでは商標権は得られないからです。
商標法で押さえておきたいポイントは次の3つです。
- 商標には、文字だけでなく、図形・記号・色彩やそれらを組み合わせたものも含まれます(第2条)。
そのため、文字のロゴも、マークのロゴも登録の対象になります。 - 同じ・似た商標を、同じ・似た商品やサービスについて別々の人が出願したときは、先に出願した人だけが登録を受けられます(第8条)。
使い始めた順番ではなく、出願した順番で決まる点に注意しましょう。 - 商標権の存続期間は登録の日から10年で、更新の申請をすれば続けられます(第19条)。
出願には、ロゴを使う商品やサービスの分野を指定するなどの手続きや費用がかかるため、実際に出願するときは特許庁の案内を確認するか、弁理士に相談しましょう。
また、商標登録を考えているなら、使うフォントや素材のライセンスが商標登録を認めているかも、事前に確かめておく必要があります。
よくある質問
ロゴデザインについて、初めて作る人からよく聞かれる質問に答えます。
ロゴはシンプルなほうがいいですか?
はい、初めて作るならシンプルなほうが失敗しにくいです。
ロゴはファビコンのような小さな場所や白黒の印刷でも使われるため、要素が少ないほうがどの場面でも形が崩れず、覚えてもらいやすくなります。
「マーク1つ+名前」や「名前の文字だけ」から始めて、物足りなければ少しずつ足していくのがおすすめです。
文字だけのロゴでも大丈夫ですか?
大丈夫です。
名前の文字だけで作る文字ロゴ(ワードマーク)は、名前そのものを覚えてもらいやすく、図形を描く必要もないので初心者にも作りやすい形です。
そのぶん書体選びと文字の間隔の調整が仕上がりを左右するので、いくつかの書体で名前を並べて比べてから決めましょう。
ファビコンなど小さな場所用に、頭文字だけの形も1つ用意しておくと困りません。
ロゴはどのソフトで作ればいいですか?
ベクター形式で描けて、SVGで書き出せるソフトを選びましょう。
Figma・Illustrator・Inkscapeなどがその代表で、どれを使ってもこの記事の手順でロゴを作れます。
ソフトを選ぶ前に、まずは紙とペンでラフスケッチを描いて、形の方向性を決めておくと、ソフトの操作に気を取られずに済みます。
ロゴの色は何色まで使っていいですか?
決まりはありませんが、初めてなら1〜2色に絞るのがおすすめです。
色が少ないほど印象がはっきりし、印刷するときの手間や費用も抑えられます。
何色使う場合でも、白黒にしたときに形が分かるかを必ず確かめておきましょう。
まとめ
ロゴとは、ブランドを見分けてもらうための決まった形の文字や図形のことで、ワードマーク・レターマーク・シンボルマーク・コンビネーションマーク・エンブレムの5つの種類があります。
ロゴの作り方は、コンセプトを言葉にしてからラフスケッチを描き、ベクター形式で形を作り、フォントと色を決めて、白黒と小さいサイズで確かめる、という順番で進めます。
細すぎる線や要素の詰め込み、フリー素材の流用を避け、余白と最小サイズを決めておくと、どんな場所でも崩れないロゴになります。
仕事やお店で使うなら、J-PlatPatで似た商標がないかを調べ、必要に応じて商標登録も検討しましょう。
まずは、ロゴにしたい名前とコンセプトの言葉を3つ紙に書き出し、その下に思いつくマークや文字の形を10個描いてみましょう。
