お気軽にご相談ください
050-8885-7511
全国対応・平日10時〜18時

ホームページ作成を制作会社に依頼したときの完成までの流れを徹底解説

代表取締役

児島 大

ホームページを制作する際、制作業者がどのような手順で制作しているのかをできるだけわかりやすい言葉で説明いたします。

1. コンセプトの設計

まずはじめにホームページのコンセプトを設計していきます。ここがきちんと出来ていなかったりホームーページに対する考え方がブレてしまうと、せっかくのホームページがその機能を果たさなかったり、最悪の場合には逆効果で印象が悪くなってしまう可能性もあります。

制作の目的

制作の目的を考えることは、コンセプト設計のなかでももっとも大切な部分です。名刺代わりにつかいたいのか、会社のパンフレット代わりにつかいたいのか、または、24時間働き続ける最強の営業マンとして集客や売上アップにつなげたいのかなどです。

制作の理由

目的が決まったあとは、なぜホームページである必要があるのかということを整理する必要があります。会社のパンフレット代わりにつかうのであれば、なぜ紙のパンフレットではなくインターネット上のホームページなのかということを考えなくてはなりません。

リニューアルの場合には現在の問題点

リニューアルの際には、なぜリニューアルが必要なのかを洗い出す必要があります。

今のホームページがスマートフォンに対応していないだったり、今のホームページを作ったときから業態が変化してきたので刷新したいが今の制作業者はデザインがいまいち好みでないなど、なにを残してなにを変えたいのかということが重要です。

ターゲットやペルソナの設定

ここまでで、制作の目的と理由ができあがりました。次にターゲットを設定します。ターゲットは、一般的に、男性・会社員・40代〜50代など設定することがおおいですが、特定の人物像をペルソナとして作り上げることでよりブレの少ないホームページ作成ができます。

例えば、このページのペルソナは企業のホームページ作りを任された40歳の男性会社員が、いくつかの制作会社に見積もりをとる中で一般的な制作会社のホームページ制作の流れを知りたいという具体的な人物像を作って書いています。

2. タイトルとキャッチコピー

コンセプトがまとまったら、タイトルとキャッチコピーを考えていきます。

タイトルは、企業のホームページであれば企業名が一般的です。そこに、キャッチコピーとして他社との差別化ポイントや自社の強みのを書き出します。アクセスも多くはいるであろうトップページに、キャッチコピーを入れることでホームページで伝えたい印象を簡単に伝えることができます。

3. その他のページのコンテンツ案

トップページが固まった後は、それぐらいのページのコンテンツ案を作成してきます。コンテンツ案は、この時点ではタイトルと中身にをどういったコンテンツを入れるのかで程度で構いません。

4. サイトの仕様

ドメイン

決まったタイトルを元に、独自ドメインを考えます。独自ドメインは、短く覚えやすいものがお勧めです。法人の場合には、co.jpドメインを取得することでドメインの信頼性もあがります。

URL

URLは、SSL化対応をおこない、httpsにするのかどうかなどを決めていきます。

ホームページへの導線設計

ホームページへの導線をどのように行うかを考えておきます。インターネット広告を出してアクセスを集めるのか、ブログを書いて検索からのアクセスを集めるのか、SNSでシェアされるようなコンテンツを制作してアクセスを集めるのかなどを、予算や稼働の側面から考えていきます。

スマートフォン対応・レスポンシブ対応

Googleがモバイルファーストインデックス(MFI)導入を表明するなど、これからのホームページはスマホ対応は必須対応になってくるはずです。スマートフォンでみたときにスマホ用のデザインで表示されるだけではなく、どんなデバイスでも最適なデザインで表示されるレスポンシブデザインを導入するのかどうかを決める必要があります。

スマートフォンだけの対応よりも、レスポンシブ対応のほうが制作料が高くなるのが一般的です。

対応ブラウザとバージョン

現在、おもにつかわれているブラウザは、Google Chrome・Firefox・Internet Explorer・Edge・Safariなどです。世界シェアでいうと、Google Chromeだけで約50%のシェアをもっています。その中でも最新バージョンのGoogle Chromeのシェアが40%超えです。

ここで問題になるのは、ブラウザごとに、HTMLやCSSといわれるホームページをつくるためのプログラム言語の使い方が変わってしまうことです。具体的な例でいうと、Google Chromeだときちんと表示されているデザインのページを、Internet Explorerで同じように閲覧するとデザインが崩れているなどの問題がおこるわけです。同じ、ブラウザだったとしてもバージョンの違いによってそのようなデザイン崩れなどがおこることもあります。

もちろんすべてのブラウザとバージョンに対応するように、プログラムを書いていくことは不可能ではありませんが、相当の時間が必要になり、その分だけ制作料金が高くなってしまいます。

一般的には、Google Chrome・Firefox・Internet Explorer・Edge・Safariの最新バージョンにのみ対応というのが多いと思いますので、仕様設計の段階であらかじめ決めておきます。

更新範囲

ホームページ完成後に、クライアントに引き渡しとなりますが、運用開始後に修正箇所が出てきた場合には通常都度修正料を支払って修正するというのが一般的です。

ただし、あらかじめ頻繁に修正する箇所などがきまっているなどの場合には、運用開始後に制作会社に都度依頼することなく修正がおこなえるようにシステム設計をすることも制作会社によっては可能です。その場合には、CMSとよばれるコンテンツマネージメントシステムを使って、簡単に更新がおこなえるようにシステム設計をおこなうのです。

5. サーバー・ドメイン取得

ホームページを設置するサーバーと独自ドメインの準備をします。独自ドメインはサイトを育てていくにあたりどんどん価値が蓄積されるものです。一度取ったらよほどのことがない限り変更することがないように慎重に取得します。

制作会社が取得代行してくれるケースが一般的です。

6. サイトマップ制作

サイトマップとは、サイトの設計図のようなものです。

トップページの直下にどういったページがあって、さらにその下層にどういったものがあるのかを一覧でみられるように書いたものです。10ページ以下のサイトであればサイトマップはなくても問題ありませんが、10ページを超えるサイトですとサイトマップがないとこの後の作成過程がややこしくなったりします。

7. ワイヤーフレーム制作

ワイヤーフレームとは、線だけで書きあげたデザインの下書きのことです。

どのページにどんなコンテンツを配置するのか、不足しているコンテンツはないかなどの大雑把なデザイン構成を線だけで書いていきます。ここの作業は、制作会社では、ディレクターとよばれる役職のスタッフがおこなうのが一般的です。

8. デザインカンプ制作

IllustratorやPhotoshopなどのツールをつかい、デザインをしていきます。IllustratorやPhotoshopはスキルをもっていないと使いこなすのが比較的難しいツールのため、制作会社のなかでもデザイナーが担当します。

このデザイナーのスキルや得意なデザインのタイプにより、完成デザインのクオリティが左右します。複数人のデザイナーが在籍しているような制作会社であれば、ヒアリングの段階できいたクライアントの好みのデザインに最も近いデザインを得意とするデザイナーが割り振られます。

9. コーディング

いよいよ、コードを書いていきます。

ホームページは、HTMLとよばれる言語でかかれており、CSSとよばれる言語でデザインを再現していきます。実装したい機能によっては、PHPやJavaScriptとよばれる言語がつかわれることもあります。

この部分は、上記の言語を扱うことのできるシステムエンジニアが、デザインカンプをもとにコーディングしていきます。

10. 仮サーバーにアップロードしてチェック

コーディングがおわったら、仮サーバーにアップロードして、各ブラウザでのデザインチェックや問い合わせフォームの動作確認をおこないます。実際にスマートフォンからも実機をつかって確認し、デザインの微調整をおこないます。

11. 本番サーバーにアップロード

仮サーバーでの微調整がおわりましたら、本番サーバーにデータをアップロードします。SSL対応が必要な場合には、この時点でSSL証明書の申請をおこないます。

通常は、ここまでの段階で、クライアントへの引き渡しとなります。

12.Googleサーチコンソールの設定や内部SEOの最適化

ホームページ運営で肝心なことは、公開後です。公開した後の初期段階では、まだGoogleの検索結果に表示されることはありません。Googleサーチコンソールというツールをつかって、Googleに新しいサイトができあがりましたということを伝える作業をします。

 

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

資料準備中…

お電話でのお問い合わせはこちら

  • ※電話番号はおかけ間違いのないようご注意ください。
  • ※セールス目的のお電話はお断りしております。