ホームページ制作の流れ

こちらのページでは、妙高Web屋がオススメするホームページ制作の手順や、気をつけておきたいポイントについてご説明しています。
※必ずしも全てのホームページを同じ手順で制作するとは限りません、あらかじめご注意ください。

下記のフロー内のそれぞれの工程をクリックしていただくと、ページ内のそれぞれのセクションに移動します。

  • STEP1:ヒアリング
  • STEP2:企画・立案
  • STEP3:お見積もり
  • STEP4:正式契約
  • STEP5:要件の確定
  • STEP6:トップページデザイン
  • STEP7:トップページコーディング
  • STEP8:下層ページ制作
  • STEP9:CMSの作業
  • STEP10:公開・納品
  • STEP11:公開後の更新・保守
  1. STEP1:ヒアリング

    手順について述べる前に、制作者・制作会社にご依頼をくださるお客様を、ここでは「依頼者様」とお呼びします。また、依頼主様の商品やサービスをご利用になる「お客様のお客様」のことを、ここでは「ご利用者様」とお呼びします。

    そのうえでまず「ヒアリング」で、クライアント様からのご要望を伺います。

    ホームページをお作りになる「目的」や、ホームページでやりたいと考えられていること、ページの内容・ボリューム、そして予算などを伺います。また「BtoB(企業のお客様向け)」なのか「BtoC(個人のお客様向け)」なのかという点や、クライアント様のほうで「こういうホームページにしてほしい!」というご要望があれば、そのURLも伺うことがあるでしょう。

    【おすすめ記事】ヒアリング段階で確認しておきたいポイント

    ヒアリングの段階で、依頼主様に確認しておきたいポイントをまとめました。詳細はこちらからご覧ください。

  2. STEP2:企画・立案

    次に、ご要望のヒアリングを基にして「企画・立案」を行います。BtoBかBtoCかといったように「誰に向けたホームページにするのか」で、そのご利用者様の求めるものを調査・検討します。

    一方で、依頼主様の提供可能なコンテンツをともに精査させていただき、同業他社(競合サイト)との差別化コンテンツを絞り込んでいきます。

    ユーザーの求める内容の濃いコンテンツを作るには!?

    まずは制作するホームページに関する「キーワード」を洗い出して、一般のユーザーの方々がどのようなキーワードで検索されているか、そしてその回数を調べます。これが「需要の調査」にあたります。

    次に、そのキーワードで実際に検索してみて、どのようなホームページが上位に表示されるかを見てみます。これには「供給の調査・競合サイトの調査」の2種類の意味があります。

    それらを踏まえて、以下の2つの条件を満たすコンテンツを作り込んでいきます。
    (1)一般ユーザーの方々(いずれご利用者様になり得る方々)の求めるものを満たすコンテンツ
    (2)競合サイトより内容の濃いコンテンツ
    これら2つの条件は、多くのホームページで挙げられている項目かと思います。

    「求めるものを満たす、内容の濃いコンテンツなんて、どう作ればいいの!?」
    という疑問にお答えするため、妙高Web屋では「Q&Aサイトから一般ユーザーのニーズを抽出する」という方法をおすすめしております。

    【おすすめ記事】競合サイトとのコンテンツの差別化について

    競合サイトとのコンテンツの差別化については、こちらのページで詳細をご紹介しています。

  3. STEP3:お見積もり

    続いては「お見積もり作成」です。

    ホームページの公開・納品に要する費用を確定させるほか、ホームページは公開後も定期的な更新が発生する場合が多くあります。

    その場合に、ホームページ公開後に定期的に発生する費用も定めておく場合があります。

    また、ホームページ公開までの期間が長期に及ぶ場合や、規模の大きさなどによっては、制作料金の一部が「着手金」となる場合もあります。

  4. STEP4:正式契約

    企画内容やお見積もりの費用にOKをいただけましたら、いよいよ「正式契約」となります。

    先ほど述べた「着手金」が発生する場合は、この工程の直後にいただく場合が多いです。

  5. STEP5:要件の確定

    正式契約を結び「要件の確定」を進めていきます。

    ホームページの目的(何をしたいか)や、目標(目的達成のための具体的な達成ライン)のほか、コンテンツの概形(大まかな形)やページ構成、スケジュールをここで定めていく場合が多いでしょう。

    また、ドメイン(何々.comのような文字列)やホームページのイメージカラー、ロゴ、そしてお持ちの場合は依頼主様からの写真素材のご提供も随時お受けしつつ、制作に進んでいきます。

    【おすすめ記事】要件の確定において注意したいポイント

    こちらで挙げた(ホームページ制作における)目的と目標について、詳細をこちらの記事にまとめました。
    よろしければ合わせてお読みください(^^)

  6. STEP6:トップページのデザイン案作成

    続いては「トップページのデザイン」です。

    ホームページは「マークアップ言語」や「プログラム言語」と呼ばれる記述によって作られています。一般的にはいきなりすべてを作り込もうとせず、ホームページの顔とも言える「トップページ」のデザインから作り始める場合が多いです。

    予算やスケジュールによっては、トップページを2案から3案ほどお作りする場合もありますが、依頼主様から「このような色・イメージで」とお示しいただいて、1案のみお作りするという場合もあります。

    【おすすめ記事】Webデザインの着手にあたって

    トップページからデザインを始める案件は確かに多く見受けられます。ただし、一部の種類のホームページや、特定の条件を満たす場合などは、あえてトップページ以外から制作を始める方が効率的な場合もあるかもしれません。
    こちらに参考記事を挙げておきました、よろしければご覧ください。

    【疑問】スマートフォン用ホームページのデザインは必要なのか!?

    昨今、スマートフォンでの閲覧に対応したホームページを多く見かけるようになりました。「PC用ホームページを、そのままスマートフォンでも表示する」という形式のホームページと比較して、文字の大きさも最適化され、整理されて見やすいように感じます。

    スマートフォン用のホームページを「作る」ことまでは良いとしても、スマートフォン用のホームページもPC用と別に「デザインする」という工程にまで、時間やお金をかけるべきなのでしょうか??
    その点については、以下の記事で述べております。

  7. STEP7:トップページのコーディング

    トップページのデザインを依頼主様にご確認いただき、OKとなりましたら、次は「トップページのコーディング」です。HTMLという名の、先ほど述べた「マークアップ言語」によって作り込んでいきます。

    また、ホームページの構成によっては、次の「下層ページのデザイン」を先に行う場合もあります。

    【おすすめ記事】コーディング着手はデザインのOKをいただいてから!?

    妙高Web屋では、デザインの内容を依頼主様から「OK」をいただいたうえで進めていくことを推奨しております。
    正直に申し上げて、一部は制作者の都合でもあります。
    ただし、下記の記事で述べているように、結局は依頼主様にお手数をおかけしないように、そしてご利用者様にしっかりと情報をお届けできるようにという意味もあるのです

  8. STEP8:下層ページのデザイン&コーディング

    トップページのデザインが完了し次第、「下層ページのデザイン&コーディング」も進んでいきます。

    ホームページの規模やスケジュールなどによっては、先に下層ページもデザインしてからコーディングへ、という場合もあります。

    基本的には「各ページのデザインをお作りして、OKをいただき次第コーディングへ」という流れとなります。

  9. STEP9:CMSのテンプレートへの組み込み

    ホームページの内容によっては、公開後に依頼主様のもとでお手軽に更新を行っていただけるよう「CMS(シーエムエス)」と呼ばれるシステムを導入させていただくことがあります。

    最近では「ワードプレス」や「ムーバブルタイプ」と呼ばれるものが多く用いられています。

    一度システムを組み込んでしまえば、公開後は依頼主様のお手元で「新着情報」や「業務実績」のような随時追加されるコンテンツを、Word文書を編集するような形式で更新できるようになります。

    【おすすめ記事】CMSの導入に関して

  10. STEP10:ホームページの公開・納品

    各ページをブラウザ(ホームページ閲覧ソフト)で確認できるようになったら、その都度、依頼主様にご確認いただきます。ご確認いただいて全てOKとなりましたら、いよいよ「ホームページの公開」となります。

    また、公開して不備がなければ、いくつかの手順を経て「納品」となります。

    【公開準備】Google Search Console(グーグル・サーチ・コンソール)でホームページを認識してもらう

    ホームページの公開にあたって、必ず済ませておきたいのがGoogle Search Console(グーグル・サーチ・コンソール)という、Googleのツールです。

    こちらに関しては、特に「サイトマップ送信」と「Fetch as Google」という2種類の設定に関して、「スカウト」や「オーディション」を例に挙げて説明しております。

    【公開準備】WordPressでタイトルタグをお手軽カスタマイズ!

    公開したホームページが上位に表示されるかどうかを決める要素の一つが、タイトルタグです。それぞれのページの内容を端的に表現したものであることが必要ですが、WordPressであれば、ページのタイトルやカテゴリーの名称を設定するだけで、最適化されたタイトルタグを自動的に生成することが可能です。
    下記の記事では、WordPressのサイトでタイトルタグを生成するサンプルコードを公開しております。

    【公開準備】SNS投稿時に目を引いてクリック率アップを目指す!OGP設定のサンプルコード

    SNSを利用していると、あるサイトのURLを投稿した場合に、URLのリンクだけでなく「画像や説明文」がひとまとまりになった要素が一緒に表示されているのを見たことがありませんか?それらが表示されていると「なんだろう?」となって、ただURLのみが投稿されている場合と比較しても、クリックしてホームページを訪れる確率が高い傾向にあるようです。

    それらの要素はホームページ側でOGP(オー・ジー・ピー)と呼ばれるいくつかの情報のまとまりももとにして表示されるようになっています。
    こちらの記事では、WordPressのサイトでOGPを自動生成する場合のサンプルコードを公開しております。

    【公開準備】WordPressのURLから[wp]を消す方法

    WordPressでホームページを制作するとき、よく[wp]のようなフォルダを作って、その中に必要なファイルをアップロードして作業する場合があるかと思います。そのため、WordPressで作ったホームページのURLが
    「http://@@@@@.jp/wp/」
    のようになるのですが、末尾の[wp]を取って
    「http://@@@@@.jp/」
    にしたいという事例は、多く存在します。

    こちらの記事では、その[wp]を取る作業の手順を説明しております。

  11. STEP11:公開後の更新&保守サポート

    ホームページ公開後も「更新&保守サポート」という形で制作者・制作会社が携わる場合は多くあります。

    「ホームページは生き物」と考える制作者も多く、日々技術が進歩していく中で、思わぬ不具合が発生する場合があります。

    「ブラウザのバージョンが新しくなって、それまで使えていたこの機能が止まってしまった」という場合は、多分に考えられます。

    そうした場合に備えて「ホームページ公開後の更新・修正は、このように対応する」という、スケジュール面・金額面での契約を結んでおく場合も多くあります。

    【ポイント】ホームページ公開後の更新作業の契約は、どうするのがおトクなのか!?

    ホームページを公開したあとにも、時間の経過に伴って記事の更新を行ったり、デザインのリニューアルをする必要が出てくる場合もあります。

    依頼主様の側で何もかもできれば別ですが、制作者に再び依頼して作業してもらうというケースは多いです。

    そこで、更新作業をどのような形式にしておくのが制作者・依頼者様の双方でお得なのかを、こちらの記事で述べております。

    【ポイント】PDCAサイクルを利用したホームページの保守運用

    ビジネスの場で「PDCAサイクル」というキーワードが使われることがあります。

    Plan・Do・Check・Actionの頭文字をとったものですが、それは公開後のホームページの保守運用にも使われることがあります。

    妙高Web屋では、原因を3段階まで掘り下げた分析で、PDCAサイクルによるホームページの保守運用のアイデアをご紹介しております。

お問い合わせ

妙高Web屋へのお問い合わせは、こちらのフォームより受け付けております。お気軽にお問い合わせください(^^)!