ホームページの作り方|初心者が自分で作る手順と費用・時間の目安

お店や個人の仕事のホームページを、まずは自分で作ってみたい。
何から始めて、どれくらいの費用と時間がかかるのかを知りたい。
そんな方に向けた記事です。

初心者でも、6つの手順を順番に進めれば、自分で作って公開できます。
時間は「待ち時間」と「作業時間」に分けると見通しが立ちます。
自分で進めるのが難しくなったときの目安もまとめました。

全部を自分でやる必要はありません。
難しい手順だけ人に頼む方法もあります。

この記事の要点

  • ホームページは、お店の情報を書き出すところから公開後の確認まで、6つの手順で自分で作れます。
  • 時間は、設定が反映されるのを待つ「待ち時間」と、文章や写真をそろえる「作業時間」に分けて見積もると、予定が立てやすくなります。
  • 難しい手順だけ人に頼む方法もあり、自分で作った部分を活かしたまま進められます。

先に結論:ホームページは初心者でも自分で作れます。6つの手順と2種類の時間で考えます

特別な知識がなくても、順番どおりに進めれば、ホームページは自分で作って公開できます。

自分で作ると、営業時間やメニューを変えたその日に、自分で直せます。
お店の言葉で紹介文を書けるので、お客様に伝えたいことをそのまま載せられます。
作りながらホームページの仕組みが分かるため、あとで人に頼むときにも話が早くなります。

かかる時間には2種類あります。
設定が反映されるのを待つ時間と、自分が手を動かす時間です。
この2つを分けて考えると、「いつ公開できそうか」が見えてきます。

この記事は、作る前に決めること、6つの手順、費用と時間、自分で作って十分なケース、人に頼む目安の順に進めます。

作り始める前に決める3つのこと

手を動かす前に、次の3つを紙やメモに書き出しておくと、途中で迷いにくくなります。

ホームページで中心にしたい行動(電話・予約・来店など)を1つ決める

見た人にしてほしい行動を1つ決めると、トップページに置くものが決まります。
たとえば電話をしてほしいなら電話番号を、来店してほしいなら地図と営業時間を、目立つ場所に置きます。

載せる情報を書き出す

次の項目を書き出します。

  • 店名・事業の内容
  • 営業時間・定休日
  • メニュー・料金
  • 場所と地図
  • 連絡先(電話・メール・SNS)
  • 写真(店内・商品・人)

今のチラシ、名刺、SNSのプロフィールから書き写すと早く進みます。

作り方の種類を選ぶ

ホームページは、作成ツールを使って作る方法と、WordPress などのソフトを自分で借りたサーバーに入れて作る方法があります。
ツールの種類ごとの違いは、無料で使えるツールの種類にまとめています。

この記事の手順は、WordPress で作る場合を例にしています。

初心者がホームページを自分で作る6つの手順

6つの手順を順番に進めます。
各手順は「やること」「時間の目安」「つまずきやすい点」の順に書きます。
時間の目安は、公式の資料などで確かめられるものだけを載せています。

※手順は WordPress で作る場合の例です。
作成ツールで作る場合は、手順2・3をサービスがまとめて用意していることがあります。

ホームページを自分で作る6つの手順と、設定の反映を待つ時間がある手順を示した図

手順1:ドメイン(ホームページのアドレス)を決めて取る

やること:店名や事業の内容が分かる、短く打ちやすいアドレスを考えます。
空いているかを調べて取ります。
名刺やチラシにも載せるので、読み上げやすいかも見ておきます。

つまずきやすい点:ドメインを取った会社のログイン情報は、手順2以降で何度も使います。
メモに残しておきましょう。

手順2:サーバーを借りて、ドメインとつなぐ

やること:ホームページのデータを置く場所(サーバー)を借ります。
手順1のアドレスでサーバーが開くように設定します。

時間の目安:アドレスをつなぐ設定は、反映されるまで待ち時間があります。
目安は、契約した会社のヘルプに書かれています。

つまずきやすい点:設定した直後に開かなくても、反映を待つ間は設定をやり直さないようにします。

手順3:WordPress を入れて、https にする

やること:サーバーに WordPress を入れ、管理画面に入れるようにします。
アドレスが https で始まるように、SSL(通信を暗号化する設定)を行います。

時間の目安:WordPress の公式の手引き(英語)では、インストールそのものは、多くの場合5分かからないと説明されています(出典:WordPress.org「How to install WordPress」)。
ページを作る時間は含みません。
https の設定にも、反映までの待ち時間があります。
目安は、契約した会社のヘルプに書かれています。

つまずきやすい点:管理画面のアドレス・ユーザー名・パスワードを控えておきます。

手順4:テーマ(デザインのひな形)を選び、ページを作る

やること:お店の雰囲気に近いテーマを選び、先ほど書き出した情報を入れていきます。
最初は、トップ・メニューと料金・お店の情報(場所と営業時間)・問い合わせの4ページほどから始めてもかまいません(ページ数は一例で、決まりではありません)。

つまずきやすい点:デザインの細かい調整に時間を使いすぎないことです。
先に全ページの文章と写真を入れて、見た目は最後に整えます。
写真は、明るい場所で横向きに撮っておくと使いやすくなります。

手順5:公開する前に、自分とお客様の目で確かめる

やること:次の点を確かめます。

  • スマホで開いて、文字が読めるか
  • 電話番号を押すと、電話がかけられるか
  • 問い合わせフォームからテストで送って、届くか
  • 営業時間・料金が今と合っているか
  • 家族や知人に見てもらい、迷ったところを聞く

つまずきやすい点:作った本人は見慣れていて、誤りに気づきにくいものです。
ほかの人に1回見てもらいましょう。

手順6:公開して、見つけてもらう準備をする

やること:Google の Search Console にサイトを登録します。
Googleマップの店舗情報(Googleビジネスプロフィール)や Instagram のプロフィールにも、アドレスを入れます。
名刺やチラシには、アドレスや QR コードを載せます。

時間の目安:公開してすぐ検索に出るとは限りません。
Google は、ページを見に来る(クロールする)までに数日から数週間かかることがあると説明しています(出典:Google 検索セントラル「URL の再クロールを Google にリクエストする」)。
検索に出たかは、Google で「site:自分のアドレス」と検索して確かめます。
自分のページが出れば、Google に登録されています(出典:Google 検索セントラル「検索エンジン最適化(SEO)スターター ガイド」)。

つまずきやすい点:公開した日に検索に出なくても、設定が間違っているとは限りません。
site: 検索で数日おきに確かめてみましょう。

自分で作るときの費用と時間の目安

費用は「項目」、時間は「待ち時間」と「作業時間」に分けると、自分の場合を見積もれます。

費用は4つの項目で考える

費用の項目かかる時期確かめ方
ドメイン(アドレス)取るときと、毎年の更新1年目の料金と、2年目以降の更新料金を両方見る
サーバー契約期間ごと(まとめて前払いの場合がある)契約期間ごとの料金と、支払い方を見る
テーマ・部品無料のものを使えば0円。有料のものは買うとき必要になってから考えてよい
写真・文章の用意必要なとき(自分で撮る・書くなら費用はかからない)素材サイトを使う場合は利用の条件を見る

WordPress 本体は、オープンソースのソフトウェアで、ダウンロードして使えます。
お金がかかるのは、主にドメインとサーバーです。
金額は会社やキャンペーンで変わるため、この記事には書いていません。
次の「料金ページで確かめる4つのこと」で、自分で確かめられます。

かかるのはお金だけではありません。
自分の作業時間もかかる、という見方も大切です。
作る方法ごとの費用の違いは、費用の比べ方でまとめています。

料金ページを見るときに確かめる4つのこと

ドメインやサーバーの料金ページを見るときは、次の4つを確かめます。

  1. 表示されているのは、キャンペーン価格か、通常価格か
  2. 契約期間によって価格が違うか。まとめて前払いか
  3. 2年目以降の更新料金はいくらか
  4. 特典(無料のドメインなど)は、どんな条件で付くか

同じサービスでも条件で金額が変わります。
1年分、2年分で書き出して比べると分かりやすくなります。

待ち時間:設定が反映されるまでの目安

待ち時間は、手順の途中で次に進めなくなる時間です。
この間にできることを決めておくと、時間を無駄にしません。

待つ場面目安待つ間にできること
アドレスとサーバーをつなぐ設定(手順2)反映までの待ち時間がある。目安は契約した会社のヘルプで確かめるページに入れる文章を書く
https の設定(手順3)反映までの待ち時間がある。目安は契約した会社のヘルプで確かめるテーマを見比べる
Google にページを見つけてもらうまで(手順6)数日から数週間かかることがある(Google の説明)地図の店舗情報やSNSにアドレスを入れる

※待ち時間の目安は、契約する会社や設定によって違います。
実際の目安は、契約した会社のヘルプで確かめてください。

作業時間:1ページ作って測り、全体を見積もる

作業時間は、文章を書く速さや写真の有無で人によって大きく違います。
そのため、この記事では決まった目安を書いていません。
代わりに、自分で測って見積もる方法をご紹介します。

  1. 情報の多いページ(メニューと料金など)を1ページ作り、かかった時間を測る
  2. 先ほど決めたページ数をかける
  3. 写真の撮影と、文章の書き直しの時間を足す
  4. 1日に使える時間で割って、公開日の目安を決める

見積もりが本業と重なりそうなときは、あとの「人に頼むことを考える目安」も見ておきましょう。

自分で作って十分なケース

次のような場合は、まず自分で作って公開し、必要になってから人に頼むことを考えれば十分です。

  • 載せる情報が、お店の紹介・メニュー・場所・連絡先の数ページに収まる
  • 文章を書いたり写真を撮ったりする時間を、週に少しずつでも取れる
  • 問い合わせは電話・メール・SNSで受けられ、ホームページの中で予約や決済を受ける必要がない
  • 公開日に決まった期限(開業日・チラシの配布日など)がない、または間に合う

自分で作ったサイトでも、あとから一部だけ頼んで直すことができます。

自作の限界と、外注に切り替える目安

自分で作ると、手順ごとに得意・不得意が出てきます。
全部を人に頼むか、全部を自分でやるかの二択ではありません。
難しいところだけ頼むこともできます。

自分だけでは時間がかかりやすいところ

次のような状態になったら、人に頼むことを考えるタイミングです。

  • 開業日やチラシの配布日など、公開の期限が決まっていて、先ほどの見積もりでは間に合わない
  • お店の雰囲気に合わせたデザインの調整や、写真の見せ方に、思ったより時間がかかっている
  • 問い合わせフォームの設定や、メールが届かない原因の切り分けで、手が止まっている

WordPress が難しいと感じたら(公開した後の管理)

WordPress 本体やテーマ・部品は、公開した後も更新が続きます。
WordPress の公式の手引きでは、更新を止めずに最新の状態で使い続けることが、安全に使う方法の1つとされています(出典:WordPress.org「Upgrading WordPress」)。

更新の作業を続ける時間が取れないときは、公開した後の管理だけ頼む方法もあります。

※WordPress を更新する前には、サイトの控え(バックアップ)を取っておきましょう。
WordPress の公式の手引きでも勧められています。
テーマ・プラグインの更新前も同様です。

検索で見つけてもらう工夫(自作の SEO)

基本は、お店の名前と地域、扱っているものを、ページの見出しと文章に入れておくことです。
ここまでは、自分でも進められます。

それ以上の工夫、たとえば何を書けば検索されやすいかを調べる作業は、時間がかかります。
ここも、人に頼むことを考える目安になります。

手順ごとの、人に頼むことを考える目安

手順自分で進めやすいこと人に頼むことを考える目安
手順1〜3(アドレス・サーバー・WordPress)画面の案内どおりに進められる設定が反映されない原因が分からない
手順4(デザインとページ)文章と写真を入れる見た目の調整に時間がかかりすぎている
手順5(公開前の確認)スマホで見る、テストで送るフォームのメールが届かない
手順6と公開後(検索・管理)地図・SNSにアドレスを入れる更新や管理を続ける時間が取れない

WordPress の管理画面の操作で済むこと、たとえばページの編集、お知らせの追加、営業時間の変更までは、自分で進められます。
一方、PHP(WordPress を動かす仕組みのプログラム)の編集や、表示を速くする改善は、専門の知識と時間が必要になりやすい分野です。

AIO(AIが出す検索の答えに取り上げられること)については、Google は特別な対策は要らず、基本の検索対策が土台になると説明しています(出典:Google 検索セントラル「AI 機能とウェブサイト」)。
その検索対策を、自分でできる基本より先まで本格的に進める部分は、プロに任せたほうが効率がよい分野です。

文章や写真などのコンテンツ制作を頼む場合も、お店の情報の書き出しは自分でできるので、先に済ませておくと相談が進めやすくなります。
「ここまでは自分で、ここからは任せる」と分けると、自分の時間をお店の仕事に使えます。

自分で書き出した情報や撮った写真は、人に頼むときにもそのまま使えます。
自分で進めた分だけ、相談のときに話が早くなります。

頼む場合の費用の目安は、外注した場合の費用の相場でまとめています。

まとめ

  • 作る前に、中心にしたい行動と、載せる情報を書き出します。
  • 6つの手順を順番に進めます。公開後に地図やSNSとつなぐところまでが手順です。
  • 時間は待ち時間と作業時間に分け、作業時間は1ページ作って測ります。
  • 難しい手順だけ人に頼むこともできます。

まずは載せる情報を書き出し、情報の多いページを1ページ作って、かかった時間を測ってみてください。
ホームページをまだ作らないと決めた方も、Googleマップの店舗情報やSNSのプロフィールを今の情報にしておけば、お客様は店の情報にたどり着けます。

参考にした資料

費用のことを、まとめて整理したい方へ

制作費・維持費・作り方ごとの違いと、「元が取れるか」の考え方を1つの記事にまとめています。

ホームページの費用と費用対効果の考え方を読む

執筆・監修:中村覚信(2級WEBデザイン技能士)

スリムクリエイト代表。ホームページ制作と集客の支援を行っています。

スリムクリエイトについて