集客重視のホームページ制作ならWebStage

COLUMN ホームページの作り方(初心者向け)プロが教えるホームページ作成と流れ|1分でわかるホームページ戦略コラム

TOP > ホームページの作り方(初心者向け)プロが教えるホームページ作成と流れ
ホームページの作り方(初心者向け)プロが教えるホームページ作成と流れ

ホームページの作り方(初心者向け)プロが教えるホームページ作成と流れ

ホームページ作成のデザインやディレクション経験がない場合、自社のホームページはどのようにして制作すれば良いのか分からない方も多いのではないでしょうか。
そこでホームページの作成フローをご紹介いたします。
初めてホームページを作成される方や、新人のWeb担当者さん、新人ディレクターさんの参考になれば嬉しいです。

▼ホームページ作成の前に考えること

今回は、主に制作前の流れや準備についてご紹介します。

これはあくまでも一般的なホームページ作成のフローなので、流れや手順は制作会社によって異なる部分もありますが、
だいたいの流れや概要は理解して頂けると思います。

流れを知ることでやるべきことも見えてきますので、ぜひ確認していきましょう。



▼作成の前に考えること(こちらの項です)
1.ターゲットやゴールを設定する
2.コンセプトを決める
3.タイトルを決める
4.制作ポリシーを決める
5.サーバー・ドメインを取得する

▼ホームページ作成に掛かる費用について

▼ホームページ作成の主な流れ
1.サイトマップを作る
2.ページのレイアウトを決める
3.CMSの設定をする。ツールや htmlに詳しければ簡単です!
4.各種ツールを使いコーディングする。 html等の専門知識が必要
5.ロゴやバナーを作成する
6.ブラウザチェックを行う
7.テストサーバーで確認する

▼ホームページを公開したら
1.検索エンジン(Google等)に公開を知らせる|無料です
2.アクセス解析ツールをチェックする|無料です
3.ホームページを更新する
4.SNSやリスティング広告、プレスリリースで発信していく

▼一連の流れをしっかりと把握して、成功するホームページを作成しよう!


■作成の前に考えること

1.ターゲットやゴールを設定する



最初に、自社のホームページで集客を行うときには、どんな人にホームページを見てもらいたいのか「ターゲット」を設定していきます。

なぜなら、ホームページを公開するということは、そこには見てもらいたい人が必ず存在するからです。

ただホームページを作りたいのではなく、集客をしたいから、告知をしたいからホームページを制作するわけですね。

そこで、誰に閲覧されるか、見てもらいたいターゲットを明確にする必要があります。


Web担当者の中には、老若男女問わず、幅広い人々に見てもらいたいという方もいます。

万人受けするホームページのほうがいいと考えるのは、ごく自然なことですが、

幅広い人々に見てもらうという大きな目的よりも、本当に必要としているターゲットを設定することで、

そこにヒットする読者がいた場合、訴求力が強まり、集客効果や広告効果にもプラスに影響します。

ただやみくもに集客するのではなく、「欲しいお客様」を明確に設定しましょう。

ホームぺージで反響を得るための近道は、ターゲットを明確にすることです。

最初のうちは、反響を得たい層に向かってメッセージを伝えていきましょう。


ターゲット設定では、対象となる性別や年齢層だけでなく職業や趣味嗜好など、より踏み込んだターゲット設定をするとより良いでしょう。



この、さらに踏み込んだターゲット設定のことを「ペルソナ」といいます。

ペルソナは、あたかも実在している人物像を描き出すことで、ペルソナを設定することで、ユーザー目線の理解に繋がります。


例えば、「30代前半の映画好きな男性」ではなく、「30代前半の大手企業に5年間勤めており、休日には映画館へ足を運び、映画鑑賞を楽しむ、映画好きなA男さん」というように、具体的に人物像がイメージできるように詳細を決めてペルソナ設計を行います。


そして、次にゴールを設定します。ホームページ作成には、必ずゴールが存在します。

商品PRをしたい、販売促進をしたい、集客を増やしたいなど、ゴールが設定されていないと、制作会社もどこを目指して制作すれば良いのか分からなくなるため、ゴールは明確にしておきましょう。


ホームページ作成においてまず行うこと、それは、ホームページの「ターゲット」と「ゴール」の設定です。

ここをしっかり決めた上でやっとデザインの方向性が見えてきます。そこまで明確になったら、次の制作へ進みましょう。



2.コンセプトを決める




デザインの方向性が明確になった後は、具体的なコンセプトを決めていきます。

コンセプトが曖昧だと、制作時に問題やズレが起こるため、こちらの設計にも力を入れましょう。
最初に決めておけば、あとはスムーズなホームページ作りができるので、明確なコンセプトが決まるまでしっかり考えられることをおすすめします。

例えば、ホームページのデザインイメージでも「ポップな感じ」や「シンプルな感じ」「カジュアルな感じ」などの抽象的な言葉は、人によってイメージが違ってきます。

設定したペルソナに対し、自社やサービスが「何を叶えることができるか」、「何を提供するのか」を明確にしておきます。

抽象的な言葉だけでなく、具体的な言葉に変えることによって、ホームページ作成に関わる制作会社や社内の人との共通認識を作ることが出来ます。

デザインのコンセプトはできるだけ明確にしておきましょう。


曖昧なイメージのまま制作を進めてしまうと、誰のためのホームページなのか分からなくなり、伝えたい内容が伝わらず、効果の出ないホームページになってしまいます。

コンセプトがはっきりしていれば、伝えたい情報も選別されるので、ユーザーいとって使いやすく分かりやすいホームページになります。

★コンセプト設計についてはこちらのページでもご案内していますのでご一読ください。
事業紹介・ブランディング向けホームページ作成


3.タイトルを決める




大まかなコンセプトが決定したら、ホームページのタイトルを決めていきます。すでに会社名や店舗名があれば、そのままタイトルになる場合が多いと思いますが、新規サービスで立ち上げる場合にはユニークで覚えやすい名前をつけると良いでしょう。


ホームページのタイトルが決まったら、次にキャッチコピーを決めていきます。キャッチコピーがあると、そのホームページが訴求したい内容が伝わりやすく、そのホームページが何のために存在しているのかがわかります。

良いキャッチコピーは、キャッチコピーを見ただけで、どんなホームページなのか、どんなサービスなのか、イメージが湧いてくるものです。
ターゲットやゴールが鮮明でないと、良いキャッチコピーは生まれませんので、前述のターゲットやゴールを明確にした上で考えましょう。




4.制作ポリシーを決める



ここまで決めたら、いよいよホームページの全体像に入っていきます。しかし、全体像に移る前にもう一つ決めておくことがあります。


それは「制作ポリシー」です。

制作ポリシーとは、ホームページをどのように制作していくかのルールのようなもの。

例えば、「PCホームページとスマートフォンホームページでWebホームページを分けるか、分けずにレスポンシブデザインにするか」や「CMSは使うか」「ブラウザの対応範囲」などです。


初めの段階で、制作ポリシーを決めておかないと、デザインやコーディング(ホームページを表示するプログラムのようなもの)を制作会社に任せてしまうため、
後から変えたいと伝えた場合、統合やメンテナンスに手間が掛かり、費用も加算される恐れがあります。

全体的な制作ポリシーだけでなく、デザインポリシーやコーディングポリシーも決めておくと良いでしょう。

制作ポリシーについては、専門的な知識が必要なため、デザイナー・プログラマー・企画などの連携に長けている「Webディレクター」に任せることをおすすめします。

ほとんどの制作会社にはこのWebディレクターが在籍しているため、制作会社にまずはご相談してみてください。

Webディレクターに、上述したターゲット、目的、コンセプトなどの情報を伝えれば、ホームページ作りが進んでいきます。


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



最終的に作成したホームページをインターネット上で公開する場合には、サーバーやドメインが必要になってきます。

完成したからそのまま公開はできないのです。

ホームページ作りが終わる前に、サーバーと呼ばれるホームページの置き場所を準備して、ドメインと呼ばれるインターネット上の住所を準備しましょう。

考え方としては、家と同じです。家の置き場所である土地がないと建てられないし、住所もありますよね。

ホームページも同じように置き場所と住所が必要なのです。

大規模なWebサービスを作るのであれば、自社でサーバーを組み立てるのも一つの方法ですが、メンテナンス時間や人件費など大きなコストがかかってしまいます。

今では、100円台からの格安で契約できるレンタルサーバーもありますので、月々の費用やセキュリティ対策などを考慮して、最適なプランを選びましょう。


ドメインはタイトルと同じように、ホームページの顔となる部分です。覚えやすく、分かりやすいシンプルでユニークなドメインを取得しましょう。

▼ホームページ作成に掛かる費用について

どのようなホームページを作るかが概ね決まれば、予算の確保に掛かりましょう。

後半の記事でもご案内しますが、最近は無料で使えるWebサイトテンプレートや、格安のホームページ作成ツールも登場し、

実際のところ何にどれぐらいの費用を掛ければ良いのかが分かりにくくなってきています。


自分でホームページを作ることができる専門知識がある方であれば、格安のホームページ作成ツールでもホームページの立ち上げは可能ですが、

必ずしもそれが効果に繋がるとは言い切れません。


なぜなら、ホームページで成果を得るためには、作るだけでなく集客や反響を得るための「8つのポイント」を押さえておくことが必要だからです。


「売上や営業に役立つホームページを作りたいが、最初はなるべくお金を掛けたくない」とお考えであれば、

ホームページに必要な要素に対し、どれだけ費用を掛けるべきか、想定される効果を元にバランスを取って予算を掛けられることをお勧めいたします。



▼ホームページ作成における費用と「8つのポイント」については、こちらの記事で詳しく解説しています。
こちらもぜひご一読ください。

解説|ホームページ制作の費用・ホームページへの予算の掛け方について

▼ホームページ作成の主な流れ(無料ツールや仕組みについて)

ホームページ作成に入る前にやるべきことについておわかりいただけたでしょうか。

ホームページ作成においては、ただ制作するだけでなく、ターゲットやコンセプトを決めるなど事前の準備が重要です。



また、ホームページの置き場所であるサーバーやドメインなど、必ず用意しなければならないものもあります。

しっかりとホームページ作成前の準備をした上で制作することによって、より効果的なホームページ作りへ近づきます。



さて、事前準備が終わったら、次のステップはいよいよホームページ作成のスタートです。

ホームページ作成はどのように進んでいくのでしょうか。

ここから、実際のホームページ作成での流れをご説明していきます。


1.サイトマップを作る


まず、ホームページを制作するにあたって始めに行うことは、「サイトマップを作る」です。サイトマップとは、ホームページ作成の「設計図」です。

何かを制作する時に、完成図を想定しておかないと、ホームページ作成をしていく上で、どこを目指せばいいのか分からなくなるため、
ホームページ作成では始めに「設計図」である「サイトマップ」を制作します。

ホームページ作成会社のほとんどが、このサイトマップを作成してホームページ作成を進めています。


具体的には、どのページを作るのか、どのような導線にするのかを決めていきます。

もちろんこれを作るためには、前回お伝えしましたターゲットや目的について考えたことを反映させることが大切です。




2.ページのレイアウトを決める


次に、トップページや商品紹介のページ、会社概要のページ、お問い合わせページなどの様々なページのレイアウトを決めていきます。

この具体的なページのレイアウト図のことを、ワイヤーフレームと呼びます。

ホームページを見ている人は、デスクトップ画面では「左上から右上、左下から右下」、スマートフォン画面だと「上から下」に視線を動かすため、
優先順位が高いコンテンツほど、上に配置してホームページを見ている人の目に止まりやすいよう、目立たせる必要があります。

そのため、見せたいものや見せたいポイントを意識してレイアウトを組んでいきます。


★ワイヤーフレームについてはこちらの記事で解説中です。
ホームページ制作時に必要となる「ワイヤーフレーム」とは?


3.CMSの設定をする。ツールや htmlに詳しければ簡単です!


最近ではWordPressやMovable Typeなどの様々なCMSを使い、ホームページを作ることが多くなってきました。

初心者でも扱いやすいツールとしては、簡易テンプレートが用意されている無料のwixやjimdoが人気ですね。

テンプレートを設定しておくだけで、Web制作者以外の人もページを追加することが出来るような仕組みです。

これは制作会社と相談されることをおすすめいたしますが、目的や使い方によって、適切なCMSを選択しましょう。

当社でも、wixやjimdoのようなCMSツールを独自で開発しており、メールが打てる方であればどなたでも更新ができる簡単な仕組みをご提供しています。


4.各種ツールを使いコーディングする。 html等の専門知識が必要


次に、インターネット上でホームページを表示させるための、ソースコードの打ち込み作業=「コーディング」を行います。

場合によっては、ホームページビルダーなどのように見たままにレイアウトを作っていく方法で編集することもありますが、
こうしたツールを使うと余計なコードが挿入されることもあるため、
Googleなどの検索エンジンでの上位表示を狙いたい場合などに悪影響が懸念されます。

最近では、便利なエディタもたくさん登場しています。
タグごとに見やすく色分けしたり、開始タグを入力してEnterキーを押すとタグを自動で挿入してくれるものもあります。

コーディングの知識がある方は、様々なエディタがあるので、用途にあったツールを見つけていきましょう。




5.ロゴやバナーを作成する


コーダーのほかにデザイナーがいる場合は、コーディングと同時進行で、ワイヤーフレームに合わせてホームページの顔となるロゴやバナーなどの作成を行います。

また、忘れられやすいのですが、ファビコンの作成も行っておきましょう。

ファビコンとは、ホームページをブックマークした際に、ブックマーク項目の横に表示されるアイコンです。

最近では、ブラウザのブックマーク用のファビコンだけでなく、iOSやAndroidでホーム画面にホームページのブックマークを作成できるので、設定しておくとユーザーに喜ばれます。


6.ブラウザチェックを行う


iphone、androidスマホ、Internet ExplorerやChromeなどの各ブラウザ全てで、ホームページが正しく表示されるとは限りません。
そのため、ブラウザチェックが必要になります。

ブラウザチェックとは、色々なブラウザでホームページを確認し、レイアウトが崩れていたり、表示のおかしいところがないかを確認する作業です。

世の中にはたくさんのブラウザがありますが、上記で上げたInternet ExplorerやGoogle Chromeだけでなく、
Microsoft EdgeやMozilla Firefox、Safariなども多くの人が使っているので、最低限チェックしましょう。

また、サイズの違うスマートフォンやタブレットでも想定どおりに表示されるか確認しておきましょう。




7.テストサーバーで確認する


ローカル開発環境で開発したホームページは、自分自身や自社のメンバーしかアクセスできない状態になっています。

インターネット上でどこのエリアからでも、誰でも閲覧できるようにするためには、本番サーバーにアップロードして動作を確認する必要があります。

いきなり本番環境で公開して動かなかったり、リンクが切れていたり、リンクをクリックしたら想定外の場所に飛んでしまうこともあるので、
まずは本番サーバーの前にテスト環境のサーバーで動作を確認すると安心です。

問題がなければ、本番環境のサーバーで公開をし、いよいよホームページ作りの完了です。


これまで、ホームページ作成から公開までの流れを説明してきました。

ホームページ作成の大体の流れについておわかりいただけたでしょうか。

ただデザインをするだけでなく、ユーザーが使いやすいようなページのレイアウトを考えたり、ページの裏部分であるコードを書いたりと「ホームページを作る」には様々な作業や知識が必要です。

この流れをご自身で行うのか、制作会社に依頼するのかは、時間においても労力においても大きな違いがあります。

ホームページの制作方法についてお悩みの方は、まずホームページ制作会社と相談をしてみて、作業負担とコストのバランスを検討されるのが良いでしょう。




また、ホームページ作成は完成したら終わりではありません。

ホームページは実は、公開したらゴールではなく、スタートなのです。

ホームページを育てていく必要があるのですが、どのように育てていけば良いのでしょうか。

次に、ホームページの育て方について紹介いたします。

▼ホームページを公開したら。費用を掛けずにできる運用準備

1.検索エンジン(Google等)に公開を知らせる|無料です



長い時間かけて制作したホームページをいざ公開したら、より多くの人に見てもらいたいですよね。

本番サーバーにアップロードするだけではなく、ホームページが公開したことをGoogleなど検索エンジンのクローラーと呼ばれる巡回ロボットに知ってもらう必要があります。

自分から検索エンジンのクローラーにホームページが公開したことを知らせるには、
GoogleやBingが提供するWebマスターツールに登録をすると、クローラーが自動的にホームページを巡回してくれます。

また、それだけでなく、SEO対策(検索エンジン最適化)にも必要な機能を提供してくれるので、非常に有効です。

無料でできる手法もありますので、気になる方は当社までお気軽にご質問ください。




2.アクセス解析ツールをチェックする|無料です



Google Analyticsなどの解析ツールを利用すると、自分のホームページを見る人が、Googleなどから検索して来たのか、
広告から来たのか、別のホームページのリンクから飛んできたのか、直接URLを打ち込んだかなどの集客状況が分かります。

またTOPページ閲覧してくれたユーザーは他のページも見たのか、見たならどのページを見たかなどの、行動情報をチェックすることもできます。

アクセス数や検索流入の割合などは、世の中の人々が自分のホームページに対してどのようにリアクションをしているかを知ることができるので、こまめに確認してください。

アクセス解析はGoogle Analyticsがおすすめです。
無料で活用できますし、細かな情報までしっかりと掲載されているので、初心者から上級者まで活用されています。

ただ、Google Analyticsは情報量が多いため、詳しい人でないと求めている情報を得るのは難しいかと思われます。
その場合は、ホームページ作成を依頼した業者に見てもらいましょう。

また、当社ではGoogle Analyticsの情報を分かりやすく、見やすいようにした独自のアクセス解析を入れております。
こちらのアクセス解析は、知識がない人でも簡単に見ることができるので、どなたでもご自身のホームページの状況を確認することができ、安心です。

それぞれにあったアクセス解析を使って、ホームページの状況を確認しておきましょう。

★当社には、ホームページの解析を行うサービスもございます。
くわしくはこちらのページをご覧ください。
【無料体験実施中】運用Webコンサルティングサービス


3.ホームページを更新する



アクセス解析でホームページの状況を確認できたら、アクセス解析のデータを考慮しながら、ホームページを更新していきましょう。

ホームページは制作して公開したら、そのままにしておくのではなく、更新し育てていくことが出来ます。

アクセス数が多いページがあれば、そのページをどのように伸ばしていくかについて考えたり、

逆にアクセス数が少ないページがあればなぜアクセス数が伸びないのか原因を追求し改善することで、より成果に近づけていくことが可能。

新着情報や、コラム、ブログなど頻繁に更新できるページも月1~2回は定期的に更新していくことが重要です。

ホームページを適切に更新すれば、クローラーの巡回数も増え、ホームページの検索順位対策にも効果が期待できます。



4.SNSやリスティング広告、プレスリリースで発信していく




ホームページを公開した段階では、検索流入が唯一の流入経路になります。

新商品のホームページや新ブランドの立ち上げなど、認知度が低い商品は検索での流入が難しくなるため、
検索流入だけでなくtwitterやFacebook、InstagramなどのSNSを活用することで、こちらから戦略的に存在を認知させることが出来ます。

また、ある程度まとまった予算がとれるのであれば、リスティング広告をしてみたり、プレスリリースなどを出すことで、
ホームページを宣伝するだけでなく、商品やブランドも同時に宣伝することができます。


SEO対策も重要な対策ですが、SEO対策だけに頼ってしまうと競合他社がSEO対策にしっかりと対策されていて、ページ数もページの質も怠っていない場合、よほど根気よくホームページを更新していかないと、なかなか勝つことは出来ません。

そのため、手法としてリスティング広告やプレスリリースなどを活用していくことで、よりSEO対策が活きてきます。

また、Googleの検索ポリシーが急に変更されて検索結果が落ちてしまった場合に、アクセス数が急激に落ちることもあります。
そのため、できるだけ入り口となる媒体をいくつかに分散して置くことで、そうしたリスク回避にも繋がります。

▼一連の流れをしっかりと把握して、成功するホームページ作成をしよう!

ホームページの作り方について解説していきました。

制作体制の人数や、ホームページのページ数などの規模にもよって変わってきますが、基本的な制作フローから公開まではこのよう流れになります。

「思った以上にやることが多い!」と感じた方も少なくないのではないでしょうか。

ホームページ作成は、家づくりに似ていると言われます。

良い家を建てるためには、設計前のプランから、資材調達、施工、デザイン、メンテナンス、土地、エクステリアなど、必要な準備が沢山ありますが、

効果的なホームページを作る場合は、すぐに簡単にできるわけではありません。


少人数で行おうとするとかなりの知識と時間が必要になってくるため、最近では、個人の方でも、ホームページ作成を業務委託することも珍しくなくなってきました。

外部に依頼する場合は、ホームページ作成の流れを知らないと、思った通りのデザインにならないなどのトラブルに発展してしまうこともあります。

安心してホームページ作成を行うためにも、こちらのコラムでご紹介したように、ご自身で制作の流れを知っておくことが役立ちます。


ウェブステージでは、ホームページ作成から制作後のアフターフォローまでトータルでサポートいたします。

ホームページ作成で気になることやお悩みがございましたら、お気軽にお訪ねください。

CONTACT

無料相談について

無料相談について

お客様のご希望ごとに、専任スタッフが最適な資料をご用意いたします。

無料相談の例

  • おすすめプラン
  • 導入前のコンサルティング
  • ホームページの改善ご相談
  • ネット活用、運用のご相談
  • ホームページ診断
  • 競合調査
  • 補助金活用のご相談
  • 集客に関するご相談
  • 資料請求

リモート環境でのご対応も可能ですので、お気軽にご連絡ください。

資料請求・お見積り・ご相談はこちらへどうぞ。【全国無料】

必須お名前

例:山田 太郎

必須メールアドレス

例:abc@w-stage.jp

必須電話番号

例:03-5210-2565

必須都道府県
必須会社名

例:ウェブステージ株式会社 税理士事務所ウェブステージ

必須業種

例:ホームページ制作

任意ホームページ
アドレス
http://
任意ご要望
(複数選択可)
任意ほか、
メッセージ

お問い合わせいただく内容及びお客様の個人情報は、個人情報保護方針に則り厳重に管理いたします。
詳しくは「個人情報について」のページをご覧ください。
お問い合わせフォームをご使用の際は、個人情報保護方針の内容にご了承の上で送信いただくようお願いいたします。