JOURNAL | ROSTRATA.net

Keynoteで高精度なプロトタイプをつくる

キーノートを使った忠実なワイヤーフレームの作り方について。Travis Isaacs氏の開発プロセスの紹介。

ぼんやりとしたアイディアから実際に稼働するWebアプリケーションやWebサイトを創り上げるまでにどのようなワークフローを持っているのだろうか。

Web開発技術は伝統工芸にはならない。これだけ環境が変する中では最適な制作ワークフローも常に変化する。特に近年のモバイルデバイスの爆発的普及や、モダンブラウザの普及は、開発環境にあらゆる変化をもたらしている。

開発プロセスの変化

例えば私が行う実作業の中では、Photoshopを持ち出すようなビジュアルデザイニングはかなり小さく身を潜めているように思う。それはもちろんデザイナーにとって最も重要な1つであるが、プロジェクト全体においてはあくまで「最終的な」仕上げに過ぎない。ビジュアルデザインに到達するまでのラフスケッチ、ワイヤーフレームの作成が制作業務において、時間的にも重要度的にも大きな割合を占めるようになった。

つまり、全体像をスピーディーに設計し、その価値判断のタイミングを早期にもっていく。デザイナーやプログラマーという専門家が参加する前に多くのことを見極めることができれば、プロジェクトはより身軽になる。より多くのアイディアを具体的に試すことが出来るし、専門家ではないより広い範囲のブレインと共有し、なるべく早い段階で物事を判断できるようになる。

デザイナーがPhotoshopで絵を描き始めてしまったら、プログラマーがコードを書き始めてしまったら、引き返すのは非常に厄介なのだ。(不可能なのではない、「非常に厄介」なのだ。)

Travis Isaacs’s “How to Wireframe Like a Ninja”

今年の5月 the Big Design 2010 conference にて、UXデザイナーである Travis Isaacs 氏が行ったプレゼンテーションを紹介したい。
“Keynote Kung-Fu: How to Wireframe Like a Ninja” と題されたこのプレゼンテーションは、アップルキーノートを使った魅力的で効果的なワイヤーフレームやサイトモックアップの作り方について解説している。

彼はキーノートのオリジナルツールキットを作成し、KeynoteKungfu.comにて販売している。このサイトについては最後に詳しく。

高精度なプロトタイピングの重要性

個人的にこのプロセスにはかなり共感できた。
つまり各工程をどの媒体でどこまで突き詰めるかは、各工程が持つフリクションを考慮したプロジェクト全体におけるリスクの最小化が重要なのである。
そして精巧なビジュアルと、機能を深く表現した High-Fidelity Prototyping(高精度なプロトタイピング)がいかに重要かを教えてくれる。

スライドの多くはキーノートの素晴らしさについてだが、彼が言わんとするのはみんなが既に知っている「キーノートの便利さ」というよりは、「キーノートはWebサイトのモックアップ作成にとても便利」ということだろう。

具体的なデザインと開発プロセスについて

デザインと開発プロセスについての彼のインタビュー。

Isaacs「フロントエンドデザイナーとしてスケッチから始める。ただしかなり精巧なレベルで。ページのスケッチが完成したらそのままキーノートに移す。
インタラクションやインターフェイスの詳細を表現するのにキーノートを使うが、その後の行程が、一般的なフロントエンド開発者と少し違う。彼はそのままコーディングに進むのだ。コードに沿って(またはコードにならって)ビジュアルデザインをすることに意味がある。
コーディングには TextMate を使う。TextMate は全ての言語の構文バンドルを持ち酔いしれるようなキーボードショートカットがある。
フロントエンド言語にはHTML, CSS,そして jQuery。jQueryは唯一の必要なJSライブラリだ。また、960.gs grid system や the new HTML5 Boilerplate 、 the LESS CSS framework などをよく使う。」

キーノートツールキット KeynoteKungfu

彼が作成したキーノートツールキット KeynoteKungfu.com には、ナビゲーション、テーブル、画像やバナー、フォームエレメント、インジケータやソーシャル系ボタン、またタッチスクリーン用のインタラクション表現などのWebに必要なあらゆるエレメントがマスタースライドとして用意されている。

これらのエレメントの作り込み(例えばグラデーションだとかそういうこと)に時間をかける必要はない。彼が代表して作ってくれたのでそれを使わない手はない。12ドルの価値が十分にある。

私が特にいいと思うのは、960.gsのテンプレートを用いる概念だ。今まではワイヤーフレームの段階できっちりとしたレイアウト比率まで確定させたことがなかったが、Photoshopで使うのと同じグリッドガイドを下敷きにすることで、より高精度なワイヤーフレームが出来上がる。960pxかどうかは別として、これはいいアイディアだと思う。

iPhone用とiPad用のツールキットに関しては無料配布されているからぜひ試してみて欲しい。
KeynoteKungfu.com

まとめ

もちろんペーパープロトタイピングに重点を置くことは、今に始まったことではない。
大規模プロジェクトであればあるほど、ペーパープロトタイピングの資料は充実している。しかし、ワイヤーフレーム自体の作り方は実に多様であると感じる。

私自身いろいろなプロジェクトに参加して思うのは、それらの資料はどの程度深く考えられているかに関わらず、実際の描画においては「かなり適当に」作られるように感じる。ワイヤーフレームだからワイヤー(線)だけで表現すればある程度は分かるが、このシンプルな描画作業の品質(例えば丸みであったり、グラデーションであったり)が高まれば物事はよりスムーズに進むように思う。共有したときのリアリティが全く違ってくる。

ボタンがボタンっぽいかどうかなんてワイヤーフレームの段階において取るに足らないことのように思える。もちろん「クオリティの高いワイヤーフレームを作る」ということに情熱を燃やしてしまい、手段が目的化してしまってはいけない。

ただこのような先人の知恵や便利なもの(例えばたった$12のツールキット)はぜひ取り入れたい。

ビジュアルデザインとインタラクションデザイン、インフォアーキテクトとデザイナーやプログラマーのもっとも重要な架け橋がここにある。

あとがき
ご無沙汰しています。この記事は http://mashable.com/2010/11/12/travis-isaacs-web-design/ を参照し、一部引用と私的な感想を混ぜて書いたものです。

Posted on 2010/12/01DEVELOPMENT, IDEAS and TOOLS ,

Leave a Comment

Archives

Translate by Google

to English, to Spanish, to French


Seeing is Believing.