まずはこのサイトを充実させていきたいので、今回はサイトのアイコンを作成しました。
サイトアイコンはファビコンとも呼ばれています。
あまり聞きなじみがない単語だと思うので、例を出すとこんな感じ。
左側のアイコンがファビコンです。
ファビコンの画像サイズは48×48の倍数が推奨みたいです。
今回はWordPressdで自動的に最適化してくれる512px × 512pxのPNG形式で作成します。大きいに越したことはないからね。
■ ファビコンの分析
実際に表示されるのはかなり小さいのであまり複雑な形やいろんな色を使わないようにしたほうがよさそうです。
ゲームではアイコンはよく見かけるが、Xなどの創作でアイコンを作っている人は少ない気がする。自分のフォローしている人に少ないだけかもですが…
もちろん投稿者は経験がない
なので、まずはどんなアイコンがあるのか分析してみる。
■ 調査した対象
- 企業ロゴ
- 組織・チームのロゴ
- サイトを持っているイラストレーターさん
- ゲームの設定資料集など
（権利関係が不明なため画像掲載は控えます）
■ 分析結果の傾向
- サイト名や企業名の頭文字
- 企業ロゴそのもの
- 業種を表すアイコン
- 色はだいたい2～3色
サイト固有のファビコンにしているところはあまりなかったですね。
イラストレータさんだとオリジナルキャラをファビコンにしている方が多かったです。
この中からいったん考えてみたいと思います。
まず、サイトロゴをまだ作っていないのでロゴの頭文字をファビコンにはできません。
なので消去法的に業種を表すアイコンで考えてみます。
■ファビコンのアイデア出し
ぱっと思いついたもの
- ペンタブ
- ペンとキャラ
投稿者はデジタルでしか絵を描いたことがないのでアイコンに筆や鉛筆を使うのがなんとなく抵抗があったので、ペンタブにしようかなと思ったのですが、使用しているペンタブが真っ黒なので、アイコンにしづらいなと…
案1 ペンタブとモニタ
無彩色でまとまっており形もシンプルなものの組み合わせなので実際のサイズでも何が描かれているか分かりますね。でも明度が近すぎるかも？
無彩色かつシンプルなので印象には残りにくそうなのと、ブラウザをダークモードにしている人には視認性が下がりそうですが、悪くはなさそうです。
案2 書いてる途中
これはちょっと失敗かな….
このアイコンの意図としてはよりデジタルで絵を描いていることを強調するためにペンと描いている途中の女の子にしてみました。つぶれるだろうな思ったので顔は描いてません。手抜きじゃないよ
うん、やはり視認性が悪いですね。髪を黒にしているのも大きそうなので髪色を変えてみました。
顔が描いてあることは認識できそうですが、今度はペンが認識しづらくなっています。人の顔の上に何かが乗っているという印象。
輪郭が顔だと顔のパーツを探してしまうので、ペンの異物感が強くなっているのかな？
案3 ロゴっぽい何か
このアイコンの意図としてはデジタルイラスト要素のペンと、このサイトを自分の考えていることや勉強したこと、自分の活動記録などいろいろなものを置いておく秘密基地として運用していこうと思っているので、その要素として旗をつけてみました。
あとシルエットがフドウのFになるように意識しました。
少し旗とペンが分離しているように見えるので線で旗を囲って統一感とシルエットの強調を行いました。
実際に確認してみる
正直ただの旗に見えますね。
このペンのディティールを上げてもあまり効果がなさそうなので、色を変えてみます。 小さくなるので雑ですが色を変えてみました。先ほどは某最王手メーカのペンを意識していたのですが、これは何のペンは分るでしょうか？
うーむ、旗の棒の部分が2色なのはわかるがペンかどうかは判断つかないかもですね。
■結論
案3を採用しようと思います。
案1と案3で悩むところですが、案1はまとまっているのですが、結構ありきたりというか既にありそう感がすごいので却下にします。
案3は伝わりづらいですが、コンセプトもありシルエットがFだったりとオリジナリティーもあると判断して案3にしました。
■ 気づいたことまとめ
- 想像以上にディティールがつぶれる
- 色や形をシンプルにする勇気がいる
■ まとめ
ファビコンのような小さいものにはシンプルな色合いと形がよい
シンプルにすればするほどシルエットやコンセプトが大事になりそう
ということでした。
まだまだ伸びしろだらけです。
