アイコンの道のり
2017年10月24日 クリス・ディアス、@chrisdias
概要
熱心なご意見をいただき、ありがとうございます。同時期に非常に参考になり、苦痛でもあり、楽しいものでもありました。Stable版のオレンジ色のアイコンを青色に変更し、Insiders版は引き続き緑色を使用します。
お気に入りの色は？
モンティ・パイソン・アンド・ホーリー・グレイルでは、橋の番人が死の橋を渡る前にランスロット卿に3つの質問をします。3つすべて正しく答えればランスロット卿は通ることができ、間違った答えをすれば不慮の死を遂げます。ランスロット卿は好きな色を尋ねられ、「青」と答え、渡ることが許されました。
私たちは「オレンジ」と答えました。
謝罪と透明性
まず、対応が遅れたことをお詫び申し上げます。私たちは寄せられたご意見をすべて読み、次のステップについて「活発な」議論を重ねてきました。私たちは合理的な計画があると信じており、それを皆さんと共有したいと考えています。そして、これほど深く議論を呼ぶ話題であると認識していることについて、引き続き対話できることを楽しみにしています。
完全な透明性を期すため、なぜ最初にオレンジ色になったのかを理解するのに役立つと思われる経緯を共有したいと思います。
ようこそ、ファミリーへ
3月に、私たち（広範なVisual Studioチーム）は、開発するすべての開発者ツールに「ファミリー」感を出すことを目指しました。そのブログ記事をもう一度読むと、私たちが「困難な」企業ブランディングガイドライン（例えば、単一の色）の範囲内で作業しなければならなかったことがわかります。
ガイドラインを非難するのは簡単ですが、同時に、簡単に広く認識できる一連の製品を持つことは貴重な資産です。代わりに、私たちは制約の中で作業するという課題に取り組みながら、同時に会社全体でガイドラインを進化させ、直面する問題に対処しました。
最初のアイコン群から否定的なフィードバックがあったとき、私たちはVS Codeのアイコンに集中しました。私たちは、幅広いコミュニティと私たち自身の両方が、即座に視覚的、感情的に魅力的だと感じるアイコンを作成したかったのです。
初期のデザインをいくつか紹介します。
右上のものを除いて、これらの中で特に際立ったものはありませんでした。
これは、ファミリーデザインの構成要素である「折り目」が含まれていないため、却下されました。振り出しに戻ります。
例えば、インフィニティロゴをしばらく繰り返し検討しました。
目障りなものも含めて
正直なところ、少数の開発者から好評だった現在の「魚」にたどり着くまで。
回転
macOS（およびLinux）ではデザインの自由度がはるかに高いため、そちらでは異なるアイコンを使用しています。同じアイコンの形状を維持したかったのですが、単一の色に制限されることはなく、アイコンを暗いパネルに配置することでコントラストの問題を解決できました。この回転は、Appleのデザインガイドラインに実際に準拠しています。
とは言え、この回転が時代遅れであり、配置のせいでアイコンがDockの他のアイコンよりも小さく見えるというフィードバックは全くもって正当です。
疲労
真夏までに、アイコン疲れがやってきました。何度も反復を重ねた結果、ついに現在の形状で行くことにし、Insiders向けの「プレリリース」デザインをチェックインしました。プレリリースは、右下にあるハッシュボックスで示されます。
ハッシュは大きなサイズ（例えばPowerPointのスライドなど）では見栄えが良いのですが、小さなサイズではボックスが非常に薄くなり、アイコンがぼやけてしまいます。私たちは白、黒、そしてオレンジと緑の異なる色合いでいくつかのアウトラインを繰り返し検討しました。こちらが拡大されたもので、エッジが見えます。
この問題に対処するため、macOS版をWindowsでも試しましたが、それは単に場違いに見え、小さなサイズではさらに悪化しました。最終的に、プレリリースデザインを廃止し、Insiders向けに別の色を使用することにしました。緑色が利用可能で、それが既存のInsidersの色だったので、それを選びました。
ご覧ください、Insiders版です
アイコン占有
VS Codeが登場する前は、Visual Studio Monacoという、Azure App ServiceのWebアプリをライブ編集できる、完全にブラウザベースのワークベンチがありました。これはオンラインサービスであり、アイコンが必要だったので、青いインフィニティを「借用」しました。
VS Codeを初めてリリースしたとき、すべてが非常に急速に進んでおり、アイコンは私たちの懸念事項の中で最も低いものでした。新しいアイコンについてどう思うかにかかわらず、古いアイコンはデスクトップやタスクバー、Dockではかなり見苦しく、本来はファビコンとして意図されていました。
その後、ファミリー内の各製品が独自の色を持つことになり、青色はすでに占有されていたため、別の色を考え出す必要がありました。それに、私たちはそれを彼らから盗んだので、返すのが適切だと感じたのです :)
パンプキン・スパイス
この時点で、ファミリーパレットの色は、悪名高いオレンジ色を除いてほとんど使い果たされていました。Sublime Textのカラーパレットとの類似性について多少の懸念はありましたが、テストしたときには誰も問題にしませんでした。そして正直なところ、私たちは最新のSublimeが折りたたまれたリボンを使用していることに、より驚きました。
大量のフィードバックを素早く生成する方法
Insidersビルドでは、上記の問題を繰り返す間、約2ヶ月間オレンジ色、そして緑色のアイコンが使われていましたが、否定的なフィードバックはあまりありませんでした。
もしかしたら、私たちの懸念は根拠のないものだったのかもしれません。ユーザーは新しいアイコンを本当に気に入ってくれるかもしれないし、いくつかの問題に関する不安は、眠れないほどのことではなかったのかもしれません。私たちは、問題にならないかもしれないものにスポットライトを当てるのはやめようと決めました。変更をプッシュし、リリースノートで新しいアイコンに軽く言及しました。
すると、問題とコメントが殺到し始めました。
毎日、新しい興味深い方法で新しいアイコンへの嫌悪感を表現するコメントが追加されていきました。最初の数日間は、フィードバックが減速し、個々の問題に対処できるようになるだろうと考えていました。しかし、私たちは間違っていました。フィードバックはひっきりなしに寄せられました。新しい問題が立てられ、私たちが返信するよりも早くコメントが寄せられました。Hacker News、Visual Studio Magazine。高校時代の友人がFacebookにコメントを投稿しました。すごいことです。
お前は俺の男だ、ブルー！
そして、それが今日に至ります。
Stable版にオレンジ色のアイコンを導入した1.17.0のリリース以降、多数の問題が開かれ、コメントされたすべてのフィードバックを確認しました。VS Codeのハロウィンリリースが多くの皆さんにとってうまくいかなかったことは明らかであり、このことについてお詫び申し上げます。
偶然にも、これを書いている最中に、mdb07aさんがWindowsでのフィードバックと問題をうまくまとめてくれました。意訳ですが、他にも問題はありますが、主な問題は以下の通りです。
- 色の変更があまりにも劇的すぎた。オレンジは青と正反対の色であり、以前は良かったものが今はひどく見えるようになった。
- 透明度のみに依存してネガティブスペースを作り出す平坦な単色アイコンは、識別しにくく、見分けづらさの問題を悪化させる。
- 新しい境界線が非常に大きく太いため、インフィニティシンボルよりも目立つ。
macOSでは、傾きが時代遅れに見え、アイコンの重要な部分がDockの他のアイコンに比べて小さく見えるというフィードバックが最も多かった。
これらのフィードバックを受けて、私たちは製品ファミリーを作成しながらも、より良い仕事ができるかどうかを検討し直しました。その結果、Stableアイコンを多くの方に愛されている青色に変更することにしました。
これは、ステータスバーやエディタ内の他の青色ともよく調和します。
Stable版とInsiders版の違いを認識するのが難しい方々にとって、緑と青はより良い組み合わせです。こちらがSim Daltonismアプリ（第二色覚異常）を使った2つのアイコンです。
複数の製品が色を共有することは避けられないため、VS Codeが青色を共有することについては、もはや懸念していません。
私たちは、@donysukardiのここでのコメントに基づき、macOS向けの傾いていないアイコンの使用を検討しています。現時点ではそれを実行すると断言できませんが、検討を進め、いずれにしてもそのイシューで更新情報を投稿します。
今後の展望
オレンジから青への変更はすべての問題に対処するものではありませんが、一歩前進です。私たちはアイコンが進化し続けることを期待しており、ファミリー内でのVS Codeの新しいアイデアにオープンです。
アイコンの変更をどのように進化させ、展開するかについて、厳しい教訓を学びました。皆様、ありがとうございます。オレンジ色のアイコンを気に入ってくださった方々には、青色をさらに気に入っていただけることを願っています。
感謝を込めて、クリス