VS Codeのアイコンは無限大記号∞がモチーフ

台本

オープニング

【ジングル】 はい，どうもこんにちは．「雨宿りと WEB の小噺」始まりました．Keeth こと桑原です．

この番組では，Webテクノロジーの歴史や裏側にある，ちょっとした小噺を紹介しています．

今回のお題は「VS Codeのアイコンは無限大記号∞がモチーフ」です

本題

• 【つかみ】毎日見ているVS Codeの青いアイコン，よく見ると∞（無限大）マークだって知ってましたか
• 【背景/歴史】2017年，MicrosoftはVisual Studioファミリー全体でアイコンの「統一感」を出す方針を決め，単色縛りなど厳しいブランドガイドラインの中でデザイナー陣が何案も試作した
• 最初は「エディタっぽい」記号をいろいろ試したものの，どれもしっくりこず没に．そこから∞のバリエーションを大量に試作する方向に切り替わった（中には「目が痛くなる」と社内で言われた案もあったらしい）
• 最終的に採用された形は，コミュニティ内で「魚（フィッシュ）っぽい」というあだ名がつくほど独特な見た目になった
• 【メインの小噺・裏話】実はこの青い∞アイコン，VS Codeが生まれる前から存在した「Visual Studio Monaco」というブラウザ版エディタのアイコンを「借用」したものだった．各製品に固有色を割り振る方針になった際，青は元の持ち主に返すことになり，VS Code側は新しい色を探すはめになった
• 色の候補が尽きて最終的に選ばれたのが「オレンジ」．開発チーム自ら社内で「パンプキン・スパイス」と呼んでいたそうで，しかもSublime Textの配色に似ているという指摘まで出ていた
• 2017年10月，オレンジのアイコンをStableビルドに投入した途端，Reddit・Hacker News・GitHub Issueで「醜い」「元に戻せ」の大炎上に．開発者が勝手にmacOS用の旧アイコンへ戻す手順を自作して拡散するほどの騒ぎになった
• Microsoftは公式ブログ「The Icon Journey」で謝罪し，わずか数週間で青に戻すと発表．たった一つのアイコンの色を巡って世界中のエンジニアが議論するという，ちょっと笑える騒動になった
• 【意外な事実や補足】macOS版だけアイコンが斜めに傾いているのは，Appleのデザインガイドラインに沿わせるための意図的な調整．ただし「傾きが古臭い」「他のアプリより小さく見える」という指摘もあり，のちに見直しが検討された
• デザイナーいわく，この∞マークには「オープンさ」を象徴する意図に加えて，「偉大な頭脳への小さな敬意（a small tribute to a great mind）」というちょっとした隠しネタも仕込まれているとのこと．∞という記号自体は17世紀の数学者ジョン・ウォリスが考案したとされていて，長い歴史を持つ記号がまさか自分のエディタのアイコンになっているとは，という話
• 【まとめ・締めのひとこと】たかがアイコン一つで，社内的には半年以上の試行錯誤，公開後は世界中を巻き込む大騒動になった．エディタ選びには機能だけでなく「見た目」も大きく関わってくるということを，身をもって証明したエピソードだった

📎 https://code.visualstudio.com/blogs/2017/10/24/theicon 📎 https://visualstudiomagazine.com/blogs/data-driver/2017/10/vs-code-icon-revolt.aspx 📎 https://devblogs.microsoft.com/visualstudio/iterations-on-infinity/

エンディング

【エンディングBGM】 さて，そろそろ今回もクロージングです 今回は「VS Codeのアイコンは無限大記号∞がモチーフ」について話しました．

次回も，Webテクノロジーの小噺をお届けします．

この番組が気に入った方は，ぜひチャンネル登録をお願いします． また，あなたからの感想やリクエストもお待ちしております！ 𝕏で #WEB小噺 をつけて投稿していただくか，概要欄のお便りフォームからお送りください．

それでは，また次回の雨宿りでお会いしましょう！「雨宿りとWEBの小噺」お相手は Keeth でした．さようなら！ 【ジングル】