ホームページ作成の流れ

ホームページ制作会社に依頼してウェブサイトを作ると仮定して、どういった手順で進めればコストを掛けずにスムーズにホームページを作ることが出来るのか簡単に纏めてみました。
先ずはホームページを作成するにあたって、インフラを整備しましょう。
『Web作成に必要なインフラ』はこちら»

では具体的に、どう言った流れでホームページを作成するのか手順を見ていきましょう!

目次INDEX

ホームページの構成とデザインを考えましょう!

先ず最初に、何を目的として会社のホームページを作るのかイメージしましょう。
会社案内、お問い合わせ、商品やサービスの案内、ネット上での新規開拓、ネット販売・・・会社のホームページをどんな構成にしたいか考えて、ホームページの顔であるトップページを設計していきます。
『ホームページの構成とデザインの設計』はこちら»

ya

レンタルサーバーの契約とドメインを取得しましょう!

いよいよ、実装する準備が出来てきましたので、ここでレンタルサーバーの契約とドメインを取得しましょう
『レンタルサーバーの契約とドメインの取得』はこちら»

ya

HPを自作するか、HP制作会社に依頼するかを選択しましょう!

レンタルサーバーの契約が完了し、TOPページのデザインやホームページ全体の構成がまとまった段階で、ホームページを自作するか、ホームページ制作会社にアポイントを取りアドバイスを頂きながら制作するかを決めましょう。
その後ホームページ制作会社にトップページのデザイン案を提案して頂きましょう!
『ホームページ制作会社に問い合わせをする』はこちら»

ya

デザイン決定と見積もり

ホームページ制作会社からのデザイン案と見積もりに納得した段階で、契約となりコンテンツの実装の打ち合わせ日程を決めます。
『見積もりと契約』はこちら»

ya

トップページの実装(打ち合わせ1回目)

サーバーにインストールされたWordpressに、トップページのコンテンツとデザインを実装していきます。これによりホームページの全体像がなんとなく把握できるようになってきます。
さらにここで下層ページ(サブページ)の入力方法をレクチャーして頂きましょう!
『トップページの実装(打ち合わせ1回目)』はこちら»

ya

下層ページの入力

下層ページ(サブページ)のコンテンツの内容を作成し、ホームページ上に実装していきます。ここではデザイン的に思った通りでなくても気にすることなくひたすら内容(文章)の入力に努めましょう。全下層ページの入力が出来上がった段階で2回目の打ち合わせの日程を決めましょう。
『下層ページの作成』はこちら»

ya

下層ページの整形(打ち合わせ2回目)

入力された下層ページ(サブページ)を整形し、デザイン的に整えていきます。
次にSEOに強いサイトにしていくためにブログの作り方をレクチャーして頂きましょう!
『下層ページの整形(打ち合わせ2回目)』はこちら»

ya

ホームページのデバッグをしましょう!

今まで入力されたコンテンツを、『Google Chrome』や『Internet Explorer』等で表示画面の大きさを変更したりして不具合が無いか等の確認作業というデバッグを行いましょう!

『デバッグをしましょう!』はこちら»

ya

ホームページの完成(打ち合わせ3回目)

ホームページの修正箇所が修正されているか等の検認をして頂き、納品完了となります。ブログを入力してみて生じた疑問点や運用していく上での注意点など最終確認をしましょう!

『ホームページの完成(打ち合わせ3回目)』はこちら»

ホームページの構成とデザインの設計Website design

ホームページの構成

先ず最初に、何を目的として会社のホームページを作るのか決めて設計していきましょう。
例えば新規の顧客獲得のためにホームページを作成すると考えたとき、『商品やサービスの告知する画面』が必要となります。

それに付随して、商品やサービスを誰が提供しているのか、生産者やサービスを提供する人の顔が見えることは大切なので、プロフィールとして『プロフィールを告知する画面』(当事務所のご案内)が必要となります。

また商品やサービスに興味を持って問い合わせたいといった見込み客に対応するため、『お問い合わせする画面』が必要となります。

あと最新の情報を提供するという意味も有りますが、SEOとして効果が上がるよう『お知らせする画面』をブログとして併設したりします。

画面区分 概要
TOP画面 ホームページの顔です。検索して欲しいキーワードを文章に盛り込み上位検索を目指します。
お知らせ 新着情報や豆知識などをブログ形式で情報を発信します。
商品やサービスの告知 インターネットでお客様がどうやって検索して、作成したホームページにたどりつくかを考えます。
プロフィール 事務所の案内や社長やスタッフの紹介し、リアル感と親近感を出します。
お問い合わせ 取得したいお客様情報を出来るだけ入力しやすいように考えます。

このようにして必要画面を考えていくと、ホームページの構成が自然と出来てきます。

ホームページのデザイン

ホームページの構成が出来たところで、TOPページの画面デザインを決めましょう。
先ずホームページ全体のイメージカラーを決めます。
次に『webデザイン』とGoogleで検索して、上位検索される『Webデザインギャラリーサイト』からホームページの顔である気に入ったTOPページのデザインを探しましょう。

※先ほど決めたホームページンの構成から、メニューがどう配置されるのか確認しておきましょう!
※トップページに使うメインビジュアル(トップページの一番上にある画像)も決めましょう!

TOPページのコンテンツ

トップページのコンテンツ(文章)を考えましょう。
またトップページは、ホームページ全体のインデックス(目次)でもあり、下層ページへの導線でなければいけません。
トップページを一通り見れば、ホームページの大まかな内容が分かるようにしましょう!
一度作っては作り直し何度も繰り返すことになるのですが、最初はホームページ全体の『お品がき』のつもりで書き、途中仕様変更等あるので、何度か作り直しながら、トップページを作り上げていきます。
あと文章を考えるときに、見出しとなるフレーズ(言葉)を意識することです。
長文になれば、段落ごとに見出しを付けると分かりやすい文章になり、そのフレーズがキーワードとなり大切となってきます。


レンタルサーバーの契約とドメインの取得Server & Domain

レンタルサーバーの契約とドメインの取得は、自分で作るにしてもホームページ業者に依頼するにしても、レンタルサーバーの契約とドメインの取得はご自身でされた方が、後のトラブルを避けるためにもおススメです。

ホームページ悪徳業者のトラブル事例

  • ・業者にホームページの修正や追加を依頼したが、なかなか更新されない
  • ・ちょっとした更新なのに、結構な費用を取られる
  • ・自分でホームページを直接更新したいが、サーバー情報を教えてくれずできない
  • ・他の制作会社に更新を頼もうとしたが、それもできない
  • ・契約した会社が潰れて、サイトの更新が一切できない
  • ・月々(もしくは年間)の保守管理費用が高いが、支払わなければサイトが消えてしまう
  • ・契約名義を譲渡してもうおうとしたが、所有権を買い取れという高額な費用を要求された
  • ・3年間のリース契約を結んでしまい高額な費用を支払い続ければいけない(そもそも無形物のリースは違法!)
  • ・無形物のリースは違法だと業者に訴えたが一枚のCD-ROMを渡され、それが有形物だと主張された

などなど悪徳業者による被害は後を絶ちません。。。
これもレンタルサーバーの契約やドメインの取得をご自身で行っていなかったために、悪徳業者に付け入る隙を与えたことに他なりません!

ホームページ制作会社に作成を依頼したとしても、簡単な更新の仕方や見栄えの良いブログ等の投稿の仕方だけでもご自身で出来る方法を、ホームページ制作会社に別途教えて頂いた方が、肝心のホームページの運用やSEO的にも効果があり、タイムリーにコストパフォーマンス良く情報が発信できるかと思います。

目次へ戻る

ホームページ制作会社に問い合わせするInquiry

pc-sp

いくつかのホームページ制作会社に問い合わせをして、自分に合ったホームページ制作会社を見つけましょう。
GoogleやYahoo!で「ホームページ制作 地域名」で検索してみて、2ページ目までのベスト20位に表示されないようなホームページ制作会社に関しては、やめておいた方が無難だと思います。
ホームページ制作会社自身のWebサイトを上位検索させることが出来なくて、お客様のホームページのSEO対策させるなんて、そもそも無理だとは思いませんか?
さて気に入ったホームページ制作会社が見つかりましたら、まず打ち合わせをして、こちらのやりたいホームページの内容を伝えましょう。
既にホームページの構成やトップページのイメージも膨らんでいるので、下記に示した内容をお伝えするとスムーズです。

  • ホームページの構成
  • TOPページのデザインのイメージの参考となるホームページのURL
  • ホームページに掲げる商品やサービス内容
  • 事務所の案内や社長やスタッフの紹介といったプロフィール
  • お問い合わせの項目

その内容を元に見積もりとトップページのデザイン案を出してもらいましょう。

目次へ戻る

見積もりと契約Estimate and Agreement

ホームページ制作会社からのトップページのデザイン案と見積もりに納得したら、契約へと進みます。
レンタルサーバーの本契約とホームページ制作会社との契約が締結した後、ホームページに実装する打ち合わせの日程を決めます。
ここで打ち合わせ時に必要なものとして、契約したサーバー会社の会員メニューにアクセスするログインIDとパスワードを控えておきましょう。
例えばさくらインターネットでは、『会員メニュートップ>>契約情報>>契約サービス一覧>>サーバー設定』からWordPressをサーバーにインストールする作業があります。
また契約したドメインを取得会社へ管理パネルにアクセスするログインIDとパスワードも同様に控えておき、例えばXdomainでは、『ドメイン管理>>契約ドメイン一覧>>ドメイン管理』においてインストールしたサーバーに対してネームサーバー設定が必要になってくるからです。
この作業の確認は、TOPページの実装(打ち合わせ1回目)を始める前に確認するため、それぞれのIDとパスワードを控えて頂く必要があります。

目次へ戻る

TOPページの実装(打ち合わせ1回目)Let’s make the home page

まず、TOPページの実装を始める前にWordpressがキチンとインストールされているか、ドメインが正しく設定されているかを確認しまので、それぞれの管理画面にアクセスするIDとパスワードをご用意ください。

正しくWordpressがサーバーにインストールされ、ドメイン設定も確認してから、トップページのコンテンツとデザインを実装していきます。
実装されてくると、ホームページの全体像が具体的に把握できるようになってきます。
さらにここで下層ページ(サブページ)の入力方法をレクチャーして頂きましょう!

目次へ戻る

下層ページの作成Let’s design the underlying page

下層ページ(サブページ)のコンテンツの内容を作成し、ホームページ上に実装していきます。ここではデザイン的に思った通りでなくても気にすることなくひたすら内容(文章)の入力に努めましょう。
ここでもトップページの文章を考えたときと同様に、見出しとなるフレーズ(言葉)を意識しましょう。
トップページ同様、長文とになれば段落ごとに見出しを付けると分かりやすい文章になり、そのフレーズがキーワードとなってきます。
ある程度出来上がったトップページを見て頂ければ、同様に見出しが設定されキーワードが埋め込まれているか分かるかと思います。

全下層ページの入力が出来上がった段階で2回目の打ち合わせの日程を決めましょう。

目次へ戻る

下層ページの整形(打ち合わせ2回目)Let’s make the underlying page

入力された下層ページ(サブページ)を整形し、デザイン的に整えていきます。
次にSEOに強いサイトにしていくためにブログの作り方をレクチャーして頂きましょう。

  • 見出しの書き方
  • ブログへの『画像』の表示のさせ方
  • 『リスト』表示のさせ方
  • 『表』の表示のさせ方

これらの表示方法を学ぶにはサンプルがあった方が良いので、表示させたいものを出来ればご用意ください。
習うより慣れろで、マネをして覚えるのが一番の近道です。

目次へ戻る

デバッグしましょう!Let’s debug a website

今まで入力されたコンテンツを、『Google Chrome』や『Internet Explorer』等で表示画面の大きさを変更したりして不具合が無いか等の確認作業というデバッグを行いましょう。
修正箇所等は、具体的にどこの場所なのか等メモするなり、写メを撮っておきましょう!
修正箇所の対応に漏れがあると、不具合が残ったままの状態となりますので気をつけましょう。

また表示画面の確認とともに、問い合わせもメールが到達して行えているかどうか、実際に打ち込んで確認を行いましょう。

目次へ戻る

ホームページの完成(打ち合わせ3回目)Let’s start a company for having own home

ホームページの修正箇所が対応されているか等の検認をして頂き、納品完了となります。ブログを入力してみて生じた疑問点や運用していく上での注意点など最終確認をしましょう!
最後に運用していく上での下記の注意点を確認し終了となります。

  • 『更新』ボタンの注意
  • 『All in ONE SEO』の設定方法
  • 『スライダー』の設定方法

これでホームページは完成したので、あとはブログを更新しながら検索の上位ランキング入りを目指しましょう!
スマホ対応に関しては別途オプション対応となりますが、必要であればお申し付けください。
別途見積もりをさせて頂き、ご連絡差し上げます。

目次へ戻る