はじめに

The Icon Journey の記事を抄訳したものです。文末を整えられず大変読みづらい文章になっていますので注意してください。

gigazine のプロの人が要約して翻訳してくれているので、全文が気になるわけでなければそちらをおすすめします。

その他
アイコンの変化はハロウィン仕様といったものが流れてくるのですが、そういうわけではないです。おそらく文中の Halloween Release で誤解した可能性があります。なおこのリンク先はおそらく日本語話者が書いたコメントなのでぜひどうぞ。

アイコンの旅

October 24, 2017 Chris Dias, @.chrisdias

TL;DR

すべての情熱的なフィードバックに感謝します。これは非常に有益で痛みを伴うものであり同時に楽しいものでした。私たちは Stable でオレンジ色から青色に変更し Insider で緑色を使用し続けます。

どんな色が好みですか？

モンティ・パイソン・アンド・ホーリー・グレイル(英) では、橋の守護者がランスロット卿が死の橋を渡る前に 3 つの質問を問いかけます。ランスロット卿は 3 つにすべて正しく答えることで橋を渡ることができます。間違って答えればそれは死です。"お前の好きな色は何色だ"と尋ねられたとき、ランスロット卿は"青色だ"と答え橋を渡ることを許されました。

私たちはこれに"オレンジ色"だと答えます。

謝罪と透明性

まず、返答が遅かったことに対して謝罪します。私たちはフィードバックが届いているのを確認しており、すべてのフィードバックを読んで、次のステップに向けて"活発"な議論をしていました。合理的な計画を用意していますのでこれをあなたと共有したいと思っています。深く議論されている話題についての継続的な対話を楽しみにしています。

完全な透明性を確保するために、どうやって最初オレンジ色にたどり着いたのかを理解するのに役立つと思ういくつかの歴史を共有したいと考えています。

ファミリーにようこそ

3 月(英)を振り返ってみますと、私たち (Visual Studio team) が作成するすべての開発ツールに共通する"ファミリー"感(一体感)を作り始めていました。このブログをもう一度読み返してると"挑戦的/刺激的"(単色など)なコーポレートブランドガイドラインの制限下で作業をしなくてはいけないことがわかります。

ガイドラインを批判することは簡単ですが、同時に簡単かつ広く認識されるプロダクト群を持つことは有益な資産です。よって私たちは制約内で作業しながらチーム全体に訴えかけることでガイドラインを進化させ直面した問題に対処しました。

アイコンの初期のセットからの否定的なフィードバックをみたとき、私たちはその VS Code アイコンに別れを告げました。そして幅広いコミュニティーと私たちが瞬時に、視覚的に、そして感情的に魅力的なアイコンを作りたいと思いました。

次に初期デザインをいくつか示します:

右上のアイコンを除いて、私たちにとってどれも本当に目立ってはいませんでした。

右上のアイコンは一体感の構成要素である折り目が含まれていなかったため却下され、試作段階に戻ることになります。

しばらくの間は次のような無限のロゴで作業を繰り返しました:

目を傷つけそうな混乱させそうなものも:

私たちが現在の "fish" にたどり着くまで、少数の開発者が疑うことのないテストを行っていました。

ローテーション

macOS (と Linux) 上で再設計の自由が生まれます。なぜならそこで違うアイコンを使うことにしたからです。同じアイコンの形を維持したいとは思っていましたが、単一の色に限定されずアイコンを黒色のパネルに張り付けることで差異の問題を解決できました。ローテーションは Apple design guidelines に準拠しています。

つまり、ローテーションが古くマウントによってアイコンが Dock でほかのアイコンよりも小さく見えるようになるというフィードバックは完全に正当なものです。

疲労 ¹

夏の半ばまでにアイコンの疲労が巻き込まれました。多くの繰り返し作業を行うことで、ついに現在の形になっていくと Insider の "プレリリース" デザインを確認しました。
プレリリースでは右下に hashed box が表示されます。

このハッシュは大きなサイズ (PowerPoint のスライドなど) でしっかり見えますが、小さなサイズではボックスが非常に洗い流されてアイコンがぼやけてしまいます。これに対し白、黒、オレンジ色と緑色と異なる色合いのアウトラインを試していました。
次に拡大表示したエッジを示します。

この問題を解決するために Windows 上で macOS バージョンのアイコンも試しました。これは単純に場違いのように見え、サイズの問題でさえも悪化しました。結果的にプレリリースのデザインを取りやめ Insiders に別の色を使用することになります。緑色が利用可能で、これはすでに Insider の色だったで私たちこれに決定しました。

完成、 Insiders:

アイコンの占有

VS Code が出てくる前 Azure App Service web apps をライブ編集できる完全にブラウザベースのワークベンチの Visual Studio Online Monaco がありました。私たちはこれを "Visual Studio Online" と呼んでおりアイコンが必要だったので Visual Studio Team Services から青い無限のアイコンを "借りました"。

私たちが VS Code を初めてリリースしたとき、すべてが素早く発生していてアイコンは懸念事項の中で最も考慮されていませんでした。あなたが新しいアイコンについて何を考えているかにかかわらず、デスクトップ上やタスクバーとドックで古いアイコンがとても悪く見えるのは本当に favicon であったからです。

その後、ファミリーで各プロダクトが独自の色を持つことに決めたとき VSTS は青色を維持したため、私たちは何か別のものを作成することを考え出す必要がありました。またアイコンは盗んだものだったので返すのが正しいようでした :)

パンプキンスパイス

この時点で、評判の悪いオレンジ色を除いてファミリーのパレットの色がほとんど使い果たされていました。Sublime Text のカラーパレットとの類似性について懸念はありましたが、テストしたときにはどこにも問題がありませんでした。そして正直に言って私たちは最新の Sublime が折り目のあるリボンを使用してることにもっと驚いていました。

多くのフィードバックがどうやって増えたかそれも早く

Insider build は上記に概説した問題を繰り返しながら約 2 か月間の間オレンジ色と青色のアイコンを持っており、多くの否定的なフィードバックは入ってきていませんでした。

おそらく私たちの懸念は根拠がなかったのだろう。ユーザーは新しいアイコンを望んでいたかもしれませんし、ほんの一握りの問題の悩みは眠れないほど心配されるものではないでしょう。そうして私たちは問題かもしれないことに光を当てないことにしました。変更をプッシュしリリースノートの新しいアイコンへの目立たない参照を作成しました。

まもなくすると issue とコメントがどんどん集まりはじめました。

(私は "badass-icon" を称賛しなければなりません。活動を見ていましたし、素晴らしいものでした。)

毎日コメントは追加され、それぞれ新しい興味深い方法で新しいアイコンの嫌悪感が表現されました。数日後フィードバックはきっと遅くなり、個々の問題に取り組むことができるようになるだろうと考えていました。でも私たちは間違っていました。フィードバックはやむことなくやってきます。新しい issue が開かれ、コメントは私たちが対応できるよりも速くやってきました。Hacker News、Visual Studio Magazine、高校の友達は FaceBook にコメントを投稿しました。驚くばかりです。

青色それが私たちの息子だよ！

私たちは今日彼を取り戻します。

Stable にオレンジ色のアイコンを導入した 1.17.0 をリリースしてから、開いている issue やコメントからすべてのフィードバックを見直しました。VS Code の Halloween release が多くの人にとってうまくいかなかったことは明らかです。これについて謝罪します。

私がこのブログを書いているのと同時に mdb07a がすばらしい貢献をしました summarizing the feedback and issues on Windows。多くの問題が取り上げられていますが、トップの問題点は次の通りです:

色の変化があまりに大きかった。オレンジ色は青色の反対色でこれが、前の方がよく見え、現在のを恐ろしいものに見させる。
透明性に頼って不要な余白を作成するフラットな単色アイコンは区別しにくく、識別性の問題を悪化させる。
新しいボーダーは非常に大きく太字であるため、以前の無限の記号よりも大胆になる。

macOS で最も流れるフィードバックは傾きが古いように見え、アイコンの重要な部分が Doc のほかのアイコンと比較して小さく見えるということです。

このフィードバックのすべては私たちが戻ることで、まだプロダクトのファミリーを作成しながら良い仕事ができるかどうかを確認するように促しました。結果として私たちは Stable のアイコンをとても愛された青色に変えようとしています。

これはステータスバーやエディターのほかのブルースでうまく整って見えます:

Stable と Insider の違いを見分けるのご難しい人のために Sim Daltonism app (Deuteranomaly) を使用する 2 つのアイコンも用意しています:

色を共有する複数のプロダクトが存在することは避けられないために VSTS と VS Code が青色を共有することはもはや懸念されません。

@.donysukardi のコメントに基づいて私たちは macOS の傾いていないアイコンを探求しています。これをやるとはまだ言えませんがこれを探求していくつもりで issue で最新情報を掲載するつもりです。

次に向けて

オレンジ色から青色に変更してもすべての問題が解決されるわけではありませんが、これは一歩前進です。私たちは図像学(アイコンの真意)がこれからも進化し続けることを期待し、家族の VS Code のために新しいアイディアを公開し続けます。

私たちはアイコンの変化がどのように進化させ、広がっていくのかについて強い教訓を学ぶことができました。ありがとうございます。オレンジ色のアイコンを気に入ってくれた人が、青色アイコンをより愛していることを願います。

Thanks,
Chris

hashed box effect についてよくわからないが、伸びてしまたったことを(金属)疲労として表したかったのではないか ↩

The Icon Journey [抄訳]