iA Writer と iA Presenter に新しいアイコンが登場しました。私たちは、知っているものに愛着を持ちます。だから、この 2 つの変更は少しショックかもしれません。そこで、その背景にある考えと作業を、全体像が見えるように共有したいと思います。
ここ 13 年のあいだに、アイコンはいくつかの段階を経てきました。ここ 9 年ほど、iA Writer のアイコンは会社ロゴにカーソルを付けたものでした。その前の 4 年は、独自の iA Sans に大げさなインクトラップを備え、i の点を A に合わせて下げた形に、青いカーソルを組み合わせていました。私たちはみんなそれが大好きでした。今でもそうです。
これは最初の変更ではありません。iA Writer アイコンの短い進化を見てみましょう。
透明版は短命でした。
しかし、その年の変更はこれで終わりではありませんでした。
その形は 4 年間続きました。次の変更が来るまでは。
ご覧のとおり、iA Writer のブランディングは、いつも青い caret を載せた白紙から始まっていました。Mac と iPad のすべてのテキストビューが黒い極細の caret だった時代に、私たちは青い、少し太めの caret を作ることにかなりのエネルギーを注ぎました。だからこそ、iA Writer はあの青い caret と強く結びついているのです。
Presenter の登場
それから、私たちは 2 つ目のアプリを作りました。アイコンを決めるのは、予想以上にずっと時間のかかるパズルでした。アプリアイコンは似て見えてほしかったのですが、用途の違いはきちんと伝えなければなりませんでした。新しい Presenter のアイコンは、次の iA Writer ロゴと一緒にデザインしました。最初のバリエーションのいくつかがこちらです。
私たちは、色付きカーソルを付けた P を使う、似たアプローチに落ち着きました。この投稿は第 2 部です。ブログ記事 Design Takes Time で示した第 1 部の終わりには、iA Writer の i も W に変えるつもりでした。いつか。たぶん。もしかしたら。
W| の問題
Presenter を出したとき、iA Writer を W| に変えませんでした。定着したアイコンを変えるのは、慎重な検討とテストなしにやることではありません。しかも、先ほど言ったように、私たちはあのアイコンにとても愛着がありましたし、今でもあります。その変更は予想以上にずっとつらいものでした。手放すのはいつだって簡単ではありません。でも、やらなければなりませんでした。
iA の横に P が並ぶと、どうしてもしっくりきませんでした。色付きカーソルだけでも Dock で iA が二重に見えてしまいます。見た目が本当におかしくて、窮屈すぎたのです。それに、AI と iA の件で混乱も生まれていました。何かをしなければなりませんでした。ならば、こうしてみては？
社内では、W と caret を組み合わせたさまざまなデザインを試しました。今では、Skype、Gmail、Instapaper、Goodreads、Netflix、Skype、Facebook、Pinterest のように、単一の文字をアイコンにしている会社がたくさんあります。ならば、なぜだめなのでしょう？
W で目立つものは 3 つあります。Wikipedia と WordPress。そして、私たちの古くからの宿敵、Microsoft Word です。私たちはいつも、MS Word 対 iA Writer、MS PowerPoint 対 iA Presenter という具合に、Microsoft の命名には少し含みを持たせてきました（ちなみに PowerPoint は元々 Presenter という名前でした）。でも W と青は近すぎます。
今や App Store には何百万ものアプリがあります。奇妙で、少し不気味な方向へ行かない限り、完全に独創的でいるのはほとんど不可能です。そして、名前もデザインも iA Writer に影響を受けた別の Markdown アプリたちも、caret 付きの W を使っています。
何かをしなければなりませんでした。両方のアプリに共通していて、しかも特徴的で、しかも違いを出せる何か。新鮮なものが必要でした。この冒険の、先に触れた第 1 部 で最初に思いついたのは、i と A を 2 つのアプリに分けることでした。
名前を speaker から presenter に変えたとき、その案はいったん取りやめました。小文字の A は、思ったほどよく機能しなかったのです。しかも Writer と Presenter に i と A を使うのは、少し賢すぎました。でも、振り返ると、その分割案には何かがあると感じていました。今やアプリには名前があり、使い方があり、見た目と手触り、特徴的な配色もあるのですから、その分割案をもう一度試してみることにしました。
書く、プレゼンするための記号？
シンプルな形を想像してください。用途には柔軟で、しかもすぐに見分けられる形を。画面で書くための記号と、スライドを見せるための記号を想像してください。単純で論理的な 1-2-3 のプロセスのように見えたものは、実際には何週間も何か月も、何年もかけて進化していきました。
ここから、Warner Bros のロゴやゴルファーの P のように、これらの部品で文字を作ることもできます。私たちは以前にも、そちら方向の試みをたくさんしてきました。たとえばこんなものです。
でも私たちは、もっとシンプルにして本質にたどり着きたかった。さて、考えてみましょう。書くことには caret があります。では、プレゼンは？ プレゼンテーションは再生ボタンを押すところから始まります。なるほど！
Writer 用にはすでにこのアイコンがありました。単純すぎて、緊張感がありませんでした。それに、昔の Mac の終了ボタンみたいでもありました。そこで、緊張感と個性を出すために左へずらしました。
つまり、Writer の caret は i と caret（I）を受け継ぎます。A は、Presentation Mode に入るときに押す play の三角形に変わります。色は元の Writer Blue から来ています。Presenter の配色は、カーソルとスライドの色が変わる時代の配色に戻っています。何百もの反復と行き止まりのあとで、ようやく形が見え始めました。
iA Writer には、もう少し奥行きが必要でした。ちょうどいい影の明るさを見つけるのは、予想以上に難しかったのです。caret は小さくて単純すぎて、3D 的な工夫には向きません。青い物体のまわりの影は、にじんで見えます。
Presenter では、色の調整にもう少し手間が必要でした。まずは、実物がどう見え、どう働くのかを理解するため、ライトスイッチをさまざまなグレーで作りました。
触ったときの感触や、影がある／ない場合の印象など、私たちは形而上学のようなことまで議論しました。影、幾何学的なサイズと視覚的なサイズ、グラデーション、色、角丸、ライティングの概念を、終わりなくいじりました。ちょうどよく仕上げたいという執念は、理屈をはるかに超えていました。
シンプルさは決して簡単ではない
私たちは、主要な反復をすべて、さまざまな文脈で設計し、テストしました。アイコンを Springboard や Dock、ライトモードとダークモードで、並べたり単独で置いたりしました。Figma の中でも、実機の上でも。Apple の最新で最も強いアイコン、そして最も弱いアイコンの背後にある設計原則も見直しました。次の比較は、iOS のアイコンが一般によりシンプルで、よりフラットでありながら、完全にフラットではないことを示しています。最新の Apple Maps アイコンにも、iOS では控えめな影があることに注目してください。
私たちは観察し、比較しました。どちらのアイコンも目立ちつつ、使用する主要プラットフォームの一般的なデザインにきちんと馴染むようにしたかったのです。Apple の基本アイコンを、見たことがないつもりで眺めてみてください。何に気づきますか？ そう、とても、とてもシンプルなのです。
Apple のしばしばむき出しのようなシンプルさは、意図的です。iOS のアイコンは私たちにこう伝えます。これは あの 電話、タスク、ヘルス、ノート、ブックのアプリだ、と。少し大胆に聞こえるかもしれませんが、正直なところ、私たちも自分たちのアプリにそれを望んでいます。デフォルトの執筆アプリとして、そしてデフォルトのプレゼンテーションアプリとして。
Apple の中核アプリのようにシンプルにするには、かなりの自制と勇気が必要でした。派手さ、影、ぼかしを足すほうが、それらを取り除くよりずっと簡単なのです。:-)
私たちはローカルで Icon Slate という小さな優れたテストアプリを使ってアイコンを試しました。そして、900 人のベータテスターとのあいだで主要な反復を何度も行き来させました。みなさん、本当にありがとうございます。その一方で、iOS の新しいダーク版とモノクロ版にもいくつかの驚きがありました。
新しいアイコンは、色や背景の使い方に柔軟です。Presenter の逆光の三角形は、版や文脈によって色を変えられます。Writer のアイコンはそれほど強いので、caret を足すだけでビジュアル全体をブランド化しやすくなります。
オブジェクトモデルはこうです。Writer の caret は物理的な物体です。Presenter はライトスイッチです。ライトが点いていれば、スイッチが見える。ライトが消えていれば、スイッチが光る。オンにしたときには、色がかすかに見えます。
ええ、Apple Intelligence や多くの AI アプリにもあります。ええ、でも Presenter には、その青から黄色へ移る色のスペクトラムが何年も前からありました。そして、それにはきちんとした理由があるのです。そもそもアプリアイコンに完全な独創性などありません。
味わい、試し、そしてそのあとで 判断する
私たちは、2 つのアイコンを同じ週に公開したかったのです。そうすれば、並んで見えたときに衝突しません。理想を言えば、2 つの大きなアップグレードを同時に見せたかった。でも、ひとつの大きなアップグレードを調整するだけでも大変です。だから、どこかで踏み出すしかありませんでした。
大きな変更ではありますが、それが必要だったのと同じくらい慎重だったことを、理解してもらえればと思います。もしアイコンが初めてなら、手間をかけて作られた料理を味わうように、じっくり試してください。そして、[email protected] で感想を聞かせてください。
