オリンピック東京開催決定！スポーツ系ロゴの基本的な作り方をを晒す

2013/10/01

最終更新日:2013/10/01

2020年オリンピック東京開催決定！ということで「おもてなし」に世間が湧いている中ですが、その記念というか…これから更に賑やかになっていくであろうスポーツ業界の発展を願って（？）世間でよく見かけるスポーツ系ロゴの簡単な作り方などを書いていきたいと思います。
私はスポーツロゴのデザインを2年ほどしていましたが、作る時の基本となるのはプロチームのロゴデザインで、形は大体決まっています（多分）。
最近はミニマルデザイン（余計なものを削ぎ落した、シンプルでスタイリッシュなデザイン）がブームなのもあって、オシャレなロゴとかもちらほら出てるんですが、今回は、昔からある…なんというか…泥臭いような（失礼？）雄々しいような？これぞスポーツ！って感じのロゴデザインの作り方を紹介します。
ユニフォームのロゴデザインなどをする機会は、世間的にもあまりない…と思うんですが、Ｔシャツにつけたり、POPなどのワンポイントにしても可愛いかもです。

使うものはフォントとIllustratorです。バージョンはCS2以降なら多分いける…はず…。

こんなロゴ作るぽよ。

プロチームのデザインを見てみよう

野球

球団別インデックス
どどーんとした大きな飾り文字？が特徴の野球チームのロゴ。キャラクターもついてますけど、ユニフォームは文字のロゴだけですね。ドラゴンズはなんでドアラじゃないんだろう…？

サッカー

スポーツ用品激安通販【スポーツ１直線!!】
サッカーのロゴは、文字だけのものと、エンブレムがありますね。エンブレムの方がサッカー！って感じがします。
ユニフォームには、両方ついているチームが多いですね。
エンブレムのデザインはこちらにまとまっています。今回エンブレムはやりませんが…。
Jリーグ各チームのエンブレム – NAVER まとめ

プロ野球とJリーグのロゴ。雰囲気的にはどちらも似ています。ちなみにバレーやバスケのロゴもこんな感じのデザインです。バスケは、文字はこんな感じで、それにバスケットボールの絵をどこかに足したデザインが多いような。

違う所は、まずフォント。これはサッカーや野球関係なく、どのチームもそれぞれフォントが違います。
こんなデザインに富んだフォントをまず見つけてこなくてはならないのか…ならないのですが…何とかなるさ(・∀・)☆

フォントを探す

スポーツロゴ向きのフォントを探すんですが、こんな個性的なデザインのフォントなんてどこで探したらいいの…？
といわけで、フォントのサイトをご紹介☆

ffonts フリーフォントのダウンロード
有名どころなんですが、こちらで色んなフォントをダウンロードできます。フリーのものから有料のものまでありますので、ダウンロードする時にはライセンスなど注意してください。
左部分に、フォントがカテゴリ別に分類されたリンクがあるんですが、「頭のおかしいフォント」「気が狂ってフォント」などあります…おおお…(ﾟＡﾟ;)ｺﾞｸﾘ。「ハリウッドセレブの素顔フォント」とか…何なんだろう…。
そんなカテゴリ分類からも分かるように、結構個性的なフォントが多いです。

今回は「ハリウッドセレブの素顔フォント」から「Barbie」をチョイス。

もういっこフォントダウンロードしよかな。

Fonts2u.com free fonts
次はこちらから。こちらも無料、有料のフォントがありますので、ダウンロードの際はライセンスなど注意して下さい。
上部にフォントがカテゴリ別リンクがありますが「Fancy」の中に個性的なフォントがいっぱいありそうなカンジ。

で、ベーシックな形っぽいフォントを見つけましたのでこれをダウンロード。
カテゴリー「fancy」の中の「Military」から見つけました。
PUNCHLINEという名前。ラグビーとかこんなフォント使われてません？ラガーシャツに合いそう。

こんな感じでいいやろ。割とあるんだな、個性的フォントって。

ちなみに、文字は太い方がスポーツロゴには向いていて、それらしくなります。服などに加工する場合は、細かったり小さい文字だと上手く加工できないことがあったり、視認性が悪くなってしまいます。なので、プロスポーツチームのロゴも太くてどっしりしたものが多いですね。あと、試合に出る時など、ロゴが分かりづらいと何かと不便なようです。
ちなみにどのスポーツも、ユニフォームにロゴや名前を入れるのであれば、その大きさの目安が決まってます。

形を作る

次は形を作ります。これが重要なところ。
大してデザイン的なフォントを選んでなくても、形でかっこ良く見せることができるんですね。
あんま難しいことはしないんですが、Illustratorの機能を使っていきます。

まずはタイポ、そしてストレート型

タイポタイポ〜☆Illustratorで文字を打ちます。
さっきダウンロードしたBarbieとPUNCHLINEを使って打ちます。
必要に応じてカーニング（文字と文字の間の隙間を調整する）もします。

今「進撃の巨人」のリヴァイ兵長にハマってるので「チームリヴァイ」と打ちました。
痛いよ私。ヲタクですみませんすみません(´；ω；｀)

あんまり変わってませんが、カーニング（文字間を調整したい部分にカーソルを合わせて《alt+→》か《alt+←》を押す）をしました。Tとeの間を空けたり、PUNCHLINEの方は、ちょっと文字間に余裕を持たせました。
これだけで、東京FCや横浜FCで使われている「ストレート型」という形になります。
デザイン性の高いフォントなら、普通に文字を並べただけで、十分にロゴになりますね。

円状に並べるとアーチ型に

イラレ使いさんだったらおなじみ、円形パスを描いて、その上に文字を並べるだけで、阪神タイガースや読売ジャイアンツに使われている「アーチ型」になります。

丸描いて、文字ツール内の「パス上文字ツール」で文字を打つだけの簡単なお仕事。
ポイントは、下部、もしくはフォントがブロック体なら上部の角でもいいのですが、それを水平に合わせること。これだけ。バランスみて考えたらいいかもー。

斜体フォントはアーチにあまり向いてないかもしれぬ…。
アーチ型はこんな感じで、っていうか、基本なんですけど、作っていきます。
野球ユニフォームの、背面にある選手名はどは、ほぼこのアーチ型で入っていますね。ちなみにサッカーはストレート型。
ストレート型とアーチ型は、シンプルながらよく使われている形でもあります。

ストレート型に変形をかける

ここからが特殊？そうでもないけど、変形！って感じの変形シリーズです。
ストレート型に置いた文字に変形をかけます。色んな種類の変形方法があります。
変形をかける時、文字にアウトラインをかけて、パスにしてしまってから変形してもいいですし、後でやり直ししたい人は、文字データのまんまかけてもいいと思います、が、個人的には、アウトラインをかけてパス化の後、変形したほうが綺麗にできるような気がします。
そこまでこだわらないし、やり直しが心配な方は、文字のままかけても良いと思います。
今回は、アウトラインかけちゃいます。

文字を選択し、Illustrator上部のメニュー「書式」内の「アウトラインを作成」を選択します。
これでアウトライン化はOK。

そして着色。変形していきます。

まずはメジャーなUSAアーチ型

先ほど紹介した、円形に文字を並べるのとは違ったアーチ型です。
日本ハムファイターズやシアトル・マリナーズのロゴのような、迫力のあるアーチ型。虹みたいな？感じ？
上部メニューバーの「効果→ワープ→アーチ」を選択。

水平にカーブを20％かけてみました。
なんかちょっと迫力に欠けるな…。

左は、ファイターズみたいな飾りをつけてみました。簡単ですが。
右は、文字を縦長にしてからアーチをかけてみました。
右はこっちで十分なような気がしますが、それでも左がしっくり来ない、たにゃん31歳の秋。
まぁ後で直すこととします。

またもやメジャーなメガホン型

中日ドラゴンズや、コンサドーレ札幌みたいな、尻すぼみで斜めになった形。

上部メニューの「効果→ワープ→でこぼこ」で、変形を水平方向、−30％かけました。

これです、これ。
んで、このスタイルで似合うのが「ヒゲ」です。

下にシュパッと線を入れてみました。これがヒゲ。なんでヒゲなんだろう…。
ヒゲはパスで描きますよ。上のような形のヒゲがメジャーな気がします。
ヒゲのついたチームロゴは多いので（野球に多そう）、そういうロゴを参考にしてみると良いかもです。
左は、ヒゲに合わせてTの字を大きくしています。
ヒゲをつけてから「でこぼこ」をかけてもいいですし、でこぼこかけてからヒゲつけても良いです。
これも微調整は後にして、次にいきます。
筆記体風のフォントが、メガホン型でヒゲ付きに向いています。

おめでとう楽天！なブリッジ型

この記事の下書きをしている日は、楽天がリーグ優勝した次の日だったりします。おめでとう楽天！書いてて横目でセールが気になるよ！
というわけで、楽天のロゴに使われているブリッジ型のご紹介。

下の真ん中がへっこんだ形。橋っぽい。
上と同じ「効果→ワープ→下弦」で、水平方向に-10〜-20%適用しました。
これは、高さの揃ったフォントの方が綺麗に仕上がります。
ので、文字列は大文字のみとか、小文字のみとかにした方がいいかも。

うん、上が揃った方が綺麗。ブリッジ！って感じもします。
あとはやっぱり大きい方がいいですね。縦に伸ばしました。高さのある方がどっしりする。
斜体や筆記体よりは、左のようなブロック体に近い形のほうが更にらしさがでるような感じがします。

上下にちょこんと文字を乗せてもカッコイイ。というか収まりがよい。
楽天のロゴも上に文字列が乗ってます。
割と手軽にかっこよく出来るのがブリッジ型。

お手軽かっこよすー！なスコープ型

これもお手軽に迫力が出てかっこ良くなっちゃう。
アルビレックス新潟に使われているスコープ型。

上下とも真ん中がへっこみます。へっこんだ。
「効果→ワープ→でこぼこ」でカーブを水平に-5~-15%変形しました。
フォントはちょっと太い方がいいかも？？真ん中の文字がちっちゃくなっちゃうし…。

左をちょっと太くしました。こっちの方がスポーツ！って感じがするような。
気持ちサッカー、バレー、バスケ向きの形なような。野球ではあまり見ないかも。

個性的かもしれない、ベース型

恐らく、野球のベースをモチーフにしてるんじゃないだろうかというベース型。
しかし野球でめっちゃ使われているということもなく…どこで使われてるんだろう…？
なんか、ハリウッド映画のロゴとかにありそうな気がする…。

これも「効果→ワープ→でこぼこ」内の下部のメニュー、変形を垂直方向に20％かけました。
下に向かって、ぐいーんと広がっていくタイプ。ちょっと奥行きが出たようなデザインです。
影とかつけるとカッコイイかもしれない。

図形をコピーして、背面に置いて、色を変えて、縮小してずらしたりしてみました。
こっちの方が迫力あるかも。Windowsのワードに入ってる「ワードアート」みたいな感じが否めませんが…。まぁ後で装飾しますからー！

変形はここまでです。次は装飾☆

装飾をする

形作りが終わったら、装飾していきます。スポーツ系のロゴって、そんな華美な装飾はされてないです。
多いのは、ロゴ周りにフチ（線）をつけて囲ったり、影をつけたり…ですかね。
変形時にはイマイチかも…？と思ってた形も、これによっちゃぁかっこ良くなるかもしれないゼ…？

ロゴを選んで「オブジェクト→パス→パスのアウトライン」で任意の数字を入れて、フチをつけました。
フチをつけるだけでだいぶ変わりますね。ぐっとスポーツっぽくなった気がします。
ただ、フチをつけると後でカーニング（文字詰め）し直さないといけないことがあります。。。文字間の見え方がちょっと変わるんですよね…。
それを考えると、文字をアウトライン化する前に変形かけて、アピアランスパネルの「線の追加」でフチの線を追加した方がいいかも…。