デザインには時間がかかる

iA Presenter を iA Writer と並ぶ存在として位置づける作業は、UI 開発と歩調を合わせながら進めた3年がかりのプロセスでした。デザインには時間がかかります。ここでは、その流れ、学んだこと、どこまで到達したか、そしてその結果みなさんが何を得られるのかをご紹介します。

1. 最初のアイデア
2. 名前がなければ、アイコンもない
3. 名前と UI を一緒に試す
4. UI とアイコンを調和させる
5. 結論

上の動画は、デザインプロセス全体をタイムラプスでまとめたものです。ここにあるのは、私たちが見つけられたすべてのバリエーションです。順番は、おおむね時系列になっています。ここに並んでいるのは、この3年間で作成したデザインのおよそ半分です。以下の記事で、そのプロセスを説明します。

1. 最初のアイデア

現在、iA Writer は基本要素として文字「iA」とキャレット記号を使っています。キャレットは「Writer」を表しています。iA Writer と iA Presenter の両方のアイコンに2つの iA を使うと、見分けがつきにくくなることは、すぐに明らかでした。

iA Presenter の中心的な考え方は、ストーリーに焦点を当てることです。アイコンでキャレットの代わりに吹き出しを使うのは、当然の選択のように思えました。アプリ内で吹き出しを使う発想も、アイコンについて考えるところから生まれました。

より濃い青なら、アイコンにもっとコントラストを出せます。iA Writer のロゴを二つに分けるのが、次の論理的な一歩でした。「I」と読めるキャレットと、吹き出しのように見える小文字の「a」を使うのです。

以前、iA Writer にはキャレットだけのロゴを使っていたことがあります。賢い感じはありましたが、何を意味するのか誰にも伝わりませんでした。賢すぎたのです。とはいえ、この2つのアイコンを並べると、大文字小文字を逆にした I と a のように読めます。賢すぎるより賢いものって、何でしょう？　賢すぎる、どころではない？

これで2つのアプリ名は、「I」と「a」で始まるように見えてしまいます。それでは、さほど賢くありません。私たちは社内では何年も iA Writer を iAW と呼んできました。iA Writer に独自の文字を与えるなら、それは「W」でしょう。そしてもう一方のアプリには、最終的な名前が示す文字を与えるべきです。では、その名前はどう決めたのでしょうか。

2. 名前がなければ、アイコンもない

冒頭のアニメーションで入れ替わる文字がすでに示していたように、このアプリの名前は開発中に何度も変わりました。さまざまな段階で、iA Verve、iA Speaker、iA Explain、iA Express、iA Stories など、他にもたくさんの、気取った、クールな、そしてばかげた名前を試しました。

同時に、iA Writer が持っているような、一般的で分かりやすい命名を保ちたいとも考えていました。「Writer」は、アプリそのものと、その対象ユーザーの両方を表しています。姉妹製品としては、新しいアプリも iA「何か」と名付けるべきだと明らかでした。理想を言えば、その「何か」は「Writer」と同じくらい直接的であるべきです。ありのままを呼ぶなら、「iA Speaker」が先頭に立ちました。

製品に与える名前は、いつでも影響を持ちます。アプリを「Speaker」と呼ぶと、私たちは音楽やコンサートを連想するようになりました。社内コミュニケーションでは、有名なポップソングの曲名や歌詞を使い始めました。この発想は、命名とデザインの変更をくぐり抜けて残りました。iA Writer のコミュニケーションを見ていくと、音楽にまつわる参照がたくさん見つかります。¹

3. 名前と UI を一緒に試す

アプリ名に含まれる「Speaker」という単語が、スピーカー機器のことだと誤解されるのではないかと心配していました。しかし、ユーザーテストではその懸念は杞憂だと分かりました。私たちは名前とアプリを一緒にテストしました。アプリを実際に使ってもらわない限り、名前だけを試すことはできません。振り返れば当たり前ですが、命名と名前のテストは普通別々に行われるので、そこに気づくまで少し時間がかかりました。

文脈があるので、「iA Speaker」がスピーカー機器であり得ないことは明らかでした。アプリはスピーカーにはなれません……

しかし、別の問題もありました。アプリをテストするなかで、人々が「iA Speaker」をスピーチを作るためのアプリだと受け取っていることが分かったのです。私たちは、プレゼンテーション全般をもっと良く作れる方法を提供したかったのです。スピーチを強調すると、このアプリは、伝え方ではなく「何を言いたいか」に焦点を当てていることが伝わります。

この名前は誤解を生み、フィードバックも偏らせました。 ほとんどのテスターは、このアプリが TED 風のトーク専用だと想定し、あらゆる機能やラベルをその前提で解釈しました。私たちが、アプリは主に従来型のプレゼンテーションに使うもので、テレプロンプターは任意だと説明しても、印象は変わりませんでした。そこで、名前がどれほど影響しているのかを検証し、新しい名前を試しました。

新しいアプリを作るときは、クールで特別なものにしたいので、名前にもクールさや特別感を求めがちです。「iA Verve」「iA Flow」「iAX」みたいなものです。なぜ X なのか？「製品を iAV、iAW、iAX、iAY、iAZ と名付けることもできる」。でも、クールで特別なアイデアが、いつも明快なアイデアとは限りません。 人々は顔をしかめ、まるで水銀カクテルを断るように、それらを退けました。ええ、「iA Quicksilver」も私たちの頭をよぎりました。「Verve」は、とくに嫌われました。

理解しにくい名前をテストしたことで、興味深い副次効果もありました。「Presenter」という語を出していないのに、多くの人がそれを「Presenter」や「発表用アプリ」と呼ぶようになったのです。 iA Writer を知らない人でさえ、話すときに「あなたの Presenter」と言うことがありました。これは「iA Speaker」のときにも起きていました。

ただ「iA Presenter」と呼ぶ案は、以前から何度も私たちの頭をよぎっていました。ただ、少し単純すぎるように思えたし、長くて引っかかる感じもありました。「iA Present はどうだろう？　また -er で終わる名前である必要はないよね」と。

「iA Presenter」あるいは「iA Present」という名前に含まれる「present」には、複数の意味があるのが気に入っていました。「present」は、プレゼンテーション、贈り物、話し手と聞き手が共有する存在感、あるいは私たちが話し、聴くあいだに共有する時間を指せます。良いプレゼンテーションは、贈り物のように感じられます。一方で、悪いプレゼンテーションは、ご存じのとおり、私たちの時間を奪っていきます。²

「iA Present」のアイコンは、プレゼンテーションを贈り物として捉える発想を表しています。このアイコンは、アプリを起動するたびに少しだけ形が変わるように設計されており、驚きと変化の要素を加えています。私たちのアプリで作るプレゼンテーションは、聴衆が注いでくれる時間と注意に見合う、かけがえのない贈り物 のようであるべきです。

残念ながら、この時点でアイコンは iA Writer のアイデンティティとほとんど共通点がなくなっていました。それでも、私たちは新しい名前と一緒にアプリをテストしました。新しい名前によって、ユーザーの発想や機能の理解がどのように変わるか、そして本当に変わるのかを注意深く観察しました。 仮の名前は、製品について私たちがどう考えるかに影響します。アプリの名前は、そのアプリをどう認識し、どう使うかにも影響します。まして、それが初めて聞く新しいアプリなら、なおさらです。

「iA Present」という名前を使うと、テストユーザーはシンプルで分かりやすいプレゼンテーションアプリを期待してアプリを開きました。まさに私たちが狙っていた通りです。³ 「iA Present」という名前はアプリにとてもよく合っていましたが、それでも多くの人は依然として「iA Presenter」と呼んでいました。

4. UI とアイコンを調和させる

スライドを扱うアプリだったので、私たちは異なるレイヤーを使う実験をしました。

<img src=”https://static.ia.net/2022/12/Presenter-Gradients.webp” alt=”色のグラデーションを特徴とする iA Presenter のサンプルアイコン” class=”wp-image-13201” “=”“>

共通の識別子として「iA」を使う代わりに、キャレットを iA Writer と iA Presenter をつなぐ統一要素として機能させることにしました。Presenter は Writer よりも視覚的なアプリです。グラデーションのある多色のカーソルなら、そのことがはっきり伝わるはずだと考えました。 次に浮かんだのは、「アイコンに使うなら、アプリ内にも必要だよね！」という発想でした。もちろんです。こうして、アプリ内でも多色のキャレットと色付きの吹き出しを試す実験が始まりました。

<img src=”https://static.ia.net/2022/12/Presenter-Layer.webp” alt=”色のレイヤーを使った iA Presenter アプリアイコンのサンプル” width=”1536” height”=”” class=”wp-image-13203”>

この重要な UI 要素のアイデアは、アイコンのデザイン反復から生まれました。私たちは、アプリ内でグラデーションカーソルを使う案をテストしました。実際には、ほとんどの人がそれを煩わしいと感じました。

次に試したのは、プレゼンテーションが進むにつれてカーソルと吹き出しの色を徐々に変える方法でした。最初は冷たく（青）、クライマックスに向かって熱を上げ（赤）、最後は金色の光で締めくくる（黄）。このアイデアは技術的には難題でしたが、うまく機能しました。結局のところ、難しかったのは技術面だけでした。動的に変化するカーソル色と吹き出しが、具体的にどのように実現されたのかは、また別の、とても長い話です。

最終的に、アイコンにはやはりグラデーションのキャレットを使うことになりました。アプリの視覚的な性質を伝えつつ、進行に応じてカーソルの色が変わることも思い出させてくれます。

グラデーションはアプリの視覚的な性格を伝えると同時に、進行に応じてカーソルの色が変わることを比喩的に思い出させます。

今後 iA Writer のアイコンを変えるかどうか、またどう変えるかはまだ未定です。一貫性は、強いブランドアイデンティティの鍵です。しかしブランドづくりは、厳格なルールに従えば済むほど単純ではありません。ブランドは有機的に成長し進化し、ときには不一致すら望まれます。iA Writer のアイコンを再評価する作業は、まだ終わっていません。

多くの場合、最終的には最初のデザインの変形に行き着きます。来年を予定している次のバージョン、iA Writer 7 で iA Writer を見直していくと、結局は出発点に戻ることになるかもしれません。

<img src=”https://static.ia.net/2022/12/The-beginning-is-the-end.webp” alt=”iA Writer と iA Presenter のサンプルロゴ” width”=”” class=”wp-image-13278”>

5. 結論

アプリアイコンのデザインは、複雑に絡み合ったプロセスです。急いだり、安易に外注したりするべきではありません。理想的には、アプリ全体の開発に組み込むべきです。UI デザインはアイコンから着想を得られますし、その逆もまた可能です。⁴ 名前やアイコンのアイデアも、アプリと一緒にテストして、きちんと理解され、効果を発揮するか確かめることができます。

良いデザインには時間と労力がかかりますが、デザインを理解し、明確にするために使う時間は無駄ではありません。正しく仕上げるには時間がかかりますが、その結果として、より効率的な製品になり、最終的にはその製品やサービスの利用者の時間を節約できます。少人数のデザイナーが数か月かけて慎重に製品を考え抜いたとしても、その成果は、何十万人もの人々の時間を何年にもわたって節約する製品やサービスになり得ます。

私たちは、シンプルで効率的なアプリを設計するために、かなりの時間を投じました。アイコンは本筋から外れた脇道ではなく、全体のプロセスに不可欠な一部でした。アイコンと UI を一緒に開発したことで、発表する人とその聴衆の両方の時間を節約する、より効率的な製品を作ることができました。始めた当初は、そこまで考えていませんでした。しかし、皆さんから寄せられたフィードバックによって、それこそが iA Presenter の最も際立った特徴なのだと明らかになりました。従来のプレゼンテーションアプリと比べて、どれだけ時間を節約できるかを、皆さんが何度も教えてくれています。