デザインの試行錯誤とラグをなくすプロセス

ワイヤーフレームやスケッチで、ある程度カタチになっているアイデアも、スクリーン上に実際に描いてみないと分からない場合があります。ラフでは良い感じに見えるものでも、いざ色を付けたりレイアウトを組み上げていくと「あれ？」と思うこともしばしば。ワイヤーフレームやスケッチとして出てきた設計図をそのまま型にすれば上手くいくというわけでもないのが、デザインの難しいところであると同時におもしろいところです。

Photoshopや、Fireworksを使って、1ピクセルずつずらしながらレイアウトの調整をしたり、ガラッと雰囲気を変えた見た目を試すといった試行錯誤をしている方はいると思います。ただ設計通りに作るのではなく、試行錯誤を続けることでより洗練されたデザインになることもあれば、まったく新しいアイデアが生まれるキッカケになることもあります。

スケッチにしろ、グラフィックソフトを使うにしろ、試行錯誤をするための条件として重要なのが、結果がすぐに見れることです。紙に何か描けば、絵が浮かび上がります。Photoshop や Fireworks でも、キーやマウスを操作した瞬間に結果が目の前に広がります。

デザイナーにとって、自分のインプットが視覚的にすぐにアウトプットとして表れるということが大変重要です。自分のアイデアがすぐに形になるということは、自分の思考と創作の間に妨げがなくなります。アイデアがすぐに形になるのであれば、より発想が自由になり、試行錯誤の幅も広がります。

しかし、現状 Web デザインの試行錯誤を行える場が Photoshop や Fireworks のようなグラフィックソフトという場でしかないような気がします。

WebKit の Web Inspector や Firebug が優秀なおかげで、HTMLでいきなりデザインを始めることが容易になりました。最近は CSS3 を使って様々装飾を行えるようになったおかげで、HTMLでデザイン（Webブラウザでデザイン）をする理由がまたひとつ増えたと思います。私自身 Webブラウザからデザインを始めるほうではありますが、試行錯誤をするにはインプット＆アウトプットのスピードに不満を感じることがあります。

例えば「コンテンツエリアを 1ピクセル左へ動かす」というシチュエーションを想像してみてください。

Photoshop / Fireworks

動かしたい要素を選んで、左矢印キーを1回押す

HTMLベースの場合

動かしたい要素を選んで、CSSに1pxずらした数値を記入する

再読み込みをして確認する

分割画面にして、コードの変化をリアルタイムプレビューができる Codaですが、それでも1秒くらいのラグがあります。

直感的に動かしたい方向に操作するだけのグラフィックツールに対して、動かしたい方向を計算して読み込ませるコーディング。ここで言う、インプットからアウトプットまでの誤差は、わずか1〜2秒でしょう。しかし、この小さな狭間が思考プロセスの大きな足かせになる場合があります。ちょっとした操作に時間がかかるのであれば、試行錯誤も面倒に感じる場合もあるでしょうし、試行錯誤の幅も狭まることもあります。

今は再読み込みしなくても、自動的にコードをレンダリングしてくれるソフトがあります。また、Dreamweaver のようなソフトであれば、プレビューとコード間を自由に行き来できる機能が備わっています。少しずつ HTML で思考錯誤できる環境が充実してきてはいるものの、インプット＆アウトプットのスピードはグラフィックソフトには劣ると感じることがあります。

スケッチしているような感覚でデザインが出来そうな Museは良いコンセプトですが、パソコン向けの固定幅Webサイト制作を前提としているように見えます。

慣れの問題もありますし、高速HTMLコーディングができる方もいるかと思います。しかしながら、まだ HTMLでのデザインは難しいところが多々あると思いますし、今回紹介したような試行錯誤が難しいというのはひとつの大きな要因ではないかと考えています。プロトタイピングを HTML で行うのは場合によって有効であるものの、今以上にインプット＆アウトプットのスピードを上げてくれるシステム/アプリ/手法がなければ、積極的にやろうと思う方は増えないかもしれません。

テクノロジーが人間の思考の妨げになっていることがある Web デザインプロセス。だからこそ、思考とアウトプットの摩擦が少ない、ローテクな紙を使った手法や、視覚的に扱えることができるグラフィックソフトが支持されているのでしょう。思考からアウトプットされるまでのタイムラグがあるものは、クリエイティブな仕事をするための道具として向いてないかもしれないですし、そこを道具を選ぶときの決め手になる場合もあります。

もちろん、紙やグラフィックツールを使って試行錯誤することは間違いではありませんが、より本物に近い状態で見たり触ったり出来るツールや手法も必要とされていると思います。そこに Web にしかない新たなクリエイティビティが隠れているかもしれません。