ブログやWebサイトを始める方に。オリジナルロゴの簡単な作り方

こんにちは。今回はロゴの作り方のお話。基本的なツールだけでシンプルに作る方法をご紹介します。この春からブログやWebサイトを立ち上げ、趣味やビジネスを広げていこうと考えている方に、ぜひチャレンジしていただきたいと思います。

デザイナーがロゴを作る時は、スケッチをするなどしてコンセプトとイメージをしっかり練ってから作業に取りかかることが多いのですが、今回はいきなり作ってみることにします。PhotoshopやIllustratorなどのグラフィックツールをお持ちなら、ぜひそれらを使っていただければと思いますが、こうした高価なツールがない方のために、Webブラウザ上で手軽にロゴがデザインできるサービスがあります。

ニューヨークのSquarespace社が1月に提供開始したロゴ作成サービス「Squarespace Logo」。
ブラウザ上の簡単操作でロゴの文字をデザインでき、7000以上のフリーアイコンから好きなものを追加できます。10ドルを支払うと、完成したロゴの高解像度データをダウンロードできる、という仕組みです。

画面中央の名刺上にある入力フォームに、社名やタイトルなどの文字を入力して、矢印をクリックします。

ロゴの編集画面が開きます。最初に入力した文字と、ランダムに選ばれたアイコンがレイアウトされています。

今回はまず、文字部分のデザインから始めましょう。あとからでも好きなアイコンを追加することができるので、ひとまずアイコンをクリックして選択し、deleteキーで削除。単純に黒色の文字を打った状態になります。これだけでも、何となくシンプルにロゴとして成立しそうですね。

ですが、文字に装飾を加えたり、文字の形に変化をつけることによって、ロゴを見た人に文字以上の情報やイメージを視覚的に伝えることができます。
ここで、ロゴを通じてどんな情報やイメージを人びとに伝えたいか考えてみましょう。

商品・サービスやコンテンツの特色？
企業・人としての信頼感？
楽しさ、明るさなどのイメージ？

…いろいろあると思います。
さまざまな手法でロゴのデザインをいじりながら、どんな表現ができるか見ていきましょう。

1. 書体を変える

ロゴに使用するフォントを変更すると、文字自体の雰囲気が変わります。このことを利用して、人びとに伝えたいイメージを選ぶことができます。

文字部分をクリックして選択すると、上部にツールボックスが表示され、フォントの種類を変更できます。試しに、Times New Romanに変更してみました。筆画の端々に装飾がついた、オーソドックスなタイプの欧文フォントです。もとは英国の新聞に使われた書体で、真面目さと同時に歴史も感じさせるような雰囲気が出せそうです。

こちらは、筆画の端に装飾のない、ゴシック系のフォントで、WindowsやMacに標準搭載されているArial。しっかりした感じや力強さ、整然さ、といったイメージが表現できそうですね。

他に、個性的なフォントをチョイスする手もあります。さまざまな種類がありますが、書体デザインのイメージが強く出るため、キャラの立った社名やサイト名にしたい時には、選んでみるのも良いでしょう。

2. 文字の形を変える

文字の形や太さなどを変えることでも、求めるイメージを表現できます。

ツールボックスで「Itaric」を選択すると、文字が斜体になります。
全体的に斜めにすると、スピード感や躍動感が感じられますね。フォントとの組み合わせを変えて、いろいろ試してみると良いでしょう。

ツールボックスで「bold」を選択すると、同じ書体を太字にすることができます。
ゴシック系のフォント・Helveticaを太くすると、かなり明瞭で、インパクトのある印象になりました。

これは、ニューヨークの地下鉄の案内表示に使われているフォントと同じで、都会的なイメージも表現できると思います。

また、文字と文字の間隔を変えることでも、印象が変わります。

サブテキストの文字と文字の間にスペースを入れてみました。字間をゆったりとさせることで、緊張感が和らぎ、落ち着きや貫禄といったものも表現できます。

3. 色を変える

ロゴがどんな色をしているかによって、人びとが受ける印象も変わります。色選びも重要な要素の１つです。

鮮やかな赤は情熱、刺激、革命、エネルギーといったイメージを想起させます。

同じ赤でも、鮮やかさを抑え、パステル調の淡い色合いにすると、印象が違います。
女性的でやわらかなイメージ、軽快な感じがします。

緑系は、自然、エコ、リラクゼーション、植物といったイメージでしょうか。

この例のように、サブテキストを別の色にしたり、色の濃さを変えて差をつける方法もあります。この例のように一方の色を薄くすると、もう一方のテキストが先に目に入ります。先に読ませたい方に視線を誘導することができるわけです。

4. マークを加える

先ほど一旦削除したシンボルマークを、ここで追加してみましょう。

左のメニューの虫めがねマークをクリックすると検索窓が出てくるので、探したいジャンルや属性などを英語で入力して検索します。
試しに、いろんなマークを選んで入れ替えてみましょう。

文字部分はまったく同じでも、マークを入れ替えるだけで、受け取るイメージがかなり変わりますね。

マークに触発されて書体を選ぶというのもアリだと思います。

このようなシンボルマークを使うと、業種やサービス内容、理念などがストレートに伝わるというメリットがあります。
但し、シンボルはイメージを固定化させる可能性もあるので注意が必要です。今後ビジネスやコンテンツの内容を幅広くしていく時に、最初に選んだシンボルが合わなくなるケースも出てくるでしょう。その時は、ロゴをリニューアルする契機ともいえます。

5. 要素を組み合わせてデザインする

フォント選び、形の加工、色、マークの４つの要素を組み合わせ、ロゴを作ってみました。

今回のサンプルでは、音楽スタジオのロゴという想定で、レコードプレイヤーのシンボルマークをチョイス。色はオレンジのワンポイントとしました。オレンジは明朗で華美といったイメージで、視認性も高い色です。
書体は、ちょっと個性的でクリエイティブなLimelightをチョイス。文字の形は、シンボルマークを単語ではさみ、マークをアルファベットのOに見立てたデザインになるようにしました。サブテキストは所在地を表すので、字間をゆったりとさせ、色を薄くして優先度を下げました。

クリエイティブで華やかだが、仕事はきっちりやります、といったイメージを狙ったデザインにしてみました。皆さんはどんな印象を受けるでしょうか。

作成したロゴが名刺やWebサイトでどのような見え方になるか、簡単にプレビューすることもできます。

ロゴのデザインが完成したら、左下の「SAVE LOGO」をクリック。360ｘ400ピクセルの小さなサイズでしたら、無料でダウンロードできます。高画質データは、クレジットカード決済で10USドルを支払うとダウンロードできます。ダウンロードデータはPNGの透過データなので、そのままブログやWEBサイトの背景に乗せて使うことができます。

今回は、Webサービスを使ってロゴを作ってみましたが、もちろんPhotoshopなどのグラフィックツールがあれば、それを使っても良いですし、文字部分に関してなら、Windowsに標準搭載のペイントツールでもそこそこのものができるはずです。ぜひチャレンジしてみて下さい。

また、ロゴデザインそのものはさらに奥の深いもので、ロゴだけの専門書もたくさん発売されています。興味がわいてきたら、本屋さんで手にとってみて下さい。