デザインとコーディングは同一業務？別業務？

質問

当方Webについては独学で、発注させて頂く立場の者です。

フリーランスの方にWebサイト制作を外注させて頂く際、デザイン業務とコーディング業務を別々に発注すると言うのは、実際に制作される技術者様から視ると・・・

やり易い業務発注でしょうか？
それとも
やり辛い業務発注でしょうか？

また、もし可能ならなぜそうなの思われたのかご教示ください。

契約云々、金額云々、仕様の事前提示云々などの細かい点は全て技術者様のご意向に沿う発注であると一旦仮定して頂き、単純に業務を実施するという技術者視点からだけ視たご意見を頂けますと幸いです。

ぜひ、よろしくお願い致します。

回答No.5

simpleweb

サイト構築のためにデザイン・コーディング、どちらも兼務している者です。
発注も行っておりました。一意見としてご参考になればと思い、回答させて頂きます。

結論としては、当事者間でいかに緻密な連絡をとるかでやり易くもやりにくくもなります。
（結局、緻密な連絡ができず、兼務することになっているのですが・・・。）

長文となり申し訳ないのですが、ウェブ作成時の流れ概要、その段階ごとの困った点という流れで記載いたします。
・・・技術者視点か、と言われると微妙です・・・

当方のウェブ作成時の流れと困った点は大まかに下のような感じです。
（肝は両者間の連絡取り合いによるイメージの共有と、共有できるくらい土台の
知識があるかどうかかな？と感じております。）

１．コンセプト・目的・必要なページなどもろもろ土台を決めます。
　　（ここ大事です。目的が決まっていないと大変です。
　　とりあえず作って！だけではデザイン側もコーディング側も大弱りです。
　　一番出戻りコストが発生しやすい根本です。（失敗談あり。）
　　どんな目的で、何のために作るのか。その場合、どんなページが必要なのか、
　　と細かく決めていきます。
　　ページ階層やそれぞれの目的もあると楽です。

　　そしてこの段階からデザインの方と共有します。（できればコーダーの方とも。。。）
　　そうするとここはこんな感じのデザインになります、それではこんなコーディングが
　　良いですね、とアイディアをいっぱい出して頂けます。ラフ画レベルまで
　　この段階で作ったりしてます。）

　　→参考までに...
　　どんなことをどんな風に決めるか、
　　実際にWEB作成の流れを掴まれると良いと思います。
　　下記サイトは非常に参考になると思います。
　　http://webdesignrecipes.com/web-development-flow/
　　目的によってデザインも異なります。
　　基本をしっかり作ると、後々楽です。

２．デザインでラフ画から細かいレベルまで作成（デザイン編）
（ワイヤーフレームのみの設計図のみでは、コーディングの方に
　ウェブデザインも色も画像も全て自分で判断してね、というお話になります。
　コーディング者は泣きます。正直。もれなくイメージと違うサイトができあがります。
　2回程経験しました。）

→ある程度の解消法

ラフ画だけではなく、
色、ピクセル、使用する写真など、フレームワークレベルよりもさらに細かく、
全ページ端から端まで色を載せたものを作ります。
そうすることで、コーディング側業務でここは何ピクセル？とかここは何色？
どのフォントを使用するかとか、フォントは商用利用可能かとか、そんな疑問を解消します。
そしてそのデザインを共有します。
なぜこのデザインか、サイトの目的にあっているか、コーディングはできるか、等。
明るい色にして、とかもうちょっと暗く、とか。
ここは動かしたいとかどういう風に動かそうとか。

部分部分は良いパーツでも、全体に載せてみたらぐちゃぐちゃ、なんてこと多々あります。
フォントの数とか、色合いとか。まとめるためのコツがありますので・・・。
それを経験してから、デザインは上から下まで作ることにしました。
以来、お互いの認識違いによる戻り手間が解消しました。

３．そのサイトの目的に沿ってコーディング

メンテしやすく単純なものにする、キレッキレの最新コーディングにする、など
目的に応じて言語を使い分けしてもらいます。
今はメンテナンス必須ですので、メンテナンスのしやすい単純なコードを使ったりしています。
きれっきれのコードで書いて、理解できずに結局全部リニューアル時に全カット。
よくよく見たら不安定な動きだった。ブラウザによって総崩れ。
なんていうこともありましたので。
デザイン画に従ったコードをお願いします、と何度も・・・。

　　　→あとはプラスとして・・・
　　　稼働検証も必須です。Macの場合、Macの主要ブラウザでは？
　　　Windowsの主要ブラウザでは表示が崩れないか？など。
　　　対応OSによってバージョンも異なりますので、コーディング時、ここのブラウザに
　　　対応したコーディングをしてください、とします。
　　　ブラウザによっては結構崩れたコーディングで納品されて、手直し、
　　　なんてこともありました。

時々デザインが甘くてコーディング⇔デザインでいったりきたりします。
途中でこんな風にしたい、とか出てしまいます。（WEBは流れが速いので...）
そうした場合はまた3者で相談→改訂といいう流れになりますね。

如何に両者間の連絡を密にとり、お互いの認識を一致させるか、でだいぶ解消します。

連絡が潤滑ができれば、やり易い業務になるかと。
（結局、当方が数回デザイン～コーディングまで担当して、基本知識をつけました。
全て細かくデザインまでやって、コーディングも使用するコードを限定して、
という感じで差異を少なくしています。
あとはテストを繰り返してオープンしています。
オープン時に出る想定しなかった差異など、それでも出てしまう差異部分はこっちで直してます。）

ご参考になれば幸いです。

※余談
遠隔で離れている人との連絡は、下記ツールを使ったりしています。
タスクもあわせて管理できるので、楽です。
グループとなると有料ですが・・・。
http://www.chatwork.com/ja/