Webサイトのロゴを作ろう

大体のサイトにはロゴがある。 筆者のこのブログも、以前はロゴがなかった。 そこで、Affinity Designer 2 を使ってロゴを作ったので、ちょっとだけ紹介してみる。

1. ロゴを作って何がしたいのか

1.1 favicon として使う

favicon は、ブラウザのタブやブックマークに表示される小さなアイコンだ。 favicon は、16x16px の小さな画像なので、ロゴの一部を切り出して使うことが多い。 favicon は、例えばこんな感じのやつのことだ。

1.2 ブランド力の向上

ロゴを作ることで、例えば以下のようなメリットを得られるだろう。

とはいえ、ロゴがなくても良いサイトはあるし、 私のこのブログも日記みたいなものであるので、ブランド力はあまり気にしていない。 見栄えが良いかな、くらいの理由である。

2. Affinity Designer 2 でロゴを作る

筆者はiPad版のアプリを使っているので、以下のスクリーンショットは iPad 版のものだ。

2.1 新規ドキュメントを作成

Affinity Designer 2 を起動して、新規ドキュメントを作成しよう。

ページのサイズを正方形にしておくと、後で favicon に切り出すときに便利だ。 さらに、透明な背景にもチェックを入れておこう。

2.2 ロゴのデザイン

このwebサイトは、Aboutページにもある通り、私の考えたことを書き留めるための場所である。 せわしない感じではなく、落ち着いた雰囲気を出すために、 万年筆のペン先とインク入れをモチーフにすることにした。

2.3 完成版ロゴ

完成版がこちらである。 特に万年筆の先端部分のカーブは、ノードを曲げることで本物らしく見えるように工夫してみた。 初めてロゴ作成に挑戦した割には、 なかなか良い感じに仕上がったと思うが、いかがだろうか。

完成したロゴはpngやsvgなどの形式で書き出すことができる。 favicon用のpngは、こちらのサイトで様々なサイズに変換してくれるので便利だ。

3. おわりに

さて、今回はロゴを作った話を書いてみた。 このサイトのページタブには、ここで作ったfaviconが表示されていることだろう。 改めて確認してみてほしい。