ホームページ制作の流れとは?公開に必要な3つのフローを徹底解説

ホームページを表示しているデスクトップPC

更新日:2017年09月06日 | 公開日:2017年04月30日

「ホームページを作ることになったけど、何から始めればいいのかよくわからない…」

そんな悩みを抱えているWeb担当者の方も多いのではないでしょうか?
私的なホームページを制作するのであれば、特に考えなくてもサクッと作れるかもしれませんが、会社のホームページとなるとさすがにそういうわけにもいかないですよね。

そこで今回は、何から始めればいいのか悩んでしまうあなたに、会社のホームページを制作する流れを大きく3つの手順に分けて紹介します。
制作フローが分かれば計画的に作業に取り掛かれるのはもちろんのこと、前もった準備も可能になるので安心ですよ!

1. 制作に必要な前準備を行う

キーボードとティーカップ

会社のホームページを作るわけですから、無計画のままで作業に取りかかってはいけません。
まずはホームページを制作するうえで必要となる、5つの作業を行います。

≪その1≫ 目的やターゲット、ペルソナを明確にする

ホームページを制作する際に不可欠なのが、「目的」と「ターゲット」の設定です。
会社のホームページを作る以上、「集客を狙いたい」「多くの人に商品を知ってもらいたい」「販売促進に役立てたい」など、ビジネス上で期待する何らかの目的があるはずです。

作業に入る前段階で、「なぜ作るのか」という目的を明確にしておかないと、ユーザーだけでなく、制作にかかわるデザイナーやエンジニア、ディレクターも一体どこを目指してホームページを制作すればいいのか分からなくなってしまいます。
ホームページ制作を円滑に進めるためにまず目的の共有は欠かせないといえるでしょう。

次に、「ターゲット」の設定とは、ホームページを見てもらいたいユーザーを具体的に絞り込むことです。

もちろん、「どんなユーザーにも見てもらえるホームページにしたい!」という気持ちも分かりますが、「20代のOL」と「40代の主婦」とでは当然のことながら興味の対象が異なるため、ホームページの見せ方も大きく変わります。

ビジネスにつながる効果を期待するのであれば、「ターゲット」を絞り込んで、伝えたい内容をしっかり伝え、確実に心をつかむことが大切です。

さらに年齢層や役職などといった「ターゲット」設定から一歩踏み込んで、「ペルソナ」を設定するのも有効な方法です。
たとえば「〇〇会社に勤めている30歳手前の女性で、休日は友達と温泉旅行に出かけるのが趣味のA子さん」というふうに、具体的な人物像を描きます。

「ペルソナ」の設定はユーザー目線でのホームページ制作につながるため、検討してみる価値はあると思います。

≪その2≫ デザインのコンセプトを決める

キーボードとティーカップ

ホームページを作る「目的」と「ターゲット」が決まれば、自然とデザインの方向性も見えてくるかと思います。
そのデザインの方向性を具体的な形に落とし込んで行くのがこの工程です。

「目的」を明確にするのはホームページにおけるビジネス上のゴールを共有することで、「コンセプト」を決めるのはデザイン上のイメージを共有することです。

イメージの共有ができていないと、ホームページが完成したときに、制作にかかわったメンバー間で「あれ? あのとき言っていたイメージと違わない?」といったズレが生じてしまいます。

「やわらかい感じ」「シックな雰囲気」などの抽象的な言葉では、イメージの統一感を図るのは難しいですよね?
それと同じで、デザインのコンセプトも誰もが同じイメージやビジュアルを描けるように、できるだけ明確な言葉で示す必要があります。

例として以下に料理教室のホームページのデザインコンセプトを挙げてみます。
  • 女性よりも、一人暮らしの20代〜30代の男性を主なターゲットとしている。
  • 受講料は他の料理教室より高いが、少人数制で料理の基礎がしっかり身につく。
  • 担当の講師には講義時間外でもメールで料理の質問をすることができるため、自分から進んで料理をする男性が続出している。

抽象的に表現するのではなく、具体的な言葉で定義することで、ホームページ制作にかかわるメンバーの間で共通のイメージを持つことができます。

共通のイメージをもとにそれぞれのメンバーが制作を進めることによって、伝えたい内容がわかりやすいホームページになるでしょう。

≪その3≫ タイトルやキャッチコピーを決める

デザインのコンセプトが固まったら、ホームページのタイトルも考えましょう。
会社のホームページの場合にはタイトルを決める必要はないかもしれませんが、コーポレートサイトとは別に新規コンテンツを始める場合などには、多くのユーザーに覚えてもらえるようなユニークでインパクトのあるタイトルを考えましょう。

また、一言でホームページを表すキャッチコピーを載せるのもユーザーに知ってもらう手法として効果があります。
キャッチコピーがあると、ホームページの存在意義だけでなく、会社やお店のビジョンやコンセプトがわかるためブランディングにも効果的です。

キャッチコピーをつくる際には「伝えたい内容を一言で表現する」ということを心掛けましょう。
いくつか有名企業のキャッチコピーの例を挙げてみます。

trippieceの公式サイト
出典trippiece

このような優れたキャッチコピーがあると、見ただけでどんな商品を提供しているのか、どんなサービスを行っているのか、イメージすることができます。
ただし、目的やターゲットが明確でないと、ユーザーの心をつかむキャッチコピーをつくるのは難しいでしょう。

また、キャッチコピーを作成するにあたって、注意しなければならないこともあります。
「ホームページを無料で作成できます」「いつでもどこでも映画が見放題」といったサービス名を主張しただけのキャッチコピーは、同じことが競合となるホームページにも当てはまり、差異が生まれません。

ほかにも、ユーザー目線じゃないキャッチコピーや、長くて語呂の悪いキャッチコピーはユーザーの心に届くことはありません。

ポイントはターゲットに未来の自分を想像させることです。
そのためには商品やサービスそのものの特徴・強みを押し付けるのではなく、商品やサービスを利用した際の「ストーリー」を考えてキャッチコピーを考えるといいでしょう。

≪その4≫ ホームページの制作方針を決める

パソコンを操作する人

制作方針とは、「対応ブラウザはどうするのか」「スマホ対応をレスポンシブデザインにするべきか」など、ホームページを制作する際のルール・ポリシーのようなものです。

制作に取り掛かる前にこの方針をしっかりと決めておかないと、後から変更する部分が出てきたり、統合させる際に不具合が起きたりと、作業の手間が発生してしまいます。
ホームページ制作の全体だけでなくコーディングなど個別の工程についての方針も合わせて決めておくと、後の工程がスムーズになります。

また、ホームページ上で個人情報を扱う場合には、この段階で「プライバシーポリシー(個人情報保護方針)」や利用規約などの準備も行っておきましょう。
プライバシーポリシーや利用規約は、インターネット上にテンプレート(ひな形)が配布されているので、イチから作成するのが面倒な場合はそういったものを活用するのも一つの手だと思います。

≪その5≫ サーバーとドメインを取得する

制作したホームページをインターネット上に公開するためには、サーバーとドメインを用意する必要があります。
「ドメイン」は分かりやすく言うと、ホームページがどこにあるのかを示すネット上の住所です。

無料で取得できるドメインもありますが、会社のホームページとして使う場合にはSEO的に有利な「独自ドメイン」を取得することをおすすめします。
ドメインはタイトル同様にホームページの顔となるものなので、ユニークで記憶に残りやすいものを取得しましょう。

そして「サーバー」はホームページという家を置く土地のことを指します。
土地がないと家が建たないように、サーバーがないとホームページを公開することはできません。

サーバーは購入することもできますが、サーバー会社からレンタルをするのが一般的です。
会社によって料金やサービス内容に違いがあるので、あなたの会社に最適なサーバーを選んで契約してください。

2. ホームページを制作する

ノートパソコンとスマートフォン

前準備が終われば、いよいよ本格的なホームページの制作です。
ここではホームページ制作に直接関係する工程を説明して行きます。

≪工程1≫ サイトマップ、ディレクトリマップを作成する

ホームページ制作でまず初めに取りかかるのが、サイトマップ(設計図)の作成です。
トップページを起点にどういったコンテンツを用意し、どのようにページの導線を引くのかを図に書き起こして行きます。

このときに、前準備で設定したホームページを制作する「目的」と「ターゲット」に合わせて必要なコンテンツを考えます。
また、ホームページを構成する階層をすべて書き出して一覧表にする「ディレクトリマップ」の作成も、ページの作り忘れや配置間違いを防ぐのに有効な方法です。

どのページもトップページから3クリック以内に到達できるように設計するのが理想なので、3〜4階層におさえておくと使いやすいサイトになります。

≪工程2≫ ページのレイアウト(ワイヤーフレーム)を決める

ノートとペン

次に行う工程が、ページレイアウト(ワイヤーフレーム)の決定です。
ナビゲーション・コンテンツ・サイドバーの設計のほか、トップページ・カテゴリーページ・詳細ページをどんな構成にして、どこに画像やテキストを配置するのか決めます。

レスポンシブデザインにするのであれば、スマートフォン、タブレット、PCなど対応するデバイスを想定して設計をします。
このときにユーザーの見やすさだけでなく、ユーザビリティ(使いやすさ)やUX(心地よさ)も考える必要があります。

たとえばホームページ内において、ユーザーが必要とする情報を探しやすいように「初めて利用する方」「会員の方」という形でナビゲーションボタンを設置したり、よく使うと思われるボタンを分かりやすい場所に配置したりするなど、ユーザーがページ上で迷子にならないようなレイアウトを心がけましょう。

できるだけユーザーの労力を減らし、快適に利用できるようにレイアウトを設計するのがポイントです。

なお、ホームページを見るユーザーの視線は、PCの場合には左上から右下へ、Zの形で移動します。
そのことを踏まえて見せたいものの配置を考えると、ユーザーにとって見やすい画面を作ることができます。

スマートフォンの場合には上から下に視線は移動するので、見せたいものほど上の位置に表示させるように配置します。

ページのレイアウトを考える際には、手書きのラフスケッチで済ませてしまう人もいますが、近年ではプロトタイピングツールと呼ばれるデザイン・マネジメントツールを利用する人も増えてきました。

プロトタイピングツールを使うことで、クリックやタップで次の画面に移動できるので、実際に作動している様子が確認できます。
制作にかかわるメンバー間でのイメージの共有に非常に役立つので検討してみてもいいかもしれません。

≪工程3≫ ページのデザイン設計

前準備の段階で決定したデザインコンセプトをもとに、実際に各ページにデザインを施していきます。
具体的には世界観や雰囲気を統一しつつ、ホームページ全体の配色やタイポグラフィを決めます。

配色設定についてですが、落ち着いた印象のホームページをつくる場合には色相やトーンを揃え、インパクトを与える大胆なホームページの場合には明度や彩度を上げたりなどユーザーの心理作用も考慮するといいでしょう。

また、ホームページのコンセプトや提供するサービスに合ったタイポグラフィも選びます。
最後までユーザーに読んでもらうためにも、フォントサイズや文字間、行間、余白など細部までチェックを怠らないようにしましょう。

≪工程4≫ ロゴやバナーなど掲載する素材を用意する

デザイン設計と並行して、掲載する画像・テキスト・ロゴ・バナーなどの素材を用意します。
社内で画像やテキストを用意できない場合には制作会社に依頼するか、ネット上で配布されているフリー画像を利用するのが一般的です。

最近ではクラウドソーシングサービスでフリーランスのデザイナーに依頼する方法もあり、制作会社よりも安価で作成できるケースもあります。

また、ファビコンの作成は忘れがちなので気をつけてください。
ファビコンとは、ホームページをブックマークした際や、タブを開いた際に表示される小さいアイコンのことです。

なお、ネット上で配布されているフリー画像を利用する場合には、著作権に気を付けなければなりません。
必ず利用規約に目を通し、商用利用は可能か、画像の改変はできるのか、出典先の明記が必要なのかなど、トラブルにならないようにしっかりと確認しましょう。

≪工程5≫ CMS(WordPressなど)の設定をする

最近ではWordPressやMovable TypeといったCMS(コンテンツ・マネジメント・システム)を利用して構築されたホームページも増えてきました。
もしCMSを利用する場合には事前に環境設定をしておきましょう。

CMSはテーマ(テンプレート)を利用するだけでおおまかなデザインを変更することができるほか、Web製作者以外の人のアクセスも管理できるので、ページ追加の際などに便利です。

≪工程6≫ コーディング作業を行う

コーディング・プログラミング画面

HTMLやCSSといったプログラム言語を使って、「ソースコード(デザインの設計図)」を書いて行きます。
この工程ではホームページのデザインだけでなく、動きを加えたり、システム部分を構築したり、SEO対策を組み込んだりといった作業も行います。

コーディング作業を行う際に使用するテキストエディタのなかにはタグの入力をアシストしてくれる便利なものもあるので、自分に合ったツールを探してみるのもおすすめです。

≪工程7≫ ホームページの動作をテストする

コーディング作業が終わったら、いよいよホームページの動作確認です。
ホームページの動作確認にはブラウザチェックとテストサーバーでのチェックがあります。

公開したホームページは見るブラウザによってレイアウトが崩れたり動きがおかしかったりする可能性もあるため、いろいろなブラウザを使用して自社のホームページをチェックします。

多くのユーザーに使用されているブラウザ(「Microsoft Edge」、「Internet Explorer」、「Google Chrome」、「Mozilla Firefox」、「Safari」など)は最低限チェックしておきましょう。
また、モバイル対応のホームページを制作した場合には、スマートフォンやタブレットでの動作確認も忘れずに行ってください。

ローカル環境でホームページを構築した場合には一度テスト環境のサーバーにアップロードをして、閲覧できるかどうかや「リンクが変なところに飛んでしまう」などの動作確認をします。
この時点で特に問題がなければ、本番環境に移してホームページの公開です。

3. ホームページを公開する

休憩中の人

「無事にホームページも完成したし、公開作業も終わった…」と胸をなで下ろしているかもしれませんが、ホームページは公開したらそれで終わりというわけではありません。
ここではホームページの公開後にするべき4つの作業を取り上げます。

≪作業1≫ 検索エンジンに登録する

せっかく苦労して制作し、公開まで進めたホームページですから、「多くのユーザーに見てもらいたい!」と思いますよね?
そこで検索エンジンに登録して、ホームページの情報をクローラー(ネット上のテキストなどを取得し、データベース化するプログラム)に認識してもらいます。

何もしなくてもクローラーはホームページの情報を収集していきますが、こちらから登録することでクローラーの呼び込みを早めることができます。
公開したばかりのホームページは認知度が低いですから、こうしたツールを使って効果的に認知度を上げて行きましょう。

≪作業2≫ アクセス解析を行う

アクセス解析画面

アクセス解析とは、ホームページのアクセス数や滞在時間、どのページがよく読まれているかなど、ホームページを訪れたユーザーのあらゆる動向を解析し、データ化することを言います。

アクセス解析のデータを見ればホームページの課題や問題点などが浮き彫りになるので、データをもとにホームページの改善・更新を行うことができます。
ホームページを確実にビジネスと結び付けたいのであれば、アクセス解析は必須と言っていいでしょう。

≪作業3≫ ホームページを更新する

公開後も、アクセス解析のデータをもとに、こまめに改善・更新を行うことでホームページの質を高めることができますし、ユーザーにとって有益なホームページだと評価され、検索エンジンでの順位も上がりやすくなります。

≪作業4≫ SNSやリスティング、プレスリリースで発信する

ホームページを公開しただけでは、GoogleやBingからの検索流入による集客経路しかありません。
そのため、どのようにユーザーに自社ホームページを認知してもらうかを考えます。

おもな宣伝方法
  • FacebookやTwitterなど、SNSで発信
  • ダイレクトメールやショップカードなど、紙媒体での宣伝
  • バナー広告やリスティング広告など、ネット上での宣伝

上記のような宣伝方法がありますが、特に活用したいのがTwitterFacebookInstagramといった各種SNSです。
SNSは今や国内総人口の5割以上の人が利用しているコミュニケーションツールです。活用すれば間違いなくホームページの宣伝につながります。

さらに、予算に余裕があるのであれば、リスティング広告を打ったり、プレスリリースを出すことで自社ホームページを宣伝することもできます。

リスティング広告とは、Yahoo!やGoogleといった検索エンジンの検索結果の最上部に表示される広告のことです。
ユーザーが検索したキーワードに連動して表示させることができるので、ニーズを考えて出稿すれば効果的に集客することができます。

プレスリリースとは、他のメディアや報道機関に向けて告知する広告手法のことです。
他の媒体に記事として取り上げられれば大きな効果が期待できますが、掲載が確実ではなかったり、掲載内容がコントロールできないなどデメリットも存在するので注意が必要です。

いずれにせよ、ホームページの集客をSEO対策だけに任せてしまうと、Googleの検索アルゴリズムに変更があった場合に検索順位が下がり、アクセス数がガクッと落ちてしまう恐れがあります。

もしあなたが「うちはSEO対策を万全にするから宣伝なんか必要ない」と思っているとしたら、いつか大変な損失を被ってしまうかもしれません。
リスクを回避するためにも、ホームページへ誘導する方法はいくつか用意しておいた方が安心ですよ。

【まとめ】制作の流れが分かれば外注もスムーズになる

ノートパソコンと地球儀

この記事ではホームページ制作の流れを、大きく3つの手順に分けて紹介しました。
制作フローが分かれば計画的に作業が進められるだけでなく、「次は何をすればいいんだっけ?」と作業の手を止めて悩む心配もありません。

「ホームページの制作は外注に依頼するから、別に流れなんて知らなくてもいいし…」と思っている人もいるかもしれませんが、それは大きな間違いです。
制作の流れを理解することは自作する場合だけでなく、業者に依頼する場合にも役立ちます。

制作フローに沿って発注準備をしておけば依頼自体がスムーズになりますし、依頼の際にかかる時間も短縮できるため、業者の選択肢を広げることにもつながります。

「でも業者にホームページ制作を依頼すると高いんじゃないの?」「そんなに予算はかけられないんだけど…」という場合には、ぜひ一度日本最大級の業者比較サイト 「アイミツ」までご相談ください。
「アイミツ」ではあなたの会社が希望する条件に応じて、最も適したホームページ制作業者を無料でご紹介させていただきます。

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
3万社以上が利用している無料の相談サービスです。

コンシェルジュ

発注は時間も手間もかかりますよね?

コンシェルジュが解決します!

コンシェルジュに相談、あなたにあった業者を提案、発注の手間を削減!

完全無料

まずはお気軽にご相談ください