みずもん

多動力を肯定するブログ

発表!あのブランドも採用のおしゃれなおすすめフォントとカラーを使いこなそう

この記事を書いた人:
水元英登(みずもと ひでと)
f:id:mizumotohideto:20170228121143j:plain
オンラインサロン コーディネート

f:id:mizumotohideto:20170224193102j:plain

ロゴの本当の価値に気付いちゃいました?ありそうでなかったブランドカラーとおすすめフォントのまとめです。

ロゴは口ほどに物言うと言います。どんなに小さな会社だったとしても、世界の大企業を相手に対等にハッタリをかますことができるのもロゴの特徴です。

 

事業初期の投資でもっともコスパがいいのがロゴの制作と言っても過言ではないでしょう。まずはおしゃれでかっこいいフォントの基本をしっかり頭に入れちゃいましょう。

 

<もくじ>

 

おしゃれなフォント選びの基本

私たちが目にするほとんどの文字は明朝体かゴシック体です。あまり気にしたことはないですか?これは、読みやすさを重視して作られた書体であることが理由です。

 

可読性を重視した書体

明朝体の文字はどれも正方形に収まる形をしていて、縦横がそれぞれ垂直と平行であることが特徴です。

 

ヒラギノ明朝 ProW3

f:id:mizumotohideto:20170223190812j:plain

 

ゴシック体はサンセリフの書体で、原則として線の縦横の太さが均一であることが特徴です。

セリフ(Serif)とは書体の角につく飾りのことで「うろこ」とか「ひげ」と呼ばれることもあります。サン(Sans)とはフランス語で「〜がない」という意味です。サンセリフとは、角に飾りのセリフがないものという意味です。

 

ヒラギノ角ゴ ProW3

f:id:mizumotohideto:20170223190727j:plain

 

手書きを目的とした書体

楷書体は一画一画を筆を続けずに切り離して描くのが特徴です。

教科書体は小学校の教科書でなじみ深い楷書の活字体です。筆やペンで書いた手書きに近い形をしています。可読性を重視した明朝と手書きに近い教科書体とでは形が違う文字もあります。

 

游教科書体

f:id:mizumotohideto:20170223190905j:plain

 

見出しはゴシック 本文は明朝と覚えましょう

ゴシックは黒い面積が大きくインパクトがあるので見出しには向いています。一方で、長文になると too much で、明朝が向いています。

なので、見出しはゴシック。長文は明朝にするとインパクトと読みやすさを両立できます。

 

同じ構成のwebページで、文字によってどのように違って見えるのか試してみましょう。

 

全部ゴシック(サンセリフ)

手元で読むとちょっと圧を感じるくらい文字として認識しやすいのがゴシックの特徴です。プロジェクターなどで大勢に見てもらう場合には重宝します。

f:id:mizumotohideto:20170223202047j:plain

 

全部明朝(セリフ)

プロジェクターなどで大勢に見てもらう時には、文字が細く見えにくいためゴシックの方が向きます。また、明朝体は太字にすると可読性は落ちてしまうので注意が必要です。

f:id:mizumotohideto:20170223202142j:plain

 

見出しゴシック 本文明朝

これが一番バランスがいいですね。適材適所って感じです。

f:id:mizumotohideto:20170223202234j:plain

 

欧文フォントは大きく分けて2つ

私たちにとってなじみのある和文フォントでまずは理解を深めました。続いて欧文フォントを見ていきましょう。

 

世界のブランドのロゴでは、比較的文字数が多いものはセリフ、文字数が少ないものはサンセリフであることはすぐに気づくでしょう。

やっぱり、読みやすさは明朝。インパクトはゴシック。の原則そのままですね。

 

セリフ(Serif)

縦横線の太さの差やうろこがある書体です。明朝体と同じく可読性が高く、文字数の多いものに向いています。

具体例を下に挙げていきます。

 

DEAN & DELUCA

Copperplate Gothic

小さなヒゲと正方形に近いフォルムが特徴です。飲食店・メニューでよく見るフォントです。

f:id:mizumotohideto:20170223083300j:plain

GIORGIO ARMANI

Didot

女性的な印象のある綺麗なフォントで、ファッション系のデザインでよく見るフォントです。

f:id:mizumotohideto:20170223083330j:plain

 

サンセリフ(Sans-serif)

縦横線に太さの差がなく、うろこもない書体です。見出しやキャッチコピーに向いています。逆に、長文になると可読性が下がります。

具体例を下に挙げていきます。

 

Apple

Myriad

Appleが2002年から採用したフォントで、まだまだ歴史は浅いフォントです。

f:id:mizumotohideto:20170223083208j:plain

PHILIPS

Gill Sans

Rolls-Royceも採用しているフォントです。彫刻家が発明しました。

f:id:mizumotohideto:20170223083219j:plain

Panasonic

Helvetaica

汎用性が高く、様々な広告のデザインでよく見かけます。

f:id:mizumotohideto:20170223083236j:plain

FedEx

Futura

ラテン語で「未来」。可愛らしいフォルムで女性に人気です。

f:id:mizumotohideto:20170223083249j:plain

GODIVA

Optima

化粧品・美容関係のロゴ、ファッション雑誌でよく見かけます。

f:id:mizumotohideto:20170223083315j:plain

 

かっこいいフォントとカラーでイメージは作れる

ハイブランドのロゴは、ガチャガチャとした装飾はなしでフォントとカラーで個性をしっかり出しています。カラーさえも使っていなくても、見た瞬間にイメージが呼び起こされるからすごいことですね。

 

それでは、続けて代表的なカラーを見ていきましょう。

 

色の基本と心理的影響

色と感情が密接に関係しているというのは、なんとなく直感的に知っていることと思います。赤は食欲が増し、青は食欲が減退するのは私たちが日常的に感じる代表的な例です。

既存のコーポレートカラー、商品のイメージカラーを見ているだけでもこれまでの日常が2倍楽しくなります。

 

HTML, CSSでそのまま使える具体的なカラーの設定も並べておきます。コピペで使ってくださいね。

参考:とっても重宝するブランドイメージカラーのまとめ「BrandColors」

BrandColors - official brand color hex codes

 

黄 希望・知性・自己アピール

黄色と黒の組み合わせは、昆虫のハチや工事現場の警告表示など目に入りやすい色ですね。危険を感じる色ですけれども、こっちから手を出さなければ襲いかかってくるタイプの危険ではないので、取り扱い注意!というような毒にも薬にもなるイメージです。

 

黄のブランドカラーの例

IKEA: #ffcc00, #003399

LEGO: #f6ec35

National Geographic: #ffcc00

Snapchat: #fffc00

 

f:id:mizumotohideto:20170224075415p:plain

第一三共ヘルスケアより

 

橙 陽気・食欲・解放

子どもが太陽を描く時にオレンジ色を使うことにイメージのすべて集約されているように思います。あたたかくて、空にあってつかみようがない。エネルギーの根源であり、自由の象徴です。

 

橙のブランドカラーの例

Airbnb: #fd5c63

Amazon: #ff9900

FedEx: #660099, #ff6600

Google+: #dd4b39

HTML5: #e34f26

Mastercard: #cc0000, #ff9900

Microsoft Office: #ea3e23

 

f:id:mizumotohideto:20170224080103p:plain

auより

 

赤 エネルギー・自己主張・あたたかさ

赤は力強い色ですね。良くも悪くも自己主張がすごい!ユニクロのwebサイトを見ると聞こえてくる良い面も悪い面も「それが我々だ!」と強い意思を持って実施しているのだと伝わってきました。

 

赤のブランドカラーの例

Adobe: #ff0000

Coca-Cola: #ed1c16

eBay: #e53238

Firefox: #e66000

Mastercard: #cc0000, #ff9900

McDonald's: #bf0c0c

TED: #e62b1e

YouTube: #cd201f

 

f:id:mizumotohideto:20170224080514p:plain

ユニクロより

 

紫 バランス・高貴・癒し

大学のロゴなどによく見るのが紫です。我らが母校明治大学も紫のイメージです。食べ物からもっとも遠い色(ナスくらい?)でもあり、動物的な衝動からかけ離れた理性的なちょっとムカつく感じも含みつつ思慮深そうです。

 

紫のブランドカラーの例

FedEx: #660099, #ff6600

Heroku: #c9c3e6

Yahoo!: #410093

 

f:id:mizumotohideto:20170224080921p:plain

VAIOより

 

青 鎮静・集中力・信頼

青空に象徴されるように、スカッとして後ろめたさのない信頼のイメージです。それでいて地に足がついた安定感も感じるので銀行にはもってこいの色ですよね。また、清潔感も感じられる扱いやすい色だと直感的にわかります。

 

青のブランドカラーの例

Dell :#0085c3

Facebook: #3b5998

Flickr: #0063dc

GitHub: #4078c0

Google: #4285f4

HP: #0096d6

IBM: #006699

IKEA: #ffcc00, #003399

Indeed: #2164f4

LinkedIn: #0077b5

 

f:id:mizumotohideto:20170224081445p:plain

みずほ銀行より

 

緑 安らぎ・成長・マイペース

赤と対照的と言われるのが緑です。植物のように癒し効果が高い一方で、保守的で受け身、親みたいな存在ですね。ムカつくし、言ってることに反発したくなるけど、生命のみなもとであることは動かしようのない事実なんですよね。親孝行したい。 

 

緑のブランドカラーの例

Android: #a4c639

Evernote: #2dbe60

Feedly: #2bb24c

Heineken: #00a100

Hulu: #66aa33

Kickstarter: #2bde73

LINE: #00c300

 

f:id:mizumotohideto:20170224082135p:plain

JAバンクより

 

灰 バランス・落ち着き・未来的

灰とはシルバーも含みます。先進的というのはSoftBankにぴったりな色ですね。今まさに触っているMac bookもギラギラシルバーですし、安心感があります。なんだか足元がお留守になっていても、守るより攻めろって感じで永遠のイケイケベンチャー。

 

灰のブランドカラーの例

American Express: #4d4f53

Hyatt: #6d6e71

 

f:id:mizumotohideto:20170224082530p:plain

SoftBankより

 

早速、自分のロゴを作ってみよう

ロゴを作る時に、まずガチャガチャと絵や装飾をつけたくなるものです。でも、手の込んだロゴは逆に安っぽくなってしまう可能性もあります。

シンプルでシュッとした感じのロゴをまずは候補として挙げてみてはいかがでしょうか?

 

まだロゴがない人は、この機会に今すぐ着手です!

 

 

おわり