本番環境と開発環境でファビコンの色を変えるとすごい分かりやすい話

環境ごとにファビコンの色を変える小技。
前々職にいたデザイナーさんがやってたのを見てから、使わせてもらってます。

yagishの場合こんな感じ。タブを見ると一瞬で分かる。

明らかにヤバい紫のヤギ大根が開発（社内サーバー）
まだできてなさそうな緑のヤギ大根がステージング（Firebase）
白いヤギ大根が本番（Firebase）

ただそれだけのことなんだけど、実際使ってみると「これがデザインの力か」と実感できるはず。
これ開発？本番？と悩む時間が無くなる。
見て一発で分かる、考えたり読まなくていいって大事。

ちなみにyagishではロゴがSVGでVue側で操作できることを活かしてロゴも変えてます

実装方法としてはだいたい環境変数で切り替えるんだけど、ただテンプレートでlinkタグをif文で切り替えるか、フレームワーク等によってはプラグインでhead内のタグを管理してるから面倒だったりする。

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

ノンデザイナーズ・デザインブック [第4版]