評判最悪だったMicrosoftの「Visual Studio Code」アイコンデザインについて公式が経緯を語る

Microsoftのコードエディター「Visual Studio Code」のロゴマークは2017年8月にロゴを刷新、デザインのベースは同じであるものの、カラーが青からオレンジにがらりと変わりました。しかし、この変更はユーザーからの反応があまりにも悪く、「オレンジはすごく目障り」「多くの点で生産性が影響される」と批判されることも。ユーザーの反発を受けて、2017年10月24日に元の色に戻されることが発表されました。それと同時に「なぜオレンジ色にロゴが変更されたのか」という経緯も明かされました。

The Icon Journey
https://code.visualstudio.com/blogs/2017/10/24/theicon

8月に変更される前のVisual Studio Codeのアイコンはこんな感じ。

そして、変更後のアイコンはこんな感じ。デザインは同じですが、色が青の反対色であるオレンジに変わっています。会社のガイドラインによって「色は単一にする」といった制限があったことが大きな課題となったと言います。

「情熱的なフィードバックに感謝します。フィードバックは非常に有益で、痛みを伴いましたが、面白いものでした。私たちはオレンジのアイコンを青色に戻し、Insider向けには緑のアイコンにすることを決めました」ということで、Visual Studio Codeはブログにて「なぜオレンジのロゴが作られたのか」ということをつづっています。

2017年3月、Visual Studioの開発チームは数々のデベロッパー向けツールに一体感を持たせるべく、Visual Studio製品ファミリーを表すアイコンをリデザインしていました。各製品のアイコンは一目で見分けられる視認性を備えていないといけないものですが、会社のガイドラインによる「色は単一にする」という制限が大きな課題として立ちはだかりました。開発チームは制限の範囲内でよりよいロゴを作ろうと努力すると同時に、ガイドラインを変更できないか会社に働きかけたとのこと。

そんな中、以下のようなロゴ候補がデザインされました。

上記のロゴの中で「これはダメだろう」となったのが、以下のロゴ。製品ファミリーのロゴは全て折り目を持っていたのですが、このロゴはどこにも折り目がなかったためにボツとなったわけです。

特に、無限大(∞)をモチーフにしたロゴには、何度も取り組んだとのこと。ユーザーに突き刺さりそうな、手前があいた無限大ロゴや……

天井部分があいたロゴなど。

夏も中頃になり、チームに「アイコン疲れ」の様子が見えてきた頃に「現在のアイコンでよいのではないか？」ということで、Insider向けのプレリリースを行うことに。Insider向けのロゴは、一般向けと少し異なるものの、色や形のベースは同じです。

この時わかった問題点は、ロゴが小さくなるとぼやけてくすんだ印象になるということ。そのため、枠線を白や黒で描いてみたり影をつけたりといった試行錯誤が行われました。

そもそも、Visual Studio Codeが存在する前には Azure Web Appsで使えるオンラインエディタ「Visual Studio Online Monaco」が存在しました。MonacoのロゴはVisual Studio Team Servicesから青い無限大記号を「借りた」デザインになっていたのですが、Visual Studio Codeがリリースされた際には優先すべきことがたくさんあったため、ロゴデザインはMonacoと同じものが使われたとのこと。このロゴについて開発チームは「新しいロゴについて思うことがあるかもしれませんが、それでも古いロゴはタスクバーやドックの中で最悪だった」と述べています。そこで、新しいデザインの開発される際には「借りたものを返し」「新しい要素を入れよう」ということになったそうです。

しかし、製品ファミリーではすでに様々な色が使われており、残っていたのはオレンジだったとのこと。Sublime Textもロゴにオレンジを使用しており、テストを行っても誰も不満を述べなかったころから、オレンジがアイコンの色の候補として上がってきたそうです。

そこで、Insider向けリリースで新たな色のオレンジを試したところ、2カ月経過してもネガティブなフィードバックが少なかったことから、開発チームは大丈夫だと判断して新たなアイコンをリリース。すると「新しいロゴは最悪」「醜い」「ハロウィーンかよ」というネガティブコメントが数多く寄せられる事態に。最初のうちは「個々の問題に対応していけばいいだろう」と考えていた開発チームですが、徐々にネガティブなフィードバックは加速し、ニュースメディアから高校の友人までもが新しいロゴに否定的な意見を示すのを目にすることになったそうです。

フィードバックを加味した結果、「青からオレンジへの変更は思い切りすぎた」「フラットデザインのロゴを明確にするにはネガティブスペースを使う必要があり、これが視認性を悪化させた」「ボーダー部分が大きく太すぎて無限大のシンボルよりも目立ってしまった」という点が問題だったとチームは認識。そして、「ただいま」とでも言うように、慣れ親しんだ青いアイコンへと戻ることにしたそうです。

実際にソフトウェア上では以下のような感じで表示されます。

なお、Insider版は引き続き緑のアイコンを使用するので、これでInsider版と安定版を色だけで見分けられるようになりました。なお、アイコンデザイン自体もフラットデザインではなく、少し陰影のあるデザインへと変えられました。

開発チームは「色をオレンジから青に戻したことは全ての問題を解決しないが、前進ではあります」と語っており、これからもさまざまなアイデアを元にアイコンを進化させていく意向。「アイコンを進化させ変えていくことがいかに難しいということを苦しみと共に学びました。ありがとうございます。オレンジのアイコンを気に入ってくれた人が、青いアイコンをより愛していることを願います」とのことです。