web関係

ブログのロゴ制作!頭の中からロゴが生まれた過程をまとめた

おはこんばんにちは。
fumika(@nnf_57)です。

今回はブログロゴを制作したので、その過程をまとめてみました(*’ω’*)

アイディア出しから形になるまで。
このブログのロゴは私の頭の中からこうやって生まれました!

fumika
fumika
大体ロゴはこんな感じで作っているから、参考にしてみてね!
penta
penta
果たしてfumikaの作り方が参考になるのか…

イメージを言語化する

今回はこのブログのロゴを制作するので、このブログについての言葉を書き出します
写真は一部なのですが、3枚ほど書き出しました。

・なぜこのブログを作ったのか
・どんなことを発信したいのか
・連想する言葉など

私はデザインのことをメインに、デザイナーとしてのリアルな生活や好きなこと(ファッションなど)を発信していきたかったので、そのあたりからイメージする言葉を書き出しています。
その中に、マインド的なもの形にしやすいものがあるとその後形にしやすいので、この部分は多ければ多いほどいいと思います!

そこからキーワードとなる言葉を選び、軸としてデザインしていきます。
私はスキルアップ・階段を軸となるキーワードとして選びました!

言語化することで、頭の中を整理します。
何を伝えたいのかを明確にすることで、より伝わるデザインができる!

ロゴのラフ案を作る

fumika
fumika
最初に言っておく!絵心ないからそこは突っ込まないで!!!
penta
penta
棒人間…

キーワードから、形を連想してロゴのラフをひたすら描きます
実は今回、「階段」というイメージは前から持っていて、ロゴもそれをイメージしたものにしようとしていたのでこの部分はわりとあっさりできました。

fumika
fumika
いつもはここでめっちゃ時間かかる…

形にする点で迷っていたのは、文字の位置
上に文字を置くことで上を目指すということを表せるし、その方が意思表示としてはいいのかなと思ってました。

ただ、ラフを書いているうちに「レベルアップの過程を発信していくんだから、登っていくことを表現した方がブログのコンセプトにも合っているのでは?」とふと思い、上に文字を置くことをやめました。
Moreという文字はバラバラに置くと読みづらかったので、design skill upを段々に置くことに。

ほぼ、決定くらいまで形を整えます。
少なくとも文字の位置、大きさのバランスはある程度決めて置くと次の工程に移った時が楽!

フォントを選ぶ

形が決まればイラストレーターへ移行!
ここからフォント選びに入ります。

とにかくいいと思ったものをどんどん並べます
いつも10個くらい選んでそこから選定。

今回はすっきりした印象を持ちつつ、デザイン性のあるフォントを使いたかったのでこちらの3つをベースに組み合わせていきます。

fumika
fumika
フォントは1種類の時もあれば今回みたいに種類を組み合わせることもあります。
penta
penta
1種類の時はフォント自体をアレンジすることもあるよ!

oやeの文字は真ん中のアレンジされているフォントが良さげだけど、全部をそれで統一するとすっきり感がなくなる。
そのあたりを考慮しつつ、どの文字をどのフォントにするかをいろいろ組み合わせて選定していきます。

こちらも最初に言語化したイメージに合うフォントを並べて比較すると良い。
ざっくりと明朝体かゴシック体かを決めると決まりやすい!

全体の形を調整

ラフ案をイラストレーター上で形に落としていきます

この時、私はアートボード外で作業するんですけど、ガイドラインだらけになるのでよくごっちゃになります。
これはなんとかしたいんですけど、癖でどんどんガイドライン増やしちゃう…。

ペンツールでラインを書いて長さ調節したり、文字間を調節したり
形に落とす時に文字はアウトライン化させることがほとんどです。
あとはひたすらガイドラインと矢印キーとオブジェクトの整列で調整

今回は階段イメージなので曲線は使いませんが、手書きっぽい線を描きたい時はブラシツールを使ってマウスで描きます。
多分ペンタブ的なのを使った方がいいんだろうけど持っていないので仕方ない。
わりとマウスで事足りてるので今のところそれで頑張ってます。

バランスは感覚ではなく、しっかりと数値でバランスを取る。
形を調整したあとは拡大縮小しても線の太さなどに影響しないよう全てアウトライン化と分割・拡張しておいた方がいい!

完成

完成がこちら!!

イメージしていたすっきり・デザイン・階段を表現したロゴです。
わりとお気に入り。

ロゴは横長ver縦長verがあるとブログブログデザインのいろんなところで使えます(*´꒳`*)
ヘッダーには横長ver、サイトアイコンには縦長verのような感じで使い分けています。

fumika
fumika
いや、いい感じにできたのでは!!?
penta
penta
自画自賛がすごい

まとめ

いつも後回しにするロゴ制作を先にやってみました。
ここが決まるとアイキャッチやヘッダーのイメージもどんどん出てくる!

フォントもロゴに合わせたものを使うとブログ全体で統一感が出るし、何より、自分のロゴがあるって嬉しい…(*’ω’*)

私がロゴを制作する上で、特にポイントとしていることをまとめると…

・とにかく言語化
イメージをしっかり言葉にすることで頭の整理をして、自分がどんなモノを作りたいのか、何を伝えたいのかを明確にする。

・感覚ではなく数値
感覚で配置しても、最後はきっちりと数値でバランスを取る。

これは特に制作過程で重要視していて、感覚でやりがちな私はしっかりと紙に書き出したり、数値を意識することでよりきれい・見やすい・バランスのとれたデザインに仕上がります。
他のデザインにも言えることだけど、ここは今後もしっかりやっていきたい部分です。

以上、ブログロゴの制作過程でした!
最後まで読んでいただき、ありがとうございました(*’ω’*)

fumika
fumika
実はロゴ制作苦手なの…!スキルアップを目指すこのブログのテーマとしてはぴったりの記事だと思う!
penta
penta
今回のことを踏まえて、どんどんスキルアップしようね!

fumika.