ホームページ制作の初心者さんでも簡単に自分でオリジナルのHPを作成できる方法を説明します
ホームページを作りたいけど何から始めればいいかわからない！ホームページ作成の流れ3ステップ
何から始めたらいいのか分からない。
これは、ホームページの作成が初めての人にとってよくある悩みです。
確かに、ホームページを公開するまでの工程は複雑で、初心者さんにとっては、どの道のりが正解かわかりづらいところがあります。
覚えなくちゃいけない専門用語も多く、勉強するにも何から手をつければいいのかわからないという人も多いようです。
え、あなたもそうですか？
でしたら、ホームページの作成手順を以下の3ステップに分けて考えてみましょう。
- 1. ホームページを企画する
- 2. ホームページを制作する
- 3. ホームページを運用する
実はプロの制作会社の現場でも、企画、制作、運用という順番でホームページは作られています。こうした決められた順番に、ホームページの作成に必要な作業を整理してみると、ずいぶんと流れを理解しやすくなります。
目の前のやるべきことの多さに焦っている初心者さん。まずは落ち着いて、流れを理解するところから始めてみましょう。
企画＝どんなホームページを作るかを計画する
ホームページ作成の最初の一歩は「企画」です。
企画は、どんなホームページを作るのか、方向性を具体的に決めるための工程です。
企画の次には実際にホームページを制作するための作業が控えています。制作に備えて準備しておくべきことを、企画時に決めるのですね。
企画の方法は様々あります。だいたい制作会社では企画をウェブディレクターと呼ばれる役職の人が行います。企画の進め方はウェブディレクターのスキルや好みによって変わります。
今回の記事では、初心者さん向けに、以下の4つを企画時に決めておくことをおすすめします。
- コンセプト
- サイトマップ
- ワイヤーフレーム
- 原稿
ホームページのコンセプトを決める
コンセプトは、ホームページの魂の部分です。
どんなホームページを作るのかを具体的に定義したもので、制作費の予算を考えるとき、デザインを選択するときなど、様々な場面において意思決定を下す神として働きます。
ホームページのコンセプトを決める方法にはいろいろありますが、初心者さんでも難しくなくチャレンジできる方法が「5W2H」です。
5W2Hとは、「Who」「When」「Where」「What」「Why」「How」「How much」の頭文字をつなげたものです。それぞれを掘り下げ、ホームページの方向性を考えることで、予算やデザインが具体的に見えてきます。
Who｜誰にホームページを見せたいか？
どのようなユーザーに利用してもらいたいのか。年齢や性別など、情報を一番に届けたいターゲットを想像してみてください。
When｜いつまでにホームページが必要か？
公開予定日を設定しましょう。制作にかけられる時間を事前に決めておかなければ、いつまで経っても公開できない失敗を招きます。
時間をかけるほど良い物ができると考えがちですが、際限なくいろいろやってしまうことによって、当初の計画がぶれにぶれて落とし所が見つからなくなってしまうことのほうが多いです。
納期という制約をあえて課して、その範囲で最大限を目指しましょう。
Where｜ホームページの集客方法は？
どこ、を意味するWhereでは、ホームページのお客さまがどこにいるかを考えてみます。
ホームページは完成してからが本番です。どこのお客さまをどんな方法でホームページへ集客するのか？ 検索エンジンですか？ それとも広告を利用しますか？
ホームページ公開後にアクセスの不足でなかないよう、作る前に集客方法を具体的に検討しておくのです。
What｜なにを、ホームページで伝えるか？
「なに」では、ホームページへ何を掲載するかを決めます。
ホームページへ載せたい情報をリストアップしてみましょう。
ホームページへ掲載する内容をコンテンツということもありますね。お客さまへ届けたいコンテンツ。どんな文章、写真、動画で何を伝えるのか。伝える側の独りよがりになってはいけません。お客さまが求めるコンテンツ、お客さまへ価値を与えるコンテンツとは、どんなものかを考えてみましょう。
Why｜なぜ、ホームページを作るのか？
ホームページを作る目的をもう一度具体的に考えてみてください。
会社名の認知を広めたい。特定の商品の売上を上げたい。目的が具体的になるほど、そのための作戦も具体的に練ることができます。ホームページを活用して、ビジネスのどの部分を改善したいのかを期待も込めて考えてみるわけです。
How｜どんな方法で、ホームページを作るのか？
ホームページの作り方にもいくつか種類があります。
業者へ全部を丸投げするのか。
それとも、ホームページ作成ソフトを利用して自作するのか。
作り方によって、ホームページをあとあと運営していく方法も変わります。
特に最近は、ホームページが完成した後も放置せずに更新していく必要性が叫ばれています。更新していくつもりなら、それができる仕組みでホームページを作っておかなければいけません。
欲しいホームページに対して、どんな作り方がベストなのかを明らかにしておくのです。
How much｜予算はいくらか？
予算によって、制作できるホームページの規模やクオリティが決まります。制作会社に依頼するのであれば、数多く存在する業者の中から一社を選択するときの基準にもなります。
以上の5W2Hは、ホームページを作るときの柱ともいえる部分です。紙に書いて壁に貼っておいてもいいくらいです。
制作を進める途中で迷いが生じたら、いつも5W2Hに戻ります。作成の原点であるコンセプトを振り返ることでゴールを見失わずに済むわけです。
サイトマップをつくる
サイトマップとはホームページ全体の構成図。ホームページの中がどのようなページで構成されるかをツリー形式で表したものです。
ホームページに何ページ必要なのか、それぞれのページに何を掲載するのかを考えるとき、5W2Hが活躍します。
作れるページ数は予算に影響されます。How Muchで決めた予算の範囲でベストなページ数を決めます。各ページに掲載する情報はWhatで決めたコンテンツを参考にしましょう。
Whereで検討した集客経路も必要なページの内容を考えるときのヒントになります。検索経由のアクセスを期待するなら、検索者が求める情報がホームページに必要になりますよね。
ホームページへの訪問者が、ストレスなくホームページの中を巡れる導線も意識して、伝えたいことをページに分割して、トップページを表紙として配置します。
ワイヤーフレームをつくる
サイトマップはホームページ全体の構成図。ワイヤーフレームは、ページ単位での構成図です。
ワイヤーフレームでは、1枚のページ上で「どこに」「なにを」表示させるのかを表しています。言い換えれば、情報の配置図ですね。
ワイヤーフレームを作ることで、視覚的に情報の過不足を判断できます。
ホームページの作成をチームで進める場合は、チームのメンバー同士で意見を出し合うためのコミュニケーションツールとしても働きます。ここにこうした情報をおいたほうがいいのではないか？ あるいは、この情報は余計だよね。と意見を交わしながら、じゅうぶんな情報量をわかりやすく伝えられる配置を考えます。
ワイヤーフレームが設計図となり本格的なデザインが行われます。言い方を変えれば、ワイヤーフレームで失敗があれば、デザインも失敗するということです。妥協を許さず、しっかりと作っておきましょう。
原稿を用意する
原稿は、ホームページへ掲載する文章や画像をまとめたもののことを指します。
ワイヤーフレームに沿って、必要な文章や画像を用意します。
キャッチコピーの文言、商品に関する画像など、すべての質に、できる限りこだわりましょう。最近は得意なスキルで活躍するフリーランスへ仕事を発注できるサイトがたくさんあります。自分や社内での原稿の用意が難しいときにおすすめです。
制作｜ネット上で見られる状態にする
制作とは、企画した内容を実際にネット上で見られる形にするための工程です。
編集した画像を並べてトップページをデザインしたり、デザイン後のトップページをネットで閲覧できる形式のデータへ変換したりします。
制作作業にも一般的な進め方があります。以下の3つの順番です。
- デザイン
- コーディング
- ネット上に公開
デザイン
デザインとは、情報を視覚的に配置する作業のことです。
企画時に用意したワイヤーフレームに沿って、原稿を流し込み、目で見てわかりやすく、また、見映えにも気を使い、ホームページとして見られるデザインを作ります。
よく使われるソフトはPhotoshopやIllustratorです。
コーディング
コーディングとは、デザインをネット上で閲覧できる形式のデータへ変換するための作業を指します。
ホームページのデータはHTMLファイル、CSSファイル、JavaScriptファイルなど、特殊なデータの集合でできています。
例えば、トップページとして作られた1枚のデザインを、パーツごとに切り分け、それぞれをHTMLファイル、CSSファイル、JavaScriptファイルへ変換していきます。そのときに利用される技術がHTML／CSSやJavaScriptと呼ばれるプログラミング言語です。
コーディングは、習得がなかなか難しいプログラミング言語が必要なので、初心者さんの多くは苦戦します。
コーディングを支援するソフトとしてDreamWeaverやCoda2などがあります。ソフトによって、使い方の難易度が変わります。
ネット上に公開
デザインとコーディングが完了し、ホームページとして公開できるデータが揃えば、あと一息。
ネット上でホームページを公開するには以下の2つが必要です。
- レンタルサーバー
- 独自ドメイン
レンタルサーバー
公開するホームページのデータを保管しておく場所として使われる場所がサーバーです。サーバーに保管されているデータが、ネット経由の閲覧が可能で、言い方を変えれば、ホームページを公開するにあたっては、必ずサーバーが必要です。
このサーバーを借りる方法が「レンタルサーバー」です。貸し出しを行う業者が存在し、ネットで検索するといろいろとヒットします。
レンタルサーバーは各社で料金や機能が異なります。予算やホームページの規模に合わせて選びましょう。選び方のヒントになればいいなと、以下の記事を書いています。ぜひ参考にしてみてください。
独自ドメイン
ドメインとは、ホームページの住所を示したアドレスのことです。いわゆるURLのことで、「http://○○○.co.jp」の「○○○.co.jp」の部分を指します。
ドメインには、2種類あります。「無料ドメイン」と有料の「独自ドメイン」。
無料ドメインはレンタルサーバーを契約すると自動的に割り当てられますが、余計な文字列がアドレスに入っているので、特にビジネス用のホームページにはおすすめできません。覚えにくく、どこの会社のホームページなのかアドレスを見てもわからないからです。
それに対して、独自ドメインは、自分でアドレスを決められます。会社名や商品名をドメインにすれば、覚えてもらいやすいですし、見た目の印象もよく信頼感が向上します。
また、独自ドメインの方がSEOという検索経由のアクセスを増やす上でのメリットがあります。独自ドメインの費用は年間1,000円程度。ホームページをビジネスに活用したい人は、取得しておくべきでしょう。
独自ドメインのメリットについては別記事にまとめています。独自ドメインがいまいち何か理解していない人は読んでおいてください。
データをアップロードする
レンタルサーバー、独自ドメインの準備ができたら、ホームページのデータをレンタルサーバーへ送ります。この作業をアップロードといいます。
アップロードは専用のソフトを使用します。ソフトに必要な設定は、レンタルサーバーのサイトに用意されたマニュアルを見ればわかります。利用者それぞれにソフトへ設定するIDやパスワードが発行されているのでそれを使います。
デザインとコーディングのスキルがなくてもホームページを公開できる
デザインとコーディングという作業が制作には必要だということがわかりました。
また、公開するにあたりレンタルサーバーや独自ドメインの準備が必要で、アップロードという作業もしなければいけません。
初心者さんの中には、これら一連の難しそうな作業を知って、ゾッとした方もいるかもしれません。
しかし、ご安心を。今は専門的なスキルがなくても、美しいデザインのホームページを公開できるソフトやサービスが存在しています。
特にブラウザからパズル感覚でホームページを作ることができるサービスはおすすめです。
ブラウザとは、インターネットエクスプローラーやChrome、safariなど普段ネットサーフィンを楽しむアプリです。これらのブラウザからホームページを作っていけるサービスがあるのですね。
以下はそんな便利なサービスの一例です。すべて無料で試用できる期間があるので、ぜひ試してみてください。
運用｜ホームページは公開後が本当の始まり
実は、ホームページは公開したら終わりではありません。公開したときが始まりなのです。
ホームページを公開しただけでアクセスが殺到する時代はずいぶんと前に過ぎさりました。今は、公開後さまざまな工夫を凝らすことで、少しずつアクセスアップが叶う時代です。
そんな公開後の取り組みを「運用」と呼びます。
ホームページの運用期には以下のような作業が求められます。
- 更新作業
- Web広告運用
- アクセス解析
更新作業
ホームページ運用の基本作業です。
まずは、下記のようなビジネスのリアルタイムの情報更新を怠ってはいけません。
- 写真や文章を最新版に差し替え
- 長期休暇の報告など、お知らせ情報の更新
更新作業が必要な理由は、ユーザーからの信頼を得るためです。
例えば、全く同じ情報のホームページを見るとしましょう。最終更新日が「数ヶ月前」と「数年前」、どちらの情報を信用するでしょうか。当然、前者を信頼しますよね。お客さまの目線に立って、ホームページで提供する情報の鮮度を保ちましょう。
また、更新を続けることはSEO対策にもつながります。SEOとは、検索結果の上位表示につながる工夫のことです。
例えば、専門性の高い話題をブログで更新し続けると、ホームページの情報価値が高まります。検索結果のランキングを決めるGoogleは、情報価値が高いページほど上位に表示するので、ブログの継続的な更新は上位表示への可能性を高めるわけです。
Web広告
地道な更新作業と並行しアクセスアップのためにWeb広告もよく利用されます。
Web広告とは、検索結果や他サイトの広告枠へ表示する有料広告のことです。以下の2つが利用しやすいネット広告です。
リスティング広告
ユーザーが検索したキーワードと連動し、検索結果に表示するテキスト型の広告。欲しい物や情報が決まっている購買意欲の高いユーザーに向けて広告を配信できます。
ディスプレイ広告
他サイトの広告枠に表示する広告。自社のサービスと関連性の高いホームページに広告を表示したり、動画や画像で視覚的にインパクトを与えたりして広告効果を最大限にあげられます。
アクセス解析
更新作業、広告がどんな結果をもたらしてくれているのか。アクセス解析を利用して計測します。
アクセス解析とは、ホームページを訪問してくれた人たちの行動を記録してくれるツールです。無料のGoogleAnalyticsが有名です。
Googleアナリティクスを使えば、以下のようなホームページの訪問者の行動データを「見える化」してくれます。
- アクセス数
- 閲覧ページ数
- 閲覧ページ名
- 滞在時間
- アクセス元
アクセス解析を定期的に行うことで、改善すべき課題が見つかります。ホームページの運用期には、この改善点の発見と、改善のための工夫を繰り返すことが何より重要です。
SEOや広告は単にアクセスを増やすだけでは意味がありません。得られたアクセスをいかに売上に結びつけるか、アクセス解析を最大限に利用しながら、常に改善のために取り組むのです。
ホームページ作成の流れ まとめ
ホームページを公開するまでの道のりは、確かに複雑です。やるべきことも多いです。
しかし、以下の順番に必要な作業を分類すれば、だいぶ進めやすくなるはずです。
- 企画：方向性を決める
- 制作：ネットで見られる形にする
- 運用：ネット上に公開して活用する
自分で作らず、制作会社に依頼する場合も、だいたいはこの順序で進みます。この流れを意識しておけば、業者へ依頼する前の準備や依頼したあと進行具合の確認などしやすくなるはずです。
格安・月額無料のホームページの作り方はこちら
実は私たちも「ビジネスパック」というホームページ作成サービスを提供しています。予算にあまり余裕がない個人事業主さま・中小企業主さまへ大変好評をいただいてます。初期費用90,000円、月額費用は不要です。価格だけでなく品質にもこだわってますので、ぜひ一度ご検討よろしくお願いいたします。
