Webサイトを作るための基礎知識3〜Web制作の流れ 〜

Web技術

Web制作の流れ

  1. ヒアリング・ターゲットユーザーやコンセプトの設定・スケジュール作成
  2. 情報収集
  3. ワイヤーフレーム作成
  4. デザイン作成
  5. デザイン素材の書き出し(スライス / アセット)
  6. コーディング・プログラミング
  7. (必要な場合のみ)システム構築
  8. 検証・修正
  9. 公開

1.ヒアリング・コンセプトメイキング

クライアントの要望を確認し、ターゲットユーザー設定やコンセプトメイキングを行います。
また公開日までの詳細なスケジュールを作成します。

コンセプトメイキングではまずサイトを作るための目的を明確にします。
目的を明確にした後、それを達成するための具体的な手段(コンセプト)を考えます。
それによってどのようなコンテンツ・ページ構造・デザインかを決定します。

2.情報収集

ページに掲載するテキスト情報と画像情報(場合によっては動画や音声情報)を集めます。

多くの場合クライアントから一式受け取ることになりますが、撮影や準備が必要な場合誰がどのように行うかを決定します。

3.ワイヤフレーム作成

Webデザインは掲載する情報が多く、複数ページのデザインとなるためデザイン作成前にワイヤーフレームを作成します。
ワイヤーフレームでは色や詳細なデザインのことは考えず、レイアウトのみを考えることになります。
デザイン作成のための設計図と考えてください。

またワイヤーフレームの段階でクライアントの確認を取り、決定後は大幅なレイアウト変更が起こらないようにします。

参照:ワイヤーフレームの作り方完全ガイド【サンプル付き】

具体的な色やデザインのことは決定せず、レイアウトのみ確認できるものを作成します(クライアントにもそのように伝えた上で確認)

4.デザイン作成

ワイヤーフレームを元に、具体的なデザインを作成します。
この段階で大幅なレイアウト変更は行わず、あくまでレイアウトはワイヤーフレームに従います。

作成後クライアントに確認を行い、決定後は大幅なデザイン変更が無いようにします。

5.デザイン素材の書き出し(スライス / アセット)

デザインから素材の書き出しを行います。
単独で扱われる写真や画像を中心に書き出しをします。
画像の種類によって形式を選び、適切なファイル名を付けます。

ファイル名について

ファイル名は必ず半角英数字で付けます。

使用できる記号はハイフンまたはアンダーバーのみとなり、その他の記号やスペース(半角全角問わず)は使用できません。
ファイル名が適切で無い場合、ローカル環境で問題なく表示されている画像がサーバーにアップした後で表示されなくなる場合があります。

ローカル環境・・・Web制作においてデスクトップ環境のことをローカル環境と呼びます。またサーバー環境をリモート環境と呼びます。

・ローカル環境で確認:データをデスクトップ上で見ている状態
・リモート環境で確認:サーバーにアップしたデータを見ている状態

6.コーディング・プログラミング

デザインデータを元に、HTML・CSS・Javascript(jQuery)などを作ります。余白や大きさなどは必ずデザインデータ通りに作成するため、必要な場合あらかじめ数値を書き出しておくと良いかもしれません。

7.システム構築(必要な場合のみ)

WordPressなどCMSや、Webサイト上で扱われるシステムを実装する場合、PHPなどの言語を用いてシステム構築を行います。

8.検証・修正

各種ブラウザで表示の差異がないか検証し、必要であれば修正を行います。
テストサーバーにアップする場合、検索制御などをかけてURLを知っているユーザーのみ確認ができるようにします。

テストサーバーで表示・動作の確認を行った後、本番のサーバーにアップします。

9.公開

サーバーにデータをアップロードして公開します。

(検索制御などの設定をしている場合、記述を削除します)

>>FREMOWAのトップページへ戻る