制作フローがわかる!Webサイトができるまで

様々なプロセスを経て、
Webサイトは作られています。
あなたは、どの工程のスペシャリストを目指しますか?

  • 企画
  • デザイン
  • Flash
  • コーディング
  • システム
  • 公開
  • 運用

企画

  • 企画
  • デザイン
  • Flash
  • コーディング
  • システム
  • 公開
  • 運用

まずはオリエンテーションの場で、クライアントの課題やWebサイトをつくる上での目的、条件や要望、スケジュールなどをヒアリングします。その後、コンセプトやタイトル、具体的なコンテンツまで、Webサイト全体の方向性を決めていきます。どんな人に見てもらいたいのか、そのためにはどんな工夫がいいのかなど、何度もリサーチや打ち合わせを重ね、完成形のイメージを明確にしていきます。クライアントの要望によっては、PC向けのWebサイト以外にスマートフォンなどのマルチデバイスに対応したWebサイトについても考慮する必要があります。Webサイトの仕様(使う技術やサポートするWebブラウザー)や、Webサイトの構造 (サイトマップ)もクライアントとの打ち合わせの中で定めていきます。

サイト仕様書
サイト仕様書
サイトマップ
サイトマップ

※上のサンプルはあくまで一例です。

使用ソフト
  • Powerpoint
  • Word
  • Excel
誰が行いますか?
Webプロデューサー/Webディレクター
オリエンテーション(オリエン)で大切なことは?

メールや電話では伝わりにくいニュアンスをくみ取り、クライアントのニーズを的確に把握することが大切です。
オリエン後に議事録を作成して、プロジェクトチーム内で共有する場合もあります。

ページトップへ戻る

デザイン

  • 企画
  • デザイン
  • Flash
  • コーディング
  • システム
  • 公開
  • 運用

Webサイトを立ち上げる目的やその企業のコンセプトやメッセージを伝えるために、デザインはとても重要な要素です。世界観やモチーフのアイデアをいくつも出し合い、企画趣旨に適した表現を探ります。ユーザー目線での使いやすさや見やすさを配慮した上でのページのレイアウトやJavaScriptによる動的な部分も考えてラフデザインを作成。このラフデザインをもとに、IllustratorやPhotoshopでデザインカンプを作成し、かたちにしていきます。また、スマートフォン向けのWebサイトを制作する場合には、スマートフォンの画面サイズを考えたレイアウト別のデザインパターンも作成します。

Illustrator
Illustrator
Photoshop
Photoshop
使用ソフト
  • Illustrator
  • Photoshop
  • Fireworks
  • Dreamweaver
  • Flash
誰が行いますか?
Webディレクター/Webデザイナー
どうしてラフが必要なの?

ラフを作成せず、曖昧なイメージのままデザインをはじめると、途中でコンセプトを見失ってしまうことも。デザインの完成形を頭の中にしっかりと描くためにも、ラフはとても大事なのです。

マルチデバイス対応とは?

Webサイトだけでなく、スマートフォンサイト、Facebookページなど様々なデバイスに合わせた画面サイズのデザインパターンの制作を行うケースが年々増えています。それぞれのデバイスに目を光らせて、それぞれどういうレイアウトが一番最適かを考えておくといいでしょう。

ページトップへ戻る

Flash

  • 企画
  • デザイン
  • Flash
  • コーディング
  • システム
  • 公開
  • 運用

WebサイトでFlashコンテンツを利用する場合は、デザインが完成次第、Flashの制作がスタートします。シーンの移り変わりやアニメーションの演出にこだわり、楽しい仕掛けを生み出します。Flashコンテンツのなかには、コメントの投稿機能や画像投稿機能など、システムやプログラムと連携するものもあります。WebデザイナーとWebプログラマーがそれぞれの得意分野を活かしながら、制作、開発を進めていきます。

Illustrator
Illustrator
Photoshop
Photoshop
Flash
Flash
使用ソフト
  • Illustrator
  • Photoshop
  • Flash
誰が行いますか?
Webディレクター/Webデザイナー/コーダー
Flashを制作する体制は?

大きなプロジェクトでは、複数人がページ単位で分担して制作することもあります。その場合、担当者間で適宜お互いのFlashを確認し合い、統一感に配慮しながら制作する必要があります。

ページトップへ戻る

コーディング

  • 企画
  • デザイン
  • Flash
  • コーディング
  • システム
  • 公開
  • 運用

Webサイトの仕様、サイトマップ、デザインカンプをもとに、HTMLやCSSを記述して、実際のページを組み立てていきます。この作業を「コーディング」や「マークアップ」と言います。制作会社によってはコーディングを行う際のルールが定められたコーディングガイドラインがあり、このガイドラインやサイトの仕様に沿って制作を行ないます。コーディング済みのページがWebブラウザーで正しく表示できるか、動作するかのチェックや、制作スケジュール管理も重要な仕事の一部です。

コーディング仕様書
コーディング仕様書
Dreamweaver
Dreamweaver

※上のサンプルはあくまで一例です。

使用ソフト
  • Dreamweaver
誰が行いますか?
Webディレクター/Webデザイナー/コーダー
Webブラウザーの種類によって表示は変わるの?

Internet Explorerをはじめ、FirefoxやSafariなど、多様なWebブラウザーがあります。Webブラウザーによって言語の認識のされ方が異なるので、レイアウトがずれて表示されてしまうことがあり、コーディングの際には注意が必要です。

ページトップへ戻る

システム

  • 企画
  • デザイン
  • Flash
  • コーディング
  • システム
  • 公開
  • 運用

お客様のニーズに合ったシステムを構築するのは、Webプログラマーの仕事です。プログラミング言語を駆使しながら、動的なページを作成していきます。Flashやサーバーと連携した開発になることも多く、プログラム完成後の動作検証(正しく機能するかの確認)もとても大切な仕事です。デバッグ(プログラムの間違いを修正する作業)は、場合によってはかなりの時間がかかることがあります。

PHPコード
PHPコード
使用ソフト
  • Dreamweaver
  • Flash
誰が行いますか?
コーダー/Webプログラマー
どうして検証が必要なの?

画面上では問題ないように見えていても、正しく動作しているとは限りません。システムはHTMLとは違い、毎回同じ画面が表示されるとは限らないため、念入りに検証を重ねることが求められます。

ページトップへ戻る

公開

  • 企画
  • デザイン
  • Flash
  • コーディング
  • システム
  • 公開
  • 運用

各段階での念入りな検証後、テストアップを行ないます。そこで更に、見た目のおかしな箇所はないか、リンク切れや誤字がないか、Flashやシステムの動きに問題がないかなどを検証し、問題があればすぐに修正作業に取りかかります。これを繰り返し、クライアントからOKの確認が取れれば本番用のサーバーへファイルを移し、いよいよWebサイトの公開です。

使用ソフト
  • Illustrator
  • Photoshop
  • Dreamweaver
誰が行いますか?
Webディレクター/コーダー/Webプログラマー
テストアップってなに?

テストサーバーへの仮アップロードを「テストアップ」と呼びます。本番サーバーにアップしてしまうと、世界中の人が見られる状態になってしまいますが、テストサーバーにはアクセス制限があります。閲覧を許された人しか見ることができません。

ページトップへ戻る

運用

  • 企画
  • デザイン
  • Flash
  • コーディング
  • システム
  • 公開
  • 運用

Webサイトは、完成すればそれで終わりではありません。アクセス解析などによって効果測定や情報収集をしながら、定期的な更新や改善を行なっていきます。つまり「運用」とは、Webサイトが成果を生み出すための管理作業全般のことを指します。Webサイトの運営は、制作会社や別の専門業者がクライアントの委託を受けて行う場合と、クライアント自らが行う場合があります。Webサイトは何らかの効果を上げるために制作するわけですから、この運用が最も重要なフェーズです。

使用ソフト
  • Illustrator
  • Photoshop
  • Fireworks
  • Dreamweaver
  • Flash
誰が行いますか?
Webディレクター/Webデザイナー/コーダー/Webプログラマー
アクセス解析ってなに?

Webサイトに訪問した人が、どのリンクから訪れたのか、サイト内でどこを見たのか、などを解析すること。ユーザーの様々な情報を収集することができ、Webサイトの効果的な運用には欠かせない機能となっています。

ページトップへ戻る

Web資格講座コース一覧

  • 無料体験セミナー 業界のこと、適職のこと。あなたの疑問に答えます。
  • 講座説明会 なんでもご相談ください
  • 適職診断 あなたにピッタリの職種をお教えします。
  • 資料請求 受講生、卒業生のリアルなホンネ。就・転職成功の理由を教えます。
全国校舎一覧
北海道・東北エリア
関東甲信越エリア
中部エリア
近畿エリア
中国・四国エリア
九州エリア