ゼロからBLOGホームブログ運営デザインのド素人がタイトルロゴとサイトアイコンを作成する2019年7月11日SHAREツイートシェアはてブLINEPocketスポンサーリンク気まぐれでサイトのタイトルロゴとサイトアイコンを変更した。専用のツールがないのでExcelのオートシェープとワードアートで作成している。4時間くらい試行錯誤してなんとかイメージに近いものを作成できたが思たより難しかった。法人や予算がある場合は無理せずデザインのプロにお任せするのがよさそうだ。変更前とタイトルロゴとアイコンタイトルロゴサイトアイコン新しいロゴとアイコンを作るロゴとアイコンの方針ロゴパターンを考えるロゴの作り込み変更前と後の比較タイトルロゴサイトアイコンまとめ変更前とタイトルロゴとアイコン1年以上前に作ったこのロゴとアイコンはほとんど時間をかけずに作った。画像元はExcelでスナップショットでPNGにしている。タイトルロゴ以前使っていたタイトルロゴがこちら。使ったのはExcelと透明化ツールのみ。文字はExcelのワードアートを使用している。STEP(透明化用のツール)サイトアイコンサイトアイコンも同じようにExcelで作成した。一応背景を透過にしているのでそれっぽくは見えるかな。新しいロゴとアイコンを作る前回同様にExcelを使ってロゴとアイコンを作成する。できればあまり時間をかけずに終わらせたい・・・。ロゴとアイコンの方針あまり攻めた感じのデザインは好きではない。しつつゆるふわな感じを目指す。こんなデザインにしたいそれっぽい感じふんわり柔らか薄味ロゴパターンを考える最終的には「それっぽいかっこいいロゴ」にしたい。他サイトのロゴを参考にいくつかパターンを絞ってみた。アイコンありパターンやはりロゴにアイコンを入れた方が「それっぽく」なる。いくつかアイコンを入れたろごのパターンを考えてみた。トップ画面にアイコン中心に入るパターンだとこれ。立幅を取るのでサイトのデザインがすこし難しくなるかもしれない。タイトル文字はもう少し小さい方がいいかも。ありがちなパターンで左にアイコンで右にタイトルと。王道パターンかもしれないが一歩間違うとかなりダサくなる可能性がある。アイコンを大きくしたパターン。トレードマークのアイコンを中心にしたい場合はこれ。良いアイコン作れればこれもアリかな。メッセージ入りパターンサイトロゴにメッセージが入っているサイトが意外と多い。トップ画面でタイトルを見たときに「何のサイトなのか」すぐにわかるメリットがある。調べた限り以下の2パターンが多いようだった。タイトル下にメッセージを配置。立幅を少し食うがバランスは良い。最近見かけるおしゃれなパターンがこれ。タイトル右にメッセージ。立幅を取らないのでスッキリしたロゴに仕上がる。最終案サイトメッセージは必須と考え入れた。できればメッセージを右に配置したかったがバランスが悪かったので上にした。タイトルを見て何のサイトかわかるのはメリットが大きいと思う。メッセージなしでタイトルだけで何のサイトわかるのが理想。ロゴの作り込みここから一気にロゴを作成していく。ロゴ作成のセオリーとかまったくわかっていないので行き当たりばったり。その1:とりあえずたたき台を作成とりあえず何でもいいのでロゴを作ってみた。Excelのオートシェープでサクッと作成。想像以上にダサく絶望的なデザインである。デザインのド素人に取ってロゴ作成はかなりハードルが高いようだ。その2:メッセージを入れるロゴは絶望的だがメッセージを入れることでバランスは良くなったかも。その3:ロゴを変更する頑張ってロゴを考えたがどうにもならない。デザインのプロってすごいと思う。その4:ロゴ変更と文字色変更ロゴに調整するが難航。文字が薄く見にくいので色を少し濃くした。若干柔らかさが失われた気がする・・・。文字を白抜きからグレーに変更した。白抜きで背景と同じだとどうしても引き締まらない。背景白じゃないんだが・・・。非常に重要なことを忘れていた。ロゴの背景色を考えないとバランスがとれない。背景色は変えるとサイトのイメージが変わってしまうのでそのままにする。ロゴはあきらめて文字を入れるタイプにした。メッセージを微妙に変更。その7:ロゴを透過にするロゴを透過にしてみたが色的に非常に見にくい。その8:ロゴ文字を白にするマシになった気がする。その9:ロゴを調整ロゴの色を少し濃くした。雰囲気が重くなったので自分のイメージに合わない。文字の大きさも大きすぎる。その10:アイコンの文字を小さくするアイコンの文字を小さくしたがイマイチしっくりこない。その11:アイコンの色を薄くするアイコンの灰色部分を少し薄くした。ロゴ内のアイコンサイズも少し小さくしてみた。アイコンの主張が弱まってバランスが良くなった。その12:アイコンの色を薄くするZの赤色が濃すぎたので薄くした。柔らかくなりイメージに近づいた。その13:メッセージ色変更メッセージがグレーだと思いので白にした。白の方がバランスがいい気がする。あとこの時点でロゴの透過をやめて背景色のべた塗りにした。透過すると境界が綺麗に見えないのでしかたなく・・・。縮小したときにメッセージが小さくで見えないので大きくした。ここま4時間くらいかかった。あきらめて今回のロゴ作成はこれにて終了。サイトアイコンはスナップショットを取ってツールで透過にしている。一応はカイゼンしたと思うが見方によっては改悪かもしれない・・・。タイトルロゴ文字の色を濃くして目立たせたが今見るとイマイチ。どぎついので文字色はもう少し薄くてよかったかも。アイコンとメッセージはあった方がいいだろう。メッセージを入れることでタイトル文字が小さくなってしまうのはちょっと失敗だったかも。見ると色々と不満がでて収集が付かなくなるのでこれ以上は気にしない。サイトアイコン赤色のワンポイントがあるのでインパクトがある。ZEROの文字がブラウザのタブで見るとほとんど読み取れない。ほとんどのサイトアイコンはアルファベット1文字なので今回の4文字は失敗かも。次回直すことがあればタブ表示時のデザインも考慮してみよう。今回はこれでよしとする。サイトデザインも含め考え出すとキリがない・・・。まとめ予算かけるつもりがないので自作したが自分のイメージに合わせてデザインするのって非常に難しい。このレベルならExcelだけで作れてしまうのでこだわりが無いなら自作するのもいいだろう。専門知識と専用ツールなしでロゴを作るのは想像以上に難しかった。予算があればデザインのプロへの外注をおすすめする。書きたいことを好きなように書いています。趣味ブログですがだれかのお役に立てれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【製品レビュー】スマートフォンホルダーMINOURA(ミノウラ...スポンサーリンクふない書きたいことを好きなように書いています。趣味ブログですが誰かのお役に立てれば幸いです。