[&] Evernote's UI Design

Evernote クリエイティブディレクター Gabe Campodonico 氏によるデザイントーク

Gabe Campodonico Design
http://www.gabecampodonico.com/

From Logo to UI
Gabe Campodonico

みなさんようこそいらっしゃいました。
それでは自己紹介からはじめます。

もともとグラフィックデザインからはじめています。
ポスターや本からはじめて、
じょじょにWebサイトにうつってきて、モバイルにうつってきた。
スペシャリストではなくジェネラリスト
どうやってブランドを表現するのか試したかった。

Brand Experience とは？

Coca Cola
Disney
Apple
HP
Nike
というブランドを担当することができました。
一つではなく、いくつものプロジェクトにかかわったのは
APple でした。社内の中から、アプローチは？
開発の哲学を学ぶことができた。

Apple
Retail -> Packaging
そのチームになった時期、
新しいミリアードというフォントに切り替えようと
していた時でした。
これは単にフォントを変えることだけではなく、
デザイン言語を刷新しようという時代でした。

その当時 Apple Store のデザインとパッケージングを担当していました。
いろいろなものが Apple Store にはあったのだが、
それらを再構築してどう見せるのか考えるのが私の役目でした。
私自身、銀座の Apple Store に多くかかわりました。
銀座はアメリカ国外で初めての Apple Store です。
昨日初めて訪ねることができました。

Apple Store の基本となる考え方として、
単にモノを売るお店ではないお店ではありません。
商品を買ったあとにもサービスを提供するところです。

どうじにやっていたのはパッケージングでした。
最終的に出来上がったものはクリーンでシンプルなものでした。
5人のデザイナーが50のデザインを検討してここにたどり着いています。
シンプルにたどり着くのが一番難しいことです。

Evernote
Logo → UI
今は Evernote で仕事していますが、社内で色々なものを見る
経験をしています。Apple との違いは
全くの白紙からデザインすることができました。

Developing the Evernote Logo
1% inspiration 99% perspiration
非常にシンプルなものを生み出すには努力がいる。

できるだけ多くの情報を得ます。
社員と話して、
何に熱意を持っていて、何を目指しているのか情報を得ます。

最初から編集してはいけない、
手広くいろんな人からの情報を集めなければいけない。
いろんなアイデアを考えました。

Evernote は「永久」ということが重要になります。
いったんそこにデータが記憶されれば、「永久」になるということ。

もう一つの Evernote の価値はノートがたくさんあることでした。
ひとつひとつではなく、全体として集合した時に価値が出ると考えました。

非常にシンプルなものも候補にありました。
最終的には企業が普通に使っているものと考えられ、

で、「ゾウ」非常にユニークで、差別化できるものという感じがした。
英語でのことわざに「象は決して忘れることが無い」というのがあり、
象という象徴はとても良いものに思えました。

象はいいなと思ったのですが、似たロゴがありました。
共和党のロゴがとても似ていました。
アイデアはいいのだが、全く違う象のロゴにしなければいけなかった。

そのアイデアを中心に、どう実行するのか様々なパターンを考えました。

はじめは幾何学的なアイコンにしようと思いましたが、
「くじらだ！」という人もいて、
細かいところまで書き込んだものにしました。

キバがついたものは恐ろしいという印象もあり、
その中間のものにしました。
幾何学的でもなく、現実的でもない、ラスタライズしたものにしました。

共和党に見えないように、目の星をけして、
赤とか青を使わないで、さらに努力を重ねて、非常に良いものになりました。

色を何色にするか？
象は灰色だからグレーで良いだろうというのが決まりました。

他の色をどうするか？
他のハイテク会社を見ると、赤とか青ではダメだということになりました。
ほとんどの会社はそれらの色を使っていたからです。
最終的にグリーンにしました。
グリーン = 自分たち　となるから。

ロゴを作るときに難しいのは、シンプルが良いのは確かなのだが、
あまりにシンプルにしてしまうと、つまらないものになってしまう。
ToDo 関係のアプリを見ると、多くの人がチェックマークを使っている。
ですから、チェックマークを使うのは、シンプルだが差別化できない。

このような罠に陥らない方法は
二つのアイデアを組み合わせる方法です。
一つ目は象。「象は決して忘れない」
もう一つは、ドキュメントのようにページの耳を折るのを混ぜて、
象の耳を折ることにしました。
シンプルではあるが、もう一つの意味を込めることによって、
覚えやすくなります。

ちょうど流行っていたスタイルは、
このような今流行のスタイルに乗ってしまうと、
流行が去ったあとには、とてもつまらないものになってしまう。
特別なデコレーションが無くても、
長年にわって使えるものが求められている。

ビジュアル的にも非常に協力で、色もユニークなロゴができました。
Lion Apple Store の紹介の時に必ずEvernoteのロゴが使われていました。
キーノートの時にも紹介されたのです。
グリーンのロゴはEvernoteだけです。
Chrome AppStore, Amazon AppStore でも Evernote のロゴが
使われています。
行く先々で考えもしなかったところで使われていることがあります。

Packaging
Opportunities to build the brand
普段考えないようなことを提示します。
この商品の箱の外は、たいてい機能や、細かい情報を載せます。
しかしApple では、箱そのものが広告にならなければいけないということです。
商店街で歩く広告塔になってもらうのです。

それから箱を開けた時の感覚です。
商品は買って終わりなのではなく、
やはり何かを与えたいと考えました。
パッケージを開けた時にワクワクしながら箱をあけられるものにしました。
イヤなセットアップのことを考えること無く。
こういったことによって、商品が特別なものであると
考えることができます。
これまでも宝石やお菓子で使われています。
これは日本が秀でているのではないでしょうか？

Branding and UI Desing
UIにおけるブランディングはビジュアルだけだと思いがちです。
それは理解しやすいのか？
反応が素早いのか？
安心できるのか？
満足感が得られる？
人々が覚えてくれるということについて、重要な要素です。

Evernoteは
全てのプラットフォームでマッチングするよう設計しています。
Mac, Windows, iPhone で全て同じ見せ方ではなく、
おのおののプラットフォームに一番マッチングした形で
見せようと思いました。
このようなビジュアル効果だけではなく、インタラクションも含め、
プラットフォームごとに作っている。
それは、チャンスを得ることになるから。

iPhoneが最新バージョンに切り替えた時に、
Evernote も新しい機能を加えました。たくさんのものが見られるようなUIに。

iPhoneではナビゲーションバーのブルーボタンを押すだけでなく、
視覚的に覚えてもらえるように、別のデザインを採用しました。
それ意外は標準に従ったものです。

Less is More
機能をどうするか？
私はソフトウェアは作家が本を書くのににています。
作家は何千ページも下記、何ページも削って、最適な300ページにします。
適切なページにする作業が大切なのです。

ftp のツールですが、カオス状態なものがあります。

落とし穴があります。

こうやって実行した方がいいのか？違う方法がいいのか迷った時に、
ユーザーがどちらか選ぶだろうと思ってしまう。
なにが最適なのか自分たちで選択できないと、うまく行かない例になる。
もう一つの間違いは、ボタンの置く場所が無い時に「メニューにいれてしまえ」と
それは実は重要な機能では無いのではないかと考える。

もう一つの罠は、競合他社よりも多くの機能を入れると
勝ったような機能になることです。
機能を足していくと、膨大なむくんだソフトウェアになってしまいます。
新機能を加える時にどれを選ぶか？初心者のことを忘れて上級者のことを考えてしまう。
対処を初心者／上級者で考えるのではなく、この機能はコアの機能なのかを考えて
入れるようにする。誰でも喜ぶようにではなく、
必ず機能に優先順位をつけること。
シンプルなものからはじめ、あとから付け加える余裕を持つ。

UIデザインのアイデアが生まれてくるものはモバイル。
特に iPad はすごい。
イマーシブインタフェース、とFluid インタフェースに関して紹介します。

Immersive Experience
UIを見せることを避けて、コンテンツそのものを見せることに集中することです。
何かを読もうとする時に、読もうとうテキストだけが目に入るように。

これは激しくUIが強調された例です。
これに近い例はよくあります。
Webの中で中身よりも UI領域の方が多いということです。

なぜこんなことになるかというと、ソフトウェアの開発者は
機能を追加することが仕事だと思っている。
コンテンツを作っていないが為にそう思ってしまう。

そこで iPad が理想的な Immersive Experience を提供します。
これは写真立てのようなもので、UIは最低限にします。

Fluid Interface
なんのためか？
自分がどこに居るのかはっきり分かるようにするものです。
ひとつ例をあげると、初めて行ったところで地下鉄に乗ります。
地上に出たら、どっちの方向からきたのか全く分からないと思います。
普通は人は移動する時に建物を見ながら理解しながら移動するが、
地下鉄だと全く方向がわからなくなります。

Fuild Design な何を解決しようとしているのか？それは
ナビゲーションです。どこから来たのか、どこにいるのか、
どこにいこうとしているのか？

二番目の問題は、自分の作ったファイルがどこにいってしまったのか分からなくなること。
例えばドキュメントのオープンとセーブ、
どこかにセーブしたのだが、どこにセーブしたのか分からなくなってしまう。
なぜそういう分からなくなってしまうのか？
もともとコンテンツはどこから発生したのか、
どういう気持ちで分類したのかわからなくなっていまうから。
Fluid Design というのは一つのビューから他のビューに移動する時に、
移動する履歴を残して行くというものです。

Twitter for iPad クライアント、全てのものを同じ場所に取っておくということをします。
ただ単に上にページが乗ってくるので、
どういう経緯でコンテンツにたどり着いたのか分かる。

iPad の標準のフォトアプリ、本物の写真を扱っているかのように扱えます。
あけると横に広がる。クローズするとアニメーションしながら元の位置に戻ります。
コンテンツがどこから出てきたのか？どこに戻るのかちゃんとわかるようになっています。

Fluid デザインの目的はコンテンツとコンテンツの間がどうなっているのかを
はっきりと見せることにあります。
これまでの考え方は、いかに早くあけたり閉めたりできるようにしますが、
どこから来たのかどこに行くのか記憶することができます。

Q&A
Q. モノ作りをしていると自分が作っているものに入りすぎて視野が狭くなると思うのですが、
　俯瞰でみる、冷静に見る方法はどのようにされていますか？
A. 少し下がってみるということです。
　少し一回下がってみると、近い時には気づかなかったことが明らかになります。
　それともう一ついい方法は、他の人に見せるということです。
　他の人はそのことを深く考えているわけではないので、いろいろな意見が聞けます。

Q. ロゴやデザインを選択する時のプロセスは？インタビュー？アンケート？
A. ２つ段階があります。
　まずは、できるだけ多くのアイデアを出して、まずは自分でその中から選択します。
　それを最終的に決定権のあるチームに見せてきめます。
　外部の人間に見せるよりも、社内で決める。
　あまりに多くの意見があるのもよくない。
　社内の意見にとどめる危険性もあるのだが、私たちは良いものに決まると考えている。

Q. デザイナーとして一番難しかったことはなんですか？
A. 私にとって難しいのは同じことを何度も何度もやること。
　ルーチンだと感じる時は、クリエイティブ性が無くなってきます。
　自分がわざわざやる分野を変えるのは、クリエイティビティを刺激し、いろいろ学べるから。

Q. 自分のセンスを持っていて、意見が割れる時はどうする？
A. だれかが決める役割を持っていると考えています。

Q. Evernote とテクノロジーの活用について
A. テクノロジスト達とも話をしています。
　クリエイティブチームの一員として関わります。

Q. Evernote のロゴを作る時に、象が決まって、ページの折り目が決まり、
　長く残るロゴを決めるときに求めたものは？
A. 最終的に還元してシンプルにした時に面白くて、人が覚えてもらえるものになること。
　ToDOのチェックマークは、スタイルを取り除くと結局チェックマーク
　白黒にした時にも

Q. Evernote を使っていますか？　Tips は？
A. 考えずに、とにかく何でも放り込んでしまいます。

Q. 中に入っているノートが多くなってきて、見つけにくく課題を持ってきた時、
　どう解決しますか？
A. ノートをどう見つけやすくするかというプロジェクトを立ち上げると、
　UX, Visual Desing, エンジニアを組み合わせる。
　この３つの方向性で考えると、解決方法が見つかるはず。

Q. これまでおこなった変更の中で、UXが悪くなったものはありますか？
　多くのプラットフォームがある中でどうやってテストしますか？
A. たいていは、間違う、見逃すのは小さいことです。
　そういった中で、iOSのバージョンアップがあった時に、表示方法として
　テキストノート、画像とテキストノート、画像ノートの三つがありました。
　その時に、画像ノートには画像が入ればいいと考えて作っていました。
　しかしそれは悪いアイデアで、ユーザーは画像に細かいタイトルを記入しているのだが、
　画面で全く見られないという具合になってしまった。
　非常に素晴らしいβユーザが居て、変なことがあるとすぐにフィードバックがある。
　それを聞いてすぐに改善するようにしている。

Q. アイデアを考えている段階で、数を出さないといけない、質を高めていかなければいけない。
　数と質のどちらに重きを置くか？
A. プロジェクトの段階によって、変わる。
　はじめの段階は、数を出す。その中で悪いものがあったとしても、アイデアの元になる。
　後期の段階は、質を重視する。直感的にジャンプするには数がいる。

Q. Evernote 意外で「やられた！」を思ったアプリは？
A. iPhone の中に 200個以上のアプリが入って、いて、色々試しています。
　今週のお気に入りのようにどんどん変わっています。
　特に Path が素晴らしい。Twittelator も素晴らしい。Fluidインタフェースが素晴らしい。
　直感というか、インスピレーションを得るにはなるべく多くのものを見ること。

Q. プラットフォームごとに良きものにしなければいけないのは？スタンダードに統一するのではだめなのか？
A. 一貫性が無いことを心配するのは分かるのですが、ほとんどの人は
　iPhoneとMac, Android と Windows などという組み合わせで使っている。
　Android と iPHone が違っていることは気にしていない。

Q. Apple や Nike で働くのと、Evernote で働くのとどういう違いがありますか？どちらが好きですか？
A. Apple の時は小さい規模のデザインチームで仕事していたので小さい会社で働いていたのと同じ。
　いわゆる大企業で働いた経験は無いというと。

Q. これまでいろんなタイプのデザインを経験して来た上で、次に挑戦したいものは？
A. ありません。
　いろいろと先の計画をたてるタイプではないので、
　目をしっかりあけていると、何かやってくる。
　Evernote も話が来て、やりはじめた。次はわからない。

Q. βユーザからのフィードバック。何をどれくらい気にしている？
A. 実際にフォーラムに投稿されたものを読んでいます。
　多くの人が言及しているもの、より多くのケースに対するものが重要視されます。
　特定の操作、特定の用途だけの場合は、優先度は低くなる。
　特定のテーマを集めて、数を数えている。
　最近 Google Analytics を使い始めて、トラッキングできるようになったので、
　これからいろいろ分かるだろう。

Q. UX, iPad ではコンテンツを前に持ってくることを言っていたが、
　使い方を色々やってみることの他に、文章で教えるという使い方もあるが？
A. 考え方としては、必要な時に必要なだけ情報を出す。
　最初のユーザーには最初に一つノートを作るまではいろいろガイドするようにしている。
　リストの下にタグで説明している。たくさん作ると、タグが見えなくなるのでよい。