本記事の原文はNutanix社のProduct Design DirectorのJeremy Sallee氏によるものです。
原文を参照したい方はCASE STUDY NUTANIXをご確認ください。情報は原文の投稿時のままの情報ですので、現時点では投稿時の情報と製品とで差異が出ている場合があります。
当社のNutanix社製品についてはこちら。
Nutanix製品の優れた部分はインフラストラクチャの高度な自動化や優れたソフトウェアアーキテクチャによってもたらされていることはもちろんですが、Nutanixのもう一つの魅力はその優れたユーザーインターフェイスであるNutanix Prismです。
Prismにどんな思いが込められているのかを表したビデオに字幕を入れさせていただきましたので、合わせて御覧ください。
今回は、そのPrismがどのようにして生まれたのかを解説した記事をお届けします。原文が非常に長いので分割しての投稿になりますが、ご容赦ください。本シリーズの過去の投稿はこちら。
2013年4月～8月 完全な再設計
エンジニアによるライブデモや私のスケッチブックのワイヤフレームで一週間ほど試行錯誤した後、私はユーザーインターフェイス内のパターンを見つけることをはじめました。サブメニュー、テーブル、タブ、ボタン、ポップアップなど、再利用可能な要素がいたるところにありました。既に動作しているアプリケーションもよく動いていました。ですが、ユーザエクスペリエンス上の問題を幾つか変えており、ユーザーインターフェイス上で明らかな変更を加えるべきレベルでした。そんな中でもエンジニアリングチームは、そうした製品の複雑さを覆い隠してくれるような良い仕事をしてくれました。
次なるステップはもっと直接的なものでした。ユーザーインターフェイスのメインページを完全に書き換えることです。まず最初に行ったのはスタイルの置き換えです。その後、文字、色、そしてデータを取り扱うプロダクトにとってもっとも重要なナビゲーションへと手を入れていくことになります。
スタイルも直接的なものとなりました。インターフェイスに必要とされるのは複雑性や重さではなく、最大限のシンプルさです。このためにデザインは最小になるまで、完全に削ぎ落とされました。背景色、セパレーター、パターンなどを最小化するのです。フォーカスされるべきはデータです。色はこの点でももっとも重要な要素です。事実として、ITの製品において赤色と黄色と緑色はアラートやステータスのために予約されています。そこで私はモノクロームと青色系の色を基本構造として取り込むことに決めました。そして、ハイライトには強調色を利用します。
ほんの僅かばかりですが、｢楽しさ｣の要素を入れるため、Proxima Nova Softフォントをメインの文字にすることにしました。もちろん、大真面目ですが、この不思議で丸みを帯びた見かけは特別な利用感を醸し出すことになります。小さな文字においても同様です。
色と文字をバッグに突っ込んで、私はデザインをはじめます。まる一ヶ月ものデザイン、繰り返し、emailやライブでのフィードバックを経て、更にユーザーインターフェイスを理解するための｢教え｣のためのセッションをエンジニアとともに幾度となく行いました。私は常にいつも同じデザインという考え方を堅持しました。私は何を創っているのかということを理解しておく必要があります。もしそれがブレてしまえば｢ツールや機能｣を実際に動作するインターフェイスに落とし込むことは簡単ではなくなり、結果として非常に複雑なものが出来上がるでしょう。こうした月日の間、幾つかの固定されたインターフェイスからはじめました。そして、高い一貫性をもたせながら、既存のユーザエクスペリエンスのワークフローに手を入れていったのです。
最初に着手したのはタイル表示のページで、その後、テーブルページへと手を進めました。これら2つはアプリケーションやユーザーインターフェイスの要素で繰り返し出てきます。ここから初めることに疑問はないでしょう。多くのワイヤフレームを作成することはせずにすみました(ユーザエクスペリエンス機能の改善にかかわらう部分以外では)。殆どのページはライブデモの中に含まれていたからです。
以下は初期のページのデザインです:
そして、最終的なデザインが以下です:
デザインの90%の準備が整ったところで、注力をインテグレーションへと移し始めました。ほとんどすべてのカスケーディングスタイルのコードは直接CSSとして実装されていました。私の最初のタスクはチームをより強力なCSSのコーディングスタイルへと導き、ピクセル毎に完璧に実装していくことです。我々は｢少ないこと｣を選択しました。私は次の2ヶ月を費やして、チームが健全で｢少ない｣構造で、フォントファミリのウェイトや色や、繰り返し利用されるボタンやUIの要素の論理的な機能が一貫性を持つようにしました。さらに、開発者と充分な時間をともに出来るように過ごすようにしました。多くの時間を彼らの横に座って過ごし、psdをどのように読み込むのかという知識を授け、そこから得られる重要な情報を展開し、それをスマートなhtml/cssの実装へと変換していったのです。
このインテグレーションの手順で私はアイコンフォントも作成しました。過去に私はこうしたアイコンが多く登場するプロジェクトを手掛けたことが有りました。技術が進歩し、レティーナ(網膜解像度を上回る)ディスプレイがどんどん利用されるようになり、私はインテグレーションのワークフローを計量なアイコンフォントを利用することに切り替えることにしました。これはいくつかの不便さを伴いますが、結果は素晴らしいものになりました。コード内に翻訳が簡単で、アイコンのサイズや色を変えるのはそよ風が吹くようにとても簡単です。40種類もの大きさや色が異なるアイコンを多く用意する必要がなくなったのです。マウスを上に持っていくことや、その他の操作で異なる色に変わるという操作もスムーズになります。画像を使うとこの点もいろいろとプログラミングが必要だったでしょう。
記事担当者: マーケティング本部 三好哲生 (@Networld_NTNX)
さて、Nutanix Prismについての記事の第2段です。今回は色を決める、文字を決めるという話から、ちょっとした実装のハックについても述べられています。緑、黄、赤は予約されているんで、自然と青くなったとか、｢楽しさ｣の要素のために丸っこいフォントを選んだとか、いろいろとエッセンスが詰まっていますね。
中でも面白いのはアイコンをフォントとして実装しちゃえば色々楽になるよという話です。ブラウザの中でコードで実装するよりも色を変えたり、大きさを変えたりするのが楽ということですが、、、なかなかおもしろい発想ですね。ただのデザイナーじゃなく、開発はもちろん、ブラウザのフォント処理周りをよく理解しているからこその発想じゃないでしょうか。
さて、第2弾まで来たところで、ほとんどNutanix Prismになってる!と思うのですが、話はまだまだ続きます。
