ttl-clmn-20210905_001

【5ステップ解説】分かりやすい!自分でホームページ作成する方法

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

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

このページでわかること

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

そんな方に向けて、大切なことをシンプルに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とパスワードでログインし、文字や写真を投稿していくだけで、自分でホームページを作っていくことができるため、初心者でもハードルが低く、やりやすい方法です。

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

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

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

それぞれのメリットとデメリット

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

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

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

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

自分にあった作成方法の選び方

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

ここでは、以下の10個の質問項目を作ってみましたので、あなた自身の状況を回答してみましょう。選択肢の後ろに記載している緑色の数字を足していただき、判定結果と照らし合わせてください。あなたにとってのよりよい選択のヒントとなると思います。

Q1. 最も優先したいのは?
  • 簡単に作れること 1
  • 高度なホームページを作れるようになること 2
Q2. HTMLへの関心は?
  • なるべく学習しない方法で作りたい 1
  • 興味が強くぜひ学習していきたい 2
Q3. ドメイン・サーバーへの関心は?
  • すでにセッティングされているならありがたい 1
  • ドメイン・サーバーともに自分で用意したい 2
Q4. ホームページにかけられる時間は?
  • 本業優先のため、あまり時間はかけられない 1
  • 比較的時間に余裕がある 2
Q5. ホームページのデザインへの関心は?
  • テンプレートなどたくさんの種類から選びたい 1
  • デザインも自分でこだわって作成したい 2
Q6. これまでのホームページ作成経験は?
  • はじめてホームページ作成に挑戦する 1
  • 過去に何度か作成したことがある 2
Q7. ホームページを自分で作れるようになる目的は?
  • 仕事や活動の紹介や、ビジネスの宣伝のため 1
  • ホームページ作成そのものを仕事にしたいため 2
Q8. パソコンやITに関する興味は?
  • パソコンやITへの興味は、普通またはあまり強くはない 1
  • パソコンやITはとても好きでずっと触っていたい 2
Q9. わからないことがあったときは?
  • マニュアルがあったり、相談窓口があると安心だ 1
  • なるべく自分で学習して解決していきたい 2
Q10. 所有しているパソコンは?
  • WindowsまたはMacのどちらかを1台のみ所有している 1
  • WindowsとMacの両方を所有している 2

判定結果
【合計点10〜15】 サーバー一体型サービスがおすすめ!

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

【合計点15〜18】 インストール型のホームページソフトがおすすめ!

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

【合計点18〜20】 HTMLを自分で記述して作成することがおすすめ!

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


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

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

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

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

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

下記にアクセスし、「無料でお試し」のオレンジ色のボタンをクリックします。必要項目に入力して送信すると、30日間無料で利用できるアカウントが発行されます。

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

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

とりあえずHP公式サイト

オレンジ色のボタンをクリックすると、無料体験申し込みフォームに行きます。

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

項目に沿って入力していくと、メールでIDとパスワード等のログイン情報が届きます。

メールの件名「※重要※【とりあえずHP】無料体験の設定完了のご案内」を受信し、本文中に記載されている「ログイン画面のアドレス」をクリックします。

とりあえずHPログイン画面

申し込み時に自分で指定した、「ログインID」と「パスワード」を入力し、緑のボタン「ログイン」をクリックします。

STEP2 好みのデザインを選ぶ

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

とりあえずHP管理画面

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

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

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

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

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

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

現在のホームページ名

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

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

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

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

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

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

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

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

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

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

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

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

記事ボックスを追加

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

記事ボックスの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザインの選択画面

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

チェックしてみよう!

自分にあった作成方法の選び方

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

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

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

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

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

無料オンラインサポート実施中

\ホームページ制作のプロに個別相談/

とりあえずHP無料個別レッスン

個別レッスンの詳細

PAGE TOP