アプリケーションにWebデザインを反映する（デザイナとプログラマの分業）
非常に苦労の多い作業でありますが、アプリケーションがみるみる美しくなっていく様子は楽しいものです。
最近はツールの充実でこの作業はもちろん、問題の発見や原因特定も容易になってきたと感じています。
最近まさにこの作業をしたのでメモがてら。
デザイナとプログラマが入れておきたいツール
まずは、Firefoxをベースに作業を進めたいものです。お互いにこれらのツールを入れておきます。
Mozilla Firefox用『Web Developer 1.1.2 日本語版』
http://www.infoaxia.com/tools/webdeveloper/download.html
静的なページをデザイナに渡す
(JavaやAjaxで）動的に作成されたページを、Web Developerの「ソース⇒編集内容を反映したソースを表示」を使って静的なHTMLを作っていきます。
このとき、動的に作成したページは具体的なデータに近づけておく必要があります。データが0件のページや「テスト○○」ばかりの内容だと、デザインが不十分になるばかりか、デザイナの創造スキルを十分に引き出すことができません。
動的な部分を説明しておきますが、半分くらい覚えてもらっていれば良しとしておきます（ｗ
静的なページでデザイナのアウトプットをもらう
ちょっとした修正であれば、フレームワークで使っているHTMLテンプレートなどを修正してもらう方法も取れますが、ほぼゼロから作業してもらう場合にはオススメしません。
制約を与えたり、編集ミスに余計な気を遣わせるよりも、より質の高い画像やCSSのコーディングに注力してもらった方が得るものが大きいと思います。
プログラマがレビューする。
「この部分は文字列長がかなり長くなることもある」とか「ここは出るときと出ないときがあるがデザイン的にどうか？」など、動的な部分を切り口に何点かデザイナにぶつけてみます。
「この機能は良く使われる」「ここの表示は目玉となる部分だ」など、最初に伝えていたことであっても、初心に立ち返ってもう一度お互いに見直してみます。
プログラマによるデザイン反映
プログラマがデザインを反映していきます。ここではプログラムがJSPとかPHPなどのテンプレートを編集していきます。
最初に、2つのHTMLを縦に連結してしまいます。
<html> プログラマが書いた動くもの </html> ---- <html> デザイナが書いた部分 </html>
こうすると上に「動くプログラム」、下にデザイナが製作した「静的なHTML」が表示されるようになります。
下に表示される静的なHTMLに、動的な部分をマージして、上と下に表示される二つの画面の表示結果（データ）が同じになるまで編集していきます。
しばらく編集していると、ある程度HTMLの構造が見えてくるので、あとは下のHTMLだけ見ても大丈夫になってくる場合が多いです。経験的に。
プログラマによる見直し
この時点でデザイナが製作した静的HTMLとデザインを反映したアプリケーションを画面上で見比べて、反映漏れがないかチェックします。
デザイナがレビューする。
この辺りからFirebugの出番です。
反映漏れの指摘があれば、Firebugで原因を特定し修正します。
デザイナの観点からも動くものを見てデザインを見直したい部分が出てくると思います。
ここからは詳細な変更点をお互いに認識しながら作業を進めなければなりません。
「○○の画像を16×13から16×14に変更した」とか、「画面サイズを○○に変更したいがどうか？」など細やかなコミュニケーションが重要になります。
こうして何度かやりとりしながら完成度を高めていきます。
「デザイナは動くものを見てから微調整する」モードになると思うので、プログラマは変更点をすばやく反映し、それを見てもらうことで完成度があがります。
最近はJavaScriptにデザインが埋め込まれていることも多いのでその部分はプログラマが反映していきます。
「この枠線は #f1f7ff にして」とか。
ゴミ掃除
製作途中の画像やファイルのゴミが残ると思うので、ファイルや各種コードをお掃除します。
