2015年5月4日
Mac & PC

エンジニアでもできる洒落たロゴを短時間で作成するコツ4つ

少し前にポップアップ辞書の Chrome 拡張機能をリリースした際に、半日時間をとってロゴ作成の練習を行いまして、ちょっと綺麗なロゴを作れるようになったので、その時に掴めたロゴの作り方のコツを4つまとめておきます。

自分の場合、WEB制作・開発の中でもデザインが一番苦手でして、ロゴ制作もそれほど得意ではありません。エンジニア・プログラマーの方だと、デザインが苦手な方も多いですよね？

ロゴ・ジェネレーター的なウェブサービスも沢山ありますが、正直言って満足いく出来栄えのものが簡単に作れるかというと微妙です。日本語に対応していなかったり、ワンポイントのアイコンがいまいちだったり。

ちょっとしたロゴ作成のコツを意識するだけで、出来栄えがはるかに良くなるのに加え、作業時間を短縮できることも分かりましたので、ぜひご参考ください！デザイナーではない方でも、そこそこ綺麗でオシャレなロゴを、時間をかけずに作成できるようになるのがこのエントリーの目標です。

私は Mac でのロゴ作成に、Seashore という画像編集アプリケーションを使っています。Seashore は Mac OS 用の GIMP ベースのソフトウェアなので、GIMP に馴染みがある方には使いやすいかと思う。このエントリーでは、説明に Seashore を使っています。

Seashore
ASCII.jp：これは使える、Cocoa版GIMP「SeaShore」 (1/2)｜Apple Geeks
超いいかげん！Seashore（0.1.9）のつかいかたメモ

基本的な使い方については、上記リンク先などをご参考お願いします。レイヤーなど説明に使っている機能が使えれば、利用する画像編集ソフトは Seashore でなくても構いません。

— 環境 —
Mac OS X Yosemite
Seashore 0.5.1

ちなみに練習用で、コツを掴む前に適当に作ったロゴバナーがこれ。

er_before

ダサくていまいちですね>< エントリー末尾にコツを掴んだ後に作ったロゴを掲載しています。では本題のロゴ作成のコツ4つへ。

1. 配色は既存のセンス良い組み合わせを参考にする

まず、デザインでぶち当たる第一の壁である配色です。センスが悪いと、合わない色を組み合わせたりして、気持ち悪いカラーコーディネートになってしまいます。

色のセンスに自信が無ければ（私です）、まず自力で配色の試行錯誤をするのをやめちゃいましょう。配色の見本サービスを利用することで、センスの良い配色を短時間で決めることができます。

私が最も気に入っていつも利用している配色見本のウェブサービスが Adobe Color CC です。いろんなオシャレ配色パターンを Explore のページから確認できます。
Explore | All Themes – Adobe Color CC

以下は、Ayutyah というオレンジ/黄色/赤/茶色系の配色パターンの例です。落ち着いた温かみのある配色で、自力だけではこんなに綺麗に色の組み合わせはできません。
Ayutyah color theme by daniel.j.senior – Adobe Color CC

2. フォント選びにこだわる

次にロゴで使うフォントについてです。最初はなんでも袋文字（白抜き文字）にすれば、文字が目立って良いと安易に考えがちだったのですけど、これはそうとも限らないということが分かりました。

冒頭のいまいちなロゴ・バナーでも袋文字を使用していますが、袋文字はデザインセンスのない人が使うには、なかなか難易度が高いです。袋文字は、文字の主張が強すぎる感じになってしまうのですよね。なので、背景や他のワンポイントのアイコン等との組み合わせの中で、文字の主張を適度に抑えつつ使用すべきなのだろうと思う。

ここまで考えながらデザインするとなると、時間がとてもかかってしまうし、そもそも本職のデザイナーさんに任せたほうが良いかと思います。

ということで、ロゴ作成やロゴのデザインを片手間でやる場合は、袋文字を使うよりもイメージに合うフォント選びに時間を割いたほうが良いと分かりました。

そして、選んだフォントを袋文字にしないで、そのまま使うようにする。デザインに合わせて、bold（太字）/ semi bold（少し太字）などは好みで選択。また、文字色を白系/黒系のどちらにするかは、背景色とのバランスで決めるようにします。