8年半使っていたアイコンを変更した話

ツイッターで8年半使っていたアイコンを変更しました。
ここでは、その経緯とアイコンデザインに込めた思いをメモしておこうと思います。

f:id:pvcresin:20211108001018p:plain

旧アイコン

そもそも旧アイコンはTwitterを始めてからずっと使っていた思い入れのあるものでした。
2013年4月に大学に入学して初日に先生から言われたことは、「この学科ではTwitterが必須である」ということでした。
FMS学科のユニークさについては、いくつも記事が書けてしまうほどの話があるので避けますが、とにかく大学・大学院生活においてTwitterが学生間の大きなコミュニケーションツールでした。
なので、初日になんとなく好きだったリラックマの顔を雑に切り取ったアイコンを設定し、なんとなく昔好きだった玩具の素材のPVC樹脂（pvcresin）というIDをつけました。
インターネット上で使うアイコンは統一していると識別に便利だったので、そのままこのアイコン（とID）を使って様々なサービス上で活動していくことになります。

問題

問題はシンプルに版権問題です。
学生のLTなどであれば、アニメアイコンの人も多かったので、グレーな扱いで済まされていました。しかし、外部への発表などを行う際に、オリジナルのアイコンでなければ使いづらい場面が存在しました。
なんとか大学院修了までは持ちこたえましたが、そのまま社会人になってからも同じTwitterのアカウントを継続して使っていることから、そろそろ変えないとヤバいなと思うようになりました。

要件

8年半もアイコンを使っていると、そのアイコンで自分を認識している人がほとんどになります。なので、大まかなイメージを変えすぎず、なんとかリラックマを消し去りたいと考えました。
もちろん、これを機にガラッと変えるということも考えました。しかし、アイコンづくりに正解はなく無限に悩めてしまうため、レギュレーションという意味も込めてイメージを変えないことにしました。
一度オリジナルのアイコンを作ってしまえば後でまた変えることもできます。まずは、問題の解決にフォーカスしました。

この時点でなんとなくあげた要件は以下のとおりです。

拡大・縮小に耐えられる
色が大きく変わらない
構図が大きく変わらない

拡大・縮小に耐えられる

これはアイコンを作るときにいつも意識しているアイコンの耐久性の話です。
密度が高すぎるグラフィックなどを使うと、縮小に弱くなるため、できる限りシンプルな線で描きます。
もちろんベクター形式（SVG等）で作成し、必要に応じてラスター形式（PNG等）に書き出します。

色が大きく変わらない

人間は大まかな色の印象でアイコンを認識しています。
そのため、色のテーマ感をあまり変えないことや色数を少なく保つことを意識しました。
これにより、オリジナルパターン以外にもモノクロバージョンなどの作成が容易になります。

構図が大きく変わらない

構図も重要です。
旧アイコンはリラックマの顔が全面に押し出されているため、そのアイコンでツイートを行うと、まるでリラックマが喋っているかのような柔らかな、気の抜けた印象を与えます。
その使い方を継続するべく、新アイコンでも顔全面の形にしています。
また、背景色の上に顔のパーツを配置している形は様々な形に切り取ることが可能で便利です。これはAndroidのAdaptive Iconと同じ考え方です。

ツール選定

旧アイコンは雑な画像切り抜きで作成したあと、Adobe Illustrator（イラレ）できれいな線に直してSVGとして保管していました。
今回はイラレを契約していなかったので、無料ソフトのInkscapeを使おうかとも考えました。
何回か昔使ったことはあったのですが、使用感のクセが強かったので代替物を探していたところ、Figmaがあったことを思い出してそれを使いました。
FigmaはUIデザインに使うイメージが強いですが、ベジェ曲線などを使ってパスを描くこともできるので簡易的なイラレの代替になります。
作業もブラウザで簡潔して便利。

新アイコンの制作

いくつかペイントソフトでの雑なお絵かきを繰り返して、完成したのが画像右の手書きプロトです。
リラックマのゆるい獣な感じをなんとか残せないか格闘して生まれました。クマとかイヌとか、ハロウィンのカボチャ（ジャックオーランタン）をイメージしています。

ちなみに口の形はなんとなくハロウィンのカボチャが好きなのでギザギザにしましたが、ちょうどアイコンを作っていたのが9月後半だったので10月のハロウィンシーズンに変えてしまおうと計画しました。

f:id:pvcresin:20211108001322p:plain

元の色を使いつつ、よしなに気の抜けた感じを残していて気に入りました。これをFigmaでパスに起こしつつ清書して完成したものが画像左です。

いくつかこだわりがあります。

色
目の形
口の形

f:id:pvcresin:20211108005133p:plain

色

新アイコンでは2色に抑えることにしました。
これは元から考えていたというよりは、お絵描きしていたら2色がしっくり来る絵になったからです。
プロトでは色のテーマ感を変えないようそのままの色を流用していました。
しかし、流石に絵とマッチせず、暗い印象になってしまったので背景色のトーンを少しだけ明るくしました。
それにより、顔パーツの色は同じでもくっきり見えるようになりました。

目の形

目だけはリラックマの形で流用するなども考えましたが、リラックマの目はパッチリし過ぎで、口のゆるさで中和しているのだと気づきやめました。
ちょっと眠たそうな目をイメージしてパスを描いています。
ちなみに横長の長方形の左右に半円をつけた、陸上トラックのような形ではじめは作成していました。しかし、それだと半円と長方形の接続部分に違和感が残ってしまったので、ゆるい曲線でつなぎ、楕円に近い形に変更しています。ここらへんはUIでも同じような視覚的な補正を行うプラクティスがあるようです。
完全に水平に並んでいると地蔵みたいな印象を受けたので、ハの字になるよう3度ほど角度をつけているのも小さなこだわりです。

口の形

このあたりはかなりパスと格闘しました。
笑っている感じに全体的には口角をあげるようなカーブを付けつつ、ちょっとやんちゃな形の口にしています。
これは自分が華やかに大声で笑うと言うより、ニヤッとニヒルな感じに笑うことが多いのをイメージしています。
線に太さを持たせて印象を調節しています。

アイコンの修正

最後に各種SNSなどのアイコンを修正していきました。
様々なWebサービスで旧アイコンを使っていたため、思いつく範囲でも3-40個ほどは変えたと思います。まだ、修正できていないものもあるかもしれません。
Gravatarに対応しているサービスや、GitHubなどのアカウントを使ってログインできるサービスは自動で反映されて便利でした。
ここらへんはもっと統一されてくると良いなという印象です。 10月頭に修正作業を終えました。