美しくて使いやすい、Webサイトのロゴを作る5つの方法

7 コメント
美しくて使いやすい、Webサイトのロゴを作る5つの方法

Webサイトのロゴは美しくて使いやすいものを作るべきです。

パイナポー
ジャガアポー
シナモン

良いロゴとは?

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

ロゴに使用する配色(ベースとなる色)を少なくし、よりシンプルなロゴにしましょう。特に“グラデーション”の使用には注意が必要です。グラデーションは使い方によっては美しく見せる効果がありますが、使い方を誤るととても汚いデザインになってしまいます。とくに色の変化が大きいグラデーションは避けるべきです。

beautiful-how-to-logo-5way-color
ジャガアポー

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

beautiful-how-to-logo-5way-color-msn
ジャガアポー

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

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

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

beautiful-how-to-logo-5way-silhouette
ジャガアポー

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

beautiful-how-to-logo-5way-silhouette-light
ジャガアポー
beautiful-how-to-logo-5way-silhouette-green
ジャガアポー

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

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

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

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

beautiful-how-to-logo-5way-square-yahoo
ジャガアポー

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

beautiful-how-to-logo-5way-square-msn
ジャガアポー
シナモン

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

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

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

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

beautiful-how-to-logo-5way-small-apple

Appleのロゴは 16px まで圧縮してもつぶれないのが良い例です。

ジャガアポー
beautiful-how-to-logo-5way-small-moxbit
ジャガアポー

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

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

例えば、当サイトは国内でさほど多くない“キャラクター会話型ブログ”です。当サイトのキャラクターの吹き出しは、角丸四角形に90度回転させた三角形を組み合わせた形となっています。この吹き出しの形をロゴに使い、“吹き出しに関係しているサイト”であることを閲覧者に伝わるようにしました。

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

beautiful-how-to-logo-5way-means-moxbit
ジャガアポー

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

beautiful-how-to-logo-5way-means-look
ジャガアポー

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

beautiful-how-to-logo-5way-means-wine
ジャガアポー

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

あとがき
パイナポー
ジャガアポー
シナモン
ジャガアポー
パイナポー
ジャガアポー
シナモン
ジャガアポー
記事は執筆時の情報に基づいており、現在では異なる場合があります。
この記事をシェアする
コメント
コメントを投稿した際には、コメントガイドラインに同意したものとみなされます。
Jimmy

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

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

ジャガアポー

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

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

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

kury

ここのサイトのロゴいいですよね~

webページのデザインも素敵です。気にいってます。

ジャガアポー

 どもども、ありがとうございます。
いやー見た目は良くても中身がつまってなければ意味がありませんからねぇ…(汗)

tasikani

色が多いのも見にくいってありますね。とても参考になりました。
しかし、ゲストのアイコン シャドーピープル的…ですな

maru

はじめまして!デザイナー志望、独学で勉強しているものです。
会社のロゴを作る際のいい知識になりました。
確かに、汎用性は重要になりますね。

そのロゴがどのように使われていくかという点も
大切にしたいと思いました。

じゅい

知り合いのウェブのロゴをちょうど考えてたところあなた方のサイトを見つけました。

勉強になりました。

コメントを投稿した際には、コメントガイドラインに同意したものとみなされます。
コメントを投稿した際には、コメントガイドラインに同意したものとみなされます。