本サイトのロゴ

今回はWebサイトに欠かせないロゴの作品紹介です。
本サイトのロゴができるまでをご紹介いたします。

概要

担当

• レイアウト作成
• デザイン

使用ツール

Photoshop

意識したこと

• K.Y. Designの中に含まれる文字を使用
• サイトの雰囲気を邪魔しないシンプルなデザイン
• スピード・力強さ・安定感も取り入れたデザイン

デザインができるまでの過程

①ラフ案作成

まずはラフ案の作成からです。

シンボルマークをデザインする上で本サイト名の「K.Y. Design」に含まれている文字を使いたいなと考えていましたが、そのままだと使いづらかったので「K.Y.D.」と略してからデザインを考案することにしました。

ここでデザインの元となるラフ案をお見せします。
実際のものが残っておりましたのでぜひご覧ください。

上の画像の字が汚いので、それぞれ解説していくと、

1. YとDをうまく組み合わせてみる。赤い部分を使ってKも表現したい。
2. 2通りのパターンを考えたが、フィーリングで右側を採用。
3. 180度回転。安定感を感じる位置までDを移動。
4. 最後にK.Y.D.の省略点をバランスよく配置してPhotoshopに移行。

②Photoshopでの作業

ここからはPhotoshopでの作業です。
シンボルマークが完成するまでの過程を以下の画像にまとめました。

上記の画像をそれぞれ番号順に解説していくと、

1. ラフ案を実際にPhotoshopで落とし込んだ形。
2. スピード感を表現するためにDのフォントをBrush Script MTに変更。
3. 省略するときの点を再配置。
4. 立体感を出すために微調整して完成。

③ロゴタイプの作成

次はロゴタイプのデザインです。
まだ表現していない力強さをここで出そうとしました。
力強く感じるフォントを以下のようにAdobe Fontsで探し、候補を20個くらい出しました。

最終的にシンボルマークとの相性も考慮してBalboaPlusというフォントに決定。
また、もっと力強さを出すために全て大文字にし、サイトの雰囲気を崩さないように色は黒のみとしました。

あとは微妙な位置関係を調整して完成です。