DESIGNMAP

カンプとWeb制作のワークフロー

記事公開日:2012年10月31日

雑記

受託開発のWeb制作のワークフローは、「設計」→「デザイン」→「開発」という流れが一般的である。設計段階では、ディレクターやプランナーがワイヤーフレームをつくり、デザイン段階でデザイナーがカンプをつくる。カンプが固まると、開発段階にはいり、マークアップエンジニアがHTML、CSSでカンプの見た目を再現してゆく。再現するときも、余白のピクセル寸法をPhotoshopではかって、コーディングする。マークアップエンジニアはデザイナーの意図をどれだけわかるか、見えるが重要である。次に、フロントエンドエンジニアがJavaScriptをかぶせて、ふるまいの部分を追加する。最終的に、HTML、CSS、JavaScriptのコードが、バックエンド担当のエンジニアに渡される。PHPなどのサーバー側で動作する言語の「表示を出力する部分」に組み込まれる。

印刷物を踏襲したWeb制作のワークフロー

カンプとは印刷物制作で使われている言葉で、印刷物の仕上がり見本をさす。英語のcomprehensive layoutがもとの意味である。英語でも略して、compと呼ばれる。Web制作のカンプとは、仕上がりイメージの1枚絵である。これを開発段階で、マークアップエンジニアがHTML、CSSでカンプを再現する。カンプを制作するツールは、ビットマップ系のグラフィックソフトであるPhotoshopやFireworksが使われる。また、IllustratorCS5以降は、文字のアンチエイリアスのオフや線のピクセルのつぶれが改善されたため、カンプ制作に使えるようになった。

このワークフローの奇妙なところは、カンプでいったん、ページ全体をつくり、あたかもコーディングされたデータかのようにつくる点である。カンプは動作せず、ダミーでしかない。これをコーディングして、カンプを再現する。デザインとコーディングを1人でやっているような会社や案件の場合、このカンプをつくるのが手間で、最初からコーディングしたものをみせたほうがいいのでは、と思ってしまうことがある。

基本は、カンプは全ページをつくらず、主要ページだけをつくる。ただ案件によっては、膨大な数(プロジェクトによっては、管理画面も含めてほぼ全画面)のカンプを作る場合がある。コーディングを外注する場合も、Photoshop形式のカンプで納品することを求められることもある。

Photoshopはカンプ制作のメインツール

カンプ制作でもっとも使われているのはPhotoshopである。カンプ制作を何画面もつくる場合、1枚のファイルで、レイヤーグループの表示/非表示を使って、複数ページの管理をすることができる。レイヤーカンプという機能を使うと、1枚のPhotoshopファイルから複数ページのjpgを書き出すこともできる。サイト全体で共有するアイコンなどは、スマートオブジェクトに変換すると、Flash、Illustrator、Fireworksのシンボル機能のようにつかえる。他にも、複数レイヤー選択、レイヤー同士の整列機能、PhotoshopのJSXをつかった自動処理など、Photoshopはバージョン5.5の頃と比べれば、カンプ制作は格段に楽になっている。

Web制作でのカンプの起源は?

いつくらいから、Web制作にカンプがつかわれたのだろうか。Web制作で、お客さんの確認用にカンプが導入されたかははっきりしない(もし、ご存知の方がいらっしゃたら、メールかTwitterで教えてください)。

ひとつの仮説をたてると、1997年頃があげられる。イギリスのWebデザイナーであるAndy Clarke氏の『Transcending CSS』(翻訳版:『Webデザイン プロフェッショナルワークフロー・バイブル』)によれば、1997年にテーブルレイアウトがDavid Siegel氏によって考案されたそうである。

テーブルレイアウトとは、入れ子にしたtableタグと透明なgif画像をつっかえ棒として使ったレイアウト手法である。CSSレイアウトと対比する言い方で、物理レイアウトと呼ばれる場合がある。このテーブルレイアウトによって、Webでも段組みレイアウトが可能になり、印刷物のワークフローであるカンプが導入されたのではないか。

カンプの弱点

カンプの弱点は、インタラクションやふるまいが伝えにくいところだ。
Ajaxのように画面遷移をせず、画面の一部だけが変化するようものはカンプで表現するのは大変だ。もし表現しようとすると、何画面もつくって、補足コメントをいれて説明することになる。画面のサイズにあわせて動的に変化するレイアウト(今では、レスポンシブWebデザインが有名だが、FlashのActionScriptで実装した)も、カンプで伝えるより、いきなりモックアップ(コーディングして実際に動作するサンプルのこと)で、動いてるものをみせてしまったほうがよい。

2005年に、横浜でおこなわれたマクロメディア集中ゼミというイベントで、中村勇吾さんが、プレゼンではいきなり動くものをみせると語っていた。中村さんのパワーポイントを使わない、ゆるい雰囲気のレクチャーで、氏の代表作のひとつである『カムカムタイム』の様々なボツになったサンプルをみせてくれた。

Jason Fried氏のPhotoshopによるカンプをつくらない理由

ASP形式でWebアプリケーションを提供している37signalsという有名な会社がある。この会社の共同設立者であり、『小さなチーム、大きな仕事』の著者でも知られるJason Fried氏は、『Why we skip Photoshop』という記事で、紙にスケッチをしたあと、Photoshopのカンプ制作(氏はカンプを"スタティックPhotoshopモックアップ"と呼んでいる)をせず、HTML・CSSでコーディングして、モックアップをつくっている。

主な理由は、クリックやテキスト入力ができる、プロジェクトの初期段階からデザインのディテールにこだわらずに済む、WebブラウザでみるテキストとPhotoshopのテキストは同じではないという問題、開発時間が無駄にならない、すばやく修正、反映ができるためコラボレーションがしやすい等、7つの理由をあげている。Jason Fried氏の作り方は、「設計」→「開発」→「ビジュアルデザイン」というようなアプローチである。

まとめ

すべてのWeb制作のプロジェクトで、Jason Fried氏のような方法が有効とはいえない。インタラクションは最小限で、ビジュアル重視のサイトであれば、従来の印刷物のアプローチで、カンプをしっかりつくりこんゆく方法があっている。

一方、Webアプリケーションのように、Ajaxのようなサーバーとクライアントのインタラクションが多く、使いやすさが重視されるようなプロジェクトでは、ラフデザインのあと、いきなりコーディングしてゆく方法は有効といえるだろう。

↑このページの上に戻る