ブログ
ホームページを作る手順−Webサイトの企画・制作・公開・集客−

新潟県上越市の広告代理店「桐朋(とうほう)」のWebサイトをご覧いただき、ありがとうございます。

普段の業務において「ホームページってどういう流れで作るの?」というご質問を多くお受けしております。

Webの存在が日常的になっている昨今では「完成品」であるWebサイトを見る機会は多くあっても、それらがどのように作られているかは、なかなかイメージしづらいもの。

そこで、この記事ではホームページ制作の流れをまとめることにしました。

※この記事で紹介する制作の流れはあくまで私がおすすめする一例であり、すべてのWebサイトに当てはまるとは限りません。順番が前後する場合や、一部の手順を行わない場合もあります。

この記事の目次
「上越のWeb屋が考えるサイト制作の流れ」

初回お打ち合わせ&基本設計

この記事では「ホームページ」と「Webサイト」を、ほぼ同じ意味の言葉として使用しています。

さて。

制作会社のもとへお客様からWebサイト制作のご依頼があった場合、まずは直近の日程で「初回のお打ち合わせ」の場が設けられるかと思います。

ここで、お客様からご要望を挙げていただいたり、制作会社から実現のためのアイディアなどを挙げたりすることになるでしょう。

具体的な流れは、以下の通りです。

お客様からWebサイトのご希望・ご要望を挙げていただく

まずは制作のご依頼をいただいたお客様から、ご要望をうかがいます。

お客様は、Webサイトを作ることによって、どんな「結果」や「効果」をお求めなのでしょう?

「Webサイトのアクセス(訪問者数)をアップさせたい!」
「自社商品の認知度をアップさせたい!」
「Webサイトからのお問い合わせをアップさせたい!」

ご要望はさまざま、お客様と制作会社との間で打ち合わせを行い、ご要望を挙げていきましょう。

また、お客様のほうで「このサイトみたいなデザインで!色使いはこのサイトに近い感じで!」といったご要望をお持ちであれば、この段階でうかがっておくと良いでしょう。

この記事の目次へ戻る

Webサイトのターゲットや目的を決める

Webサイトを制作するうえで重要な事柄の一つがWebサイトの「目的」と「ターゲット」を決めることです。

アクセスや認知度、お問い合わせの数を増やすことで、

「お客様に喜んでいただきたい」
「年に数回行われるイベントに来ていただきたい」
「地域を活性化したい」

言うなれば「Webサイトを制作した、その先のこと」を定めておくと良いでしょう。

また、ターゲットというのは、制作したWebサイトを主に見ていただきたい方の「性別」「年齢」「職業」などの属性のことです。

「誰でも良いから見て〜!」というWebサイトがあっても良いとは思います。

一方で、ターゲットが明確に定まっていると、Webサイトで伝えたいメッセージが伝わりやすくなったり、想定していたターゲットと異なる属性の方への予想外の効果があって新しい発見をしたりなど、さまざまな効果が期待できます。

この記事の目次へ戻る

Webサイトの種類・予算・公開日を決める

Webサイトの目的やターゲットが決まったら、次は「どんな形式で実現するか」を決めましょう。

例えば、企業サイト・店舗サイトなのか。

あるいは、特定の製品・サービスに絞ったWebサイトなのか。

それとも、FacebookページやTwitterアカウントを開設して、SNS(ソーシャル・ネットワーキング・サービス)を用いた情報発信を行うのか。

お客様のご予算に応じて、さまざまな実現方法を考えましょう。

また、実現方法が決まったら、Webサイトの公開日を決めておくとスケジュールが立てやすくなり、途中で変更が発生する場合も対応しやすくなると思います。

この記事の目次へ戻る

新しいWebサイトへの追加コンテンツを検討する

こちらは主に、Webサイトをリニューアルで制作する場合の工程です。

Webサイトを新しく制作するとき、そのWebサイトを構成する「コンテンツ(各ページの中身)」は、そのままでも良いでしょうか?

新しいWebサイトの目的を果たすために、新しいページを追加する場合もじゅうぶん考えられます。

例えば、お店様のWebサイトのリニューアルで、

「新たに店舗を出店します」
「新しいブランドを開発しました」

という具体的な場合は、その店舗のページや、ブランドのページを追加するのは自然な流れだと思います。

一方で、

「どうしたら良いか分からないけれど、お客様のご希望により応えやすいWebサイトにしたい」

といった場合は、Webサイトのお客様が実際にどのようなモノ・情報・サービスをお求めか、調べてみるのが良いでしょう。

調べる手段として私がおすすめしたいのは、2つです。

1つ目は、Googleの「キーワードプランナー」や「Googleトレンド」のような、検索キーワードの検索回数とその動向を探れるサイトです。

そして2つ目は、「Yahoo!知恵袋」や「教えて!goo」のような、Q&Aサイト(質問サイト)です。

前者は、制作するWebサイトに関連したキーワードが、一般のユーザーの方々によってどれほど検索されているか、そして過去にどのように回数が推移してきたかを知ることができます。

後者は、一般のユーザーの方々がどのような疑問をお持ちかを、制作するWebサイトに関連したキーワードで探すことができます。

これらのツールを駆使して、Webサイトを利用していただきたい方の疑問やご要望に応えられるコンテンツの追加を検討してみましょう。

この記事の目次へ戻る

お客様からご提供いただけるデータを確認する

お客様からご提供いただける資料やデータをいただいておきましょう。

撮影された写真や、それらを説明するテキストファイル。

お持ちであれば、パンフレットやチラシなども、新しいWebサイトを制作するうえで大きな武器になりそうです。

この記事の目次へ戻る

Webサイトの「仕様」を決める

「仕様」というと、ちょっと難しい話になりそうですね…。

つまり「デザイン以外の部分をどうしようか?」という決めごともお忘れなく、と言えば良いでしょうか。

新しいWebサイトでは、お客様でも記事を更新していただけるように、CMS(シー・エム・エス:コンテンツ管理システム)を用いるかどうか。

用いるなら、WordPress(ワードプレス)か、Movable Type(ムーバブル・タイプ)か。

ブラウザ(Webサイトを閲覧するためのソフト)は、どんな種類・何年ほど前のバージョンまで対応するか。

Webサイトを閲覧する端末(PC・スマートフォンなど)として、どんなサイズのものを想定したうえでデザイン工程に進んでいくか。

他にも、Webサイトのサーバーやドメインに関しても決めておくと良いでしょう。

Webサイトが全くの新規制作であれば、サーバーもドメインも新規で取得することになるでしょう。

一方で、既存サイトのリニューアルの場合、サーバーやドメインを変えずにリニューアルするのか、あるいはそれらも含めて新しくするのかも、重要な決めごとの一つです。

そして、Webサイトの公開後の更新頻度や運用体制を決めることも大切ですね。

「記事の更新の一連の手順は、誰がどのように進めるか」

「公開後、サーバやドメインは毎年何月何日までに更新する」

などを決めておくと良いでしょう。

この記事の目次へ戻る

お見積もり・ご提案

上記の決めごとを踏まえて、制作会社からお客様へ、新しいWebサイトのご提案やお見積もりなどのお話へと進んでいくことになるでしょう。

仕様や条件などをしっかりと確定させたうえで、いよいよ設計・制作が本格化してきます。

この記事の目次へ戻る

詳細設計

詳細設計は大まかに申し上げるなら、各ページにおいて、

「このページは、これらの情報を用いて、このようなデザイン・動作になるよう制作しましょう」

と詳しい内容を決めていく工程です。

Webサイトの構成を決める

上記までの内容を踏まえて、新しいWebサイトに必要なページを書き出してみましょう。

一通り書き出したら、似たようなページをグループ化してみます。

企業やお店を紹介するページは同じグループに。

フォームが複数ある場合は、それらと「個人情報保護方針」のページを同じグループに。

などなど、グループ化の基準はWebサイトによってさまざまです。

グループ化したあとは、Excelなどを使って「ページ一覧」を作成します。

「ページ一覧」という呼び方は、私のこれまでの経験でよく使ってきた呼称ですが、場合によっては「ページ別工程表」「ディレクトリマップ」などとも呼ばれます。

ここでは「ページ一覧」と呼びましょうか。

グループ化を元にしてExcelの表にページの一覧をタテに書き出したら、ヨコのセルには「素材」「デザイン」「コーディング」の欄を設けて、各工程が完了するたびに●を付けていくと良いでしょう。

「会社案内のページはデザインまで進められる状態だな」

「業務内容のページはコーディングが未完了だ、●日までには完了させよう」

といった、ページごとのスケジュールの見通しも立てやすくなるかと思います。

この記事の目次へ戻る

ワイヤーフレームの作成

ページ一覧を作成して、場合によっては、まだすすぐにデザインへと進まない場合もあります。

ここで「ワイヤーフレーム」を作る作業が入ります。

ワイヤーフレームというのは「ここにこの要素が配置されます」というものを、デザインを作る前にお客様と制作会社とで共有し合うために作られるものです。

形式も、黒やグレーの罫線で囲って「ここにヘッダー、ここにフッターが配置されます」のようなもの、あるいはグレーの長方形で配置していくものなど、さまざまです。

例えば、まずはPC版・スマートフォン版でワイヤーフレームを1ページぶん作り、下層ページ(トップ以外のページ)でもう1ページぶん作れば、新しいWebサイトのイメージもしやすいかと思います。

ただ、スケジュールなどの都合で、ワイヤーフレームの作成量もWebサイトによってさまざまです。

お客様と制作会社の間で「このようなWebサイトを作りましょう」という認識の共有を大切にできれば、トップページだけという場合もあり得るでしょう。

この記事の目次へ戻る

デザイン

Webデザイン
色や配置、文字のサイズなどに気を配ってデザインしていきます。

さぁ、いよいよデザイン工程に入りましょう!

一般的には、Webサイトのデザインはトップページから始める場合が多いかと思います。

ただ、そうでない場合もじゅうぶんに考えられます。

スケジュールや新しいWebサイトの構成次第で、特に重要度の高いページ(トップより使用頻度が高いことが想定されるページなど)を、先にデザインする場合もあります。

あるいは「このページを作っておけば、それぞれのパーツを他のページにも応用できる」という場合、あえてそちらからデザインする場合も考えられます。

配色やフォント、各要素の配置、立体感を出すWebサイトの場合は影の付け方などなど、さまざまな要素に気を配りながらデザインしていきます。

また、複数名でデザインをする場合は特に、デザインソフトにPhotoshop(フォトショップ)を使うかIllustrator(イラストレーター)を使うか、バージョンはいくつか、または他のソフトで制作するか、といったことも決めておきましょう。

デザインが終わったらコーディングに進みますが、コーディングに入ってからのデザインに大きく修正が入る場合は、作業によっては大きな時間が発生する場合もあります。

ページ単位で、デザインしたらその都度、お客様と制作会社とで確認を行い、OKになったページからコーディングを行うなど、なるべく「コーディング後のデザイン修正」を抑える工夫をしていきたいものですね。

この記事の目次へ戻る

コーディング

デザインOKとなったページから、順次コーディングに入っていきます。

「コーディング(Coding)」とは、デザインされたページがWebサイトの1つ1つのコンテンツとして表示できるよう、専用の言語で記述していく作業です。

専門的にはHTML、CSS、jQueryなどと呼ばれるそれらの言語のことを「コード」といい、コードでの記述なので「コーディング」です。

余談ですが、しばしば「コーティング(Coating)」と間違われます(笑)

コーディング規約の作成

Webサイトの規模にもよりますが、コーディングは複数名によって作業をする場合もあります。

また、1人でコーディングする場合でも、たった1日ですべて終えられるケースはほとんどありません。

しかも、Webサイトが公開を迎えてから時間が経過することで内容を更新する場合もあります。

つまり、コーディングにも、時間を越えても・作業者が変わっても問題無く作業できるような基準、ルールを作ることが必要になります。

(専門用語なのでこの一文は読み飛ばしてもけっこうですが、HTML5&CSS3非対応ブラウザでの表示はCSSハックか、できないなら別の手段で表示するか。floatとclearの関係はどうするか。上下並びのブロックのmarginの取り方や、包含関係の要素の余白の取り方はどうするか。jQueryやCSSはインラインにするか外部ファイルで読み込むか。CSSのクラスの定義の方法をどうするか。……などなど、とにかく決めることがいっぱい!)

ただ、決めごとを細かく設けすぎてしまうのもまた困りもの。

最低限のルールだけでも作業者間でしっかりルールを定めておくことで、ページごとのバラつきも抑えられて、制作時間も効率化できるのではないでしょうか。

その最低限のルールを「コーディング規約」と呼んでいます。

この記事の目次へ戻る

静的ページの制作

コーディング
デザインを、コーディングで動くページに作り上げていきます。

コーディング規約を定めたら、まずはローカル(作業者だけで閲覧できる環境のこと)でコーディングを進めます。

プログラムによって、アクセスのたびに表示内容が変化したりするページを「動的ページ」と呼ぶのに対して、HTML・CSS・jQueryと呼ばれる言語を使って、表示内容の変化しないページを「静的ページ」と呼んでいます。

テストサイトなどにアップする前に、まず静的ページでコーディングを進めます。

この記事の目次へ戻る

静的ページの動作確認

静的ページも、都度、チェックが必要です。

PC・スマートフォンともに、デザインどおりの表示か。

ローカルでの確認の時点で、サイトの表示が遅くないか。

想定しているブラウザでは問題無く表示されているか。

特に、ローカルで表示が遅い場合は、公開後にデータを置くことになる「本番環境」でアクセスしても表示が遅くなる場合がほとんどです。

デザインどおりの表示だけでなく、それらがより早く表示される方法を検討しながら進めることが重要です。

この記事の目次へ戻る

システム組込

静的ページで全体を制作して、動作確認をして、OKとなった段階で、次に進みます。

CMSを用いる場合は得に、システムへの組み込みの工程を前もって考慮に入れておくことになるでしょう。

サーバー設定・データベース設定

サーバー設定
Webサイトで実現したい機能に合わせてサーバーを選定して、詳細な設定を施していきます。

Webサイトを制作するときに、お客様と制作会社との間で「サーバー」という言葉が出てくることがよくあります。

サーバーの定義を述べるには難しいところですが、ここでは「データ置き場」とお考えください。

システムを導入するには、その「Webサイトを運用するためのデータ置き場」であるサーバーに、あらかじめ設定が必要です。

こちらは、可能なら静的ページの制作と並行してやっておくのもよいでしょう。

既存のWebサイトをリニューアルする場合は、お客様のお持ちの書類の中に、サーバ会社の「コントロールパネル」へのログインに関わる情報や、「FTP」と呼ばれるしくみの利用方法が残されている場合があります。

リニューアルに際しては、制作会社のサポートの元でしっかりと引き継ぎをしておくと良いでしょう。

この記事の目次へ戻る

システムのテンプレートへの組込

こちらは、CMSを用いる場合の工程です。

CMSには「テンプレート」というものが用意されており、トップページや記事一覧ページなど各種ページを表示するための「ひな形」が設定されています。

その「ひな形」の中に、新しいWebサイトのコードを組み込んでいくことで、新しいWebサイト用の「ひな形」ができあがっていきます。

このテンプレートを作っておくことで、Webサイトの各ページの同じ箇所に修正が発生した場合に作業量を最小限に抑えることができたり、お客様がテキスト形式の文書を編集する感覚で新しいWebページを作り出すこともできるようになります。

このテンプレートへの組み込み作業は、場合によっては当初の想定以上に時間を要する場合もあります。

静的ページのコーディングの段階でテンプレートへの組み込みの工程を意識しながら制作し、お客様にページ単位でご確認いただくようにして、作業面での効率化を図りたいものです。

この記事の目次へ戻る

公開作業

さあ、正式公開まであとわずか!

1ページずつお客様にチェックしていただき、すべてOKをいただいたら、あとは公開の準備に取りかかります。

客先OK・公開準備

Webサイトを正式に公開する前に、ある設定をしておくと良いでしょう。

私がおすすめするのは2つです。

1つ目は、Webサイトへのアクセス数や閲覧時間を知ることができるアクセス解析ツール「Googleアナリティクス」です。

そして2つ目は、検索エンジンにWebサイトを認識していただくうえで役立つ「Google Search Console(グーグル・サーチ・コンソール)」というツールです。

この記事の目次へ戻る

公開

お客様から全ページにOKをいただいて、各種ツールの設定も終えたら、いよいよ公開に向けた作業を行います。

お客様と制作会社の間で、できれば設計段階に「公開日」や「公開時刻」を確認しておきたいところです。

公開時刻に関しては「●日ならば何時公開でもOK」という場合や「●時に公開して欲しい」という場合があります。

前もって公開のタイミングを申し合わせ、前日までには「公開OK」の状態になるように一連の作業を進めておきたいですね。

中でも、既存サイトをリニューアルする場合は、リニューアル前のWebサイトへのアクセスも新しいWebサイトに引き継ぎたいもの。

変更されるURLの件数を極力少なくしたり、リニューアル前のWebサイトへのアクセスは新しいWebサイトの対応するページに転送するなどの工夫があると良いでしょう。

お客様のご希望の日時を迎えたら、ついにWebサイトの公開です。

新しく公開されるWebサイトが、少しでも多くの方のお役に立つものになると良いですね。

この記事の目次へ戻る

保守・運用

Webサイトの更新をSNSでもお知らせ!
Webサイトの情報を更新したり新たに記事を追加した場合は、SNSでお知らせしてみるのも良いでしょう。

実は、Webサイトの公開は「ゴール」ではありません。

考え方によっては、Webサイトの公開こそが「スタート」と言えるかも知れません。

時間の経過に伴って事実が変更されたり、新しい情報が追加されたりすれば、Webサイトの内容を更新する必要も出てくるでしょう。

情報を最新に保って、Webサイトが安定して運営できるように管理していく作業が発生します。

そうした「保守・運用」の工程を継続していくことで、Webサイトを育てていくことも必要です。

追加・更新したページは、その旨をSNSでシェアして、お知らせすることも良いでしょう。

当初想定したターゲットに対するサービス提供のため、Webサイトは公開後も、日々改善していく作業がとても大切なのです。

この記事の目次へ戻る

最後に

ずいぶん長くなってしまいました…(^^;)

最初のブログ記事に「ホームページを作る流れ」の投稿をしたいと思い、桐朋サイトの制作と並行して、1日1段落くらいのペースで書き進めておりました。

全部を一気に読むと長くなりますので、毎日少しずつお読みくださいm(__)m

この記事を書いた人

  • 新潟県上越市 桐朋:TOHO Staff
  • TOHO Staff

    この記事は桐朋スタッフが書きました。

最後までご覧いただきありがとうございます。
この記事を気に入っていただけましたら、SNSにてシェアをお願いいたします。

こちらの記事もあわせてどうぞ [Web制作全般] [ブログ]

真実かどうか
2017.4.1
真実かどうか
Web制作を「学ぶ」ということ(独学編)
2017.2.22
Web制作を「学ぶ」ということ(独学編)
Web制作を「学ぶ」ということ(スクール編)
2017.2.13
Web制作を「学ぶ」ということ(スクール編)
「お客様」と「お客様のお客様」
2017.2.6
「お客様」と「お客様のお客様」
ワードプレス(WordPress)でのWebサイト管理をおすすめしたい3つのポイント
2017.1.18
ワードプレス(WordPress)でのWebサイト管理をおすすめしたい3つのポイント

ページの先頭へ