カンプ提出によるありがちな５つの問題

Webサイト制作においてクライアントへカンプを提出することがあると思います。みなさんはどこまでカンプを作りあげていますか？

今年のallWebクリエイター塾の受講生に大手化粧品会社のサイトを作成する会社様からの参加者がいらっしゃったのですが、各ブラウザのアラート画面までPhotoshopで作ると言っていました。実際の画面とは違うのでスクリーンキャプチャが良いのではないか？と聞いてみましたが、会社のワークフローがそうだからと言っていました。そして、その作業の無意味さにモチベーションは上がる訳もないと言葉を添えていました。

逆のパターンですが、ある制作会社はクライアントへの提案にカンプを一切ださずにコンペに勝ったケースで、受注後にデザイン修正の依頼が多くあり、カンプでデザインをだしていたら通っていなかった案件だ。と伺ったことがあります。

このようにカンプを提出しないことでのメリット、提出するとデメリットがあるように思います。そこで、今回はカンプ提出によるありがちな問題を５つ出してみました。もちろん、この問題が全て当てはまる訳ではないでしょうが一度振り返ってみてはいかがでしょうか？

(ペーパーによる）カンプ提出によるありがちな５つの問題

• クライアントが紙でしか確認ができない。
• 各ブラウザごとの確認ができない
• hoverや動画などの動きを確認することができない。
• 各デバイスごとの確認ができない
• 分業による無駄な時間が発生

５つのデメリットを上げてみましたが、実は全て同じことを記載しています。カンプ提出は一般的に紙での提出が行われていますが、この紙という媒体に落ちた瞬間に違うものとして誕生しています。紙に出力しているので当然紙でしか確認できません。しかしながら、実際にはOSや各ブラウザによって色も異なれば、文字も異なります。

以下は同じサイトを IEとChormeで表示したところです。色も違えば、フォントも。細かくみていけばほぼ全てが違います。CSSサポートの良くないブラウザであれば尚更です。対象ブラウザは存在しますが、カンプはどのブラウザでのカンプを作成しているのでしょうか？
カンプで提出したデザインを見せることでクライアントはそれを期待するのは当然とも言えます。つまり、カンプを見せることでその差を埋めることに必死にならなくてはならなくなります。

紙でしか確認できないことのデメリットはもうひとつあります。hoverの色や動き、音も確認できません。 これはカンプの役割ではないと思う方もいらっしゃるかもしれませんが、そもそもユーザー体験とひもづいているデザインを別ものとしてそこだけ出して確認するカンプがおかしいと言えます。 仮にカンプはデザインサンプルを見るようなものだと考えているのであれば紙での提出は完全に間違いのであると認識すべきです。例えば、hoverすることで違うナビゲートをしてくれたら画面のデザインや設計も異なってきます。そこだけ後で行うことはできないはずです。

カンプ制作をしてクライアントへ提出している背景として分業化されてケースが多く見られます。紙でのカンプ制作は、このエントリーのはじめに紹介したアラート画面もアプリ（Photoshop）で作成していること同じで、サンプル（カンプ）のためのデザイナーになっているケースが多く見受けられます。

カンプをデザイナーからコーダーに渡ると、どの部分までが画像で実現すべきで、どこからCSSでデザインするべきか悩むことがあると聞きます。デザインから要素を引き出してHTMLファイル化し、どの要素に余白をつけるか決定するため再度デザインを行っているような無駄な作業が発生します。

CSSでのデザインはブラウザが実装するのですから、ワイヤーの時点から余白、配置などを設定しておけば効率は凄く上がります。このように、デザイナーはデザインをPhotoshopで作るのではなく、CSSでのデザインを実装を覚える必要がでてきました。

分業しているケースが一見効率が上がっているように思えますが、１つの制作物としての時間がかかり過ぎている場合があります。

もうひとつカンプ提出でのデメリットを加えるのであれば、クライアントもデザインを提出されると自然とデザインへ目がいくようになるということです。好き好みが先にでて、骨格の本質を見落としがちになります。つまり、デザインはできるだけ最後、もしくは擦り合わせしながらデザインする方法が好ましいと言えます。

手法としては、ブラウザの中でデザインしてカンプとして提出する。気になるところはクライアントと一緒に修正する。どうしても好みがでてしまうものなので、できるだけ柔軟にアジャイル対応できればみんなハッピーになるのではないでしょうか？そして、定時に帰宅できる業界になればと思っています。

数日前から別のエントリーでも話題になっていたgoriのブログでクライアントの発注の仕方が良くないエントリーがバズっているようですが、こんなことがカンプの時点であったと思うだけでプロジェクトが進まないことが目に浮かびます。ブラウザの中でカバーできれば凄く効率も良く効果的だと思います。