デザインのド素人がタイトルロゴとサイトアイコンを作成する

気まぐれでサイトのタイトルロゴとサイトアイコンを変更した。専用のツールがないのでExcelのオートシェープとワードアートで作成している。4時間くらい試行錯誤してなんとかイメージに近いものを作成できたが思たより難しかった。法人や予算がある場合は無理せずデザインのプロにお任せするのがよさそうだ。

変更前とタイトルロゴとアイコン

1年以上前に作ったこのロゴとアイコンはほとんど時間をかけずに作った。画像元はExcelでスナップショットでPNGにしている。

タイトルロゴ

以前使っていたタイトルロゴがこちら。

使ったのはExcelと透明化ツールのみ。文字はExcelのワードアートを使用している。

サイトアイコン

サイトアイコンも同じようにExcelで作成した。

一応背景を透過にしているのでそれっぽくは見えるかな。

新しいロゴとアイコンを作る

前回同様にExcelを使ってロゴとアイコンを作成する。できればあまり時間をかけずに終わらせたい・・・。

ロゴとアイコンの方針

あまり攻めた感じのデザインは好きではない。かっちりしつつゆるふわな感じを目指す。

ロゴパターンを考える

最終的には「それっぽいかっこいいロゴ」にしたい。他サイトのロゴを参考にいくつかパターンを絞ってみた。

アイコンありパターン

やはりロゴにアイコンを入れた方が「それっぽく」なる。いくつかアイコンを入れたろごのパターンを考えてみた。

トップ画面にアイコン中心に入るパターンだとこれ。立幅を取るのでサイトのデザインがすこし難しくなるかもしれない。タイトル文字はもう少し小さい方がいいかも。

よくありがちなパターンで左にアイコンで右にタイトルと。王道パターンかもしれないが一歩間違うとかなりダサくなる可能性がある。

アイコンを大きくしたパターン。トレードマークのアイコンを中心にしたい場合はこれ。良いアイコン作れればこれもアリかな。

メッセージ入りパターン

サイトロゴにメッセージが入っているサイトが意外と多い。トップ画面でタイトルを見たときに「何のサイトなのか」すぐにわかるメリットがある。調べた限り以下の2パターンが多いようだった。

タイトル下にメッセージを配置。立幅を少し食うがバランスは良い。

最近見かけるおしゃれなパターンがこれ。タイトル右にメッセージ。立幅を取らないのでスッキリしたロゴに仕上がる。

最終案

サイトメッセージは必須と考え入れた。できればメッセージを右に配置したかったがバランスが悪かったので上にした。タイトルを見て何のサイトかわかるのはメリットが大きいと思う。メッセージなしでタイトルだけで何のサイトわかるのが理想。

ロゴの作り込み

ここから一気にロゴを作成していく。ロゴ作成のセオリーとかまったくわかっていないので行き当たりばったり。

その１：とりあえずたたき台を作成

とりあえず何でもいいのでロゴを作ってみた。Excelのオートシェープでサクッと作成。想像以上にダサく絶望的なデザインである。デザインのド素人に取ってロゴ作成はかなりハードルが高いようだ。

その２：メッセージを入れる

ロゴは絶望的だがメッセージを入れることでバランスは良くなったかも。

その３：ロゴを変更する

頑張ってロゴを考えたがどうにもならない。改めてデザインのプロってすごいと思う。

その４：ロゴ変更と文字色変更

ロゴに調整するが難航。文字が薄く見にくいので色を少し濃くした。若干柔らかさが失われた気がする・・・。

その５：文字色変更

文字を白抜きからグレーに変更した。白抜きで背景と同じだとどうしても引き締まらない。そもしも背景白じゃないんだが・・・。

その６：ロゴを変更、背景色考慮、メッセージ変更

非常に重要なことを忘れていた。ロゴの背景色を考えないとバランスがとれない。背景色は変えるとサイトのイメージが変わってしまうのでそのままにする。ロゴはあきらめて文字を入れるタイプにした。メッセージを微妙に変更。

その７：ロゴを透過にする

ロゴを透過にしてみたが色的に非常に見にくい。ダメだ・・・。

その８：ロゴ文字を白にする

マシになった気がする。

その９：ロゴを調整

ロゴの色を少し濃くした。雰囲気が重くなったので自分のイメージに合わない。文字の大きさも大きすぎる。

その１０：アイコンの文字を小さくする

アイコンの文字を小さくしたがイマイチしっくりこない。

その１１：アイコンの色を薄くする

アイコンの灰色部分を少し薄くした。ロゴ内のアイコンサイズも少し小さくしてみた。アイコンの主張が弱まってバランスが良くなった。

その１２：アイコンの色を薄くする

Zの赤色が濃すぎたので薄くした。すこし柔らかくなりイメージに近づいた。

その１３：メッセージ色変更

メッセージがグレーだと思いので白にした。白の方がバランスがいい気がする。あとこの時点でロゴの透過をやめて背景色のべた塗りにした。透過すると境界が綺麗に見えないのでしかたなく・・・。

その１４：メッセージサイズ変更

縮小したときにメッセージが小さくで見えないので大きくした。

ここま4時間くらいかかった。あきらめて今回のロゴ作成はこれにて終了。サイトアイコンはスナップショットを取ってツールで透過にしている。

変更前と後の比較

一応はカイゼンしたと思うが見方によっては改悪かもしれない・・・。

タイトルロゴ

文字の色を濃くして目立たせたが今見るとイマイチ。どぎついので文字色はもう少し薄くてよかったかも。アイコンとメッセージはあった方がいいだろう。ただメッセージを入れることでタイトル文字が小さくなってしまうのはちょっと失敗だったかも。と、見ると色々と不満がでて収集が付かなくなるのでこれ以上は気にしない。

サイトアイコン

赤色のワンポイントがあるのでインパクトがある。ただしZEROの文字がブラウザのタブで見るとほとんど読み取れない。ほとんどのサイトアイコンはアルファベット1文字なので今回の4文字は失敗かも。次回直すことがあればタブ表示時のデザインも考慮してみよう。今回はこれでよしとする。

サイトデザインも含め考え出すとキリがない・・・。

まとめ

予算かけるつもりがないので自作したが自分のイメージに合わせてデザインするのって非常に難しい。ただしこのレベルならExcelだけで作れてしまうのでこだわりが無いなら自作するのもいいだろう。専門知識と専用ツールなしでロゴを作るのは想像以上に難しかった。予算があればデザインのプロへの外注をおすすめする。