どんな流れでWebサイトを作っているの?

Webはどのようなプロセスを経て作られるのかをご紹介します。

独学!未経験からWebデザイナーになる!! > Webデザイナーを知る > どんな流れでWebサイトを作っているの?

どんな流れでWebサイトを作っているの?

※当サイトは、アフィリエイト広告を掲載し、収益を得て運営しています。

Webサイトを作るには、HTMLやCSSなどの言語や仕様、そしていろいろなソフトが使われているということがお分かりいただけたと思います。これらを駆使しながら、皆さんが閲覧できるWebサイトに仕上げていくのが私たちの仕事です。

しかし、現時点では知識が「点と点」といった状態で、いったいどのようにしてWebサイトが作られるていくのかは、まだ想像がつかないことでしょう。

そこでこのページでは、私のケースを例に、実際の制作フローについてご紹介しようと思います。ちなみにこのフローも会社により多少異なってきますが、大筋ではどこも同じような流れになると思います。

それでは順番に見ていきましょう。

制作案件を確認するための打合せ

まず最初にすることは、制作案件の確認をするための打合せです。Webサイトの制作を依頼してくるクライアントは、必ず何らかの目的・理由があって依頼をしてきています。その目的を達成するために、クライアントとじっくり話し合って情報を引き出すのです。

この段階でしっかりとヒアリング(聞き出すこと)しないと、目的が不明瞭な、いわゆるダメなWebサイトになってしまいます。ここでは、あせらずじっくりと打合せをしなくてはなりません。 どんなことをヒアリングするのか、例を挙げてみましょう。

  • クライアントのビジネスはどのようなものか
  • Webサイトの目標はなにか
  • ターゲットの属性はどんな人か
  • 見た目重視か実用性重視か
  • ページ数は何ページ作るのか
  • スクリプトは必要か
  • データベースは必要か
  • イラストはどの程度必要か
  • フラッシュは必要か
  • 対応ブラウザについてはどうするか
  • ターゲットに合う色は何か
  • やわらかいタッチにするか、かたいタッチにするか
  • 文字の大きさはどうするか
  • etc...

といった感じです。ここに書き上げればきりがない程たくさんのことをヒアリングします。クライアントの要望をできる限り引き出すことがプロジェクトを成功させる鍵となりますので、絶対に手を抜けない部分と言えるでしょう。

デザイン作成

次に、Fireworksを使って、ワイヤーフレームと呼ばれる、Webページの設計書を作ります。コンテンツの配置などを、デザイン要素を省いて作り、クライアントに確認&意見を求めます。

そこで承認を得たら、次はデザインに入っていきます。ここでもまた、逐一クライアントによる確認ステップを挟みます。なぜなら、後になって「やっぱり変えたい」などといったどんでん返しが発生しないようにするためです。そうなってしまうとコストも増えますし、なによりお互いにとって幸せではありません。適切なステップで確認&承認してもらうことにより、問題の発生リスクを低減させているのです。

このデザイン段階において、小さな部分を丁寧に作り込んでいくと、見た目が綺麗なWebサイトになります。この作りこみには比較的時間がかかるので、クライアントの予算の面からあまり時間をかけられない案件も多々あります。

デザインの最終確認

全ページの画像を作り終えたら、クライアントにデザインの最終確認をとります。 この最終確認をきちんとせずに次のステップに進んでしまうと、あとあと面倒なことになりかねません。ですので、このステップはとても重要です。簡単に言えば、ここでデザインは〆(シメ)ということですね。

HTMLへ書き出す

デザインの承認を得たら、HTMLへの書き出し=コーディングに進みます。Fireworksのスライス機能を利用して、Webサイト用に画像を書きだしていきます。その書きだした画像を、DreamweaverにてHTMLを記述し配置していきます。

書き出し作業というのは、画像そのままにHTMLにしていけばいいだけですので、慣れてくると簡単なサイトであれば、比較的単調な作業になります(単調というか、無意識に手が動く)。HTMLで文書を適切にマークアップ(簡単に言えば、「ここは見出し」等と意味づけすること)していき、通常はCSSを使用して見た目を調整します。なお、HTMLタグは基本的に手打ちです。

動作チェック・納品

様々なブラウザで、Webページの表示チェックを行います。ここのステップで、癖のあるブラウザのために結構時間をくってしまうこともたまにあります。その後クライアントに最終確認をしてもらい、問題なければ納品です。

納品方法は、直接先方のサーバーにアップしてしまうことがほとんどですね。

完了!

以上、結構大雑把でしたが、上記のような流れで私はWeb制作を進行しています。実際にはもっと細かくフローが入ってくるのですが、あまり細かくても分かりづらいので、今回は要点をご紹介しました。大体の流れをつかんでいただけたらと思います。

↓もし参考になりましたら、シェアしていただけると嬉しいです(^-^)

12/06/30 facebookページ開設しました。RSS代わりにも使いたいと思います。

コメント

black rain さん 2011年07月25日04時49分
なるほど‥なんとなくイメージできました
YOSHI さん 2013年03月31日01時25分
私は、ゲームを遊びで作ったことがありましたが、
とりあえず適当な画像を使ってコードを打って大まかな動きを作成し、
画像を作成またはフリー素材を借りて、
動きを微調整をしていました。
画像が後になるのは、コードを打っているうちに、
思いついた動きや機能を付けてしまうからです。
ですが、はじめにイメージをしっかり完成させておくことで、
画像を先に用意してスムーズに開発できるのですね。
参考になりました。
馬場誠 さん 2013年03月31日16時53分
お仕事だと予算が決まっている関係上、スムーズにことが運ぶよう、このようなフローになるんですね。個人のサイトなら、思いつきも結構ありますけれど(^-^)
Takeshi_Murakami さん 2013年04月25日09時16分
今まで友人のお店のサイトやチラシを無料(納期決めず)に作ってきたので、やっぱり納期は予算も含めて大事にすべきですね。
馬場誠 さん 2013年04月26日21時58分
Takeshi_Murakami さん
おっしゃるとおりだと思います。予算と納期があってこそ、計画的に進行させることができますし、クオリティを維持することができると思います。

無料案件でよくあるのは、サービスだからこのくらいでいいか、と思ってしまいがちですし、相手も注文をつけづらいところがありますしね。
maido さん 2014年06月16日16時18分
田舎でDTP作業をしています。会社のパンフレット作成を依頼された時、ついでにその会社のホームページもデモの形で作成してCDで持ち込みます。大抵気に入ってもらえるのですが、サイトへのアップはその会社でしてもらうように頼みます。
結局その時点で忙しいのか、その会社のホームページが更新されることはありません。更新されないということは作成費も貰えないので、私の勉強と言うことで何時も終了しています。

『納品方法は、直接先方のサーバーにアップしてしまう』というのは、相手のftpサイトパスワードも教えてもらうのですか?
馬場誠 さん 2014年06月16日19時02分
maidoさん、こんばんは。

おっしゃるように、FTPアカウントを教えてもらい、サーバーにアップします。
クライアントさんの方でアップできないことが多いのと、本番環境でシステム(お問い合わせフォーム等)が正常に動作するかの確認のため、大抵はそうなります。

アップしたら料金が発生する……という契約だと、本当にその作られたページが必要でないとアップしてもらいづらいかもしれませんね。

契約のしかた、または提案の仕方を考える必要があるかもですね☆
Webデザイナーを知る
Webデザイナーってどんな仕事をするの?
どんなソフトウェアを使用するの?
├どんな流れでWebサイトを作っているの?
Webデザイナーの働き方は?
収入(年収・月収)はどれくらい?
Webデザイナーの将来性は?
Webデザイナーの適性とは?
Webデザイナーになるのは簡単?
Webデザイナーになるにはどのくらいお金がかかる?
業界未経験でもWebデザイナーになれる?
Webデザイナーの世界を体験してみよう
おまけ : FAQ-よくある質問と回答