iKnow!の作り方第1回

UX／UIデザインワークフロー

　iKnow!のデザイナーやデベロッパーがどのような仕事をしているかというと、大きく分けて2つに分かれます。それは、ユーザーインターフェース（UI）とユーザーエクスペリエンス（UX）です。UIは、アプリケーションのルック＆フィールであるのに対し、UXは、目的を達成するために、どのようにアプリケーションが使われているかです。UI／UXは多くのユーザーのニーズに合わせて開発されます。

　iKnow!のWebアプリケーションの開発の初期段階では、不可欠なものと、オプションで対応するものがありました。ほとんどのアプリケーションの不可欠なニーズは、ワイヤーフレームの中で最初に定められ、それが基本設計となり、デベロッパーに引き継がれました。そして、デザインチームはワイヤーフレームを見ながら、アプリケーションの全体的なルック＆フィールを作りました。

　最初のデザインプロセスにおける1番目のタスクは、すでに存在する他サイトに対するアイデンティティーを検証することでした。筆者たちは「Last.fm」「traineo.com」「ilike.com」「magnolia.com」「37signals.com」などの、Railsの創業者たちによって作られたサイトのUIやUXの実装を好み、着目していました。

　また、「mixi.jp」「youtube.com」「facebook.com」など、実装したいインタラクション向けの機能が備わったサイトもありますが、若干、私たちが考えるものとは違いました。当初のデザインプロセスは、スタイルや、デザインを着目していたサイトから集約し、アーキテクチャと、私たち独自のアプリケーションの概念的なフレームワークの中で生かすことから始まりました。これがなじみやすさと独自性をもつUIにつながります。

　まず、ルック＆フィールがPhotoshopレベルで、合意を得られたら、次のタスクは、デザインをXHTML／CSSに実装することでした。Stylesheetのように、インターフェースへのモジュール化による方法やセントラルロケーションから複数のインスタンスをコントロールすることができないXHTML／CSSを選んだ理由はたくさんあります。また、異なるブラウザ間でのCSSの実装には、誤差が生じます。そのため、テストやクロスプラットフォームの対応に非常に時間がとられることになります。

　iKnow!が採用する3コラムレイアウトで中央配置されたテンプレートは、オープンソース・コードベースからきたもので、複数のブラウザ構成に対してテストされてきたものです。テンプレートデザインに関しては、可能な限り、わざわざ1から始まるのではなく、より大きなコミュニティーで試されて、テストされているものを利用する方が、堅調であり、結果的にブラウザ互換性に費やす時間の節約につながります。

主な開発デザインツール

　では、iKnow!を構築する上で日々使うツールを紹介します。ソフトウエアリストはこちらからをダウンロード（http://www.thinkit.co.jp/images/article/111/1/11111.zip）できますので、参照ください（11111.zip/8.98 KB ）。

　UIとUXに、Adobe Photoshopを使います。Photoshopは幅広いツールセットを備えていて、質の良いインターフェースの仕上がりが可能です。優れたスライシングとイメージエクスポートを備え、ツールの最適化により、スタイルシートで参照できる個々のグラフィックエレメントをエクスポートできます。

　先述にあるように、Aptana Studioを使い、Webアプリケーションのローカルコピーを開発用に維持し、優れたCSSオートコンプリートがタイプした通りのスタイルシート属性宣言とエレメントプロパティを予測します。Aptana Studioのこの特徴に匹敵するとすれば、Adobe Dreamweaverでしょう。これは、XHTML/CSS のハンド・コーディングを短時間で行え、直感的で、いかなるXHTMLドキュメントに対応するものをより簡単にします。

　開発の最終ステージは、Firebugアドオンを使ったMozilla Firefoxで行います。Firebugは見た通りのものが結果に反映されるインターフェースを提供し、1ページの中で異なるエレメントを検証し、直ちにスタイルシートに変更を適用します。行番号にそった特定のDOMエレメントとスタイルシートのファイル名を適用するすべてのスタイルのカスケード表示の継承を表示します。

　これは、正確にスタイルを示すのに重宝し、作業中であればAptanaのopen file（ショートカット：ctrl＋shift＋r）と、Go to line（ショートカット：ctrl＋l）の機能は非常に効率の良いファイルナビゲーションツールになります。特に、スタイルシートコードのいくつものラインの中でのナビゲーションには役立ちます。そのほかのサポート対象となるブラウザにおいては適合性をテストします。

　次回は、デザインプロセスに焦点をあて、いかにデザインにおけるデシジョンが色の様相やタイポグラフィの使い方に影響をもたらすか紹介します。これらの要素が組み合わせることで、ユニークなビジュアルアイデンティティーを創造し、ブランドエクスペリエンスを充足させています。今回の記事を楽しんでいただけたでしょうか。ではまた来週ここでお会いしましょう。