Original

初心者でもできるホームページ作成講座 〜 0限目 ホームページ作成手順 〜

ホームページの作成にあたって、ページのデザインやコンテンツの内容など決めなければならないことが多岐にわたり、「何から手をつけて良いか...」と迷われる方も多いことでしょう。そんな方にオススメしたいのが、“ホームページの作成手順”を知っておくことです。ホームページ作成の全体像を把握することで、デザインやコンテンツの細かな部分ではなく、本当に重要なそのホームページの肝になる部分に時間を割くことができ、トーン&マナーに筋の通ったWebサイトを作り上げることができます。

今回は作成手順を、企画、構成、作成、公開という4つのフェーズに分けて紹介します。

すでにホームページを持っている方も、これらの作成手順の中で欠かしてしまっている過程がないか、今一度確認してみると良いでしょう。​​​​​​​

目次

  1. 企画フェーズ
    目的を明確にする
    ターゲット(ペルソナ)を決める
    コンセプトを定める
    タイトルをつける
    作り方を選ぶ
  2. 構成フェーズ
    サイトマップを作る
    ページのレイアウトを決める
    ドメインを考える
  3. 作成フェーズ
    サーバーを準備する
    バナーやロゴを用意する
    コンテンツを作成する
    構成したページを作成する
    ファイルをアップロードする
    ブラウザチェックをする
  4. 公開フェーズ
    検索エンジンに公開を教える
    SNSや広告で発信する
    アクセス数を把握する
    定期的に更新をする

企画フェーズ

いきなりホームページを作りはじめてしまってはいけません。ホームページを作成するからには、集客やブランディングなど何らかの目的があり、想定している訪問者が存在するはずです。それらを明確にすることで、ページ内に配置するコンテンツやデザインがユーザーの心に響くものとなり、期待する成果を挙げることにつながります。

1. 目的を明確にする

まずはホームページを作成する目的について考えてみましょう。目的が明らかでないと、せっかく訪れたユーザーも自分が何を求められているのかが分からず、そのページから離れていってしまいます。

資料請求やメルマガ会員登録、商品に関するお問い合わせなどのアクションを起こしてもらい見込み顧客のリスト(リード)を獲得する、商品やサービスを購入してもらう、ユーザーとの関係構築・ブランディングをする、どのような目的を設定するかによって訴求の仕方や作成・運用の仕方も変わってきます。

「名刺代わりの自社紹介のため」ということであれば、凝ったデザインやコンテンツを作らずに簡易的なページにしても問題ないですし、「費用をかけずに見込み顧客を集めるため」ということであれば、SEO対策を考慮した作りにする必要があります。

ホームページの方向性に関わる部分になるので、目的は明確にしておくのが良いでしょう。


2. ターゲット(ペルソナ)を決める

先に定めた目的によっては、特定のターゲットを定めず、万人受けするようなホームページにしたいという方もいるかもしれません。

しかしながら、ターゲットを絞っておくことによって内容の訴求力が高まり、より効率的に成果を上げることができます。情報が溢れるインターネット上で幅広いユーザーを狙ったキャッチコピーを作っても、誰にも響かず、他の情報とともに埋もれていってしまうだけです。「20代の独身男性」といったターゲット設定をすることで、ホームページのデザインや作成するコンテンツに統一感が生まれます。

また、より踏み込んで、“家族構成”、“休日の過ごし方”、“よく見る雑誌”、“口癖”といった細かな性質までを設定するペルソナ設定を行うと、ターゲット像がさらに具体化されます。


3. コンセプトを定める

目的やターゲットを決めたら、ホームページ全体のコンセプトを定めていきましょう。

シンプル、カジュアル、シック、コンサバ.....ユーザーの好みを考えながら、訪問者に何を伝えるのか、どのように伝えるのかを明らかにしましょう。「どこよりも安く、“可愛いものが好き”な20代の女性向けスマホケースが購入できる」ということを伝えたいのに、ラグジュアリー感ただようシックなデザインのページを用意しても、ユーザーはピンと来ないはずです。

ターゲットが普段読んでいる雑誌や、よく利用しているであろう他社Webサイトなどを参考にしながら、コンセプトを考えます。キャッチコピーを作ったり、ユーザーが好みそうなページをまとめたりすると、コンセプトに統一感が出てメンバー間でイメージがしやすくなるでしょう。


4. タイトルをつける

ホームページにタイトルをつけましょう。

企業のホームページであれば、会社名をタイトルにするのも良いですが、情報を発信するメディアサイトやブログページであれば、ユーザーに覚えてもらいやすい名前をつける必要があります。先に定めたコンセプトを十分に伝えられるような秀逸なタイトルを考えてみてください。


5. 作り方を選ぶ

ホームページの作成方法を決めます。

自分でコーディングをするか、CMS(簡単にホームページを作成できるシステム)を利用するか、外部に制作を依頼するか、選びましょう。加えてCMSを利用する場合、外部に依頼する場合は、どのツールを利用するか、どの会社にお願いするかも含めて検討する必要があります。

手段やCMSを選ぶ際には、次の記事を参考にしてみてください。

ホームページ作成方法の4パターン!メリット・デメリットをまとめてみた
https://one-page.cloud/blog/180409

【2018年最新版】無料でホームページを作成できるCMSまとめ
https://one-page.cloud/blog/180416

構成フェーズ

“企画”でホームページの方向性を考えたら、次にそれをデザインやレイアウトに落とし込んでいきましょう。

1. サイトマップを作る

ホームページ全体の設計図とも言うべきものが「サイトマップ」です。

どのようなページを作り、各ページにどんなコンテンツを配置していくかを考えます。設定したターゲット(ペルソナ)の目線で、どんなコンテンツがあれば興味を抱き、アクションを起こしてくれるか、イメージを膨らませましょう。


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

トップページ、記事ページ、会社概要ページ、お問い合わせページなど、それぞれのページのレイアウトを決めます。この、ページ単位の設計図のことを「ワイヤーフレーム」と呼びます(単に「ワイヤー」と言うこともあります)。

訪問者は左から右、上から下に視線を移していくため、重要な要素はなるべく上の方に配置するなど、ユーザー心理を踏まえたレイアウトを心がけましょう。


3. ドメインを考える

ドメインとはインターネット上の住所のような存在で、このブログ「https://one-page.cloud/」で言うところの「one-page.cloud」部分に該当します。URLを構成する要素だと考えてください。

ドメインはタイトルと同様に、ホームページの顔とも言うべき要素です。わかりやすくシンプルで、かつユニークなドメインを考えましょう。

作成フェーズ

企画・構成まで終わったら、ようやく作成に入ります。制作会社に依頼する場合はこのフェーズを飛ばすことができますが、どのような工程になるかを理解しておいて損はないでしょう。

1. サーバーを準備する

作成したホームページをインターネット上に公開するためには、サーバーを用意する必要があります。自社でサーバーを構築するという方法もありますが、社内規定上問題がなければ、月数百円から利用できるレンタルサーバーを使うのが手軽で良いでしょう。

またCMSの中にはサーバーを用意することなく、設定一つで公開ができてしまうものもあります。


2. バナーやロゴを用意する

ページが表示された時に最初に目に映る部分(「ファーストビュー」と言う)はホームページの印象を大きく変えます。したがってホームページのトップの画像は、ターゲットにとって魅力的なものにするべきです。

トップの画像だけでなく、商品の購入やお問い合わせを促すための画像素材(バナー)もユーザーにクリックしてもらうために必要な要素を盛り込んだデザインにしましょう。「ファビコン」と呼ばれる、ホームページのシンボルとなるロゴも忘れずに用意してください。


3. コンテンツを作成する

各ページに配置するコンテンツ(内容)もあらかじめ作っておきましょう。コンテンツはブログの記事や動画だけでなく「会社概要」や「商品・サービス紹介」も指します。

作成にあたっては、ユーザーにとっての読みやすさ、面白さ、必要性などを考慮しましょう。“コンテンツ・イズ・キング”と言われるように、作成したページを検索結果の上位に表示させるためにはユーザーを意識した、質の良いコンテンツの存在が欠かせません。SEO対策を集客施策の一環として考えるのであれば、コンテンツ作成に力を注ぐ必要があるでしょう。


4. 構成したページを作成する

先のフェーズで描いたサイトマップ、ワイヤーフレームを元にして実際にページを作成します。自分でコーディングするのであればテキストエディタにHTMLやCSSを書き込み、CMSを利用するのであればテンプレートの選択・パーツの配置を行うことで、ページを作っていきます。


5. ファイルをアップロードする

作成したHTMLファイル、CSSファイル、画像ファイルなどをサーバーにアップロードします。

きちんとアップロードされているか、実際に全てのページを巡回して確認しましょう。リンクが正しい遷移先に飛ぶかどうかの確認も忘れずに行うことです。いきなり本番環境へ反映するのが不安な場合はテスト環境のサーバーを用意し、そちらで試してから本番反映するのがオススメです。


6. ブラウザチェックをする

ホームページを作る際に利用した環境で問題なくページが表示されていたとしても、別のブラウザ、デバイスでも同様にページが表示されるとは限りません。様々なブラウザが存在しますが、Internet ExplorerやMicrosoft Edge、 Google Chrome、Mozilla Firefox、Safariなど主要なブラウザでは表示や動作の確認を行いましょう。

またパソコンだけでなくタブレットやスマートフォンでも表示崩れがないか確認するべきです。

公開フェーズ

ホームページが完成したら、公開をします。しかし「作って終わり」「公開して終わり」ではなく、当初設定した目的を果たすためのホームページです。成果を出すために日々その状態を把握し、都度改善をしていくべきです。

1. 検索エンジンに公開を教える

公開したホームページの存在を検索エンジンに教えることで、自分のホームページを検索結果に表示させることができます。

ページ内に外部のWebサイトとつながるリンクを用意していれば、そのリンクをたどって「クローラー」と呼ばれるロボットが、いずれホームページを見つけてくれるでしょう。しかしそれでは時間が掛かってしまう場合があるので、「Googleサーチコンソール」にホームページを登録し、こちらからWebサイトの存在をアピールするのがオススメです。

Google Search Console
https://www.google.com/webmasters/tools/home?hl=ja


2. SNSや広告で発信する

検索エンジンだけでなく、ターゲットとなるユーザーにもホームページの存在を教えたいところです。

自分のSNS(FacebookやTwitterなど)のアカウントでホームページの公開を周知するとともに、社員や友人にその投稿のシェアを呼びかけてみましょう。そうした協力が難しい、予算は十分にあるという場合には、思い切ってリスティング広告やFacebook広告などのWeb広告を使ってしまうという方法もあります。


3. アクセス数を把握する

ホームページにどれくらいの人が訪れているか、どんな人で、どんなコンテンツを見ているか、アクセス解析ツールを使い把握しましょう。最初に設定したターゲットやペルソナに近い人が見てくれているか、実際の数字で確認します。

検索エンジンでおなじみのGoogleが提供する「Googleアナリティクス」は無料で利用できるアクセス解析ツールなので、ホームページを検索エンジンに登録するタイミングで併せて設定しておきましょう。

Google アナリティクス
https://www.google.com/intl/ja/analytics/search.html
​​​​​​​

4. 定期的に更新をする

アクセス解析ツールで見られるデータを踏まえて、ホームページを更新していきましょう。ユーザーがどんなコンテンツをよく見ているのか、ページビュー数や滞在時間、直帰率などから考え、訪問者に求められるコンテンツをどんどん追加していきましょう。


まとめ:目的やユーザーを軸にホームページをつくる

今回はホームページ作成手順を、企画、構成、作成、公開、の4つのフェーズに分けて紹介しました。「なんとなく」で作ったホームページでは、デザインやコンセプト、コンテンツがユーザーの期待するものとズレてしまい、期待する成果を上げにくくなってしまいます。

今回紹介した全体像を頭に入れ、目的やターゲット(ペルソナ)を軸にした、一貫性のあるホームページを作りましょう。


佐藤 亮太(サトウ リョウタ)

佐藤 亮太(サトウ リョウタ)

マーケター / ライター これまで営業・コンサルタントとして5000社以上のWeb担当者の集客に関するお悩みに寄り添ってきました。 現在は ferret One、One Page、formrun という3つのプロダクトのマーケティングを担当しています。 自分の経験も踏まえつつ、 マーケターの方のためにお役立ち情報をお届けします。

無料ホームページ作成ツール「One Page」

One Page(ワンページ)は400種類以上のデザインとドラッグ&ドロップの簡単操作により、たった3ステップでホームページを作成することができるツールです。

◆One Pageの特徴
・自由に使える豊富なフォントや画像素材
・コンテンツを考える時間を削減する例文テンプレート
・海外向けのページも作成できる多言語対応機能
・お問い合わせ管理ができるフォーム機能
・初めての方でも安心のチュートリアル

無料から始めることができるので、集客用のページが必要だという方はぜひ一度ご利用ください!

人気記事ランキング

タグ

アーカイブ

ユーザー向け記事一覧

登録番号 IA180169  適用規格 ISO/IEC 27001:2013 / JIS Q 27001:2014