1. トップ
  2. コラム
  3. ホームページ作成
  4. 自分でホームページ制作する方法【簡単作成ソフトでHPを自作】

自分でホームページ制作する方法【簡単作成ソフトでHPを自作】

会社やお店のホームページでも、個人のホームページでも、「自分でホームページを制作したい」と思う方にとって、何からはじめればよいのか、そもそもどのような方法があるのか、わかりにくいと感じることが多いのではないでしょうか?

このページでは、ホームページを自作したいと考えている方に向けて、4つのパターンを分かりやすく、なるべく難しい言葉を使わず、図や絵も用いながら、解説していきたいと思います。きっと、お役に立てると思いますので、ぜひご一読ください。

\誰でもホームページを自作できる初心者向けソフト/

本ページで解説する「4つのホームページ作成方法」のポイントは下記の通りです。
作成方法 メリット デメリット
1 HTMLを自分で記述
  • 自由度が高い
  • コストがかからない
  • HTMLの勉強が必須
  • 技術習得に時間がかかる
2 インストール型ホームページソフトで作成
  • 自由度がやや高い
  • 中級者向け
  • ドメインやサーバーなどは自分で別途用意
  • ある程度の勉強が必須
おすすめ3 サーバー一体型サービスを利用
  • すぐにはじめられる
  • 初心者向け
  • ドメイン・サーバーもセットされている
  • スマホでもHPを作成できる
  • 自由度はやや低い
4 立ち上げはプロを頼る
  • すぐにはじめられる
  • プロの力を頼れる
  • プロに依頼するコストが必要

ホームページを自作したい、でも、何からはじめたらいいのかわからない
でも本業も忙しくてあまり時間が取れない…

そんな方に向けて、大切なことをシンプルに6項目にまとめてみました。10分ほどでお読みいただける内容です。それでは解説していきたいと思います。

ホームページに世界中からアクセスできる理由

ホームページを自作しようと、焦ってその方法ばかりを探してしまうより、まずはホームページの基本の仕組みを理解しておくことがおすすめです。「なぜ、ホームページは世界中から見ることができるのか?」ということを感覚的に理解できると、その後がとても楽になります。

インターネットとホームページの関係を理解すると、自分にあった作成方法が、自然と判断できるようになるためです。まずは、以下の3つの単語について、意味を確認しましょう。

  1. ドメイン
  2. サーバー
  3. HTMLファイル

ホームページがインターネットを経由して、世界中から見ることができるのは、上記の3つがそれぞれの役割を果たしてくれるためです。

ドメイン・サーバー・HTMLデータの関係図

ドメイン

ドメインは、インターネット上の「住所」にあたります。あなたのホームページが仮に

https://www.anatano-page.com

というアドレスだったとします。上記のうち「anatano-page.com」という部分が、「ドメイン」と呼ばれる部分です。

世界中の誰でもがインターネットを通じて、あなたのホームページを見に来ることができるのは、このドメイン(=インターネット上の住所)で、ホームページデータが存在する場所を指定することができるからです。

サーバー

サーバーは、インターネット上の「土地」にあたります。ホームページのデータを置く場所です。ドメインが住所で、サーバーが土地です。この2つは常にセットで必要なものになります。

あなたのホームページにアクセスが来るというのは、言い換えますと、あなたの家の住所を頼りに友達が遊びに来るというようなイメージです。家を建てる場所がサーバーに該当するということになります。

HTMLファイル

HTMLファイルは、「家」にあたります。ホームページの正体は、HTMLと呼ばれる言葉でできているファイル群です。ホームページは文章や写真の組み合わせてできていますが、その中身はすべてHTMLというもので書かれており、そのファイルをサーバーへアップロードすることで、インターネット上で公開されます。

たとえば、今お読みいただいているこのページもHTMLでできています。右クリックをして「ページのソースを表示」を選択してみると、不思議な暗号のようなものが出てきます。これがHTMLと呼ばれるものです。

難しそうに感じるかもしれませんが、ここではまず「HTMLというものがホームページの正体なんだ」というくらいの理解で問題ありません。

ドメイン、サーバー、HTMLファイルの3つが揃うことで、ホームページはインターネットで誰でも見ることができる状態になります。

自分でホームページ制作する方法は4通りある

ホームページを自分で作成する方法は大きく分けて、以下の4つになります。

  • 方法1 HTMLを自分で記述して作成
  • 方法2 中級者向け(インストール型)ホームページソフトで作成
  • 方法3 初心者向け(サーバー一体型)ホームページ作成サービスを利用
  • 方法4 立ち上げはプロに手伝ってもらい、その後は自分で作る

方法1 HTMLを自分で記述して作成

HTMLを自分で記述

最も古くからある作成方法です。プロのホームページ制作者はHTMLを習得しており、プロの多くはHTMLを直接記述するやり方でホームページを制作しています。HTMLを記述することを「タグ打ち」と言ったりもします。HTMLを完全にマスターしていれば、それだけ自由度の高いホームページが作成できます。

余談ではありますが、実は、ホームページは特別なソフトウェアなどを使わずとも、作成できるものです。Windowsであれば、どのパソコンにも入っている「メモ帳」で、Macであれば、「テキストエディット」でHTMLを記述して、ホームページを作成することができます。

しかし、この方法は当然ながら初心者にはとてもハードルが高いです。これから自分で習得する場合は、参考書を購入し、しっかりと学習時間を確保することも必要になります。

方法2 中級者向け(インストール型)ホームページソフトで作成

インストール型のホームページソフト

これも比較的、歴史が長い作成方法です。たとえばホームページビルダー、ドリームウィーバーなど、有名なホームページ作成ソフトがあります。これらはパソコンにインストールして使うタイプのソフトで、HTMLなどを学習しなくても、ホームページの完成形をイメージしながら、文字や写真を組み合わせて作成していけます。

初心者でもソフトの使い方を覚えれば、ある程度、自由度の高いホームページが作成できますが、ドメインやサーバーは別途自分で用意する必要があるなど、ややハードルの高さは残ります。中級者向けの方法というイメージです。

方法3 初心者向け(サーバー一体型)ホームページ作成サービスを利用

サーバーと一体型のホームページ作成サービス

この方法は、近年とても人気のある作成方法です。
ホームページはドメイン・サーバー・HTMLファイルの3点セットが必要であることは前述の通りですが、このうち、ドメインとサーバーとホームページソフトが、あらかじめセットアップされていて、すぐにホームページ作成に着手できるのがこのやり方になります。

IDとパスワードでログインし、文字や写真を投稿していくだけで、自分でホームページを作っていくことができるため、初心者でもハードルが低く、やりやすい方法です。また、スマホだけでもホームページを作成できるので、「パソコンに慣れていない」という方でも安心です。

特に「とりあえずHP」は簡単さに徹底的にこだわっているサービスで、初心者の方でも挫折せずにホームページを作成することができます。

\「とりあえずHP」の公式サイトはこちら/

方法4 立ち上げはプロに手伝ってもらい、その後は自分で作る

HTMLを自分で記述

やや番外編ですが、はじめのホームページの立ち上げはプロの力を頼り、その後、続きを自分で作成していく方法もあり得ます。
ホームページの最も難しいところは、立ち上げ時です。便利なソフトを使用したとしても、その使い方を覚えたり、操作に慣れるまでは覚えることが多いため、挫折してしまう人も少なからずいます。

ホームページは作って完成して終わりではなく、情報を更新したり、ページを増やして充実させていくことができるものですので、ゼロからすべてを自作することにこだわるより、はじめはプロに助けてもらい、続きの更新を自分でできるようにしていくことも一手です。

それぞれのホームページ自作方法のメリットとデメリット

4パターンそれぞれに、メリットとデメリットがありますので、簡単にまとめてみます。

作成方法 メリット デメリット
1 HTMLを自分で記述
  • 自由度が高い
  • コストがかからない
  • HTMLの勉強が必須
  • 技術習得に時間がかかる
2 インストール型ホームページソフトで作成
  • 自由度がやや高い
  • 中級者向け
  • ドメインやサーバーなどは自分で別途用意
  • ある程度の勉強が必須
3 サーバー一体型サービスを利用
  • すぐにはじめられる
  • 初心者向け
  • ドメイン・サーバーもセットされている
  • スマホでもHPを作成できる
  • 自由度はやや低い
4 立ち上げはプロを頼る
  • すぐにはじめられる
  • プロの力を頼れる
  • プロに依頼するコストが必要

それぞれによさがありますが、自分が何を大切にしているのか、優先順位をイメージしておくようにしましょう。

ホームページ作成のプロを目指すような人であれば、HTMLの学習は必須になりますが、プロを目指しているわけではなく、会社やお店などのホームページを自作したいという人は、あえてHTMLを学ぶ必要はありません。

自分にあったホームページ作成方法の選び方

繰り返しになりますが、誰にとってもベストな方法というものはなく、それぞれ、自分にあったやり方を見つけることが大切になります。

ここでは、以下の10個の質問項目を作ってみましたので、あなた自身の状況に近い方をクリックしてください。全ての質問に回答すると、結果が表示されます。

Q1. 最も優先したいのは?

Q2. HTMLへの関心は?

Q3. ドメイン・サーバーへの関心は?

Q4. ホームページにかけられる時間は?

Q5. ホームページのデザインへの関心は?

Q6. これまでのホームページ作成経験は?

Q7. ホームページを自分で作れるようになる目的は?

Q8. パソコンやITに関する興味は?

Q9. わからないことがあったときは?

Q10. 所有しているパソコンは?

判定結果

\サーバー一体型サービスがおすすめ!/

ドメイン・サーバー・ホームページ作成ソフトの環境がすべて整っているサービスは、とても便利です。ホームページ作成に苦労することなく、あなたの時間を有効に使え、いざ困ったときにはサポートを受けることもできます。

簡単5ステップ!ホームページを自分で作成する手順の章では、サーバー一体型のホームページ作成ツールである「とりあえずHP」を使って実際にホームページを自作する手順を具体的に解説しています。ぜひチェックしてみてください。

\インストール型のホームページソフトがおすすめ!/

ある程度、自由度の高いホームページを作りたい方、自分自身でホームページ作成のノウハウも習得していきたい方には、インストール型のホームページソフトを検討してみましょう。

\HTMLを自分で記述して作成することがおすすめ!/

もはや初心者ではなく、上級者への道を進もうとされている方は、HTMLの学習を伴いながら、コードを記述してホームページ作成をしていきましょう。ホームページのプロの登竜門的な作成方法です。

簡単5ステップ!ホームページを自分で作成する手順

上記の結果はいかがでしたでしょうか?

ホームページを自作する場合、おすすめしたいのは、「サーバー一体型のホームページ作成ツールを利用すること」です。初心者から中級者まで、幅広い人がいま使っていて、とても人気の高い作成方法になります。

ここでは、サーバー一体型のホームページ作成ツールである「とりあえずHP」を使って、ホームページを自作する手順をご紹介してみたいと思います。

5ステップをやってみよう!
  • STEP1 無料お試しアカウントを作成
  • STEP2 好みのデザインを選ぶ
  • STEP3 ホームページ名を変えてみる
  • STEP4 記事ボックスを作成してみる
  • STEP5 デザインを変更してみる

STEP1 無料お試しアカウントを作成

とりあえずHPの公式サイトにアクセスし、「無料でお試し」のオレンジ色のボタンをクリックします。その後2つのフォームの必要項目に入力して送信すると、30日間無料で利用できるアカウントが発行されます。

※ これから解説する手順は、スマホでも問題無く実施することができます

サーバー一体型のホームページ作成サービス

簡単ホームページ作成「とりあえずHP」

とりあえずHP公式サイト

オレンジ色のボタンをクリックすると、無料体験申し込みフォームが表示されるので、まずはメールアドレスを送信してください。

とりあえずHP無料体験申し込みフォーム画面

その後、確認メールが届くので、下記の枠で囲われている箇所のURLをクリックしてください。

とりあえずHPの認証メール

下記のフォームが表示されるので、必要事項を入力してください。このフォームを送信すると、自動的にとりあえずHPの画面に移動します。

とりあえずHPの無料体験申し込みフォーム

以上で無料登録は完了です。

STEP2 好みのデザインを選ぶ

とりあえずHPは200種類以上のデザインテンプレートがあり、いつでも選び直すことができます。とても簡単で楽しい作業ですので、まずはデザインを選んでみましょう。

とりあえずHP管理画面

ログイン後、左のメニューから「デザインの選択」をクリックします。

200種類のデザインテンプレート

200種類以上のテンプレートが簡単に検索できます。好みのものが見つかったら、「このデザインを選択」をクリックするだけで、ホームページのデザインを着せ替えることができます。

この手順は以下の動画でも分かりやすく解説されています。

STEP3 ホームページ名を変えてみる

ホームページを確認

管理画面右上の「ホームページを確認」をクリックしてみると、現在のあなたのホームページを見ることができます。

現在のホームページ名

現在のホームページ名は「とりあえず情報サービス」と記載されていました。
管理画面に戻り、「基本情報の設定」をクリックします。

基本情報の設定
上記の内容で設定

基本情報の設定の「ホームページ名」という欄を、「株式会社青空工務店」と入力修正し、緑のボタン「上記の内容で設定」をクリックします。

そして、右上の「ホームページの確認」をクリックしてみます。

ホームページの名前が変わった

すると、このように簡単に、ホームページ名を修正することができました。

この手順は以下の動画でも分かりやすく解説されています。

STEP4 記事ボックスを作成してみる

次は、ホームページに文章や写真を掲載してみたいと思います。とりあえずHPの場合は、「記事ボックス」という機能があり、とても簡単に使うことができます。

ここでは、トップページに記事ボックスを追加してみたいと思います。

管理画面:トップページの編集

左メニューより、「トップページの編集」をクリックします。

記事ボックスを追加

ページの中ほどにある「記事ボックスを追加」をクリックします。すると、以下のようなウインドウが開きます。

記事ボックスの作成

「見出し」と「本文」にそれぞれ、文章を入力してみましょう。あとからでも簡単に修正できますので、今は適当な文章でOKです。さらに、「上側に挿入」を選択しておきます。

入力したら、緑のボタン「上記の内容で設定」をクリックし、管理画面の右上にある「ホームページを確認」をクリックしてみましょう。すると、

ホームページに記事ボックスが挿入された

ホームページに、このように記事を追加することができました。

次は、この記事に画像も挿入してみたいと思います。管理画面に戻り、先ほどと同様「トップページの編集」に行くと、追加した記事ボックスがあります。

記事ボックスに画像を追加

「画像を選択する」をクリックし、あなたのパソコンやスマホの中に保存されている画像ファイルを選びます。後からでも画像は変更したり、削除することもできますので、今は適当な画像でOKです。画像を選択したら、「上記の内容で設定」をクリックします。

もう一度、管理画面の右上にある「ホームページを確認」をクリックしてみましょう。すると、

ホームページに画像が挿入された

このように、記事ボックスに対し、画像を挿入することができました。

この手順は以下の動画でも分かりやすく解説されています。

STEP5 デザインを変更してみる

最後に、デザインテンプレートを変更してみたいと思います。

とりあえずHPでは、200種類以上のテンプレートを、後からでもいつでも、自由に着せ替えることができます。文章や写真を投稿してホームページの中身を作り込んだあとでも、その内容は残ったままで、見た目のデザインだけを簡単に変更することができます。

もう一度、管理画面の左メニューから「デザインの選択」をクリックしましょう。

デザインの選択画面

「色から選ぶ」をクリックし、さらに「赤・レッド」を選択してみます。

今は仮に、左上に出てきたデザインを選んでみたいと思います。「このデザインを選択」をクリックします。

管理画面の右上にある「ホームページを確認」をクリックしてみましょう。すると、

ホームページのデザインが変わった

ホームページ名の「株式会社青空工務店」や、作成した記事ボックス「リフォーム工事がはじまりました」はそのままに、赤いデザインに切り替わったことがわかります。

このように、とりあえずHPは、文章や画像を投稿して、ホームページを作っていた後からでも、デザインを選び直すことができます。レイアウトが崩れるなどもありません。

これは他のホームページ作成ツールにはあまりない特長です。作りながら、内容やデザインをいつでも修正できるので、初心者にとって、安心しながら作業を進めることができます。

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

ホームページを自分で作るときにやってはいけないことは?

ご自身のスキルとマッチしない制作方法を選択してしまうことは避けましょう。

例えば、HTMLでゼロから制作したり、WordPressでサイトを構築することには、コーディングや最低限のドメイン・サーバーなどの知識が必要です。スキルが無い状態でこれらの作成方法を選んでしまうと、ホームページを完成させられずに挫折してしまう恐れがあります

知識に自信が無い方は初心者向けホームページ作成ソフトを使うのがおすすめです。一方で、現時点ではスキルは無いけれども、時間をかけてしっかり勉強する意欲がある方はHTMLやWordPressもおすすめです。

ホームページ制作には何が必要?

ホームページをインターネット上に公開するには、ドメイン・サーバー・ホームページのデータの3つが必要です。

HTMLやWordPressなどでWebサイトを構築する場合は、ドメインやサーバーも基本的に自分で用意しなければなりません。

一方で、初心者向けホームページ作成ソフトを使えば、すべてがセットになっていることが多く、その場合は1つのサービスだけに登録すれば大丈夫です。


理解しておきたいポイントまとめ

最後に、このページでご紹介してきた内容を、まとめておきたいと思います。

ホームページには以下の3つが必ず必要

インターネットを通じてホームページを見てもらえる状態にするためには、下記の3つが欠かせません。

  1. ドメイン
  2. サーバー
  3. HTMLファイル
ドメイン・サーバー・HTMLデータの関係図

ドメインは「住所」、サーバーは「土地」、HTMLファイルは「家」に該当します。この3つの関係性を理解しておくことが、ホームページ作成の基本知識となります。

ホームページを自分で作る方法は4通り

ホームページ作成を自分でやるには、大きく分けると以下の4通りがあります。

  • 方法1 HTMLを自分で記述して作成
  • 方法2 インストール型のホームページソフトで作成
  • 方法3 サーバーと一体型のホームページ作成サービスを利用
  • 方法4 立ち上げはプロに手伝ってもらい、その後は自分で作る

それぞれにメリットとデメリットがありますが、初心者〜中級者にとってのおすすめは、「方法3 サーバーと一体型のホームページ作成サービスを利用」です。

作成方法 メリット デメリット
1 HTMLを自分で記述
  • 自由度が高い
  • コストがかからない
  • HTMLの勉強が必須
  • 技術習得に時間がかかる
2 インストール型ホームページソフトで作成
  • 自由度がやや高い
  • 中級者向け
  • ドメインやサーバーなどは自分で別途用意
  • ある程度の勉強が必須
3 サーバー一体型サービスを利用
  • すぐにはじめられる
  • 初心者向け
  • ドメイン・サーバーもセットされている
  • スマホでもHPを作成できる
  • 自由度はやや低い
4 立ち上げはプロを頼る
  • すぐにはじめられる
  • プロの力を頼れる
  • プロに依頼するコストが必要

ドメイン・サーバーがセットされていて、難しい知識や長時間の学習をせずとも、すぐにホームページ作成の作業に取りかかれます。最近の最も人気の高い作成方法でもあります。

自分にあった作成方法を選ぶことが大切

ホームページ作成をする目的や、自分自身のスキルなどに合わせて、「自分にあった方法」を選ぶことが何よりも大切になります。そのためのチェック項目を用意してみましたので、今一度確認してみましょう。

まずは5ステップで、試しにやってみましょう

サーバー一体型のホームページ作成サービスには、お試し期間もありますので、本当に自分でもできるかどうか、まずは手を動かしてみることがおすすめです。

以下で、ホームページ作成の大まかな流れ、5ステップを紹介していますので、気軽にトライしてみましょう。

気軽につくれる、素敵なホームページ「とりあえずHP」

とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。
「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。
業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。


佐野彰彦

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

牧野健人

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

株式会社smallweb

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

簡単に自分で作れるホームページ作成ソフト

無料お試しはこちら