SNSのアイコンを超低解像度にしてみたらどうなるか試してみた
アイコン
①コンピューターに与える指示・命令やファイル・プログラムなどを分かりやすく記号化した図形。絵文字。
②イコン
[広辞苑 第七版]
イコン 【Ikon ドイツ】
（ギリシア語のイメージの意のeikōnから）
①ギリシア正教会でまつるキリスト・聖母・聖徒・殉教者などの画像。ビザンチン美術の一表現で、6世紀頃に始まる。ロシアで独特の発達をみ、ロシア‐イコンと称される。図像。
②パースによる記号の3区分の一つ。形式が、その示す対象の内容と何らかの類似性を持つ記号。図像。たとえば表意文字。写像。アイコン。 →インデックス →シンボル
[広辞苑 第七版]
アイコン。そう、それはギリシャ語のイコンを語源とし、その「形態を示した画像」が「そのもの」の特長を端的に示す「図」のようなもの。
このサイト「9uest」も、「鍵」をテーマとしたアイコンが設定されている。つまり「人生というクエスト攻略の手掛かりになるような情報を提供する「鍵」」となるものであることを意識したものとなっている。
さて、SNSに目を向けてみよう。SNSにおけるアイコンはまさしく、「ユーザーそのものをイメージするもの」であると私は考えている。例えば、「動物、植物、イラスト、写真、3DCG」等々、そのアカウントの特徴が「一目で」わかるようなものとなっている。
アイコンといえど、その実態はあくまでも「画像」である。高解像度なクリアの画像をアイコンにしたら確かに綺麗なのは一目瞭然だが、その分だけ情報量が増えるため画像ファイルが大きくなる。オンライン上のサービスは、サーバーに画像を保存するという性質上、アイコンがやたらにデカい画像だとその分だけサーバーのハードディスクを占有してしまうことになる。つまりは、貴重なハードディスクの領域を他のコンテンツに割くことができなくなる。また、アイコンの表示領域というものはSNSにしてもアプリにしても限られている。また、同じ画像であっても、画面上での表示を目的としていることから、印刷を行うようなものほど高解像度である必要性もない。つまり、アイコンに求められるのは「①軽いこと（必要最低限の解像度）」「②内容が一目でわかること」の2点に尽きる。
しかし、ユーザー目線で立つと、高い解像度で綺麗なアイコンとしたいというのが、優先度としては高くなるであろう。それを言い換えれば、重たいアイコン画像をサーバーにアップロードする事に繋がる。そのため某青い鳥をはじめとしたサービスのように、ある一定のサイズ以上のアイコンをアップロードすると表示領域におさまるよう、自動的にリサイズ（縮小）する機能を実装してるものもある。
この機能に着目して、私はこう思ったのだ。
というわけでやってみた。
その1.低解像度の画像を生成する。
まず、アイコンを作成する上では、避けて通れない道がある。そう、画像の用意である。
1-1.画像を作ろう。
普通にアイコンにしたいイラストを作成する。なかなか根気が要る作業だろうが、ここはPixivにアップロードしたりSNSに普通に流すことを想定として本気で取り組もう。
著者はいつも通りPhotoshopで作成したぞ。（線画段階で既に禿げたなんていえない）
1-2.エディタへの取り込み
低解像度アイコンを作成するうえでの第一ステップ。つまり、「低解像度アイコンの元となる画像を作成し」をエディタに取り込もう。
今回は、Photoshopではなく、Photoshop代替ツールとして有名なAffinity Photoを用いることとした。
また、元になる画像については、著者が描いたイラスト（といっても、Mastodonのアイコン用にトリミングしたもの）とした。
※トリミングしていないイラストで高解像度のものはPixivにもアップロードしているので、そちらの方も見てね。
1-3.解像度を下げる
さて、画像を取り込んだらいよいよ解像度を下げる作業だ。ドキュメントのサイズを変更から、サイズを1pxに変更しよう。解像度を下げるとなるとどのような画像となるかは今の段階では、正直予想がつかない。
元の画像は511px。リサンプルについては、リサンプル手法でサイズ変更の結果が変わるので、お好きなやつを選ぶと良いぞ。（今回はバイキュービックを選択した。）
サイズを1pxにする。サイズを変更ボタンを押すと、Ctrl+Zを押さない限り、もう元には引き返せないぞ。
おお、見よ。なんとも言えない茶色なのか灰色なのかわからない色の画像が出力された。画面上ではメチャクチャデカく表示されていると思うが、ソフトのルーラーの数字をご覧頂きたい。間違いなく、正真正銘1pxの画像である。
ボタンワンクリックで、色塗り、線画、全てにおいて何度も禿げ上がりながら描き進めたイラストが、一瞬にして虚無のそれと化した。ある種の無慈悲である。
2.実際にアップロードしてみる。
まずは、青い鳥からいつも通り、プロフィールページからアイコン画像を変更をクリックする。親の顔ほど見た光景であろう。アップロード画面の段階でなんとも言えないシュールさからくる深夜テンション特有の笑いがこみ上げてくる。
The 単色アイコン。そしてこのなんとも言えない色合いである。これがタイムラインを颯爽と流れていったら間違いなくインパクトがある。
まさかの問題発生でアイコン変更不可。どうやら1pxのアイコンには変更が出来ない仕様のようだ。大きい解像度のアイコンをリサイズして小さくするのに極詳細図のアイコン画像はそもそも認めて貰えないのはなんとも世知辛い。
1pxがダメだったので先ほどと全く同じ流れで2px角、つまりは4pxの画像を生成した。
カラーピッカーが自動生成したカラーテーマの如く、茶色、黄土色、茶色寄りのグレー、薄いねずみ色の4色が生成された。
限界ギリギリまで拡大したら如実に違いがわかるが、少し引きでみたナビゲーター画面を見るとかなり色が近似していることがわかる。4色しか色がないのに謎のグラデーションがかかってるようでこれはこれで良いのかもしれん。
二度目の正直である。適用ボタンクリックタイム。
どうやら4pxアイコンはOKのようだ。
失敗した抹茶を三角コーナーに入れたときのような虚無感溢れるアイコンと化した。
ツイートボタンを押す度に殺伐とした青き鳥のタイムラインを失敗した抹茶を三角コーナーに流すがの如く流れていくのを想像すると、これはある種の風刺となるのかもしれない。存在感を消そうと努力した結果かえって絶大な存在感を誇示してしまう、ある種逆説的な何かを感じてしまうのは私だけだろうか。
次にMastodon。
私がメインで使っているSNSのMastodonでも同様に試してみることにした。先ずは例の如く1pxのアイコンを選択してアップロードしてみよう。
(※大人の事情で一部モザイクになっています）
こちらも設定画面から変更する画像を選択する。現段階ではちゃんと選択がされているが果たしてどうなるか。毎度の如く「変更を保存」ボタンをポチッとクリックしてみよう。
なんということか、mastodonは1pxアイコンで何の問題も無く反映されてしまった。
いうまでもないがトゥートしても普通にこのアイコンがタイムラインを流れていく。超絶軽い単色アイコンの誕生である。（現在Mastodonの方は元アイコンに戻している。）
この後Mastodon界隈のオンライン飲み会にて、鯖缶の方から「サーバーがぶっ壊れたと思った」って言われたが、事情を説明したらあっさりとそういうことだったのかみたいな感じで良い話のネタになった。
3.さいごに。
いかがだっただろうか。
1pxのアイコンは言ってしまえば「単色の画像である」。SNSのユーザー数が増えれば増えるだけ、アイコンも多種多様になる。ユーザーが増えれば単色アイコンとしている方も当然一定数現れることであろう。Mastodonはやはり自由なSNSを売りとしているだけあり、アイコンサイズの下限については1pxでもOKだった。その一方で、単色アイコンのユーザーが一定数いるであろうと考えられる青い鳥が1pxの画像を受け付けなかったのはなぜか。その答えはブラックボックスの奥深くに秘められているだろう。
コメント
某SNSアカウントから報告したように、
それ、更に軽くしました。
ご査収ください。