『SiGN』で実践、無料アイコンを使って見映えするロゴを作ってみた

皆さんはWebサイトを作成する際、ロゴをどの様に作っていますか？
テキストだけだと味気なかったりしますが、画像編集機能『SiGN』を使えば凝った表現も可能です。
今回は無料のアイコン素材を使って、動物病院を例にロゴの作成方法の基本を解説します。

SiGNの操作に関してはマニュアルを参照してください。

基本は文字から組み立てる

まずシンプルにテキストのフォントを変える事から始めてみましょう。
比較出来る様に幾つか気になるフォントを選んで並べて俯瞰すると絞り易くなります。

サイトのデザインやお店の雰囲気、コンセプトなどに基づいてイメージに合うフォントをピックアップすると良いでしょう。
フォントを選ぶだけでもかなり印象が変わりますのでよく吟味しましょう。

ここでは『廻想体 マキナB』を選択しました。
漢字の密度が高めだったので文字間を空けてあげると視認性が上がると思います。
このフォントはデフォルトで文字間が設けられていたので調整が不要でした。

象徴になるアイコンを加える

さて、次はアイコンを加えてみましょう。
SiGNは複雑な図形の作成が出来ないので、予めデザインされているアイコン素材ダウンロードサイト『ICOOON MONO』の力をお借りします。

様々な用途を想定したアイコンが多数扱われており、無料なのもありがたいですが画像形式もpng、jpg、svgなどに対応しており重宝するサイトです。
利用規約では、ここの素材で作成したロゴの商標登録はダメとの事ですのでそこだけ気を付けて下さい。

6000個以上のアイコン素材を無料でダウンロードできる

ICOOON MONO

素材をダウンロードする

動物病院なのでベタに犬のアイコンを選んでみました。
ここのサイトの優秀な処はRGB形式で色指定をしてダウンロード出来る点です。
SiGNでは画像の色変更が出来ないので、予めここで色を指定してからダウンロードすると良いでしょう。

その際、BiNDupは6桁のカラーコードで指定する事になるので、変換サイトで指定内容を確認します。
この例では、

• rgb値：R223,G86,B86（ICOOON MONOの場合）
• カラーコード：#df5656（BiNDupの場合）

で扱います。

色指定が出来たら透過で扱えるPNG画像でダウンロードします。

SiGNに取り込んで配置する

SiGNに配置したら文字とバランスを合わせます。
文字より少し大きめにして、余白は文字間と同じくらいに配置しました。
フォントのカラーもアイコンに合わせました。

これでだいぶロゴっぽくなりましたね。
アイコンの力は偉大。

英字を添えてみる

ここまでで完成としても良いですが、更に要素を加えてみましょう。
よくあるパターンとしては、英語訳を添える手法です。
『MARIE ANIMAL HOSPITAL』を小さなサイズで下に配置します。
その際、文字間を調整して漢字部分と同じ幅にするとバランスが良くなります。
アイコンも文字全体の高さに合わせて調整します。

アートボードのサイズをロゴサイズに合わせて完成です。

ロゴのレイアウトバリエーション

基本は以上となりますが、その他考えられるバリエーションをご紹介したいと思いますので参考にしてみてください。

縦に組む

オーソドックなレイアウトのひとつとして。
Webサイトの場合、横の方が使いやすい印象はありますが、こう云うレイアウトもアリですね。

四角形に組む+アイコン素材を加える

縦組みの発展系。
アイコンの印象が強まりますね。
アイコンも1個である必要は無いので、複数組み合わせるのもアリです。

文字組を変える

文字組を変えてみました。
『鞠井』の印象が強くなりますね。

アイディア次第でいろいろなバリエーションが考えられます。
ロゴストックなどのロゴギャラリーで世の中にあるロゴを参考にしてレイアウトパターンを増やし、作りたいものに適したデザインを追求すると良いでしょう。

BiNDupのSiGNではWebページのアイキャッチに使う画像やキャンペーンに使うバナーはもちろん、SNSの投稿に使えるスクエア型、ロゴ作りに役立つテンプレートなどを多数用意しています。そちらも参考にしながら気に入ったものを作ってみてください。

SiGNでロゴを作ってみるBiNDの制作事例を見る