Web制作の流れ~依頼から公開までのフロー~

このブログの記念すべき第一回目の記事です。

まずは、Webサイトの制作フローを解説します。

ここでは、他社からWeb制作の依頼を受けて制作を進めるというパターンで説明します。

私が小~中規模のサイトをメインで手掛けているので、この記事は小~中規模のサイトを想定しています。

大規模なサイトとなると制作フローは異なります。

大まかな制作フロー

大まかには、以下のようなフローになります。

Webサイト制作フロー

クライアントから依頼があり、打ち合わせを行います。その打ち合わせの内容をまとめたワイヤーフレームを作成します。

ワイヤーフレームを元にデザインを作成し、デザインをHTMLやCSSを使ってコーディングします。

HTMLやCSSによる構築ができたら、テストサイトをアップして不具合などがないか確認します。

そして、テストに問題がなければ正式に公開します。

それぞれの工程を説明していきます。

依頼・相談

仕事の依頼があれば、まずはミーティングを行います。

クライアントの希望を聞き、Webサイトを作る目的・ターゲットなどを明確にして方向性を決めます(ディレクション)。

ここはWebディレクターと呼ばれる人が担当します。小さなWeb制作会社などでは、Webデザイナーが兼務する場合もあるでしょう。

話し合う内容

Webデザインを進めやすくするためにも、ディレクションの段階でできる限り具体的な内容を詰めておきます。

  • Webサイトを作る目的・ゴールの設定
  • 訪問者の属性を確認する(年齢層、性別、仕事、所得層…etc)
  • コーポレートのイメージやカラー
  • ページ構成
  • おおまかなレイアウト(1カラム、2カラムなど)
  • 参考となるWebサイト
  • クライアント側が行うことを伝える(素材の準備、ドメイン・サーバーの準備)
  • CMS(WordPressなど)の有無
  • 予算

基本的にはこんなところです。

ワイヤーフレームの作成

クライアントとの打ち合わせの後、Webディレクターがワイヤーフレームを作成します。

全体のレイアウトをして、どこにどの要素を置くかを定めるための設計図です。

ワイヤーフレーム用のツールを使うや紙に書いて作ります。このあたりは制作会社によって異なります。

PCとスマホの両方を作成します。

ページの構成を把握できるようにサイトマップも作成します。

クライアントの要望を的確にデザイナーへ伝えられるように作成します。

実際にデザインをしていく

ここでクライアントから受け取る素材が揃っていれば良いのですが、基本的にはすぐに用意してくれるのは稀です。

ですので、フリー素材を使ったりグレーの四角を配置したりと仮の状態で進めます。

クライアントにとって初めてのWebサイト制作ではなく、サイトリニューアルなら楽です。文言や素材はリニューアル前の物を使えるので。

まずは細かいデザインをする前に、文言や画像などを配置してみます。

まずは、

  • メインカラー
  • サブカラー
  • 主なフォント(日本語・英数字)

はデザインを進める前には決めておくと良いでしょう。

コーディング

デザインができたら、それを元にHTML・CSSでサイトを組んでいきます。

HTML・CSSを専門としているコーダーやエンジニアがコーディングをするパターンと、Webデザイナーがコーディングをするパターンがあります。

多くのWebデザイナーがコーディングまではやっていると思います。

公開前に

公開までに、クライアントにドメインとサーバーを用意してもらいましょう。

慣れないWeb担当者だとドメイン・サーバーもよく分からないって場合もあるので、制作側でアドバイスや代行することもあります。

テスト

テストは、クライアントのサーバーにテスト用ディレクトリを作るか、制作側のテスト用サーバーを使います。

サイトの実行環境はサーバーによって異なるので、できればクライアントが用意したサーバーでテストした方が良いでしょう。

テスト用のディレクトリにはBasic認証で鍵をかけて、閲覧できる人を制限します。

そこで問題なく表示されれば

様々な閲覧環境で表示確認

テストアップをしたら、様々な閲覧環境で表示の確認をします。

  • Google Chrome
  • Microsoft Edge
  • Internet Explorer(11くらいは見ておいた方がいいでしょう)
  • Safari
  • Firefox

スマホなら、

  • Android の Google Chrome
  • iPhone の Safari

公開

テストアップもそうですが、サイトの公開はFTPクライアントを使って行います。

私はFileZilla Clientを使っています。

サイトのホスト名やパスワードを教えてもらい、アップします。

公開後の検証

サイトの公開後は、Google AnalyticsやSearch Consoleなどを使ってアクセス状況を確認できるようにしましょう。

(できれば無償ではなく、「サイト解析設定手数料」などと言って金額を上乗せしておきましょう。)

Web制作のおおまかな流れはこんな感じです。

とは言っても制作会社や案件によっては全然異なるフローになる場合もあるので、参考程度にしてください。

まとめ

Web制作未経験の人がこの記事を読むと、「意外とやること多いな」と感じるかもしれません。

制作会社によっては細かく分担している場合もありますし、一人で全てをこなす場合もあります。

Web制作の流れが分かっていると、Webデザイナーになって業務を行う時のイメージが掴めるかと思います。

Webデザイナーになりたいという人は、それぞれの工程を詳しく調べてみるといいでしょう。

それでは、また。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です