発表!あのブランドも採用のおしゃれなおすすめフォントとカラーを使いこなそう
水元英登(みずもと ひでと)
継続課金型コミュニティ設計・管理
ロゴの本当の価値に気付いちゃいました?ありそうでなかったブランドカラーとおすすめフォントのまとめです。
ロゴは口ほどに物言うと言います。どんなに小さな会社だったとしても、世界の大企業を相手に対等にハッタリをかますことができるのもロゴの特徴です。
事業初期の投資でもっともコスパがいいのがロゴの制作と言っても過言ではないでしょう。まずはおしゃれでかっこいいフォントの基本をしっかり頭に入れちゃいましょう。
<もくじ>
- おしゃれなフォント選びの基本
- 見出しはゴシック 本文は明朝と覚えましょう
- 欧文フォントは大きく分けて2つ
- セリフ(Serif)
- サンセリフ(Sans-serif)
- かっこいいフォントとカラーでイメージは作れる
- 色の基本と心理的影響
- 早速、自分のロゴを作ってみよう
おしゃれなフォント選びの基本
私たちが目にするほとんどの文字は明朝体かゴシック体です。あまり気にしたことはないですか?これは、読みやすさを重視して作られた書体であることが理由です。
可読性を重視した書体
明朝体の文字はどれも正方形に収まる形をしていて、縦横がそれぞれ垂直と平行であることが特徴です。
ヒラギノ明朝 ProW3
ゴシック体はサンセリフの書体で、原則として線の縦横の太さが均一であることが特徴です。
セリフ(Serif)とは書体の角につく飾りのことで「うろこ」とか「ひげ」と呼ばれることもあります。サン(Sans)とはフランス語で「〜がない」という意味です。サンセリフとは、角に飾りのセリフがないものという意味です。
ヒラギノ角ゴ ProW3
手書きを目的とした書体
楷書体は一画一画を筆を続けずに切り離して描くのが特徴です。
教科書体は小学校の教科書でなじみ深い楷書の活字体です。筆やペンで書いた手書きに近い形をしています。可読性を重視した明朝と手書きに近い教科書体とでは形が違う文字もあります。
游教科書体
見出しはゴシック 本文は明朝と覚えましょう
ゴシックは黒い面積が大きくインパクトがあるので見出しには向いています。一方で、長文になると too much で、明朝が向いています。
なので、見出しはゴシック。長文は明朝にするとインパクトと読みやすさを両立できます。
同じ構成のwebページで、文字によってどのように違って見えるのか試してみましょう。
全部ゴシック(サンセリフ)
手元で読むとちょっと圧を感じるくらい文字として認識しやすいのがゴシックの特徴です。プロジェクターなどで大勢に見てもらう場合には重宝します。
全部明朝(セリフ)
プロジェクターなどで大勢に見てもらう時には、文字が細く見えにくいためゴシックの方が向きます。また、明朝体は太字にすると可読性は落ちてしまうので注意が必要です。
見出しゴシック 本文明朝
これが一番バランスがいいですね。適材適所って感じです。
欧文フォントは大きく分けて2つ
私たちにとってなじみのある和文フォントでまずは理解を深めました。続いて欧文フォントを見ていきましょう。
世界のブランドのロゴでは、比較的文字数が多いものはセリフ、文字数が少ないものはサンセリフであることはすぐに気づくでしょう。
やっぱり、読みやすさは明朝。インパクトはゴシック。の原則そのままですね。
セリフ(Serif)
縦横線の太さの差やうろこがある書体です。明朝体と同じく可読性が高く、文字数の多いものに向いています。
具体例を下に挙げていきます。
DEAN & DELUCA
Copperplate Gothic
小さなヒゲと正方形に近いフォルムが特徴です。飲食店・メニューでよく見るフォントです。
GIORGIO ARMANI
Didot
女性的な印象のある綺麗なフォントで、ファッション系のデザインでよく見るフォントです。
サンセリフ(Sans-serif)
縦横線に太さの差がなく、うろこもない書体です。見出しやキャッチコピーに向いています。逆に、長文になると可読性が下がります。
具体例を下に挙げていきます。
Apple
Myriad
Appleが2002年から採用したフォントで、まだまだ歴史は浅いフォントです。
PHILIPS
Gill Sans
Rolls-Royceも採用しているフォントです。彫刻家が発明しました。
Panasonic
Helvetaica
汎用性が高く、様々な広告のデザインでよく見かけます。
FedEx
Futura
ラテン語で「未来」。可愛らしいフォルムで女性に人気です。
GODIVA
Optima
化粧品・美容関係のロゴ、ファッション雑誌でよく見かけます。
かっこいいフォントとカラーでイメージは作れる
ハイブランドのロゴは、ガチャガチャとした装飾はなしでフォントとカラーで個性をしっかり出しています。カラーさえも使っていなくても、見た瞬間にイメージが呼び起こされるからすごいことですね。
それでは、続けて代表的なカラーを見ていきましょう。
色の基本と心理的影響
色と感情が密接に関係しているというのは、なんとなく直感的に知っていることと思います。赤は食欲が増し、青は食欲が減退するのは私たちが日常的に感じる代表的な例です。
既存のコーポレートカラー、商品のイメージカラーを見ているだけでもこれまでの日常が2倍楽しくなります。
HTML, CSSでそのまま使える具体的なカラーの設定も並べておきます。コピペで使ってくださいね。
参考:とっても重宝するブランドイメージカラーのまとめ「BrandColors」
BrandColors - official brand color hex codes
黄 希望・知性・自己アピール
黄色と黒の組み合わせは、昆虫のハチや工事現場の警告表示など目に入りやすい色ですね。危険を感じる色ですけれども、こっちから手を出さなければ襲いかかってくるタイプの危険ではないので、取り扱い注意!というような毒にも薬にもなるイメージです。
黄のブランドカラーの例
IKEA: #ffcc00, #003399
LEGO: #f6ec35
National Geographic: #ffcc00
Snapchat: #fffc00
第一三共ヘルスケアより
橙 陽気・食欲・解放
子どもが太陽を描く時にオレンジ色を使うことにイメージのすべて集約されているように思います。あたたかくて、空にあってつかみようがない。エネルギーの根源であり、自由の象徴です。
橙のブランドカラーの例
Airbnb: #fd5c63
Amazon: #ff9900
FedEx: #660099, #ff6600
Google+: #dd4b39
HTML5: #e34f26
Mastercard: #cc0000, #ff9900
Microsoft Office: #ea3e23
auより
赤 エネルギー・自己主張・あたたかさ
赤は力強い色ですね。良くも悪くも自己主張がすごい!ユニクロのwebサイトを見ると聞こえてくる良い面も悪い面も「それが我々だ!」と強い意思を持って実施しているのだと伝わってきました。
赤のブランドカラーの例
Adobe: #ff0000
Coca-Cola: #ed1c16
eBay: #e53238
Firefox: #e66000
Mastercard: #cc0000, #ff9900
McDonald's: #bf0c0c
TED: #e62b1e
YouTube: #cd201f
ユニクロより
紫 バランス・高貴・癒し
大学のロゴなどによく見るのが紫です。我らが母校明治大学も紫のイメージです。食べ物からもっとも遠い色(ナスくらい?)でもあり、動物的な衝動からかけ離れた理性的なちょっとムカつく感じも含みつつ思慮深そうです。
紫のブランドカラーの例
FedEx: #660099, #ff6600
Heroku: #c9c3e6
Yahoo!: #410093
VAIOより
青 鎮静・集中力・信頼
青空に象徴されるように、スカッとして後ろめたさのない信頼のイメージです。それでいて地に足がついた安定感も感じるので銀行にはもってこいの色ですよね。また、清潔感も感じられる扱いやすい色だと直感的にわかります。
青のブランドカラーの例
Dell :#0085c3
Facebook: #3b5998
Flickr: #0063dc
GitHub: #4078c0
Google: #4285f4
HP: #0096d6
IBM: #006699
IKEA: #ffcc00, #003399
Indeed: #2164f4
LinkedIn: #0077b5
みずほ銀行より
緑 安らぎ・成長・マイペース
赤と対照的と言われるのが緑です。植物のように癒し効果が高い一方で、保守的で受け身、親みたいな存在ですね。ムカつくし、言ってることに反発したくなるけど、生命のみなもとであることは動かしようのない事実なんですよね。親孝行したい。
緑のブランドカラーの例
Android: #a4c639
Evernote: #2dbe60
Feedly: #2bb24c
Heineken: #00a100
Hulu: #66aa33
Kickstarter: #2bde73
LINE: #00c300
JAバンクより
灰 バランス・落ち着き・未来的
灰とはシルバーも含みます。先進的というのはSoftBankにぴったりな色ですね。今まさに触っているMac bookもギラギラシルバーですし、安心感があります。なんだか足元がお留守になっていても、守るより攻めろって感じで永遠のイケイケベンチャー。
灰のブランドカラーの例
American Express: #4d4f53
Hyatt: #6d6e71
SoftBankより
早速、自分のロゴを作ってみよう
ロゴを作る時に、まずガチャガチャと絵や装飾をつけたくなるものです。でも、手の込んだロゴは逆に安っぽくなってしまう可能性もあります。
シンプルでシュッとした感じのロゴをまずは候補として挙げてみてはいかがでしょうか?
まだロゴがない人は、この機会に今すぐ着手です!
おわり