サイト制作時に発生する費用

分かっているようで分かっていないサイト制作の費用。Web担当者（クライアント側）が一番知りたいところだと思います。実は制作側の人間も適正価格について理解できていないのが現状では？　実際、無料ブログや格安制作会社・制作システムなどを利用すれば、格安あるいは無料でサイトを構築することはできます。しかしながら、一から制作つまりオーダーメイドとなればそれなりに費用も時間もかかります。

• ディレクション費
• デザイン制作費
• フロントエンド開発費
• バックエンド開発費
• ブラウザ検証費

サイト制作時にはこれらの様々な費用が発生します。それを基に見積もりを起こしてみましょう。

この見積書には必要最低限の項目しか入っていません。制作会社によってはさらに細かく項目分けがされていると思います。CMSを導入する場合は、当然バックエンド開発費がかさみます。
高いと思いますか？特殊な技術や知識を極めたデザイナーや技術者が、オーダーメイドで制作にあたるわけですから、これぐらいの費用は発生して当然で、これが適正価格なのです。一広告媒体として考えれば、365日24時間、しかも全世界に発信するわけですから、むしろ格安です。

Webデザイナーとのコミュニケーショントラブル（デザイナー側の不満）

制作上でのトラブル

• 「いい感じ」「方向性は正しい」など曖昧な指示を出す・受ける
• 「キーワード」にこめられた「イメージ」がずれている
• 「参考サイト」のどこを参考にするのかがずれている
• 「ディレクターの指示」「ワイヤーフレーム」通りにしかデザインできない
• 納期（次工程への納期も含む）に余裕を持たせない

「いい感じ」「方向性は正しい」など曖昧な指示を出す・受ける

「いい感じ」「方向性は正しい」あるいは「まかせる」、そのまま信用してしまうと、絶対に後でトラブルになります。
Webディレクターが細かくデザイン指示を出せばいいのかもしれませんが、あくまでクライアントの要望を正しく伝えるのがディレクターであり、その要望をデザインという形にして出すのがデザイナーです。そもそもディレクターはデザイナーではありません。
では、どうすれば正しい（要望に合致した）デザインを出せるのでしょうか。
やはりWebディレクターに的確に質問をすることが重要です。基本的には、Webディレクターがクライアントからヒアリングを行なった内容の確認を行なえばいいと思います。

• このサイトの「目的」は？
• どのような「ターゲット」を想定しているのか？
• ターゲットに対してどのような「流入経路」を想定あるいは用意しているのか？検索による「流入経路」を想定しているのなら、「検索キーワード」は？
• サイトで扱う商品・サービスの「売り・強み」は？
• サイト全体の「デザインテイスト」に対する希望は？
• 「参考サイト」は？また、どの部分を参考にしたいのか？
• 「競合サイト（同業種に限らず）」は？また、どこに差をつけたいか？

Webディレクターとデザイナーで、受け取り方や解釈の違いが出るかもしれませんが、少なくともクライアントの要望そのものを共有できているはずです。

「キーワード」にこめられた「イメージ」がずれている

たとえば、「豪華なホテル」のサイトを作成することになったとします。この「豪華な」というキーワードに対して、あなたはどのようなイメージを持つでしょう。

• 都会の先進的な高層ホテル
• リゾート地の伝統的で重厚なホテル
• 料理が自慢の温泉地の老舗旅館

このように、全く異なったイメージを想定することも可能です。クライアントの「豪華な」というキーワードに想定しているイメージと、ディレクターが想定しているイメージが違う場合があれば、デザイナーのイメージもまた違うということもありえます。ズレを生じやすいキーワードに関しては、具体的なビジュアルイメージ、たとえば参考サイト（カタログなどの印刷物でもいいでしょう）などで認識を揃えておく必要があります。
特に認識のズレが生じやすいキーワードには次のようなものがあげられます。

• オシャレな
• インパクト
• ポップな
• カッチリ系
• 高級感
• お得感
• 安心感
• 信頼感
• さわやか
• 清潔感
• フェミニン
• 親しみ

「参考サイト」のどこを参考にするのかがずれている

「これが参考サイトです」こう言われても、具体的にどこをどう参考にすればよいのかわかりません。
クライアントやディレクターの参考サイトの選び方というのは、「どこが良い」よりも「何となく良い」という漠然とした理由で選びがちです（それはそれで参考にはなりますが）。「参考サイトのどの部分をどう良いと思ったか、全体的に良いと思ったのならどのような印象を持ち、それはどこから得た印象なのか」をお互い事前に確認しておかなければ、デザインにズレが生じます。
確実に情報を共有するためには、同一画面で確認しながら参考点を指摘することです。あるいは、画面キャプチャ画像に参考点を明示し、コメントなりをつけて確認しあう方法もあります。その場合は、電話等で口頭確認も忘れないようにしましょう。
Windows10に標準搭載されているブラウザEdgeは、画面上にコメントを記入し共有することができます（参照：Microsoft EdgeでWebページにメモを書き込む方法）。この機能を利用するのもいいでしょう。

「ディレクターの指示」「ワイヤーフレーム」通りにしかデザインできない

よく現場で問題になる事例です。この問題についてはベテランのディレクターやデザイナーでも意見が分かれるのではないでしょうか？
「ディレクターの指示」や「ワイヤーフレーム」はあくまで構成やレイアウトであり、各パーツのデザインやコンテンツ配置のバランス調整はデザイナーの腕の見せ所です。ディレクターからの指示やワイヤーフレームをベースに、要件定義書に基づいてサイトの目的やゴールに導けるデザインを行うのがデザイナーの仕事です。与えられた構成資料の内容を、考えもなくそのまま流しこむことを「デザイン」とは呼びません。それは「オペレーション」つまり単純作業です。
では、具体的どうすれば「単純作業しか出来ないオペレーター」から「クリエイティブに考えられるデザイナー」になることができるのでしょう。

1.サイトを閲覧する側すなわちターゲット側の目線で考える

プロジェクト立ち上げ当初からクライアントと深く関わっているディレクターは、どうしてもクライアント側の目線（売り手目線）になってしまい、情報を受け取る側よりも発信する側の都合で構成なりを考えてしまいがちです。
利用する側に立って考えると、ここはもっと目立つほうがいい、ここはこの位置よりこっちの方がいい、これはいらないといった冷静な第三者視線を持つことができるので、より効果的なサイトのデザインが可能になります。そこから生まれるアイデアは、まさにユーザー側の利便性につながります。

2.ラフを描く

ディレクターからの構成資料を基に、一度紙にラフを描いてみます。映像における「絵コンテ」のような感覚です。ラフを描くメリットには次のようなものがあげられます。

• 構成の意図を理解しやすい
• アイデアをすぐに形に出来るため柔軟なデザインの発想が生まれる
• コーディングを念頭に置いたデザインとならない（なりにくい）

また、そのデザインにした客観的な理由を説明しやすいという利点もあります。

とはいっても、デザイナーが若手の場合、なかなか自分の考えやアイデアをデザインに盛り込むことはできません。できないというよりやってはいけないという雰囲気になります。ディレクターがベテランでデザイン経験者の場合、「へんなアレンジしなくていいよ。こっちはクライアントの要望を形にして構成しているんだから、適当にイメージカラーをベースに色付けしてコンテンツを流し込むだけでいいよ」。こういうディレクターいますよね。しかし、まあこの場合は、不本意でも従っておけばいいと思います。サイトの目的とゴールに合致していなくても、そこはディレクターに責任を取ってもらいましょう。