ビジュアルツールのもつジレンマとツールの選び方

先日、Quora のほうで Life Without Photoshop というエントリーを見つけました。Quora.com のデザインは最初からコードで作り始めたというエピソードとブラウザ上でデザインすることのメリットがまとめられています。

Webサイトデザインで国内外で人気なのはやはり Photoshop と Fireworks。こうしたビジュアルツールも含めてメリット・デメリット、そしてツールの選び方を考えてみました。

絵描きツールが引き起す誤解

Photoshop, Fireworks いずれも素晴らしいツールですし、片方にしかない魅力的な機能があります。どちらが優れているのかといった話がされるかもしれませんが、いずれにしても油絵が好きかアクリル絵が好きかくらいの小さな違いです。それぞれ描き上げるプロセスが若干異なりますし、完成する『絵』も少し違います。しかし、どちらも似たような『絵』を作るためのツールです。

絵をつくるのに優れているツールであるからこそ多くの方が利用しているわけですが、ビジュアルデザインツールを使うが故の欠点もあります。

そもそも印刷業界で使われている『カンプ』という言葉を再利用していることに問題があるのかもしれませんが、Photoshop/Fireworks で作った絵は Web ブラウザで観覧した際に表示される仕上がりの見た目というイメージが先行しやすいです。制作者はすべてのブラウザで同じ見た目には出来ないことは分かっていますし、その説明もクライアントにはするでしょう。しかしながら、明確な形でカンプが出て来てしまうと、どうしてもそのイメージが離れず「見た目が違う」という話になってしまう恐れはあるでしょう。

『カンプ』といっても特定のブラウザの限られてた状態で見た場合の仮説でしかありません。どこが微妙に異なるのか、どのあたりが Progressive Enhancement にする箇所なのかはカンプでは分かりません。指示が少なければマークアップをする人は、どこがするべきか分かっていても勝手に実装が出来ない場合があります。Webデザインの駆け引きの理解がないと、結果的にカンプをそのまま変換するためのマークアップやハックに四苦八苦してしまうという状態に陥るでしょう。

角丸をすべてのブラウザで実装するためだけのために JavaScript を使うという考え方が生まれるのも、カンプと同じ見た目を可能な限りたくさんのブラウザで表示させてなくてはいけないという思うが先立っているからでしょう。

Photoshop にしろ、Fireworks にしろ毎バージョン興味深い機能が追加されているものの、Web サイト制作のための大きなイノベーションが長年ありません。利用者によるインプットによるリアクティブな動きを表現出来ないですし、ブラウザによる微妙な違いを設計するためのインターフェイスもありません。Photoshop は 5.5 で「Web 用に保存」が実装されて以来、特に大きな機能が実装がされていません。ソフトウェアの名前が物語っているように写真やグラフィクの加工がメインだから仕方ないかもしれません。

Webブラウザ上でデザインの難しさ

そこで 2 年ほど前にでてきた動きがブラウザ上でデザインしてしまうという考え方。Firefox, Opera, WebKit 系のブラウザには優秀なデバッグツールがありますし、Bookmarklet と Web サービスを組み合わせてビジュアルデザインが可能です。

最近になって CSS3 を活用した表現を柔軟に適応出来る環境が整ってきました。Photoshop や Fireworks で作ったビジュアルのすべてを画像化する必要がないわけですし、ブラウザ上でのレンダリングがどうなるのか微調整しながら作り込めるメリットがあります。また、JavaScript も早期に実装することによって、どのようなインタラクションがページ上で発生するのかも見ることができます。ビジュアルツールでレイヤーを加えて徐々に作り込んで行くプロセスをブラウザ上で行い、GUI など必要に応じてツールを使って足していきます。

柔軟なデザインプロセスが実現出来ますし、実際 Web ブラウザでどのように見られるのかという現実的な課題に早期から取り組めるのは良いことです。しかし、ブラウザ上でデザインすることが必ずしもベストな解答かといえばそうでもありません。まず、高いマークアップスキルがデザイナーに求められます。もちろんマークアップしないデザイナーでもある程度の知識をもつことを要求されますが、ブラウザ上でデザインは知っている以上のスキルが必要になります。基本的にコードベースになってしまうことから、右脳を刺激するビジュアルデザインへの切り替えと両立が難しいかもしれません。

なぜ使うのかを考えてみる

今回主に Photoshop と Fireworks にフォーカスしましたが、Illustrator を使って Web サイトデザインする方法もあります。ブラウザ上でデザインにしろ、ツール上でデザインする方法も結果的には個人的な好みです。

ではどのようにして好みのツールを見つけ出すのでしょうか。

ツールを利用する際に気をつけておきたいことは、ツールが何が出来るのかという機能リストを比較するのではなく、自分のニーズやワークフローにこのツールは適応できるのかどうかを考えなくてはいけません。Webの動きは速いですし、目まぐるしくトレンドも変わります。ソフトウェアが機能としてやっと実装してくれたかと思った半年後には新しい技術が流行するといったサイクルを繰り返しています。ツールはどうしても時代の流れより若干遅れてしまいます。

ツールが遅れて実装することはそれで良いわけです。それより問題なのはツールが明確な機能として実装していないから「使えない」という状況に陥ることです。画像のサイズを変えるという単純な機能でさえ幾つかの方法があり、それぞれ結果が異なります。作り方、結果の出方が自分たちのワークフローに合うのかどうか。合わないのであれば別のツールを使えば良いですし、組み合わせて使うことも出来るわけです。

先述した Photoshop / Fireworks のようなビジュアルツールで発生しやすい誤解にしても、同業者・クライアントへの教育、指示の出し方を変えて行くことで補助できます。

もしツールがあなたのクリエティブの邪魔をしているのであれば無理に使い続けることはないですし、今日挙げたツール以外にもたくさんあります。探すと幾つか出てきますよ。