ホームページの作り方を初心者向けに解説！
Webサイト作成の手順ガイド

「開業に際してホームページが必要」
「会社・お店のきちんとしたホームページを作って、信頼感を担保したい」
「部活・サークル・趣味などのホームページを作りたい」
このように考えつつも、「でも、ホームページなんてどう作ればよいかわからない」「ホームページ作成業者に頼むと何十万円もかかりそう」と困っている方は、とても多いです。

この悩みを解決する上では、まずホームページの作り方にはいくつかの種類があることを知り、その中のどれが自分に合っているのかを正しく理解することが非常に大切です。

なぜなら、ホームページは作り方によって費用が10倍以上変わりますし、作るために必要となる作業や公開後の更新・編集の仕方、できあがるホームページの質などがまるで異なるからです。

その点を事前に理解していないと「本来なら数千円~数万円で必要十分なホームページを作れたはずなのに、それを知らずに50万円もかけて業者に依頼してしまった」や「とりあえずサクッと作ってみたけど、全然問い合わせにつながらない」といった失敗につながるケースは決して珍しくありません。

そんな失敗を避けて、事業のため、あるいは趣味や勉強のためなどあなたの目的に合ったホームページを作ることをサポートするべく、このコラムではホームページの作り方について基礎から丁寧に解説します。

10個の質問に答えるだけであなたに合ったHP作成方法がわかる診断も用意しているので、ぜひ活用してみてください！
⇒1分でわかる！ホームページの作り方診断はこちら

＼私たちがこのコラムを書きました／

記事の著者：牧野健人

ホームページ作成・改善を専門とする株式会社リラクスの代表取締役。売り上げ・利益に繋がるホームページの作成が得意。

記事の監修者：佐野彰彦

簡単ホームページ作成ソフト「とりあえずHP」を運営する株式会社smallwebの代表取締役。著書に「ウェブ担当者１年目の教科書」など。

初心者が知るべきホームページの作り方の基礎知識

まずは基本となる、「ホームページの作り方にはどんな種類があるか」「それぞれの特徴は何か」を確認していきましょう！

ホームページには、主に下記の3つの作り方が存在します。

以下でそれぞれの作り方の詳細を解説しますが、手っ取り早く「どれが自分に向いているか」を診断したい方は、1分でわかる！ホームページの作り方診断を試してみてください。

世の中には、専門知識がまったく無くとも簡単にHPを自作できるサービスが多数あります。費用も月額1~3,000円程度と安価です。

また、そうしたサービスはメールや電話でのサポートを受け付けていることも多く、わからないことがあったら直接質問できるため、途中で挫折する可能性が低い点もメリットです。

例えば下記のようなケースには適した方法だと言えるでしょう。

一方、専門技術でオリジナルのサイトを作る場合と比べるとやや自由度が下がり、月間数十~数百万円の費用をかけて本格的にWebサイトを活用したマーケティングを行いたい場合は不向きな場合があります。

ホームページ作成ソフトにはさまざまなサービスがありますが、特におすすめなものとしては下記などが挙げられます。

上述したソフトであれば、どれも専門技術が無くてもホームページを作成できますが、「初心者なので、とにかく簡単なサービスを使いたい」という方には「とりあえずHP」がおすすめです。

＼とりあえずHPの公式サイト／

とりあえずHPは数あるサービスの中でも特に「簡単さ」にこだわっているため、「他のサービスで挫折した」という方でも安心して使うことができます。

とりあえずHPを使ったホームページの作成手順は 初心者向けサービスを使ったホームページの作り方の章で詳しく解説するため、興味がある方はご覧ください。

起業に合わせてホームページを公開でき、自分でいつでも編集できるのが魅力

起業および会社設立のタイミングに合わせて、ホームページが必要でした。
いくつか試したホームページ作成ツールの中には、操作が複雑だったり、少し編集しようと思うと表示バランスが崩れてしまうものもありましたが、初心者向けのソフト（「とりあえずHP」）へ切り替えたところ、とても簡単で使いやすく、自分にぴったりと感じるものと出会えました。 とくに独自ドメインやサーバーもセッティングされていて、会社設立の際、定款に記載しなくてはならないホームページのURLを素早く発行することができたこともよかったです。
また、月々3000円以内で利用でき、いつでも自分で情報を更新できるので、起業直後の私にとって非常によい選択ができたと満足しています。

— 土佐 奈穂子 さん／株式会社infullence

HTML、CSS、JavaScriptなどを使ってWebサイトのデータを作成し、それをサーバーにアップロードしたり、取得したドメインと紐付けたりすることでインターネット上に公開する方法です。

初心者の方がこの方法で自作するにはまずは勉強してスキルを身につける必要があるため、数ヶ月程度は準備期間が必要になるでしょう。

この方法は、自分自身が技術を身につけることが目的の場合には向いています。例えば「未経験だけど、デザイナーやコーダーとして就職したい」というケースなどが挙げられます。

このタイプのホームページ作成については 専門技術（HTML・CSS、WordPress）を使ったホームページの作り方の章で解説しています。

先述した2つの方法はホームページを自分で作る方法でしたが、制作会社やフリーランスなどホームページ作成を専門としている業者に依頼する選択肢もあります。

プロが作成するので、クオリティは高くなりやすいです。ビジネスの集客手段として本格的にWebサイトを活用していきたい場合には向いている方法でしょう。

ただし、制作費用として数十万円~100万円程度かかるのが相場であり、なおかつ（自社に専門スキルを持った社員がいないと）公開後の編集の際も業者に依頼しなければいけなくなるケースも多いため、自分で作成・編集できる方法と比べると費用が格段に高くなる点がデメリットです。

プロに依頼する際の流れ・注意点・費用などは下記の記事で詳しく解説しているため、併せてご覧ください。

ブランディングから提案があり、ビジネスの成長に貢献してもらえました

以前は自分で市販のホームページ作成ソフトを使って作成していました。 しかし、自分で作成したものでは、どうしてもデザインが素人っぽくなってしまうのと、全く集客につながっていなかったので、プロにお任せすることに。 ホームページそのものをつくる前に、自社の強みや特徴をどのように打ち出していくか、ブランディングから提案してもらえ、ビジネスの成長に貢献するホームページを仕立ててもらえました。
ただし、自分で気軽に作成していたときよりも、依頼して対応してもらう時間はかかります。たとえばイベントのPRページを依頼した場合、最低でも2-3日はかかります。また、初回の制作費だけでなく、ランニングコストもかかるので費用面でも体力が必要です。
当社の場合は、かかる時間やコスト以上の成果が出ているので、専門業者に依頼して、結果として大正解でした。

— 安食 一さん／ゆたか建設株式会社

1分でわかる！ホームページの作り方診断

本コラムの冒頭で申し上げたように、自分に合っている作り方を選ぶことはホームページ作成において非常に大切です。

例えば、「本当はホームページ作成ソフトで十分だったのに、業者に50万円もかけて依頼してしまった」や、逆に「本当は予算をしっかり確保してプロの業者に依頼しないといけないレベルのホームページが必要だったのに、自分で作って不十分なものになってしまった」といった失敗は決して珍しくありません。

以下のホームページ作成診断では、10個の質問に答えることで、あなたのニーズや状況に適したホームページの作り方が判定されます。

1分程度で回答できる分量なので、気になる方はお試しください。

残りの質問数: 10問 / 10問

初心者でも簡単！
HP作成ソフトを使ったホームページの作り方

この章では簡単HP作成ソフト「とりあえずHP」を使ってホームページを作成する手順を具体的に解説します。

この方法であれば、知識がまったく無い方でも最短で30分程度あれば下記のようなホームページを作成できます。

まずはとりあえずHPの無料体験に申し込みます。30日間完全に無料でとりあえずHPを使うことができ、その後も自分で本登録に進まない限りは料金はまったく発生しません。

無料体験は下記のフォームからお申し込みください。3分程度で完了できる内容となっています。

＼とりあえずHPを30日お試し／
無料体験申し込みフォーム

フォームを送信するとメールが届きますので、下記の箇所をクリックして無料体験を完了させます。

すると、すぐにとりあえずHPのログインページやIDなどが記載されたメールが届きますので、アクセスします。

ログインページにIDとパスワードを入れて「ログイン」を押してください

とりあえずHPにログインできたら、まずはホームページの基本情報を設定しましょう。左のメニューの「基本情報の設定」を押し、ホームページ名や説明文などを入力します。入力が完了したら「上記の内容で設定」を押してください。

次にデザインを選びましょう。とりあえずHPにはプロが作成した200以上のテンプレートが揃っているので、これらを選ぶだけで簡単にデザインを適用させられます。

左のメニューの「デザインの選択」を押すと下の画面が表示され、無料体験の申し込み時の入力内容に基づいてあなたにおすすめのテンプレートが表示されます。

また、「業種から選ぶ」「色から選ぶ」「印象から選ぶ」「機能や形から選ぶ」などを利用することで自分で合うテンプレートを絞り込むことができます。

次にメニューから「トップページの編集」に進みましょう。ここでトップページに掲載する内容を設定できます。

無料体験フォームに送信した内容を元に、あなたのホームページに適した例文が最初から入力されているため、文章を考えるのが苦手な方も安心です。

次にトップページ以外のページの作成と編集を行いましょう。

まずメニューの「ページの作成と管理」を押し、ページの名前やメニューでの並び順などを設定します。完了したら「上記の内容で設定」を押してください。これでページの作成は完了です。

次に作成したページの内容を編集します。メニューから「各ページの編集」に進み、対象のページを選び内容や公開/非公開の設定などを行います。

以上で基本的な手順は完了です！画面右上の「ホームページを確認」を押すと、作成したホームページが表示されます。

上記で解説した項目以外にも、プロフィールやコンタクトフォーム、地図などを掲載する機能もあるので、必要に応じて管理画面から設定してください。

専門技術（HTML・CSS、WordPress）を使った
ホームページの作り方

この章ではHTML・CSS、WordPressを用いたホームページの作り方について解説します。

HTMLやCSSはホームページを作る上で基礎となる技術です。

HTMLやCSSを記述することを「コーディング」と言います。

これらを駆使することで様々な姿のホームページを構築できます。

実は上述したホームページ作成ソフトで作ったページもHTMLやCSSで構築されています。つまり、いずれにせよホームページというものはHTMLやCSSによって構成されますが、それを自分で書く（コーディングする）か、サービスによって自動的に生成するかに違いがあるということです。

HTML・CSSによるホームページの作成手順は下記の通りです。

この手順は下の記事で詳しく解説しているため、併せてご覧ください。

なお、上記の工程の最後の「サーバーにアップロードする」については下記の記事で詳しく解説しています。「ホームページをインターネット上に公開するにはどのような手順を踏めばよいの？」と疑問に思われている方はこちらをご覧ください。

WordPressはコンテンツ管理機能つきのホームページ作成ソフト（CMS）です。これを使うことで、HTML・CSSのみで構築するよりも格段にページの投稿や更新がしやすくなります。

ホームページ作成の手段として非常にメジャーで、2023年6月時点では世界中のホームページのうち43.2%がWordPressによって構築されています(※)。

※ 出典： Usage Statistics and Market Share of WordPress, February 2023

使い方に柔軟性があり、PHPやReactといった専門的な技術を使って開発を行うケースもあれば、上述した簡単ホームページ作成ソフトのように一切コーディングを伴わずに扱うことも可能です。

同じような機能を持つソフトはMovable Typeなど他にもありますが、それらと比べてWordPressには下記のようなメリットがあります。

また、ほとんどのレンタルサーバーにはWordPressを簡単にインストールできる機能が備わっています。

そのため、レンタルサーバーを契約すればすぐにWordPress製のサイトを公開することが可能です。

サーバーはホームページのデータをそこに配置してインターネット上で公開できるようにするためのコンピューターのことです。レンタルサーバーは、サーバーを簡単に借りて利用できるサービスのことです。

逆に言えば、サーバーの用意やそれに付帯する基本的な設定などは行う必要があるため、完全に不慣れな方の場合はとっつきづらさを感じる可能性があります。

WordPressを使ったホームページの作成手順は下記の記事で詳しく解説しているため、併せてご覧ください。

ホームページを無料で作る方法

ホームページを作る際には、基本的に費用が発生します。

特に、プロに依頼する場合は外注費が不可欠なので無料で済ませることはできません。

しかし、自作する場合は、下記の方法により無料でホームページを作成・公開・維持することも可能です。

ホームページ作成ソフトは前述の通り初心者でも簡単にHPを作成できるサービスで、下記のように無料プランが用意されているものもあります。

また、無料のレンタルサーバーとしては下記が有名です。

※ 2023年5月時点、hostadvice.com 調べ。

これらは、ホームページを無料で準備したい方にはおすすめの選択肢と言えるでしょう。

ただし、HP作成ソフトの無料プランや無料のレンタルサーバーには下記のような厳しい制約がついていることが多い点には注意が必要です。

そのため、個人の趣味のサイトを作るような場合には無料作成も選択肢に入りますが、お店や事務所、会社などの事業用のホームページは有料で作成する方がおすすめです。

有料で作るとしても、とりあえずHPのような安価なHPソフトを使えば月額3,000円程度の費用で作成・運用できるので、事業用のホームページをできるだけ低コストで作り方はチェックしてみてください。

スマホ対応のホームページの作り方

ホームページをスマホ対応させる方法は基本的に下記の2種類です。

ただし、このコラムで紹介した「とりあえずHP」などのホームページ作成ソフトを使えば自動的にスマホ対応させられるためため、特に気にする必要はありません。

レスポンシブデザインはページの表示の仕方を、PC・スマホ・タブレットなどのデバイスのウィンドウの幅に応じて変化させる手法です。

昨今でホームページのスマホ対応を考える場合はレスポンシブを採用することが一般的です。

一方、アダプティブデザインはPC用とスマホ用のそれぞれのページデータを作成して、閲覧環境に応じて出し分けをする方法です。

ホームページのスマホ対応については下記の記事で解説しているので、詳しく知りたい方はこちらをご覧ください。

パソコン・スマホ、それぞれを使ったホームページの作り方

ホームページはパソコンでもスマホでも作ることができます。ただし、どちらを使うかによって「できること」や「具体的な手順」が変わってくる場合があります。

この章では「パソコンの場合」と「スマホの場合」という観点からホームページの作り方について解説します。

ホームページをパソコンで作る場合、特に制限無くどのような手段も選択できます。

まず、パソコンからホームページ作成ソフトを使うケースについてですが、多くのソフトがパソコンをメインに設計されているので、ほぼ間違いなく機能のすべてを使用できます。

また、ソフトにはブラウザ（今このページを見るのに使っている、Google ChromeやMicrosoft Edgeなどのこと）から使うものと、ダウンロードして使うものがあります。

一つ注意が必要なのが、ダウンロード型のソフトは使えるパソコンが限定されている場合があることです。

例えば、SIRIUS2やホームページビルダーなどはMacでは使えません。また、Windowsであっても、構成が古い場合はうまく機能しないことも考えられます。

それに対してブラウザ型のソフトはWindowsでもMacでも問題無く使えるのが一般的です。（ただし使うブラウザのバージョンがあまり古いと推奨環境外に当てはまるケースもあり得ます）

また、ブラウザ型の場合は、スマホでもパソコンとほぼ同じように操作してホームページを作成できることが多いです（この点はスマホでのホームページの作り方の章で解説します）。

一方で、作成ソフトを使わずにHTMLなどを用いて自作する場合は、専門技術（HTML・CSS、WordPress）を使ったホームページの作り方の章で触れた通り、パソコンにテキストエディタとサーバーとの通信ソフトをダウンロードして、ホームページのコードを記述した上でサーバーにアップロードします。この作成方法はスマホではできないため、パソコンが必須になります。

スマホではHTMLなどを書いてサーバーにアップロードすることができないため、スマホ対応しているホームページ作成ソフトを使うことが必須になります。

そして、スマホ対応ソフトには、アプリ型とブラウザ型があります。

「スマホで作る」というとアプリ型をイメージされる方が多いと思いますし、実際にアプリ型のソフトも多いですが、注意点として、アプリの場合はパソコン版と比べて機能などが大きく制限されていることが多いです。

というのも、パソコンソフトとスマホアプリでは仕組みがまったく異なるため、同じ機能を持たせる難易度が高いのです。

それに対してブラウザ型は、ソフト自体はパソコンでもスマホでも同じもので、それをどちらの端末から開くかという違いしかありません。そのため、スマホでもパソコンと同じようにホームページを作成できることが多いです。

例えば、ブラウザ型ソフトである「とりあえずHP」は、スマホ1台でも本格的なホームページを作成できます。

とりあえずHPの場合、スマホで作ったとしても、できあがるホームページは自動的にパソコンとスマホの両方に対応したものになります。そのため、「パソコンを持っていないけど、スマホ1台でホームページを作成・運営している」という利用者の方も何割かいらっしゃいます。

「スマホでサクッとHPを作成・編集したい」「そもそもパソコンを使う習慣があまりない」という方には、とりあえずHPはおすすめのソフトです。今なら無料お試しも可能なので、興味がある方は↓から詳細をご覧ください。

スマホで手軽にホームページ作成！「とりあえずHP」

作り方を決めるだけじゃない！
ホームページ作成の4つの手順

ホームページを作る上では、「作り方」だけでなく下記のポイントも検討する必要があります。

効果的なホームページを作成するために、これらもしっかりと押さえていきましょう。

開設の目的やターゲット像など、ホームページ作成の前提となる部分を検討する段階です。

ここが疎かになると、せっかく作ったホームページが意味をなさなくなってしまうため注意が必要です。

例えば商売・事業の集客が目的であればSEO※に適した手段・構造でホームページを作成すべきですし、Webページ上で商品を直接販売したいのであればショッピングカート機能を実装する必要があります。

※ SEOはGoogleなどの検索エンジン上であなたのWebサイトが上位に表示されやすくするための取り組みのことで、集客手法として非常に効果的です。SEOの詳細についてはホームページのSEO対策とは？自分で行うヒケツを初心者向けに解説をご覧ください。

この点については下記の記事で解説しているので、併せてご覧ください。

ホームページの内容を具体的に検討する段階です。これは、下記の2つの視点から考えることができます。

全体の構成は、下記の図のように「Webサイト内にどのようなページを持たせるか」を検討するものです。

ページ単位の構成は、各ページ上に具体的にどのような要素（文章や画像などのコンテンツや、ナビゲーションなど）を掲載するかを検討するものです。

ホームページの構成ついては下記の記事で解説しているので、詳しく知りたい方はこちらをご覧ください。

ホームページのデザインの作り方は、大きく分けて下記の2パターンがあります。

テンプレート

ホームページ作成ソフトやWordPressを使う場合は、あらかじめ構築されたデザインがテンプレートとして用意されているため、これらから任意のものを選択するだけで完結します。

例えば とりあえずHPには、以下のようなプロがデザインした200以上のテンプレートを備わっています。

「デザインのことがわからない」「デザイナーに発注する予算が無い」などの場合にはこのようなテンプレートを活用することがメインの選択肢になるでしょう。

オリジナルのデザイン

オリジナルのデザインで進めたい場合は、 Adobe XDや Figmaなどのツールを使ってデータを作成します。

下記の記事では、デザインのポイントやツールの紹介、便利な参考サイトなどについて解説しているので、詳しく知りたい方はこちらをご覧ください。

ホームページをインターネット上で公開できるようにWebページとして実装する段階です。

この点は本コラムの 専門技術（HTML・CSS、WordPress）を使ったホームページの作り方の章で解説した通りです。

また、ホームページ作成ソフトを使う場合は、管理画面から操作するだけで自動的に実装が完了するので、この工程は省略されます。

ホームページ公開後の運用のポイント

ホームページは作って終わりではなく、公開後の適切な運用が不可欠です。特に下記は基本的な項目になるので、内容を押さえておくことがおすすめです。

下記の記事では、上記を含むホームページ運用の基本をより掘り下げて解説しているので、併せてご覧ください。

ホームページの作り方についてのよくある質問

初心者でもホームページを自分で作れますか？

はい、作れます。

ホームページの作り方にはいくつかの種類があり、その中のホームページ作成ソフトを使う方法であれば、HTMLやCSSなどのコーディングスキルやドメイン・サーバーなどの知識がまったく無くともホームページを作ることができます。

詳しくはホームページ作成ソフトで自作する→の章をご覧ください。

ホームページを作るにはいくらかかりますか？

ホームページ作成ソフトを使う場合は、月額利用料として1,000~3,000円程度かかります。（詳細はこちら→）

ホームページ作成業者に依頼する場合は、制作費用として20万円 ~ 100万円ほどかかるのが一般的です。（詳細はこちら→）

サイト運営：株式会社smallweb

個人・中小企業を中心に2万人以上が利用している初心者向けのホームページ作成ツール「とりあえずHP」を開発・提供。
10年以上にわたりホームページ作成ツールを運用してきたノウハウに基づき、ホームページの作り方や運営の仕方、インターネットの基礎知識などについて、初心者向けにわかりやすく解説することを目的に当サイトを運営。