ベーコンさんの世界ブログ

デザイナー&お菓子作ったり企画したりしています。北海道でふざけたブログ書いてます。

【ロゴの作り方実践編】デザイン制作で誰もがつまづきやすい部分を徹底解説!

スポンサーリンク

f:id:rororororo:20180919221852p:plain
デザイナーのベーコンです

前回のロゴ制作記事の続編です
本日は、ロゴ制作の実践編!!

前回の記事で説明しきれなかった部分を、実践で説明していきます

この記事を読むと、もっともっと「ロゴ制作のテクニック」が身につくはずです
デザイン制作に困った時に、思い出してもらえると役立つはずです!

ロゴ制作記事をみて作ってくれた人がいます

バン活!編集長の星川さんが、前回の記事を見て実践してくれました
それがこちら

ふむふむ…
すばらしいです!しっかり読んで実践してもらえたのがわかります、しかも速い!

しかし、これを見てこう思ったのも事実です…

「あっ、やっぱ説明しきれなかった部分があったなあ…ここを直せばもっともっといいデザインになるのに!」

というわけで、今回は星川さんの作ったロゴをもっといいロゴに変えていく、ロゴ制作の実践編です!

なるべくハードルは低く、クオリティは高くなるように、わかりやすく説明していきます
どう変わるのか、お楽しみに!

▼前回のロゴ制作記事はこちら
www.baconjapan.com
ロゴ制作の基礎だけじゃなく、文字タイトルデザインの基礎を学べる内容になっています

ロゴの作り方 実践編

まず星川さんの作ったロゴはこちら
f:id:rororororo:20180919205234p:plain

しっかりと記事を読んで制作してもらえたのがわかるロゴです(うれしい)
こちらを、まず白黒で再現してみました

f:id:rororororo:20180919205311p:plain

再現してみると、星川さんの苦労を感じます
このフォントで文字を打っただけだと下の図(左)のようになります
f:id:rororororo:20180919205457p:plain

さあ、ここから修正していきますよ!

ポイント① 左右を揃える

前回記事でも紹介しました、左右を揃える
やってみると疑問になると思うのが

「左右って言われてもどこで揃えるの?」ってことです
星川さんのロゴに、ガイドラインを入れてみます

f:id:rororororo:20180919205654p:plain
左端はしっかり縦のラインが揃っています
しかし右は少し揃っていませんね

これは「!」で揃えるべき?
という疑問がでてきたからだと思います
1行目も2行目も文字なら、しっかり合わせたと思うんですよね、ただ「ななめに傾いた「!」」に本当に合わせるべきか…悩んだと思います(予想)

正解はこちら

f:id:rororororo:20180919205833p:plain

斜めでも、右端はビックリマークに合わせましょう!
これが基本ですね、あとでアレンジするにしてもまずは左右をぴったり合わせてみましょう!

ガイドを外すとこちら

f:id:rororororo:20180919205948p:plain

先程の左右合わせた画像です(たての線(ガイド)を外しました)



ポイント② フォントの選定

続いて変更してくのはフォントです
実はあの記事で紹介したテクニックには

「作りやすいフォント」
「作るが難しいフォント」

があるんです
さあ、どんなフォントがロゴを作りやすいでしょうか…?

答えは
「四角い感じがするフォントの方が作りやすい」です


今回星川さんは、独特のフォントを使っています
ラノベPOPというフリーフォントです

ラノベポップは、カタカナに特徴があるフォントです
▼すべての文字がラノベポップフォント
f:id:rororororo:20180919210422p:plain

このフォントは「楽しい印象」は作りやすいですが、四角くは無いんですよね。
カタカナのはね部分に特徴がありすぎて、「ロゴっぽさ」を出すにはちょっと難しいです
(そういう意味で、ロゴが上手に作りづらいフォントではあります…)

なので、まず下の文章だけ、四角いフォントに変更してみましょう!
f:id:rororororo:20180919210610p:plain

このフォントはNoto sansです、フリーフォントなのに太さがたくさんあって最高!
▼前回の記事でフォントについても解説しています
www.baconjapan.com

比較も作りました
f:id:rororororo:20180919210745p:plain

どうでしょうか?
四角いフォント(noto sans)に変更したことにより、「少しロゴっぽさ、つまり「かたまり感」がでてきたのではないでしょうか?

ついでに下の文字のバランスも変更します

下の小さな文字のバランス感覚

f:id:rororororo:20180919210851p:plain

実は星川さんのデザインを見て、最初に気になったのがここでした
下の文字がもう少し小さい方が、バランスが良さそう…

これは感覚なので難しいですが、今回このように変更してみました

▼感覚を磨く方法は、こちらの記事で紹介しています
この記事ではデザイン本を4分類しているのですが、その中の「2.美しいデザイン例の本
」を読み続けると感覚やセンスが身につきます
www.baconjapan.com



▼比較画像
f:id:rororororo:20180919211046p:plain

文字を小さくして、でも左右幅を合わせるために「文字間」を広げています
文字を小さくしても文字間を広げると「横幅」を確保できる、このテクニックは使えるので困った時に試してください!

メインロゴのフォントも変更(かたまり感を出す!)

もう一つ、メインロゴのフォントも変更してクオリティを上げてみましょう
いきますよ!

どん
f:id:rororororo:20180919211300p:plain

どうでしょう?
ここのフォントも先程、下の小さい文字にも使ったフリーフォント Noto sansです

比較するとこんな感じ

f:id:rororororo:20180919211400p:plain

フォントを変えた右側の方がすっきりしましたね
ただし、「個性が減ったな」そう思いました?…大丈夫です、このあと個性も足していきます!

ポイント③ 情報の選定

つぎは文字情報をいじっていきます
つまり、原稿の内容を変更して、デザインを作りやすくする方法です

これも前回詳しく説明していなかったテクニックです

まず、文字情報をいじった完成図をご覧ください!
どん!

f:id:rororororo:20180919212222p:plain

どうでしょう?
シンプルになり、すっきりしました!
比較してみましょう!

f:id:rororororo:20180919212316p:plain

変更点は、小さい文字を取ったことです

これは、星川さんが「バンド活動」略して「バン活」を表したものだと思うんですよ
ただ、デザイン的に表現するのが難しいと感じたので、今回「ド」と「動」は取ってしまいました

「勝手にとって怒られない?」

た、、たぶん大丈夫です
大丈夫になるように「バンド活動」という言葉がわかるように、別のところに取った文字を補足する文字を追加してみます
それがこちら
f:id:rororororo:20180919212533p:plain

文字はこっちかな?
f:id:rororororo:20180919212536p:plain

どうでしょうか?
これで「バンド活動」の略が「バン活」ということもわかるようなデザインになりました

ちなみに、この吹き出しを追加するというテクニックもプロの間でよく使われます

「吹き出しの中に入れる文字」
「メインの文字」

をしっかり決めることが大切です

例えば、

プロ直伝のロゴ作り8つのコツ

この文字でデザイン作ってくださいと言われたらこうやるのが、デザイナーの仕事です
▼(例)前回のアイキャッチにも吹き出しが使われています
f:id:rororororo:20180918220651p:plain

「プロ直伝」を思い切って小さくして、デザインを作りやすくするのもデザイナーの仕事です

▼(例)「上のパクってOK」も効果としては吹き出しと同じ効果です、吹き出しの別の表現方法って感じですね
f:id:rororororo:20180914181602j:plain

文字だけのロゴが完成!

f:id:rororororo:20180919213113p:plain
最初と比較してみましょう!

大きい文字は大きい小さい文字は小さいとメリハリが付いてロゴらしくなりました(かたまり感がでた)
フォントの特徴はなくなったけど、プロっぽいデザインにはなっています

お待ちかね、これから「個性」を出していく方法を紹介します

ロゴマーク、アイコンを足してみる

前回記事でも出てきた、アイコンを足してロゴらしくするパターンも作ってみましょう!
f:id:rororororo:20180919213244p:plain

どうでしょう?いっきに「世界にひとつだけのロゴ」になってきました
ちなみに星川さんが作ってくれたのはこれ
f:id:rororororo:20180919213318j:plain

新しいロゴのほうが、隙間が埋まって「ロゴっぽく」なっているのがわかるかと思います


webサイトに使うために横長にするパターン

f:id:rororororo:20180919213556p:plain
星川さんの現在のサイトです
ロゴが使われていますが横長ですね
↓このロゴだと吹き出しがじゃまだなあ
f:id:rororororo:20180919213244p:plain

というわけで吹き出しの位置を移動したパターンも作ってみます
f:id:rororororo:20180919213659p:plain

これで横長のロゴになってwebサイトにも使いやすくなりました

装飾してパターン作り

最後は装飾です
前回の記事のように、一部に色を付けたり、アイコンの位置を変えたりしてパターンを作ってみましょう!
▼小さい文字にも色を付けて強調した
f:id:rororororo:20180919213815p:plain

▼もっとロゴっぽく
f:id:rororororo:20180919213857p:plain
星川さんもやっていた、「バ」の濁点をギターのピックに変更
f:id:rororororo:20180919213900p:plain

▼応用しまくって文字をななめにしてみたり…
f:id:rororororo:20180919213928p:plain

このバージョンも多少修正

f:id:rororororo:20180919213942j:plain
こちらの、ロックンロールのキャラクターのロゴもバランスを直してみると…

f:id:rororororo:20180919214017p:plain
こんな感じになりました
色パターンも
f:id:rororororo:20180919214212p:plain

まとめ

f:id:rororororo:20180920180137p:plain
以上「ロゴの作り方、実践編」でした!
前回お伝えできなかった細かい部分を説明しました

こういう解説記事や解説本って「実際やってみるとうまくいかない」ってことが多いと思います
もちろん、そういう時は、自分でなんとか試行錯誤して作っていくしか無いんですが、せっかくぼくの記事を読んでくれた人が一人でも多くいいデザインを作れればいいなと思いこの記事を書きました

ロゴは文字によっても、ターゲットによってもデザインが変わってきます
経験がないと、基礎だけでは対応できない場面がたくさんあると思います

今回の記事のように「実際に制作する様子」をデザイナーの思考とともに見ていくことで、デザインのコツがわかってくると思います
さらに「実践をして振り返る」をことでデザイン力が鍛えられます
この記事を読んで、デザインの技を身に着けたらぜひ実践をしてロゴを作ってみてください!

f:id:rororororo:20180920180150p:plain

▼デザイン力を上げる「実践をして振り返る方法」を書いています
www.baconjapan.com

▼デザインを制作する時の、頭の中を実況解説しています!
www.baconjapan.com

www.baconjapan.com