「HTMLを使って、自分だけのオリジナルホームページを作ってみたい」 そう思って調べ始めたものの、何から手をつければいいのか、本当にHTMLだけで作れるのか不安に感じていませんか？ かつてはHTMLを一行ずつ書くのが主流でしたが、現在は「HTMLの知識を活かしながらツールで効率化する」方法が一般的です。HTMLを理解することは、サイトの構造を知る上で非常に重要ですが、すべてを手書きするのは時間がかかり、挫折の原因にもなりかねません。
この記事では、HTMLでホームページを作成する基本手順から、初心者でも失敗しないためのツールの選び方までをわかりやすく解説します。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
HTMLを使ってホームページ作成をするメリット・デメリット
HTMLでイチから作成する方法（手書き）と、ホームページ作成ツール（CMS）を使う方法には、それぞれ明確な違いがあります。まずはそれぞれの特徴を理解しましょう。
| HTMLでの自作（手書き） | ホームページ作成ツール（CMS） | |
| 制限なし | テンプレートやカスタマイズの範囲内 | |
| 習得に時間がかかる | 直感的に操作可能 | |
| 遅い | 速い | |
| 全て自分で行う | ツール側で自動化・簡略化 | |
| サーバー・ドメイン代 | 月額費用（サーバー・ドメイン代が含まれる） |
HTMLでホームページを作成するメリット
最大のメリットは、デザインやレイアウトに一切の制限がないことです。コードの知識があれば、世界に一つだけの独創的なサイトを構築できます。また、Webサイトの構造を根本から理解できるため、将来的にWebデザインやエンジニアリングを目指す方には大きな財産となります。
HTMLでホームページを作成するデメリット
一方で、「スマホ対応（レスポンシブ）」や「セキュリティ対策」もすべて自分で行う必要がある点は大きなデメリットです。初心者の方は、コードの記述ミス（バグ）一つで表示が崩れてしまい、解決に数時間を費やすことも珍しくありません。「早く公開したい」「メンテナンスを楽にしたい」という場合には不向きといえます。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
HTMLを使ったホームページ作成の4ステップ
HTMLを使ってホームページを作るには、どうすればいいのでしょうか。ここからは、実際にHTMLを使ってホームページを作成する具体的な手順を解説します。
1. ツール（テキストエディタ）を用意する
HTMLを使ってホームページを作るには、ツールを用意しなければいけません。必要なツールとは、Webブラウザとテキストエディタです。WebブラウザとしてGoogle Chromeなどを普段から使っている場合は、ホームページを作る際もそのまま使用できます。 パソコン標準のメモ帳でも可能ですが、現在は「Visual Studio Code（VS Code）」などの高機能な無料エディタを使うのが一般的です。入力補完機能があるため、入力ミスを大幅に減らすことができます。 
2. HTMLファイルを作成し、コードを書く
HTMLでホームページを作るために、まずはテキストエディタで拡張子が「.html」のファイルを作りましょう。この段階では保存場所にこだわる必要はないため、ひとまずファイルを作成できれば問題ありません。 エディタを開き、ファイル名を「index.html」として保存します。これがホームページのトップページになります。 
以下は、ホームページの土台となる最小限のコード例です。
以下は、ホームページの土台となる最小限のコード例です。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>マイホームページ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>初めてのHTMLサイトへようこそ。</p>
</body>
</html>
このコードは、HTMLでホームページを作成する際に必ず記載する必要があります。どのような場合も同じ記述をするため、覚えておきましょう。
3. CSSでデザインを整える
HTMLだけでは文字が並ぶだけのシンプルな画面です。色やレイアウトを整えるには「CSS」という別の言語が必要です。HTMLファイルからCSSファイルを読み込むことで、フォントサイズを変えたり、画像を横に並べたりといったデザインが可能になります。詳しくは下記の記事をご覧ください。
4. サーバーへアップロード（公開）する
作成したファイルは自分のパソコン内にあるだけでは世界中に公開されません。Webサーバー上にHTMLファイルをアップロードすることで、初めてブラウザから閲覧可能になります。ファイルをアップロードするためには、外部へファイルを送信するためのFTPソフトが必要です。HTMLファイルをアップロードする前に、FTPソフトの設定を完了させておきましょう。
その後、FTPソフトを開いてHTMLファイルを選択し、Webサーバーにアップロードします。Webサーバーに設定しているアドレスをWebブラウザのアドレスバーへ入力し、HTMLファイルの内容が表示されることを確認しましょう。 実際にはそれぞれで細かい設定が必要なため、ファイルのアップロードの全体的な手順を確認してください。 
HTMLの書き方
HTMLにはさまざまな書き方の決まりがあります。ここでは、HTMLの書き方の基本を解説します。
headタグの中にHTMLの情報を記載する
HTMLでは、headタグの中にHTMLの情報を記載するのが基本です。HTMLの情報とは、meta要素やページタイトルなどが含まれます。具体的な記載例は以下のとおりです。
<html>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”参照元”>
<link rel=”stylesheet” href=”style.css”>
<title>ページタイトル</title>
</head>
</html>
実際に作成したいホームページに合わせ、適切に記載しましょう。
bodyタグの中にページのコンテンツの情報を記載する
ホームページ上に表示させたい内容は、bodyタグの中に記載します。たとえば、自社の事業内容や社員に関する情報を記載する場合は以下のように記述します。
<body>
<h1>サンプルホームページ</h1>
<p>事業内容</p>
<p>社員紹介</p>
</body>
bodyタグの中に記載した情報はWebブラウザ上で公開されるため、誤った情報を記載しないように注意しましょう。
h1タグの中に見出し、pタグの中に文章を記載する
先ほど示したとおり、ホームページ上に表示させたい内容はbodyタグの中に記載します。見出しにはh1タグを使用し、文章はpタグに記載しましょう。 h1タグは見出しを表すための専用のタグです。h1～h6があり、数字が小さくなるほど小さな見出しとなります。
表示させたい内容によって記載すべきタグは異なるため、注意しましょう。タグにミスがあると正しく表示されなかったり、イメージとは異なる表示になったりする可能性もあるため、よく確認しながら作業を進めてください。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
ホームページをデザインするにはCSSが必要
デザイン性の高いホームページを作るためには、HTML以外の技術も組み合わせる必要があります。HTMLだけでもホームページそのものは作れますが、見た目は白黒で単調なデザインになってしまいます。
ホームページのデザインを変更するには、CSSが必要です。CSSとは「Cascading Style Sheets」の略称であり、ホームページの見た目に関する部分を設定します。CSSを使用すれば、文字や背景の色なども自由に変更できるようになります。
CSSにはHTMLとは異なるルールがあり、それをよく理解したうえで記述しなければなりません。HTMLと組み合わせて使用するため、HTMLとともに記載方法を習得しましょう。
HTML以外でホームページを作成する方法
わざわざHTMLを勉強しなくても、ホームページを作成できる方法があります。ここでは、HTMLを使用しないホームページの作成方法を解説します。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
CMSを使う
CMSとは「Contents Management System」の頭文字をとったツールのことです。CMSを使用すれば、Webサイトの専門知識がない人やHTMLを書けない人でも、簡単にホームページを構築でき、コンテンツの管理や更新にも対応できます。
CMSを使用すれば、HTMLで表現するのが難しいデザインもすぐに作成できます。世界中の多くのホームページがCMSを使用して作られているため、活用を検討してみましょう。
ホームページ作成ソフトを使う
ホームページ作成ソフトを使用すれば、複雑な設定をしなくても簡単にホームページを作成できます。なかには無料で利用できるものもあり、気軽に試せます。直感的な操作で使えるようになっている場合が多いため、初心者でも安心です。
ただし、ホームページ作成ソフトを使用して作成したホームページに独自ドメインを設定したり、自動的に表示される広告を消したりするには、料金がかかることもあります。
→専門知識がなくてもサイトが作れる。ノーコードCMSの「BiNDup」を30日間 無料体験
初心者でも失敗しない！ホームページ作成ツールの選び方
ホームページをHTMLで作成するか、作成ツールを使うか、自分に合った方法を選ぶために、以下の3つのポイントを基準にしてみてください。
1. 制作にかけられる時間と労力
HTMLを手書きする場合、1ページ完成させるだけでも数日〜数週間かかることがあります。「本業や活動に時間を割きたい」という方は、数時間で形にできるノーコードツール（作成ツール）が圧倒的に有利です。
2. スマホ対応（レスポンシブ）が自動か
今の時代、スマホで見やすいサイト（レスポンシブデザイン）は必須です。HTML自作ではこれらもすべて手動で設定しなければなりませんが、最新のツールなら「作るだけで自動的にスマホ最適化」されます。
3. 公開後の運用とサポート
自作の場合、不具合が起きてもすべて自分で解決しなければなりません。「困ったときに相談できるサポートがあるか」は、初心者にとって非常に大きな安心材料になります。
効率と自由度を両立できるホームページ作成ツールが便利
「HTMLを勉強したいけれど、やっぱり自作は大変そう…」と感じた方におすすめなのが、a href=”https://bindup.jp/”>BiNDupのようなノーコードCMS（作成ツール）です。 BiNDupは、380種類以上の洗練されたテンプレートから選ぶだけで、HTMLを書かずに高品質なサイトが完成するため、専門知識がなくてもプロ級のデザインで仕上げられます。カスタマイズ性にも優れているため、テンプレートをベースにして細部のデザインやレイアウトを自由に変更することも可能です。 また、苦労しがちな「検索エンジン対策（SEO）」も、ツール側が自動で最適化をサポートしてくれるため、集客に強いサイト構成を実現できます。
専用の公開サーバーやセキュリティもオールインワンで付帯しているので、別途サーバーを借りたり、難しい設定をする必要はありません。「作りたい」と思ったらすぐページを公開できます。 まずは30日間無料で試すことができるので、HTMLよりも簡単かつスムーズにホームページを構築したい方は、ぜひ検討してみてください。
BiNDupを無料で使ってみるBiNDupの制作事例を見る
POINT
- HTMLはタグで構成されており、文字にさまざまな表現を加えられる
- ホームページはツールを用意してHTMLファイルでコードを作成し、アップロードする事で閲覧できる様になる
- ノーコードツールを使用すれば、HTMLで表現するのが難しいデザインもすぐに作成できる