博多電光

技術ブログ

博多市のアイコンが新しくなります

博多市です。今春の就職に合わせて、6月から渋谷のど真ん中で新生活を送っています。

これまでインターネット上で好んで用いてきたおなじみの黒と赤と青のアイコンですが、新生活にあたって心機一転し、全面的にリニューアルすることにしました。

これまで使ってきたアイコンはこちらです。

f:id:hakatashi:20200621072038p:plain
年季を感じさせる古臭さのぬぐえないクソダサ旧アイコン

そして、新しくなった博多市のアイコンはこちらになります。

f:id:hakatashi:20200621072355p:plain
新しい時代の到来を感じさせるスタイリッシュでエレガントな新アイコン

何が変わったか一目瞭然ですね!!!!

変更点

何が変わったかわからない人のために、旧アイコンと新アイコンを重ね合わせて比較してみました。

f:id:hakatashi:20200621073312p:plain
旧アイコンと新アイコンの比較

赤い部分が旧アイコン、青い部分が新アイコンです。各部の寸法が微妙に変更されています。

新しいアイコンの特徴

実は、これまで使用していたアイコンの寸法はあらゆる意味で「汚い」ものでした。今回のリニューアルはこの寸法の問題を一挙に解決するためのものです。このアイコンは以下のような特徴を持ちます。

1. 各頂点の座標を含め、あらゆる寸法を正確な整数比で表現することができる

画像全体の大きさを480x480としたとき、各図形の頂点の座標は以下の通り規定されます。

  • 黒: (130, 185), (146, 173), (286, 243), (286, 343), (270, 355), (130, 285)
  • 赤: (162, 161), (178, 149), (318, 219), (318, 319), (302, 331), (302, 231)
  • 青: (194, 137), (210, 125), (350, 195), (350, 295), (334, 307), (334, 207)

2. 図形全体を六角形としてみたとき、左右の対角線がその両端の角を正確に二等分する

f:id:hakatashi:20200621075541p:plain

3. 図形全体を回転させると左右対称かつ上下対称となる

f:id:hakatashi:20200621075657p:plain

4. 図形全体の中心が画像の中心と一致する

f:id:hakatashi:20200621081059p:plain

5. 図形を直方体としてみたとき、黒と赤と青のストライプが側面の幅を正確に五等分する

f:id:hakatashi:20200621081307p:plain

これらの特徴のうち、旧アイコンで満たされていたのは4.の「図形全体の中心が画像の中心と一致する」だけでした。

実はこの旧アイコンは、寸法とかそういう難しいことは考えずにIllustratorを使用して雑にデザインしたものだったので、よく見るとあちこちがガタガタです。「博多市」としてのソーシャルアイデンティティーを示すためのアイコンとして、こんな適当なアイコンでは良くないと以前から気になっていたのですが、今回このように改めて図形としての仕様や要件からアイコンをきっちりと定義し直したことにより、旧アイコンの「フリーハンド感」が薄れてデザインとしてもかなりスッキリしたと感じています。

これらの寸法の仕様や派生画像など、アイコンに関する情報は今後こちらのリポジトリに集約する予定です。

github.com

よく見ないと気づかないマイナーチェンジかもしれませんが、スッキリと生まれ変わったアイコンで、どうか今後ともよろしくお願いいたします。

博多市アイコン略史

せっかくなので、このアイコンに至るまでの博多市のアイコンの遷移と歴史について軽く紹介しておきます。

博多市が自分のアイコンというか、アバターについて初めて意識したのは、2010年にTwitterのアカウントを作成した頃です。

当時の博多市のTwitterアイコンは、こんな感じでした。

f:id:hakatashi:20200621083414p:plain
第1世代アイコン (再現)

今となっては懐かしい、「伯方の塩」の非公式擬人化キャラクター「伯方さん」です。

「博多市」というハンドルネームは当時から使っていたので、アイコンもそれにちなんだものにしようと考え、当時流行していた名前の似ているキャラクターをそのまま引っ張ってきました。キャッチフレーズの「!の!!お!」が「はかたし」の4文字を含むこともあって、このキャラクターには比較的愛着があったのを覚えています。

そしてそれから2年ほど経った頃、Twitter「箱ドット」なるアイコンが流行し始めました。こういうやつです。

f:id:hakatashi:20200621084037p:plainf:id:hakatashi:20200621084219p:plain (素体素材: 花屋(oat)さん)

借り物のキャラクターじゃなくて自分オリジナルのアイコンが欲しいと思っていた博多市は、自分でもこれを作ってみることにしました。素体とかよくわからなかったので、ペイントで一から描いてみました。

f:id:hakatashi:20200621084616p:plain

そして頭だけ描いて諦めました。

このままで終わるのもなんなので、元のアイコンの伯方さんのアクセントである赤と青のストライプと、「博多」という文字を前面にあしらってなんとなくそれっぽい感じにしました。これが第2世代のアイコンです。

f:id:hakatashi:20200621084935p:plain
第2世代アイコン

このアイコンはけっこう長く使われましたし、派生アイコンも多く誕生しています。たとえばクリスマスだけ使われた1日限定のアイコンはこんな感じで、

f:id:hakatashi:20200621085138p:plain
第2世代アイコン (クリスマス限定)

Tumblr用に使われたのはこんなアイコンでした。

f:id:hakatashi:20200621085227p:plain
第2世代アイコン (Tumblr)

そして大学に進学したあとの2014年ごろ、Webプログラミングなどを通してSNS以外でのアイコンの使用が増えてくるのにつれて、ドット絵のアイコンというのが古臭く見えるようになってきました。まあ素人が適当に打ったドット絵ですし実際見栄えが悪い。当時フラットデザインというのが流行し始めていたのもあり、デザインの意匠は変更せず、シンプルな図形で構成されたアイコンにリニューアルしようと考えました。このとき作成されたのが第3世代のアイコンです。

f:id:hakatashi:20200621085928p:plain
第3世代アイコン

というわけで、博多市のトレードマークでもあるこの赤と青のストライプは、もとを辿れば伯方さんの衣装、さらに辿れば伯方の塩のパッケージに描かれている赤と青の線に行き着きます (ちなみにこのパッケージの線が何を表現しているのかは未だにわからないままです。誰か教えて)。

ちなみに、このリニューアルしたアイコンを、以前のアイコンを知る当時のNPCAの後輩や同輩に見せたら口を揃えて「え⋯⋯ダサw」って言われたのをよく覚えています。絶対に許さん。

f:id:hakatashi:20200621072355p:plain
第4世代アイコン

以来、実に長い間このアイコンは使われました。目が痛くなるこの原色の黒赤青の配色がもはや自分にとっての「博多市配色」です。リファインされ第4世代となったアイコンにさらに愛着が湧くよう、これからも精進してまいります。