ホームページ制作業者に制作を依頼！完成までにいったいどのようなやり取りをするの？

公開日： 2013/05/15 : 最終更新日：2013/10/31 ホームページ制作ホームページ, 制作業者

このシリーズでは前回どういうことに注意してホームページ制作業者を選定・発注するのか、というあたりを話しました。今日はいよいよ発注した後、ウェブサイト完成までにどんなやり取りが待っているのか、というお話です。

サイト設計・要件定義

まずは発注前から話していた内容の続きになりますが、要件定義を行います。
発注者であるあなたの目的が明確で、それを正しく業者に伝えきれていれば、業者がその内容を深く掘り下げて「要件定義書」を作ってきます。
ウェブサイトの目的は何か、それを実現するために必要となる機能・レイアウト・デザイン・コンテンツ（掲載する文章や画像・動画などの内容）は何か、といったものをまとめた資料です。この内容に対してあなたが承認するところから、制作作業がスタートします。

まずはこれから何を作るのかを明確にする、ということですね。
業者によってはきっちりまとまった要件定義書というものの用意がないかも知れませんが、どういったものを作るのか、という認識は一致させておいた方がいいでしょう。ココを怠るとビフォーアフターのように思いもよらぬ斬新なものを作られてしまう可能性が出てきます。なんということでしょう。

要件定義が固まったところで、続いてサイト設計に移ります。
要件定義の内容を実現するためには、どういう技術をどこに使うのか、どのコンテンツをどこに載せるのか、ウェブサイトを訪れたユーザにとってどこに何があれば便利なのか、最も読んでもらいたいコンテンツへうまく誘導できるのか、といったことを事細かに設計していきます。
要件定義まではあなたの意向を確認することが第一義、あなたの目的がしっかりしていないといいものにはなりませんが、サイト設計の段階はむしろ制作会社の腕の見せ所、下手に口出しをしないほうがいいでしょう。
建築に例えると、強度なども計算しながらの設計段階ですので、素人がココの柱は邪魔だから要らないとか、あまり余計なことを言って業者の仕事を妨害しないように。
どのような構成が提案されてくるのかを楽しみに待ちましょう。
サイト設計が示された段階でそれぞれ、この部分は何を目的にそのような設計にしたのか、ということを確認していき、当初のコンセプトに沿ったものであるかどうかをチェックします。

設計が固まったところで、その構成でウェブサイトを作る場合に必要なサーバのスペックが判明します。
ウェブサイトは、ウェブサーバと呼ばれるコンピュータの上に、そのウェブサイトを構成するファイルやデータを置き、そのデータをインターネット上で公開することで成立します。
サーバ自体はコンピュータですので、データの処理速度や、置いておけるデータの容量、使えるプログラムの内容などが異なってきます。
もちろん高機能なものであればあるほど費用がかさみますので、設計されたウェブサイトが正しく動くだけのスペック（機能）を揃え、なおかつ高機能過ぎないものを選定します。と言っても素人にはどれがいいのか、なかなか判断がつきませんから、業者のおすすめする中から選ぶことになるかと思います。すでにウェブサイトを持っていて、それをリニューアルするのが今回の計画であれば、既存のウェブサイトが載っているサーバをそのまま使う形もあります。

それから、昨日の話でも言及したドメインの選定。
ドメインは世界に一つきりのものなので、早い者勝ちになりますが、誰かに抑えられていない限り基本的には自分で好きなものを使えます。会社名やサービス名をドメインにするのがスタンダードですね。決め方には一定のルールがありますし、ドメインも含めてのサイト設計でもありますので、あなたの意向を踏まえて制作業者との協議の中で決めていくことになるでしょう。

以上の準備が整ったところで、いよいよ制作作業がスタートします。
（場合によってはある程度並行して下の作業に入ることもあります）

デザイン作業中の確認事項。確認のための資料。

ここから先の進め方は業者によって、サイトの設計によって変わってきます。
だいたいこのようなことを決めながら進むんだな、と思っていただければ結構です。

まず設計を受けて、制作会社の抱えるウェブデザイナーが、実際にページのデザインを始めます。
彼らがデザインに使うツールはまちまちです。Photoshopとか、Illustratorとか、聞いたことがあるかも知れません。
これに関してどのような作り方で作業をしているのかを理解する必要はありませんが、途中要所要所でその時点でのデザインを見せられて、それで問題ないかという確認を求められます。
デザインを見せられて、あるいはその説明をもらって、そのまま進行してよいか、修正すべき個所はないかということを指示します。
修正とは言ってもデザイナーは最初に決めたサイトのコンセプトやサイト設計に従ってデザインをしていますので、思いつきでここは赤くしろとか、ここはこの写真じゃなくてこれを使えとか、この文章はもっと左に置けとか、そういう指示はやめてください。
無茶な指示を言われても突っぱねる業者であればいいですが、相手が客であるからとそこで従ってしまう業者ですと、こういう修正指示を繰り返していくうちにせっかく最初に決めたコンセプトや設計が狂ってきます。
それでは今の時点でのあなたの要望通りではあっても、完成したサイトに意味はありません。
「この部分がこうだと自分が伝えたコンセプトと異なるから直してくれ」という指示がいいです。
「直せ」というだけで「こうしろ」と言わないのがポイントです。素人が下手に口を出すよりも、もう一度コンセプトを思い出させてプロに作り直させる方がいいものができるでしょう。
相手が残念ながら具体的な指示が必要な制作業者でしたら、何かこちらで考える必要が出てきますが、その場合も思い付きではなく、当初のコンセプトを思い出し、自分が客ならこの場所には何があってほしいか、何があれば便利か、と、あなたではなく客の立場に立って考えてください。

さて、デザインの途中段階で見せられる資料にもいろいろあります。

ワイヤーフレーム

ワイヤーフレームというのは、本格的なデザイン作り込みに入る前に、ざっくりこんな感じのレイアウト、イメージで行きますよ、というのを主に線（ワイヤー）だけで描いた資料です。このあたりに写真が入って、このあたりが文章で、サイト全体のメニューがこのあたりに入りますよ、というざっくりしたレイアウトを確定させます。サイト全体でワイヤーフレームは一つだけ用意されることもありますし、ページによって複数のレイアウトがあるようなサイトを設計するのであれば、レイアウトのパターンが用意される数だけワイヤーフレームも出てくるでしょう。

デザインカンプ

ワイヤーフレームで決まったレイアウトをベースに、画面内それぞれの要素をきれいに作り込んでいきます。
画像の一枚絵で見せられることが多いですが、見た目上は、完成形のウェブページの画面にかなり近づくことになります。

プロトタイプ・モックアップ

ウェブページの見た目上の問題は上のワイヤーフレーム、デザインカンプの流れで決めていくことができますが、作ろうとしているものが動きのあるページの場合、静止画であるワイヤーフレームやデザインカンプでは決めきれない部分が出てきます。
例えばショッピングカート機能を作ろうとしていて、商品をクリックして買い物かごに入れた場合の動きとか、申込フォームで都道府県を選ぶと、その下に選んだ県内の市町村リストが表示される、と言った場合。
そこで登場するのがモックアップやプロトタイプです。

これらはどちらも、ワイヤーフレームやデザインカンプのような静止画像ではなく、完成品のサイトと同じ動き、もしくは完成品がイメージできる程度の動きが表現されています。実際に複数のページがリンクでつながっていたり、ショッピングカートであれば商品をクリックしたときにどういう動きをするのか、決済する画面にはどう移行するのか、申込フォームの入力に不備があったらどうなるのか、といったことが確認できます。
モックアップとプロトタイプは「試作品」という意味でかなり似通ったものですが、モックアップはその動作検証の為だけに作られたもので、確認作業が終わればお役御免となるもの、プロトタイプはそれをさらに磨き上げていけばそのまま完成品になるもの、という違いがあるようです。

インターネットが普及し、ウェブサイトのデザインという仕事が誕生したころは、何しろ今までになかったものなのでウェブサイト制作の流れ、というものが確立されておらず、従来からあった紙媒体のデザイン（ポスター、チラシ、誌面など）の制作フローが応用されていました。そのため、静止画像での確認となるワイヤーフレーム、デザインカンプと言ったものの役割が近年まで大きかったのです。
が、そもそもウェブサイトは紙媒体とは違って複数の画面から成り立ち、リンクをクリックすることで画面が切り替わるという、紙媒体にはない特徴がありましたし、ショッピングカート機能やフォームでの情報送信機能、検索機能、ユーザの操作によって画面の内容が切り替わるなど、紙媒体では不可能な機能が提供されています。
さらに言えば、紙媒体であれば印刷してしまえば誰がどこで読んでも全く同じものになりますが、ウェブサイトの場合は利用者が閲覧している環境、つまり、パソコンなのかスマホなのかタブレットなのか携帯なのか、モニターの画面サイズはいくつなのか、使っているブラウザは何なのか、などの条件によって、同じページであっても表示のされ方が異なる、という特徴があります。

そのため、ここ数年で、さほど動きのないサイトの制作であってもモックアップやプロトタイプを使った途中確認のやり方が普及してきています。デザインカンプで確認してもそれはあくまで想定している環境で閲覧した場合の見え方であって、違う環境での見え方は異なる可能性があるからです。実際に動作するプロトタイプでの確認であれば、確認する側もパソコンで見たり、スマートフォンで見たり、いろいろ試してみることができます。

制作の途中で確認を求められることの意味。

以上、制作途中で制作業者から出てくる様々な確認資料についてお話ししました。
実際にどのような資料で途中確認が出てくるかは業者によってさまざまですが、概ねこのように要所要所でそこまでの作業、次の工程の方向性について、クライアントの認可を経ながらサイトの制作は進められます。

業者によって確認を求めるタイミング、その頻度はまちまちですが、全く途中確認なしで納品、というのは一部の格安サービスを除いてはないでしょう。
クライアント側にしてみれば、全体像が分かりにくい途中段階でいちいち確認を求められるよりも、完成したものを見せられて、それに対して修正指示をした方が楽なわけですが、なぜこのように細かな途中確認が入るのでしょうか？

途中確認の目的は、設計したサイトと、実際に出来上がるサイトとの間にズレが発生してしまったり、単純に間違えがあったりする場合、修正を加えなければならないわけですが、そのズレやミスを早期に発見して修正を加えた方がスムーズに事が運ぶからです。

同じ修正でも、簡単な修正、難しい修正があります。
どのような修正が簡単で、どのような修正が難しいか、というのはなかなか制作技術面の知識がないと判断がつかないですが、大まかにいうと上流工程でのエラーの修正は大変、逆に最終段階でのエラーの修正は簡単、という傾向があります。

最上流工程であるサイトのコンセプトやサイト設計にミスがあった場合、完成後にそれに気付いたとしたらまたゼロから作り直しになってしまいます。同じように、ワイヤーフレーム段階で確認をすることになるレイアウトの変更を完成後にするとなると、すでにページ上に配置されている画像や文章をいったん全部撤去して、新しく直したレイアウト上にまた配置し直す、という手間がかかります。
逆に最終段階で作り込むことになる文章や画像に誤植などがあった場合は、該当箇所の文章・写真を差し替えるだけで済み、それまで時間をかけて作り込んだサイトの設計を見直したり、レイアウトを作り直したりする必要はありません。

住宅の建築で例えますと、家が完成してから柱をヒノキに変えろ、と言われてもまた一から作り直すしかなくなってしまいますが、水道の蛇口を別のものに変えろ、程度であればその場所だけ直せば済みます。そのようなイメージです。

つまり、業者が途中段階で確認を求めてくるときは、その段階を超えて次の段階に行ってしまうと修正が大変、場合によってはそれまでの仕事がパーになって一からやり直しになってしまう、という場合です。彼らも設計したサイトを決められた予算内で作るには、予定された作業時間内で仕事を終わらせなければ利益が出ないわけです。
完成してから初期段階の修正を求められた場合、また一から作り直す、つまり作業的には2サイト作るだけの手間をかけることになってしまいます。仕事100万円で請け負ったのに実質50万で請け負ってしまった状態に。
それが業者側のミスであり、途中確認で気づかなかっただけ、ということであれば、そこはもう業者が泣くしかないわけですが、気の毒なので途中確認はめくら判を押すようなことはせず、しっかり説明を聞いて理解してください。

完成してしまってから発注側の条件が変わってしまい、基礎から修正が必要になった、となれば、それなりの追加料金が発生することになるでしょう。
実際は力関係次第で発注側の事情であっても業者に泣かせることも多いですが。。。

いずれにしろ、各作業段階の意味を分かって、目的も明確なクライアントとの仕事であれば、制作業者も力を発揮しやすいためいいものが完成するでしょう。