WindowsやMac、iPhoneなどのガジェットからライフハックまで、幅広いジャンルを扱っているニュースサイトです。

現在整備中です。記事内のリンクが正しく設定されていない場合がありますがご了承ください。

beautiful-how-to-logo-5way

万能なロゴを作ろう!

 美しくて使いやすいWebサイトのロゴを作るための5つの方法をまとめました。

 Webの世界だけでなく“ロゴ”はとても重要なものですよね。
ぜひとも格好良いロゴを作ってみたいものです!

 そうですね。
単に「格好良い」だけでなく、「使いやすい」ロゴにするためにはどのようにすれば良いでしょうか。
その点も考えながら作る必要がありそうです。

 でもそのサイトにあった、意味がこもったロゴにしなければいけませんよねぇ…。
うわー、難しい~っ!

1. ロゴに使う色数は少なくする

 ロゴは、シンプルでなければいけません

 ロゴに使用する配色(ベースとなる色)を少なくし、よりシンプルなロゴにしましょう。

 特に“グラデーション”の使用には注意が必要です。

 グラデーションは使い方によっては美しく見せる効果がありますが、使い方を誤るととても汚いデザインになってしまいます。

 特に色の変化が大きいグラデーションは避けるべきです。

色の変化が大きいグラデーション例。

 僕の個人的な意見としては、ロゴにグラデーションを使わないほうが良いと思います。

 グラデーションは絶対に使ってはいけないものではありません。

 使うときはできる限り変化が小さいグラデーションを使いつつ、全体的な配色を考えて使うようにしましょう。

『MSN』のロゴ。グラデーションが綺麗で、シンプルで美しい。

2. シルエットでも分かる形にする

 ロゴは色関係無く、形だけで分かるようにしなければいけません

 少なくともモノクロの状態で何のロゴか分かるようにすべきです。

元のロゴ(左)とシルエット化したロゴ(右)。シルエットは何のロゴか分からない。

 ロゴがシルエットでも何のロゴが分かるようなものであれば、以下のような使い方ができます。

背景を暗くし、ロゴを光らせる表現。

いわゆる“縁取り文字”の効果も使用できる。

3. 正方形でも表せる形にする

 ロゴは、正方形でも表せる形のロゴにすべきです。

 Webデザインにおいてのロゴは、ファビコンからSNSのプロフィール画像まで多く使われます。
特にそれらの画像は正方形と、形が決まっているため正方形で表せるロゴが良いでしょう。

 ただ単に正方形で表せれば良いというわけではありません。
正方形の形であっても何のロゴが分かるようにすべきです。

『Yahoo!』のロゴ。特徴的なフォントと“!”を活かしている。

 ロゴを正方形化する場合、元のロゴの一部だけ使っているものもあります。

『MSN』のロゴの正方形化は、蝶の部分だけ使っている。

 ロゴの中でも特に特徴的な部分を使うと、正方形化しても分かりやすいですよね!

4. 縮小しても潰れにくいロゴにする

 ロゴは、縮小してもできる限り潰れないロゴにすべきです。

 先ほどの項目と関連して、Webデザインにおいてのロゴはファビコンなどの非常に小さい画像サイズで使われることがあります。
正方形化したロゴを縮小した際に、いかに潰れにくいかが重要です。

 潰れないロゴにするためには、今まであげてきた3つのことを全て守っていなければ、実現することは難しいでしょう。

『Apple』のロゴ。16ピクセル方形にしても潰れない。

 多少潰れてしまっても、ドット絵エディターなどのソフトウェアを使って手直しすれば問題ありません。
 ファビコンを作る際は、ただ単に「ロゴを縮小して完成!」というわけではないので…(汗)

当サイトのロゴ。若干潰れているが、この程度なら問題無い。

5. 意味のあるロゴにする

 ロゴは、そのWebサイトを図形化したものです。
いくら美しいロゴを作っても、そのロゴとそのWebサイトが関連していなければ意味がありません。

 例えば、当サイトは国内でさほど多くない「キャラクター会話型ブログ」です。
当サイトのキャラクターの吹き出しは、角丸四角形に90度回転させた三角形を組み合わせた形となっています。

 この吹き出しの形をロゴに使い、「吹き出しに関係しているサイト」であることを閲覧者に伝わるようにしました。

 また当サイトのデザインは青色と黒色をベースとしているため、ロゴも青色と黒色の2色しか使っていません。

当サイトの吹き出し(上)と当サイトのロゴ(下)。

 海外のロゴはとてもインスピレーションを刺激させられるロゴが多く、いつ見ても素晴らしいと思います。

テキストだけを使って文字と文字の意味の両方を表したロゴ。

 ロゴにイラストを使った素晴らしいロゴもあります。

ワインの文字でワインの一部を表したロゴ。

 Webサイト自体のデザインだけでなく、ロゴのデザインだけで「あっ」と言わせられるようにできれば、最高ですね。

あとがき

 いやー、それにしても海外のロゴは本当に凄いですね!

 そうですねー。
まだまだ自分が未熟だということをつくづく思い知らされますよっ!

 やっぱりロゴに限らず、「デザイン」って奥が深いんですね!
うーん、改めてデザインの奥深さに感動しましたよ!

 たった1つの図形でもたくさんの意味が込められていると、とても素晴らしいですよね。
ただ「そのロゴを見ただけで意味が伝わる」ってのが一番重要な気がします。

 ほうほう…といいますと?

 デザイナーの方はよく聞く言葉かもしれませんが、「説明無しで、そのデザインの意味が伝わるデザインこそが至高」と言われています。
 ま、ロゴに関して言えば「このロゴの意味は~で…」というような説明無しで、見ただけでロゴの意味が伝わるロゴが良いということです。

 なかなか難しいものですね…。
勉強だけじゃなく、経験や発想も大事なんですねぇ~…。

 逆に素晴らしいロゴをひらめいたときの達成感、ニヤニヤしちゃいますね(笑)
 たかがデザイン、されどデザイン。
デザインに限界はないので、もっともっと勉強していきたいですね!

 それでは今回はこの辺で!

この記事を見た人はこんな記事も見ています

 この記事を見た人は他の記事を見ていないようです…。

コメント

Jimmy

2012年03月14日 17:16

気紛れな雑談掲示板から来ました。とってもキレイで気に入りました!

色は少なくですか~ なるほどです。

ジャガアポー

2012年03月16日 2:21

 どうも、コメントありがとうございます。

 おぉ、これはこれは懐かしき名前を目にしました・・・(笑)
また機会があればあちらにもお邪魔させていただこうかなと思います。

そうですね〜、あまりシャドウ(影)やグラデーションをかけると使いにくくなってしまうので…。
色数は考えものですねぇ。

コメントをする