【Web制作】ー第1章ー全体の流れ

はじめに

こんにちは、内定者の鈴木です。
前回は、「Webディレクター」の仕事についてまとめさせていただきました。
今回から、「Webサイト制作」についての記事を7回に分け、詳しく紹介してまいります。

Webサイト制作とは

Webサイト制作とは

Webサイト制作とは、その名の通りWeb上のサイトを制作することです。

株式会社ミスターフュージョンのWebサイトを作る目的は、「かっこいい」「おしゃれ」なWebサイトを作ることではありません。Webサイトでお客様の売上を上げることを目的としております。

弊社では、

Webサイト=Web上の店舗

と考えています。

店舗

Webでも実店舗でも商売の道理は一緒で、そして「誰に」「何を」「どう売るか」を考えて、企業の売上を伸ばす」ことを目的としています。企業のWebサイト上でどれだけ成果がでたのか(どれほど商品購入やお問合せ、お見積もりを獲得できたのか)を確認する指標として、弊社では「コンバージョン」を確認しております。

「コンバージョン」って何?

と疑問に思った方!
コンバージョン(Conversion)とは、

ホームページで獲得できる「最終的な成果」のことで、平たく言うと、「達成したい目標」のことです。

(石嶋洋平著(2016)『会社のホームページはどんどん変えなさい』p.10)

コンバージョンって何?

例えば、ECサイトで達成したい目標の1つを、お客様からの「商品購入」と設定すると、ホームページにおいて訪問者が目標とする「商品購入」をした場合コンバージョンが計測されます。

また、ホームページに訪問した人のうち、コンバージョンに至った人の割合をコンバージョン率といいます。

50人がホームページに訪問し、5人が「商品購入」をしたとすると、コンバージョン数は5。そして、コンバージョン率は10%という計算となります。コンバージョン率は、何を目標とするかによって変わってきますが、基準値の1%を上回ると良いとされています。

このコンバージョンを見ると、Web上でどれだけの成果が出たのかが分かります。
つまり、「売れるホームページ」なのかそうでないホームページなのかを判断することができます。

弊社では、「売れるホームページ」を作ることを基本としています。
この大前提を頭に入れていただき、Webサイト制作の全体の流れを早速、見ていきましょう。

コンバージョン

Webサイト制作の流れ

Webサイト制作は、大きく分けて6つの段階に分かれています。

全体の流れ6

 

要件定義

要件定義=どんなWebサイトを作りたいのかを考え仕様を決定する

まずは、Webサイトを作る目的をお客様に伺いましょう。お客様からのご要望をもとに、ヒアリングシートを作成します。

次に、制作スケジュールを組み、サイトマップを作成します。サイトマップとは、サイト上の住所録のようなものです。コンテンツがいくつに分かれているのか、コンテンツのURL等を把握、管理するために作ります。また、サイトマップの作成には、表を使いWebサイト全体の構造を見やすくするという目的もあります。
0から全く新しく、Webサイトを作る場合以外は、既存のWebサイトが必ずあります。既存のWebサイトのリニューアルや改善をしたいと考えている方は、スケジュールを組む前に、既存サイトのサイトマップの洗い出しを行いましょう。現状を把握するために、サイト内コンテンツやURLなどの情報を「見える化」することが重要です。

設計書作成

設計書作成

設計書作成=どんなレイアウトにしたいのか?

設計書は、ワイヤーフレームと呼ぶこともあります。設計書作成は大きく分けて、4つの手順があります。

  1. 間取りを決める(コンテンツの配置を決める)
  2. キャッチフレーズを考える(文章を考える)
  3. 導線を考える(サイト訪問者の気持ちになって考える)
  4. 素材を決める(写真、ロゴ等)

上記の手順をふまえた上で押さえておきたいポイントがあります。
それは、設計書を0から作成しないということです。

0から作ることは、相当な労力を要します。また、何が正解なのか分からなくなってしまうことになり、作業時間が余計にかかることになりかねません。効率的に、売れるホームページを作る際には、以前のホームページを参考にしましょう。自社でWebサイトの制作が、初めてという方は、自分がこのWebサイトからだったら、商品を買いたい!問い合わせたい!と思えるWebサイトを参考にしましょう。そうすることで、設計書のイメージがしやすくなり、スムーズに設計書の作成ができるようになるでしょう。

また、もう1つポイントとして、設計書はモノクロで作成をします。

設計書モノクロ

理由としては、WebディレクターはWebデザインの専門ではないからです。こちらで、色を指定してしまうとWebデザイナーの発想力を縛ってしまうことになります。そうなると、Webデザイナーは、本来持っている力を発揮できずに、デザインの中途半端なWebサイトになってしまいます。そうならないためにも、色やフォント等は特別な要望がない限り、Webデザイナーに任せるようにしましょう。

デザイン

Webデザイン

デザイン作成=どんな見た目にするのか?

先ほども、述べたようにWebディレクターはデザインを担当する人ではありません。Webディレクターの設計書をもとに、Webデザイナーがデザインを作成し、その修正等をWebディレクターが行います。
Webデザインでは、文字の色は何色にするのか、フォントは何を使うのか、見やすい配置・配色はどんなものかを細かく作成していきます。

中でも、配色は重要なポイントです。Webサイトにおいては、「かっこいい」「おしゃれ」といった感情的な気持ち以上に、「商品」「ターゲット」にあった配色を考えることが重要です。
これらは、設計書を元に作成されるため、設計書は重要な資料となります。
Webデザイナーは、Photoshopやイラストレーターと呼ばれるソフトを使用してデザインを作成します。Webディレクターは、その出来上がったデザインの確認・修正依頼を行います。

コーディング

コーディング

コーディング=設計書、デザイン通りにサイトを作成

ここでは、システムエンジニアやプログラマーに依頼をし、Webサイトに動作をつけ、Web上でページが見られるようしていきます

例としては、「問い合わせ」のボタンをクリックすると問い合わせのページに飛ぶことができたり、「入力フォーム」に入力できたりすることです。このように動作がつくのは、システムエンジニアやプログラマーがプログラミング言語を用いて、コンピュータが処理できるコードや言語を記述しているからです。
コーディングには、様々な領域があります。以下、大きく3つの領域に分けたものです。

  • htmlファイルの作成
  • cssファイルの作成
  • javascript,phpファイルの作成

コーディングは、それぞれの領域によって異なる役割を持っています。これらのファイルを、設計書デザインに合わせて組み立てることでWebサイトが出来上がります。
ここでも、Webディレクターは、デザイン同様に、コーディング後の動作の確認・修正依頼を行います。

テストアップ

テストアップ

テストアップ=設計書通りの機能・見た目になっているかどうかチェックする

まず、ネット上に非公開の状態で、完成したWebサイトをアップします。非公開の状態で、PCとスマートフォンでWebサイトの確認をし、誤字・脱字・リンク切れ・ブラウザのチェックをします。

テストの段階でデザイン、コーディングに問題がある場合、修正がある場合は、Webデザイナー、コーダーに修正依頼をします。

実際にWebサイトに訪問した人の気持ちになって、客観的に確認をすることが大切です。
テストアップ確認後、問題がなければ本番アップをします。そして、本番アップ後に最終確認をします。ここまでが、Web制作の全体の流れとなっています。

まとめ

この記事では、Webサイト制作の全体の流れについて述べてまいりました。
いかがでしたでしょうか?
次回は、「要件定義」「スケジューリング」についてご紹介いたします。特に、最初の「要件定義」は、Webサイトの制作において重要な作業です。
次回の章もお楽しみに!

Web制作

参考になったらシェアをお願いします!