ブログを作る⑤ - favicon用のアイコンを作った

ブラウザタブの左端にあるコレ
ブラウザタブの左端にあるコレ
このウェブサイトのシンボルとなるアイコンを作った。
去年ぐらいに各ブラウザがSVG形式のfaviconに対応したらしいので、SVGで出力し設定してみた。
SVGはベクターデータなので、faviconが目に見えてシャープになって嬉しい。

Sketchの画面
Sketchの画面

デザインの意味

一応、自分の名字のモノグラムのつもりで作っている。
デザインの素養はあまりなく、単純で直線的なものしか作れないので、カクカクした自分の名字はモチーフとして都合が良かったと思う。
あとは自分の好きな山や空やテントにも見えるといいな、と思って自然っぽい色をつけてみた。

使用ツール

アイコンはSketchというデザインツールを使って作成した。
作りたいUIを説明する際にSketchでサッとサンプルを作ることはあったけれど、ちゃんとした完成品を作ったのは今回が初めてだ。
非デザイナーでも簡単に扱えて、デキる感を演出できるので重宝している。
買い切り型で値段も良心的。(※なお現在はサブスクリプション型しか無い模様)
色選びはAdobe Colorが非常に役に立ってくれた。
補色といった色彩に関する知識がなくても、大体のイメージからジャンルを選んでいけば、それっぽい色の組み合わせを提示してくれる。
今回は自然というジャンルにあった、山の稜線っぽい画像から生成されたカラーパレットを選んだ。
しばらくサイトを運用してみて、しっくりこなかったらまたここから選び直そうと思う。