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/ を参照し、一部引用と私的な感想を混ぜて書いたものです。

沢山の人に質問される。おすすめの書籍は沢山あるし「アイツより115%うまくやる55の方法」というありふれた記事を紹介するのは簡単だよ。

でも実際はスタートするにあたって学ばないといけないことなんてないんだ。一番重要なのはただシンプルに、やり始めることなんだ。

何かをつくりはじめよう。もしウェブデザインを学びたいなら、ウェブサイトをつくろう。
起業家になりたい、ウェブベースのプロダクトを売るビジネスを始めたい人は、アプリケーションをつくろう。

何も心配はいらない、その段階でスキルなんて必要ないのだから。
たぶん、自分にどんなスキルが必要なのかさえ分からないだろう。

既に持っているもので、始めよう

もし何かをウェブでつくりたいとしても、HTMLやCSS、Ruby、SQLを覚えることに心配することはない。そいういうのはプロダクトを完成させるのに必要な事柄であって、やり始めるには何一つ要らないんだ。

そのアイディアをキーノートやパワーポイントに書き散らかそうよ。枠を書いてキャッチコピーを書いて、ページごとをリンクさせればいい。

既に使い方をしってるソフトだったら、かなりちゃんとしたプロトタイプができあがるよ。パソコンに疎いだって？じゃあ鉛筆と紙とポストイットとかでやろう。画面を描き、壁に貼り付ける。そしてどんな流れになるか見てみよう。

どんなスキルが必要なのかすら分からないかもしれない。でも心配ない。
既に知っているものを使って始めればいいのだから。

簡単なスケッチやスライドだけですごく沢山の事ができるものさ。
アイディアを形にして、それが本当にいい感じになりそうかどうか評価することができるようになる。そしたら次のステップに移るポイント、つまりそのプロトタイプをブラウザで表示させるための必要十分なHTMLを学ぶ時だ。
要点は既に持っているスキル、ツールだけで行けるところまで行こうということなんだ。

自分を疑わない

僕らが何かをスタートしない理由は、多くの場合、スキルや素材、設備が足りない事とは関係ない。実際に僕らを妨げているのは自己批判と言い訳なんだ。

『Drawing on the Right Side of the Brain（右脳で描け）』っていういい本があって、その著者Betty Edwardsが本の中で「僕らは子どもの時は何でも描いていたのに、思春期になる頃には多くの人がその能力を伸ばすのをやめてしまう」というような事を言っているんだ。

多くの大人は、絵を描く能力という観点においては、思春期のはじめに芸術的な面での成長が突然終わってしまう。彼らにとってますます複雑化する身の回りの世界のことと、彼らの芸術的スキルとの間で葛藤が起こり、子どもたちは芸術的感性の危機に直面するのだ。

その頃の子どもはますます自己批判的になり、同様に絵を描くことにも興味をもつようになる。自分の思うように描けなくなった時、ほとんどの人は絵を描くことを諦めてしまう。

この感じは大人になっても続くようだ。僕らはウェブサイトをデザインたり、アプリケーションを開発したいけど、もし自分の持っている道具と知覚的スキルにズレがあると、始めることすら出来なくなってしまう。

インターネットは素晴らしい作品、才能のある人、優れた制作を僕らにを際限なく見せてくれるけれど、それは助けにはならない。

そんな最高な物たちと自分自身を比較してしまえば、自分が不甲斐なくなるのは当たり前。でも彼らだって生まれながらにそういうスキルを持っていたわけではないし、やり始める前までは何も持っていなかったんだ。

やってみるじゃなくて、やろう！

成功した人というのは、自己不信にも負けず進み続ける方法をなんとか見つけ出すものなんだ。
画家であるヴィンセント・ヴァン・ゴッホがまさに画家であったのは、彼の人生の最後の10年間にすぎない。僕らはみんな彼を巨匠と言わしめる見事な絵画作品を知っているけれど、彼は巨匠としてスタートしたわけじゃないんだ。

先ほどの『Drawing on the Right Side』で例として紹介されている下の絵を見てほしい。初期の絵とその2年後に描かれた絵だよ。

Vincent Van Gogh Carpenter, 1880 and Woman Mourning, 1882

彼はいわゆる神童ではなかったし（彼が絵を書き始めたのは27歳）、彼はそれを努力して学んだ。もし彼が自己の疑いに耳を傾けていたり、自分のスキルがポール・ゴーギャンに全く及ばないと絶望していたら、彼はやってみようともしなかっただろう。

物事は創るべき物を創る途中になって得られる事がとても多い。つまりそういう事だろう。
自分が不十分だからといって、またスキルや知識、経験がないからといって夢を追わないのは無駄なことだよ。実際のところ、疑問のあるプロジェクトこそが、追求すべきプロジェクトなんだ。それらは最大のチャレンジと最大の報いを与えてくれるだろう。

なあ兄弟、なんでもう何百回もやった事を繰り返しやるんだい？もう学ぶことなんてないぜ。

プロジェクトを完成させることにこだわる必要なんてないじゃないか、やり始めるために必要なものは全部持っているんだから。

credits

Jason Zimdars [ http://stream.jasonzimdars.com ]
Original Post – http://37signals.com/svn/posts/2538-the-first-step-is-to-start

This is great article and really inspired me. So I translate to Japanese for myself and share with friends in japan. Thanks Jason.

あとがき
個人的にとてもいい内容だと思ったので訳してみました。かなりざっとした訳で、よく意味が分からなかった部分も雰囲気で流してしまっています。（たぶん意味は合っていると思う）
ちょうど「Fine Software Writings」というソフトウェア開発の良記事翻訳集のサイトにも訳されていましたが、そちらの方がかなりしっくりきている感じです。
http://www.aoky.net/articles/jason_zimdars/the_first_step_is_to_start.htm

しかし現状ではどうしても調べながら書くというか、先に作られたHTML5サイトを参考にしながら解釈し、それをブログにまとめ、またそれを誰かが読んでサイトを作ってみて…ということで、人によって解釈が変わっていたりしてしまっています。

リッチメディア要素の機能で「canvasで何ができる」というような話はむしろ分かりやすい部類で、実際はsectionの扱い方を主としたコンテントモデルの考え方で混乱してしまうことが多いように思います。

HTML5まとめ

このHTML5 FOR WEB DESIGNERSは、本仕様では900ページに及ぶHTML5を簡潔に85ページにまとめた小冊子のようなものです。

HTML の歴史と主な仕様を単純明快に解説し、ざっと読んだだけでかなり分かったような感じになります。いや、そもそも以前にも増してコンテンツにフォーカスが置かれる昨今、HTML5の細かい仕様であーだこーだ議論するよりもここは必要最小限のことをスパッと理解してコンテンツのアイディアを練ろうじゃないか。という感じでよいのではと個人的には思っております。

こちらより購入できます。
http://books.alistapart.com/

そのスジの情報によると今月にもePub版が出るようなので、今からNYからはるばる送ってもらう必要はないかもしれませんね。

でもこういう基本的にウェブベースのややこしい話を、紙媒体ですっきりとまとめてあるというのは結構新鮮で、気持ちいいものです。iPadは目が疲れるし。

1冊余っているので欲しい方いたらtwitterにコンタクトください。無料で差し上げます。

無限のスペースは実在するのか

WEBブラウザがスクロール機能を持っていることで、WEBサイトを作る人はそこに無限のスペースがあると考えるようになる。

せっかくWEBサイトを作るのだから、あれもこれも載せたい。あれもこれも載せるんだから、そっちもこっちも載せよう。採用するCMSではこんな機能もあんな機能もある。どれもこれもすごい感じ、あるとかっこいい感じ。

しかし、本当に無限のスペースがあるのだろうか。言いたいことばかり書き散らかされた広大なスペースに、忙しいユーザーはいちいち付き合ってくれるのだろうか。

ユーザーは基本的に急いでいる

人は実に様々な理由でインターネットを使うが、ほとんどの場合に共通するのは「何かを探している」ということ。

何か知りたいことがあって検索する。表示されたサイトの中から良さそうなものを選び、そのサイトの中で知りたい事の場所を探す。彼らにとってはWEBページが表示される1秒2秒の読み込み時間でさえもどかしい。とにかく、できるだけ速く知りたいと思っている。

（もちろん暇を持て余してただ当てもなくネットサーフィンする人もいるだろう。でもおそらくあなたのビジネスにとって彼らは重要ではない。）

目に見える要素が増えれば増えるほどユーザーの視線は迷い、気は散らされ、1つの要素への注意は薄れ、選ぶべきものを選ぶことが難しくなる。
受け手が選ぶべきものを選べない理由は、語り手が本当に伝えたいことを選べていないからに他ならない。

ユーザーに最も喜ばれることは、探している情報を他のどのWEBサイトよりも明確に伝えること。1つの情報に1つのWEBページを与え、そのページの中ではそれだけを伝える。1つ上の階層のページでは、格納されている情報を明示して選んでもらうことだけを考える。

種類の異なる全く別の情報へのリンクリストや、様々な検索機能や、自分のビジネスと無関係で大した収入もない広告は、思い切って消し去ろう。
全て消し去ることが難しいなら、本当に必要かどうかを改めて考え、リンク1つでも消し去ろう。1つでも。

それによって、本当に伝えたかったメインの情報が浮き出てくる。スペースの大きさや色使いの問題ではなく、相対的な情報量の問題である。

機能は少ないほどいい

CMSベースのWEBサイトが主流になってから得に問題なのは、あらゆる設計が見本として用意されたテンプレートに左右されてしまうことだ。
CMSの多機能化は評価基準の1つであることは間違いない。優秀なCMSほど拡張性を兼ね備えている。しかし、ブログシステムに代表される汎用性のあるCMSは「あったら便利そうな機能」として提案しているに過ぎない。

それを採用するかどうかはその都度決めよう。全てのページにタグクラウドが本当に必要かどうか、その都度考えよう。

情報設計は作業の１行程なのか

インフォメーションアーキテクトという言葉が再定義され脚光を浴びている中、とあるセミナーで、ある情報デザイナーがこんな事を言っていた。

「インフォメーションアーキテクトなんて職種は存在しない」

インフォメーションアーキテクトという役職、肩書きを見るたびに同じことを思っている。それはプロジェクトを通して全員の気配りを以てして初めて成功する概念であると。分業体制の中の１行程ではないと。

ディレクターがデザイナーに画面構成書・原稿を渡す。
「シンプルで分かりやすいサイトでお願い」
しかしそれらの書類がシンプルでなければ、デザイナーがいくら見栄え上のシンプルさを実現したとしても、出来上がるサイトは本質的にシンプルにはならない。

もっと前の段階に戻ってみる。

クライアントがディレクターに原稿を渡す。ディレクターが、インフォメーションアーキテクトと呼ばれる人が、いくらがんばってシンプルに情報設計をしようとしても、クライアントの事業がシンプルでなければ本質的にシンプルにはならない。

つまり、制作を担当する各プロフェッショナルが出来る事は多くあるが、最終的な出来栄えは関わる人全ての意識によって大きく振れるということだ。

日産、アウディのカーデザイナーを経て独立した和田智氏が著書『未来のつくりかた』にてこのように書いていた。

部屋の美しさはその国の文化レベルを示す
その街に住む人の部屋の美しさは、その街の美しさと比例します。
部屋は国の文化的なレベルを示すものであり、美意識の度合いを表すものとも言えるのです。
引用：未来のつくりかた アウディで学んだこと 和田 智 (著)amazon

自宅の部屋や職場のデスクを常に綺麗に保つ能力は、その人の性格の現れであり1つの才能であると思う。形を持たない情報を整理することは、普段の生活をよりよくするためには必要な作業なのだ。

これは学んで習得できるものではなく、向き不向きのある難しい作業だと言えるだろう。

極端に言うならば、本当に整理された情報設計を実現するためには、プロジェクトに登場するクライアント、ディレクター、デザイナーの職場のデスクが綺麗に整理されている必要があるかもしれない。

まとめ

実際の制作現場から目を逸らさなければ、これらが理想論であることは否めない。
紙媒体のチラシよろしく、スペースさえあれば情報を詰め込みたくなる気持ちはどうしても先行してしまうし、かといって予算があり、タイトなスケジュールで動くプロジェクトを進める中でクライアントと「シンプルとは何か」を論じている暇など無い。

しかしながら、Webサイトの構築作業が、クライアントが自分たちのビジネスを整理し、構造的に可視化する初めての体験になるということは少なくない。

このような場合では、サイトを構築することを通して成果物以外にいろいろな発見、ヒントを見つけるための頭の超整理体験を提供することができるかもしれない。情報を可視化するウェブサイトの完成度はクライアント社内での意思統一においても非常に重要な資料となる。そういうものを作ることができれば、エンドユーザーにとっても有意義なものになるだろう。

インフォメーションアーキテクトという役割があるとすれば、それは制作現場でのサイトに対しての働きかけではなく、クライアントとの対話の場で人間に対して働きかけるものであるべきだろう。

あとがき

久しぶりのブログが、いまいち要領を得ない長文になってしまった。しかも少し偉そうだ。その辺りは、この猛暑による思考能力の低下ということで大目に見ていただきたい。

Photo Creits:

• Ryoanji Temple- Kyoto By Flavio@Flickr
• Road to… By Absolutely Simple
• Ryoanji Temple in Kyoto By mrhayata
• Tea Room/茶室 By Yuki Yaginuma

サイト構造としては、

• 階層構造を持たないシングルページ
• リンクは全てモーダルウィンドウで展開
• 長いスクロールを飽きさせないダイナミックに切り替わるデザイン

と、パッと見でも2009年〜2010年のWEBデザインの流行の先端を行くものとなっています。

特に「長いスクロールを飽きさせないダイナミックな切り替え」という部分では、アプリケーションの機能説明ごとに雰囲気を切り替えていて、その1つ1つがカッコいいサイトデザインとして成立しそうな程造りこまれており、ため息が出てしまう程クール。Oh yes。

ただ、今回の本題はサイトの右上にあるアプリケーションアイコンに隠されたギミックです。

Webkitブラウザ（Safari、Chrome）で見てみると、アイコンの虹色がゆっくりと回転しているのが分かります。非常に面白い事例なので、実装方法を検証してみます。

CSS3によるマスキング

回転を前提とするため背景は円形なので、これをアイコン形状にマスクする必要があります。

虹色サークル

(Copyright © 2010 Sofa BV. )

アイコンシルエット

(Copyright © 2010 Sofa BV. )

虹色サークルをHTMLに画像として記述、ブロック要素で囲いそこに

-webkit-mask-box-image:url(/static/img/ks_mask.png) 460 stretch;

を指定。すると以下ような表示に。

(Copyright © 2010 Sofa BV. )

透過PNGによる印影付け

その上に陰影情報だけを持つ透過画像を被せることで、立体的で美しいアイコンが出来上がります。Webkit以外のブラウザではそのまま静止画像が表示されるようになっています。

(Copyright © 2010 Sofa BV. )

背景の回転

サークルの回転は外部JSからブラウザ判定しつつCSS3の

-webkit-transform: rotate();

にて実装。ここまでやりながら、あえてじっくりと見つめないと気付かないほどゆっくりとしたスピードで回転させている所にセンスを感じます。

その他、このサイトでは最上部の濃紺テキスタイルのグラデーションも -webkit-gradient で実装し、JSにてWebkitとFirefox3.6以外ではフラットにするという処理をしています。全体的なコーディングスタイルもシンプルでストレートであり、デザイン共々検証したいサイトです。

ギミックの使いどころ

CSS3ではマスクしたり回したりイージングしたりいろいろなことが出来るものの、それらは基本的にシンプルなプログラムによる幾何学的な動きになってしまいます。
単発として面白いサンプルを考えるのは簡単ですが、実務に活かすとなるとなかなか使いどころがない。そういう意味でこのような事例はとても印象的だと思います。

まだブラウザが限定的なのでどうしても「なくても困らない」ものに留められるし、そうなると実際の制作現場では「なくても困らないものに余計な時間コストをかけられない」ということになりがちです。
しかし例えばこのアプリケーションサイトのように「ターゲットもたぶんプロフェッショナル」な場合、その細かい部分を作り込む熱心さ、遊び心は伝わるだろうし、下手な広告戦略よりも効果的な遊びなのではないかと思います。