ホームページ制作フローを公開。納品までの作成の流れをまとめました。


パソコン1台あればホームページが作れます。
自分がホームページを作れれば人件費もかかりません。
「起業するのにこんなにコストがかからない仕事はない!」
と、ホームページ制作で起業を考えている人も多いと思います。

実際には楽な仕事ではないです。
作るだけでは、思っているほど儲からないしね。

そんなホームページ制作の仕事の、納品までの制作フローを紹介します。
起業を考えている方は、参考にしてください。

何のためにサイトを作るのかを確認する

何事も方向性を決めないとうまくいきません。
旅行に行く時だって、
「暑いから涼しいところに行こう!」
「ゆっくりしたいから、南国に行きたい!」
とか、何かテーマを決めてから具体的な場所を決めると思います。
複数の人でものを決めるときは、
それぞれいろいろな意見があるので、ここをしっかりとしなければバラバラになってしまいます。

特にモノを作るときは、コンセプトがとても大事になってくるので、
ホームページを作るときはまず、どういったホームページを作るかということで大きく以下のことを考えます。

  • ホームページの目的
  • 想定する顧客

ホームページの目的

まずは何のためにホームページを作るのかを考えましょう。
ここで、お客さんに「何のためにホームページを作るのですか?」って聞いても、
うまく答えてもらえないので、
例えば、

・商品やサービスを売るため
・会社のブランドや認知度を上げるため
・イベントなどの情報を発信するため
・ホームページを採用に活用したい

このような例を挙げながら確認します。
たいていは、できることなら全部となるので、その場合は優先度を決めましょう。

想定するユーザー

ホームページの目的が決まると、ユーザーもある程度決まってくるものもあるでしょう。
例えばリクルートに力を入れる場合は、お客さんではなくて学生とかがターゲットになります。
ホームページの内容も商品とかをアピールするのではなくて、
働いている環境の事や、開発ウラ話、先輩インタビューなど学生に向けたコンテンツが重要になります。

「商品やサービスを売りたい」というような場合、
どのような商品、サービスを売っていきたいのかや、
どういったターゲット層にアピールするのかを決めます。
若い人とお年寄りの人ではデザインも変わりますよね。
お年寄り向けには文字は大きめにするとか、若者向けならスマートフォン対応が必須などということにつながってきます。
そもそもお年寄りはホームページより違う媒体の方がいいのでは?という結論になるかもしれません。

サイトのコンセプトを考える

目的やターゲットが決まったら、それに対してどういったアプローチが一番良いか考えましょう。
コンセプトは制作を通じて一貫性をもたせるためのもので、
これをきちっと決めておくと、出来上がりのサイトがある一定のユーザーに突き刺さるものになります。

「女子学生が入りたいと思ってもらえるような会社のPRサイト」
というコンセプトを決めておけば、
ここから派生して

・女性が働きやすい環境をPR
・先輩社員がおしゃべりしている様子のPR動画
・スタッフ同士の仲の良さをアピール
・女性が好みそうな、職場の近くのランチ特集

のようなものが出やすくなります。

ドメインやサーバーを準備する

このタイミングでないといけないというわけではないですが、
どういった目的で、どのようなホームページを作るかが決まってきたら、
サーバーやドメインなどの準備をしていきましょう。
ドメインはこれからずっと使っていくものです、
途中で変更はできますが、名刺やパンフレットなどの作り直しになるので頻繁には変えれません。
法人の人は信頼のためにco.jpドメインをとるといいです。
サーバーは会社によってスペックが違うのでプロに確認した方がいいかもしれません。
Wordpressを入れたり、ネットショップを考えている方は、
値段だけで安いプランを選ぶと使えないこともあります。

どこがいい?初めてホームページを作るときのサーバーの選び方

公開するデバイスを決める

PCやタブレット、スマートフォンなどどのデバイスでホームページを見てもらうかを決めます。
今ではスマートフォン対応が普通になってきたので、たいていはPCとスマートフォンのレスポンシブで対応しますが、
もちろんPCサイトだけという場合に比べると予算もかかるので、パソコンだけということも少ないですがあります。
また、若い女性が見ることが多いサイトなど、ターゲットによってはスマートフォンでのアクセスが多いと想定される場合もあるので、その場合はスマートフォン対応は他のサイトに比べて力を入れないといけません。
ニュースサイトのようないろいろなところで見るようなものは、タブレットでも最適な表示になるように考えます。
これは単に画面のサイズの問題だけでなく、マウスを使って読む場合と、タブレットのように手にもって指でスクロールする場合で使いやすいレイアウトがちがうということも考えます。
場合によっては、ホームページではなくアプリも作った方がいいということになるかもしれません。

サイトの宣伝方法を考える

この段階でそこまで考えるのか?というのはありますが、結構これが重要だったりします。
サイトをFacebookやtwitterなどで拡散したいのであれば、
単なる会社概要とかではなく、定期的な情報発信が行えるようなサイトにしなければいけません。
商品紹介ページとかtwitterで流れてきても誰も見ないでしょ。
また、チラシやパンフレットを配布するのであれば、それとどのように連携するか。
紙媒体は文字のスペースが限られているので、紙媒体に書かなければいけない内容と、
そこからサイトへ誘導してスムーズに情報が入るようにしなければいけません。
あとは、SNSなどを使った拡散方法や手順も考えます。
このあたりは、運用をしながら考えていく部分も多いですが、上のコンセプトにつながる部分でもあり、
早いうちに決めておくことで、ホームページに仕掛けをすることができます。

コンテンツの洗い出し

必要なコンテンツを洗い出していきます。
サイトの構成などはまだ考えないで、

「こんな情報をユーザーは知りたいんじゃないだろうか」
・インタビュー記事
・商品の使い方の動画
・お客様からの感想
・会社のこれまでの実績

という気軽な感じで思いつくものをどんどん意見を出し合いましょう。
大きなテーマから決めていくといいですが、
それぞれが自由に発言してそれを記録していきます。

サイトマップの作成

先ほどでてきたコンテンツを、
いるものいらないものの判断や、よく似たものをグループ化、親子関係になりそうなものの階層化
をしていくと、自然とページとしてどのようなものが必要かがまとまってきます。
それらをサイトマップとして作成していきます。
予算に合わせて今回作るページと、今後に作るページに分けておきます。
これで、どのようなページを作る必要があるかが決まります。

ワイヤーフレームの作成

各ページのコンテンツを実際に配置していきます。
ここではまだまだお客さんとの打ち合わせが続くので、内容の変更も多いです。
いきなりHTMLでコーディングするのではなく、
テキストやレイアウトが簡単に配置できるツールを使って内容を共有します。
ワイヤーフレーム作成用のツールはいくつかありますが、
弊社ではお客さんにも書き込んだり変更してもらうこともあるので、Excelを使用しています。
PowerPointを使っている会社さんもありますね。
専用のツールを使えば、きれいなワイヤーフレームを作ることもできます。

まだやってないの?ホームページの作成にとっても大切なワイヤーフレーム(設計)のこと。

この段階で、コンテンツの内容もある程度きっちりと決めていきます。

プロトタイプ(カンプ)の作成

ワイヤーフレームでは、主にレイアウトやテキストを中心に情報を共有しますが、
WEB上での実際の使用感は簡単なプロトタイプを作って共有します。
まだデザインには入っていませんが、フォントや配色はここで確認ができます。
各ページへの移動もできるので、大まかなユーザーの導線も確認することができます。
このあたりで、使用する画像などもある程度決めていくといいでしょう。

デザインの作成

ワイヤーフレームやプロトタイプから、デザインを作成していきます。
トップページから制作して、一度お客様に確認してもらいます。
問題なければ、そのデザインをベースにサブページのデザインを作りこんでいきます。

コーディング

デザインが出来上がったら、それをHTMLを使ってコーディングしていきます。
コーディングはある程度のコーディングルールを作っておきましょう。
コードの書き方はよく勉強しておくといいです。
コードの書き方次第で、運用のコストが違ってきます。
ルールを統一しておくことで、複数のメンバーで運用が可能になります。

sassやemmetなどの便利なものを使うとコーディングをかなり効率化できます。
弊社なんかは、これらを使わないと一気に開発時間が増えてしまいます。

システム

HTMLで見た目のコーディングはできたので、
そのままWordpressや独自のシステムを入れていきます。

phpなどはファイルをそのままブラウザで開いても動かないので、
xamppなどの開発環境を作りましょう。

チェック・テスト

いよいよ出来上がりです。
出来上がったホームページに不具合が無いかを確認しましょう。

・メタ情報はきちんと設定されているか
・alt属性には適切なテキストが入っているか
・scriptエラーが出ていないか
・モバイルユーザビリティのチェックに合格しているか
・FacebookなどのSNSで共有できるようになっているか(ogp設定)

などなど、ここには書ききれないチェック項目があります。
もれなくチェックするために、チェック項目を作っておきましょう。

公開・納品

チェックが完了したら、サーバーにアップロードして公開です。
ブログのアカウント情報や完了報告書など、
ホームページの運用に必要な情報をクライアントに渡して納品となります。

運用

ホームページは作るのが目的ではありません。
ホームページへのアクセスを増やして認知度を上げ、売り上げにつなげていくことが目的です。
ホームページの公開は、あくまで準備が整った段階です。
ここからホームページを運用して継続的に改善を繰り返すようにします。

[RelService] [Service]