ホームページの作り方、初心者が自分で進める7つの手順と頼む目安

ホームページの作り方は大きく3通りある

ホームページを作る方法は、どの道具で形にするかで3通りに分かれます。どれが正しいということはなく、作る人の慣れと、公開した後にどう使うかで向き不向きが決まります。まずは全体の地図として、違いを押さえてください。

作成サービスは、それぞれ得意なことが違います。特徴と作る前に知っておきたいことは、Wixでホームページを作る前に知っておきたいこと、STUDIOとジンドゥーの違いと選び方、ペライチの特徴と向いている人、Googleサイトで作れるものにまとめています。費用をかけずに始められる範囲と無料プランの制限はホームページを無料で作成できるサービスで比べています。

WordPressで作る場合の手順と運用で困る点はWordPressでホームページを作る手順、HTMLで作る場合の流れはHTMLでホームページを作る方法で説明しています。

3通りの作り方で、お金と時間のかかり方が違う

どの作り方でも、文章と写真をそろえる時間はなくなりません。違いが出るのは、道具の準備にかかる時間と、公開した後に直すときの手間です。作り方を選ぶときは、今かけられるお金だけでなく、自分の時間をどこにどれだけ使えるかも合わせて考えてください。

AIやデザインツールを使う方法の位置づけ

最近は、AIに業種や目的を伝えると、構成や文章の下書きを作ってくれる作成サービスも増えています。ただ、出てくる文章はどの事業者にも当てはまる一般的なものになりがちで、料金や強みなど自分にしか書けない中身は、結局自分で直すことになります。AIでできる範囲はAIを使ったホームページ作成でできることで、デザインツールのサイト機能を使う方法はCanvaのホームページ作成の使いどころで紹介しています。

初心者のためのホームページの作り方、最初に決める4つのこと

初心者が最初にやりがちなのが、道具を選んでテンプレートを触り始めることです。けれども、何を載せるかが決まっていないと、見本の写真と文章を前に手が止まります。道具を選ぶ前に、次の4つを紙に書き出してください。

1. 目的: このホームページで何を達成したいか(予約を増やす、問い合わせを受ける、信頼してもらう、求人に応募してもらう など)
2. 見る人: 誰に見てほしいか(近所に住む人、法人の担当者、初めての人、すでに知っている人 など)
3. してほしい行動: 見た人に最後に何をしてほしいか(電話、予約、来店、資料請求 など)
4. 載せる情報: その行動の前に、見る人が知りたいことは何か(料金、場所、流れ、実績、よくある質問 など)

この4つは、制作を頼まれたときに最初の打ち合わせで必ず確かめることでもあります。ここが決まると、必要なページの数も、トップページの一番上に置くものも、ボタンの言葉も自然に決まっていきます。

必要なページと並べ方はホームページの構成に、個人で事業をしている方の載せる内容の例は個人事業主のホームページの例に、お店や会社の紹介ページに書く項目は会社概要の書き方にまとめています。

開いて最初の画面に置くものを決める

4つのことが決まったら、ホームページを開いて最初に見える画面に何を置くかを決めます。ここで見る人は、自分に関係のあるページかどうかを判断します。何の事業で、どこで、誰のためのものかが一目で分かる一文と、してほしい行動のボタン(電話、予約、問い合わせ)を置くのが基本です。きれいな写真だけで文字がないと、スマホの小さな画面では何のページか伝わりにくくなります。

ホームページ作成を自分で進める7つの手順

4つのことが決まったら、次の7つの手順で進めます。大切なのは、文章と写真を先にそろえ、道具に触るのはその後にすることです。順番を守るだけで、途中で止まる可能性はずいぶん下がります。

目的と見る人を1文にし、載せるページを決める

「近所で腰の痛みに悩む人に、空き状況を見て予約してもらう」のように、目的と見る人と行動を1文にまとめます。そのうえで、行動の前に見る人が知りたいことを並べ、ページに振り分けます。小さな事業者なら、トップ、サービスと料金、紹介、アクセス、問い合わせの5ページほどで足りることが多いです。

ページを分けるか、1ページにまとめるかで迷ったら、載せる情報の量で決めます。メニューや料金が少なく、よくある質問も数個なら、1ページにまとめた方が見る人は迷いません。サービスの種類が多い、施工事例や実績を増やしていきたい、採用の情報も載せたいなら、最初からページを分けておく方が、後で作り直さずに済みます。

文章を先に書き、写真をそろえる

文章は、編集画面の中で考えながら書くと、デザインの調整に気を取られて後回しになります。メモ帳や紙に先に書いておき、後から流し込む方が早く終わります。お客さんからよく聞かれる質問と答えを箇条書きにするところから始めると、手が止まりにくくなります。書き方はホームページの文章の書き方で説明しています。

写真は、店内、商品、作業の様子、人物など、必要なものを一覧にしてからまとめて撮ります。暗い写真や、背景が散らかった写真は、それだけで印象を下げます。撮り方と、使ってよい写真の決まりはホームページの写真の撮り方と選び方にまとめています。

道具を選び、ドメインを決める

道具の選び方は、この後の見出しで詳しく説明します。あわせて、ホームページの住所になるドメインをどうするかを決めます。作成サービスのURLのまま始めるか、独自ドメインを取るかで、名刺やチラシへの載せやすさが変わります。取り方と費用はホームページのドメインの取り方に、自分でサーバーを用意する場合の注意はホームページの無料サーバーに書いています。

テンプレートに流し込み、問い合わせの受け口を作る

テンプレートは、色や見た目より、自分の載せたい情報の並びに近いものを選びます。文章と写真を入れたら、電話番号、予約のボタン、問い合わせフォームなど、見た人が行動するための入り口を、どのページからもたどれる場所に置きます。フォームの作り方と、送ったメールが届かないときの確かめ方は問い合わせフォームの作り方で説明しています。

公開前に確かめて公開する

スマホでの見え方が崩れていたときの直し方はホームページのスマホ対応で説明しています。ページのタイトルについては、Google も内容を明確に表すタイトルを付けることを勧めています(出典: Google 検索セントラル「SEO スターター ガイド」)。

スマホでのホームページの作り方と、できないこと

パソコンを持っていない、普段はスマホしか使わない、という方も少なくありません。スマホだけでホームページを作れるかどうかは、使う作成サービスによって答えが変わります。

例えばWixは、アプリかスマホのブラウザから新しいサイトを作れると案内しています(Wix ヘルプ)。一方、Studioは編集をパソコンで行うサービスで、タブレットやスマホでは編集できないとしています(Studio ヘルプ)。使いたいサービスがスマホでの編集に対応しているかは、作り始める前に各社のヘルプで確かめてください。

スマホで作るときに気をつけたいこと

• 長い文章は、編集画面ではなくメモアプリで先に書き、貼り付ける
• 写真はスマホで撮ってそのまま使えるが、明るさと向きをそろえておく
• スマホで作ったページを、パソコンの画面でも一度確かめる(家族や知人のパソコンを借りてもよい)
• 細かい配置の調整や一部の機能は、スマホの画面ではできないことがある
• ログインに使うメールアドレスとパスワードを控えておく

スマホで作ると、作る人がスマホの画面に慣れている分、スマホで見たときの読みやすさは確かめやすくなります。反対に、パソコンで見たときに文字が横に長く広がりすぎたり、余白が大きすぎたりすることに気づきにくくなります。見る人の中にはパソコンで探す人もいることを忘れないでください。

スマホで撮った写真をそのまま使うときの注意

スマホで作る良さは、撮った写真をその場で入れられることです。ただ、撮ったままの写真は、明るさや向きがばらばらになりがちです。同じページに並べる写真は、同じ時間帯に同じ場所で撮る、横向きか縦向きかをそろえる、といった小さな工夫で見え方が整います。人物が写る場合は、載せてよいか本人に確かめてから使ってください。

ホームページを自作するときの道具の選び方

道具は、作りやすさだけで選ぶと、公開した後に困ることがあります。誰が更新するのか、これからページを増やしていくのか、どんな機能が要るのかまで考えて選んでください。

自分でできるホームページの作り方を比べる

初めてで、まず形にしたいなら作成サービスが進めやすい方法です。お知らせやブログを増やしていきたい、機能を足していきたいならWordPressも候補になりますが、更新や不正アクセスへの備えも自分の仕事になります。WordPress の公式の解説でも、安全のために本体やプラグインを最新に保つことが勧められています(出典: WordPress「WordPress の安全性を高める」)。

道具を決める前に確かめる5つのこと

更新する人が自分以外になるなら、その人が使いこなせる道具かどうかがいちばん大切です。作った本人しか直せない状態になると、担当が変わったときに更新が止まります。操作の手順を簡単なメモに残しておくだけでも、引き継ぎは楽になります。

作成サービスとWordPressで迷ったとき

迷ったときは、公開した後の1年を想像してみてください。お知らせを月に数回出す程度で、ページもあまり増えないなら、作成サービスで足ります。施工事例やブログを毎週のように増やし、検索から来る人を少しずつ増やしたいなら、WordPressの方が向いています。ただしWordPressは、更新やバックアップを怠ると不正アクセスの危険が高まるため、その手間を自分で受け持てるか、誰かに任せられるかを先に決めておいてください。

ホームページを自作する人がつまずきやすいところ

自分で作り始めた人が止まる場面には共通点があります。前もって知っておけば、多くは先回りして防げます。

表のうち、いちばん多いのは文章で止まる場面です。自分の仕事に詳しいことと、初めて見る人に向けて書けることは別の技術だからです。つまずきの中身と、頼んだ方がよい境目はホームページを自分で作るのは難しいかで詳しく説明しています。

作業の時間を先に見積もってから始める

自作が止まる理由の一つに、作業の量を軽く見ていたことがあります。ページごとに、文章を書く、写真を選ぶ、流し込む、スマホで確かめる、という作業が必要です。始める前に、週に何時間を作業に使えるかを決め、ページの数と照らし合わせてみてください。その時間がどうしても取れないと分かったら、頼むことを考える一つの目安になります。

公開した後に続く仕事も見込んでおく

ホームページが役に立ち始めるのは、公開した後です。営業時間や料金が変わったとき、お知らせを出したいとき、写真を新しくしたいときに、自分で直せるかどうかで、ホームページの鮮度が決まります。作る段階で、何をどのくらいの頻度で直すことになりそうかを書き出しておくと、道具選びの判断材料にもなります。

自分で作るか頼むかを決める判断の目安

自分で作るか頼むかは、費用だけで決めると後悔しやすいところです。自分の時間、作りたいものの中身、公開後の体制を並べて考えてください。

頼んだ方がよい条件をもう少し具体的に挙げると、サービスの種類が多くて1ページでは伝えきれない場合、医療や士業など広告の表現に決まりがある業種の場合、独自ドメインのメールやフォームの設定に自信がない場合、更新する人がいない場合です。こうした場合に無理に自分で作ると、公開までに時間がかかり、その間の機会を逃すことになります。

反対に、自分で作るのが向いている条件に当てはまるなら、最初から大きな費用をかける必要はありません。まず自分で小さく公開し、反応を見てから作り直すという順番も十分に成り立ちます。

作る時間を本業の時間と比べてみる

判断に迷う場合は、慣れない作業に何時間かかりそうかを書き出し、その時間を本業に使ったらどうなるかと比べてみるのも一つの方法です。数時間で済むなら自分で作る意味は大きく、何十時間もかかりそうなら、頼んで本業に時間を使う方がよいこともあります。お金の比較だけでは見えない判断材料になります。

途中から人に頼む分け方

• 文章と写真は自分で用意し、形にするところだけを頼む
• トップページだけ作ってもらい、残りのページは自分で足す
• 自分で作ったページを見てもらい、直すところだけ頼む
• 作るのは自分で、独自ドメインやフォームの設定だけ頼む

頼む場合の費用がどう決まるかはホームページ制作の費用相場に、依頼先の見極め方はホームページ制作会社の選び方にまとめています。

頼む場合の費用の目安と、相談の前に書き出しておくこと

頼む場合も、自分で作る場合と同じく、最初に決めた4つのことがそのまま役に立ちます。目的、見る人、してほしい行動、載せる情報が書き出してあれば、打ち合わせが短く済み、見積もりも具体的になります。何を用意しておけばよいかはホームページ制作に必要なものに、相談から公開までの段取りはホームページ制作の流れと期間にまとめています。

全部が埋まっていなくてもかまいません。埋まらないところは、相談しながら一緒に決めていく部分です。書き出してみて手が止まったところが、自分にとって頼む意味の大きい部分だと考えることもできます。

費用の例として、uparia の料金を載せます。月額プランは制作費0円で、ライト(1ページ)が月額2,980円、スタンダード(10ページまで)が月額4,980円、プレミアム(30ページまで・オリジナルデザイン)が月額14,800円です(税込)。独自ドメイン、サーバー、SSL、保守も月額に含まれ、最低契約期間は12か月、2年続けるとサイトとドメインが自分のものになります。最初から自分のものにしたい方には、買い切りのスタートプラン3万円〜としっかりプラン30万円〜(税込)もあります。自分で作りかけたページの手直しからでも相談でき、プランの中身は小さな事業者向けのホームページ制作で確かめられます。

ホームページの作り方を作業ごとに詳しく知るための記事一覧

作り方の手順ごとの疑問を、別の記事で詳しく説明しています。いま止まっているところから読んでみてください。

• ホームページを無料で作成できるサービス:無料で作れる範囲とサービスの違い
• ホームページを自分で作るのは難しいか:7つのつまずきと判断基準
• Wixでホームページを作る前に知っておきたいこと:Wixの特徴と注意点
• ペライチの特徴と向いている人:ペライチで作る前に
• STUDIOとジンドゥーの違いと選び方:2つのサービスの違い
• Googleサイトで作れるもの:Googleサイトでできること、できないこと
• WordPressでホームページを作る手順:作る手順と運用で困る点
• Canvaのホームページ作成の使いどころ:デザインツールのサイト機能
• AIを使ったホームページ作成でできること:AIでできる範囲と足りない部分
• HTMLでホームページを作る方法:一から作る手順
• ホームページの無料サーバー:無料サーバーで公開する前に
• ホームページのドメインの取り方:ドメインの取り方、費用、移し方
• ホームページの構成:必要なページと並べ方
• 個人事業主のホームページの例:載せる内容と構成の例
• 会社概要の書き方:会社概要に書く項目
• ホームページの文章の書き方:文章が書けない人のための原稿の作り方
• ホームページの写真の撮り方と選び方:撮り方、サイズ、著作権
• 問い合わせフォームの作り方:入力されやすくする工夫
• ホームページのスマホ対応:スマホで見づらいときの直し方