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

ホームページの作り方を知りたい初心者の方に向けて、ホームページ作成の専門家がはじめから丁寧に解説します。

このコラムを読むことで、ホームページの作り方の種類やそれぞれのメリット・デメリット、作り方の手順、HPの構成やデザインの考え方、公開後の運営方法まで網羅的に理解することができます。

「これからホームページを作りたい」と思っている方はぜひご覧ください！

記事の著者：牧野健人

Webサイトの制作とWebマーケティングを専門とする株式会社リラクスの代表取締役。

記事の監修者：佐野彰彦

簡単ホームページ作成ソフト「とりあえずHP」を運営する株式会社smallwebの代表取締役。

＼Webサイトに関する書籍を出版しています／

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

ホームページの作り方には下記のように非常に様々なものがあり、どれを選ぶかによって、必要になる知識や費用などが大きく変わります。(とっつきづらく感じるかもしれませんが、これからわかりやすく解説していきますのでご安心ください！)

これからそれぞれの方法のメリット・デメリットなどを解説していきますが、まずはざっくりと自分がどれに向いているのかを知りたい方は下記の基準で考えてみてください。

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

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

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

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

ホームページ作成サービスには前述したように様々なものがありますが、「初心者なので、とにかく簡単なサービスを使いたい」という方には「とりあえずHP」がおすすめです。

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

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

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

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

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

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

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

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

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

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

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

初心者でも簡単！
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年2月時点では世界中のホームページのうち43.1%がWordPressによって構築されています(※)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テンプレート

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

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

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

オリジナルのデザイン

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

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

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

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

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

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

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

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

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

ホームページのおすすめの作り方は？

前提としてホームページには主に3つの作り方があり、ご自身のニーズに適した作成方法が「よい作り方」ということになります。

「3つの作り方の具体的な内容」と「それぞれがどのような人に向いているのか」は以下をご覧ください。

スキルは無いけど時間をかけずに自作したい / 予算が限られている

ホームページ作成サービスで自作する

スキルを身につけることが目的

専門技術で自作する

数十~数百万円の費用をかけて、本格的にビジネスに活用したい

プロの業者に依頼する

記事の著者：牧野健人

株式会社リラクス 代表取締役。Webのマーケティング（CRO・SEO）の知見とクリエイティブ（デザイン・コーディング）のスキルの両輪を活かし、クライアントの成果向上のための取り組みに尽力。

記事の監修者：佐野彰彦

株式会社smallweb 代表取締役、株式会社それからデザイン 代表取締役。
「ビジネスとデザインの統合」をテーマに活動。音楽系企業にて新規事業開発を担当した後、デザイン業界へ転身。WEB領域に強いデザイナーとしてキャリアを積み重ねる。
著書に「経営者のためのウェブブランディングの教科書」「ウェブ担当者１年目の教科書」（共に幻冬舎）。2015年、2016年グッドデザイン賞受賞。