こんにちは！RSSでエンジニア兼デザインの作成を行っているH.C.です。今回は、バックエンドエンジニアをしている中でなぜファビコン作成に興味を持ったのかや、今みなさんが閲覧しているこのRSS TECH BLOGのファビコン作成の体験談などを少し共有します。
なぜファビコン作成に興味を持ったか
これから自分の強みとしてどんなスキルを持てるだろう、と悩んでいました。そこで、もともと絵を描くことやポスターなどのイラストを作成することが好きだったのもあり、webデザインに関心を持つようになりました。その路線でどんなことができるか先輩に相談したところ、「システムのファビコンを作成してはどうか」というお話をいただいたのがきっかけです。
ファビコンの重要性
そもそもファビコンとはなんだろうという方もいらっしゃるかもしれないので簡単にご紹介します。
ファビコン（Favicon）とは、「Favorite Icon（お気に入りアイコン）」を略したもので、ウェブサイトを象徴する小さなアイコンのことです。通常、ブラウザのタブやブックマーク（お気に入り）リスト、スマートフォンやタブレットのホーム画面やページショートカットに表示されます。
なぜファビコンを付けるのかと言うと、下記のような目的があります。
・サイトのブランドの視認性を向上するため
・ユーザーがブラウザやブックマーク内でサイトを素早く見つけやすくするため
ファビコンは非常に小さいので、上記のような目的を達成するためにはこのようなことに注意する必要もあります。
・デザインはシンプルで明確にする
・小さなサイズでも判別しやすくするために、複雑な図案は避ける
一見すると小さな役割かもしれませんが、なぜこの小さなファビコンが重要なのか、それは下記のような要素があるからなんです。
・ ウェブサイトの専門性・信頼性を高める
・ ブランド認知度の向上
・ユーザビリティの向上
・デバイスや環境による利便性の向上
・ SEO（検索エンジン最適化）への間接的な影響
・ 競争の中で目立つための工夫
・無意識の記憶に働きかける効果
ファビコンは、サイズは小さいですが、影響は大きい存在です。ウェブサイトを代表する「顔」の役割を果たします。ただの装飾品ではなく、ウェブサイト運営において戦略的に取り入れるべきポイントです。
今回は重要と言える要素を箇条書きで挙げていますが、なぜそれらのような効果があるの？と思った方は調べてみると面白そうですね！
どのように作成したか
ファビコン作成の手順は大きくわけて５つです。
1．ヒアリング
2．作成
3．FB
4．修正
5．納品
1．ヒアリング
まずはヒアリング。
ファビコン作成では、システムの担当者にこのようなことを聞きます。
・メインカラー（要望）
・参考やイメージ（例：ナイキのようにシュッとしたものが良い、など）
・このシステム名になった理由
・どんなシステムか
・きれいめ、ポップ、シンプルなど全体の雰囲気
参考やイメージ、全体の雰囲気に関しては特に希望なしという意見をいただくことがあります。
今回もあまり細かい希望はなく、
コンセプト：明るい、若い、ベンチャー気質、パキっとした感じ、コーディング感を入れたい
という要望だけいただきました。
これをヒントに作成に入っていきます。
2．作成
タイトルにも記したように、今回はCanvaを利用して作成しました。
もともとのサイトの色やロゴに従ってとりあえず文字を並べてみます。
これだと背景に文字を付けただけで、工夫がなくつまらないですね。
「コーディング感」「ベンチャー気質」という要素を入れたいです。
このビックリマークのような稲妻や電球のモチーフは「ベンチャー気質」という要素を「閃き」「躍動感」などに置き換えてみた結果です。
うーん、案としてはまだまだな気がします。
ファビコンにするにはデザインの1つ1つが小さすぎるので、実装した際に見えなくなってしまいそうです。もう少しシルエットを意識して作成してみます。
今度はスポットライトを当ててみました。
「コーディング感」という要素はいなくなってしまいましたが、「明るい」という要素に加え「若い」「ベンチャー気質」を「主役」という要素に置き換えてみました。
3．FB
1枚目を除く上記4枚をシステム担当者兼依頼者に共有してみました。
気に入っていただけたのは4枚目だったので、下記FBをもとに4枚目の修正に入ります。
・スポットライト感があまりない
・もう少しメリハリが欲しい
4．修正
スポットライト感を出すために地面にうつる部分も足してみました。
接地面の広いものと狭いもので2つ作成
さらに、メリハリ（実際のファビコンくらい文字が小さくても認識できる程度）をつけられるよう文字を強くしてみました。
急に点が入りましたね。
遊び心をプラスして、「2．作成」でご紹介しているデザイン案の2枚目にも入れていた「閃き」要素を含めてみました。
点ありバージョン、なしバージョン両方提出してみましょう。
5．提出
自分でも驚きましたが、点ありバージョンの修正3枚目を気に入っていただけました。
これで納品します。
6．納品
納品と言っても依頼者に画像をお渡しするだけです。
まずはCanvaから作成した画像をダウンロードします。
そしてこのあと注意が必要です。
ファビコンの納品は、下記ガイドラインに従わなければなりません。
この指定はファビコンを使用するシステムを運営する組織や人によって変わりますが、RSSではグーグルのガイドラインを参考にしています。
一般的な「16px × 16px」「24px × 24px」「32px × 32px」などを使用してもOKです。
ガイドラインに従って画像を144×144ピクセルのものにしたら、下記サイトを使用して背景を透過します。
背景が透過できたら、ついに納品です✨️
失敗談・難しかったこと
今回の作成で、主に3つのことに頭を抱えました。
1．全ての要素を入れるのは難しい
最初はいただいた全ての要望を入れようと必死でした。
具体的に言えば「コーディング感」を入れるのが難しく、そこにかなり時間をかけてしまったのです。
時間をかけたにも関わらず出来上がったデザインはイマイチなものばかりで、結局提出できるようなものは作れませんでした。
依頼者の思いを汲むのは大切ですが、あれもこれも入れようとして時間がかかりすぎてしまってはよくない。
要素を含ませきれないときは、全体としての雰囲気を大きくずらさないようにしつつ少しずつ要素を足すのが良いという学びになりました。
失敗例：
↑地味すぎる
↑とにかくコーディングっぽい三角をアルファベットと一体化させたかった例
2．これ！というモチーフがない
例えばシステム名が動物や食べ物に由来していると、明確なモチーフが決まっているため作成は比較的簡単ですが、今回はそのようなモチーフがなかったので難しかったです。
「第一印象はどのようなものである必要があるか」「このシステムにどんな印象を持ってもらいたいか」などを強く意識して作成してみましたが、正解はないので自信も持てなかったのが事実です。
3．外部向けのシステムは責任重大
社内システムは責任を感じなくて良い、というわけではありません。もちろん。
しかし、普段は社内システムに携わっている身として、多くの人がこのシステムのこのファビコンを見ることになるのだと思うとかなり緊張しました。
作成後、実際にもらった声
デザイナーとしてはまだまだ未熟な自分ですが、このような意見をいただくことができました。
「かなり要望を伝えてしまったのですが、思いを汲んでもらって、想像よりも素敵なファビコンを作ってもらえて感動しました！十数パターンも作ってくれて、スピードの速さとクオリティの高さにも驚きました！」
「タブを開くたびに可愛いファビコンでテンションが上がります。サイトの象徴としてこれからも大切にしていきます。」
「率直に、、、しっくりきた」
（以上、テックブログ運営者の声）
このような声をもらうと本当にやりがいを感じますね。
作成してよかったと思いましたし、デザイナーとしてもっと腕を上げたい、もっと様々なデザインにチャレンジしてみたい、と思えました。
おわりに
最後まで読んでくださってありがとうございました。
今回はこのRSS TECH BLOGのファビコン作成記をお届けしましたが、今後も様々なデザインにチャレンジしてまた別のデザイン系記事も書けるように頑張ります！
興味がある方はぜひまたRSS TECH BLOGを覗きに来てください！
またデザインの記事以外にも、これからもRSSのメンバーがブログを投稿していきます。
レイスシステムソリューションズ株式会社のソフトウェア開発や、
採用に関するお問い合わせについては、下記のリンクにてお問い合わせください。