HTMLは簡単にホームページが作成できる便利なツールCMSとは異なり、自社でイメージしたデザインのホームページをオリジナルで作成することができます。

またCSSやjavascriptを使用すればスタイルのあるオリジナル性の高いホームページを作成することもできます。

SEOで評価されるHTMLコーディングは、HTML Living Standardに準拠したHTMLコーディングが必要です。

この記事では、HTMLとは何かを詳しく解説し、さらにホームページを作成するための手順も解説していきます。

ホームページを構成するプログラミング言語

まずはホームページを作成するためには、どのような言語が必要なのか紹介していきます。

文字を表示させるHTML

HTMLとは「Hyper　Text　Markup　Language」の略で、記述した文字をブラウザに表示するマークアップ言語です。

ホームページを作成するとき文字を書くだけではブラウザに表示することはできません。HTMLを記述することで、書いた文字や画像が初めてブラウザに表示することができます。

見出しの設定や文字のアレンジもHTMLとCSSを使用することでイメージ通りにブラウザに表示することが可能になります。

ホームページを作成する際には簡単にWebサイトを作成できるCMSもありますが、こちらは決められたテンプレートを使用するため細かい編集がHTMLよりもできません。

では、HTMLではどのようなタグがあるのか代表的なものをご紹介します。

文書の情報や構造を宣言する基本的なタグ

サイトの基本的な構造は、上記のタグで構成します。

BODY内で有用なタグ

SEO対策で重要なタグ

この3つのタグはSEOで影響力のあるタグです。必ず設定しましょう。

記述ファイルの拡張子

HTMLを記述するファイルは、保存先でテキストファイルである「.text」でなく専用の拡張子である「.html」で保存してください。「.html」で保存しないと、せっかく実装してもホームページで動作しません。

そのため、ホームページを作成する際にはあらかじめ拡張子が「HTML」であるか確認してください。

文字を装飾するCSS

ホームページの見た目を変更する役割を持っているCSSは、HTMLと組み合わせることでデザイン性のあるホームページを作成することができます。

CSSは「Cascading Style Sheets」略で、文字サイズやカラーまた配置も変更することができます。スタイルシートと言います。

HTMLのみを使用した場合には、白黒で見た目に変化のないホームページになってしまいますが、CSSを使用すると重要な箇所に色を入れたり文字を太くしたりと見た目を装飾できるのです。デザイン部分を担当します。

CSSを使用することで自社のイメージに合った、おしゃれまたはスタイルのあるホームページがつくれます。

おすすめ記事：CSSとは？役割と基本的な書き方や注意点を解説

動きを加えるJavascript

javascriptは、Web上でアニメ―ションのような動きをWebページに加えることができます。

ホームページ作成で必ず必要ではないですが、動きがあることでよりユーザーに興味を引くこともできます。Webサイトやシステム開発に使用されるプログラミング言語で、より専門的な知識が必要となります。

データベースと連携するPHP

PHP言語は、データベースのサーバーサイド側の言語と言われています。WordpressなどのCMSもPHPで動いています。コラムの記事投稿の文章をデータベースに保存しておいて、PHPで出力して文章を表示します。PHPはプログラム言語でHTML内で記述して使う事ができます。HTMLとPHPでシステムを実装したホームページ作成がほとんど可能です。求人サイトの求人導線やECサイトのカートなどシステム系の実装をしたい場合、PHP言語で作る事が可能です。

HTMLコーディングのホームページ作成の流れ

ホームページ作成するための流れを事前に確認し、社内で効率よい作業を行いましょう。

STEP1.  HTMLを作成するためのツールを準備

ホームページ作成に必要なのは「Google　Chrome」などのブラウザと「テキストエデュタ」です。

テキストエディタとはパソコンで文字を書くためのツールで、メモのようなアプリケーションのことです。

• Sublime Tax
• TeraPad
• Visual Studio Code
• サクラエディタ

例えば動作が速いことで定評がある「Sublime Tax」は無料トライアルが用意されており初心者でも始めやすく人気です。

また対応しているOSが幅広く、LinuxやMac・Windowsでも使用できます。

日本語の解説が付いたテキストエディタ「TeraPad」なら、ホームページ作成に必要な機能がすべて揃っています。

無料で使用でき画面がメモのようになっているので、初心者の方でも使用しやすいことも特徴です。

またマイクロソフトが無料で提供する「Visual Studio Code」なら、AzureやGitHubと統合された機能を使用することができるのでツール間の切り替えが必要ありません。こちらもLinux・Mac・Windowsに対応しております。

「サクラエディタ」は、純日本製のWindows向けテキストエディターです。日本人が開発しました。日本語のフォーラムの場があり、日本語で質問ができます。

STEP2.  HTMLでファイルを作成

必要なツールが揃ったらHTMLのファイルを作成します。テキストエディタの拡張子を「.html」に変更してください。

通常メモ帳で作成された文字は「.txt」として保存されるのですがHTMLファイルを作るためには拡張子を「.html」に変更する必要があります。

STEP3．HTMLでコードを記述

HTMLファイルができたら、まずページの基本情報を表示させる「head要素」とWebページでコンテンツを示す「body要素」を記述します。

headは実際に表示されませんが、Webページのタイトルやmeta要素の情報も記述してください。

SEOでは、titleとmeta descriptionが重要です。

body要素は実際にホームページで表示させたい内容である見出しや本文を書きます。

まずはコードからではなく、ドキュメント宣言を下記の通りに書きます。

日本語でのHTMLであると指定します。続いてheadのコードを書きます。

そしてbodyのコードを書きます。

そして最後にHTMLの閉じタグを記述して締めくくります。

テキストエディタのなかには、自動的にホームページで必要なタグを挿入してくれる便利なものもあります。

STEP4．CSSで見た目を装飾

HTMLの記述が完了したら、見た目を装飾してユーザーの見やすいホームページになるように整える作業を行います。

CSSは文字の色を赤や青にしたり、文字に太さをつけて強弱をつけたりすることができます。ファイルの拡張子は、style.cssです。

HTMLのみのコードではまた文字は黒のみで大きさが同じなため単調な印象を与えてしまうので、CSSを使用し情報を伝えやすいページを作成してください。

また、CSSで見た目を整えることはオリジナル性を出し自社のスタイルを確立することもできます。

おすすめ記事：CSSとは？役割と基本的な書き方や注意点を解説

STEP5.   ブラウザでイメージと違いがないか確認

HTMLとCSSの記述が完了したら、自分のイメージ通りに表示されるかブラウザを確認してください。

使用するブラウザはGoogleChromeやMicrosoftEdgeなどいつも使用しているもので構いません。

表示のされ方に、違和感やイメージと異なる点がないか確認していきます。ブラウザによってはCSSの表示のされ方に違いが出ることもあるので複数のブラウザを利用し確認してください。

STEP6．サーバーとドメインを契約

HTMLの記述が完了したら、ザーバーの契約をしてドメインを取得しましょう。サーバーは、画像ファイルやテキストファイルなどのデータを保管しておく場所です。ドメインは、サイトの住所となるものです。

おすすめ記事：ドメインとは？ドメインの種類や独自ドメインのメリットを解説

サーバーはさまざまなものがありますが、自社で用意する場合はかなりの費用がかかります。また運用するにはセキュリティ対策などランニングコストの費用がさらに必要となります。

よって、中規模サイトであれば、レンタルサーバーがおすすめです。レンタルサーバーなら月数百円～数千円で利用できます。

おすすめレンタルサーバー

ホームページ作成で安く使い勝手が良いレンタルサーバーをご紹介します。

• エックスサーバー
• ロリポップレンタルサーバー
• さくらのレンタルサーバ
• ConoHa WING

サーバーが用意できたら、次にドメインを獲得しましょう。

おすすめのドメインレジストラ

• お名前.com
• ムームードメイン

ドメインは日本語でなく英語で設定した方が、URLをSNSでシェアしたりする際に文字の変換が起こりません。日本語のドメインは、文字列が変換されスパムのように見えてしまいます。

そのためこだわりがなく英語で設定することが可能であれば、ドメインは英語で設定してください。

STEP7．FTPソフトでスムーズにアップロード

サーバーにドメインを紐付け準備が完了したら、HTMLファイルをアップロードしてホームページを公開していきます。

その際にサーバーへのアップロードはFTPソフトを使用するとスムーズにアップロードすることができます。

FTPソフトはファイルの転送用のソフトウエアで、サーバーのファイルをアップロードしたりダウンロードしたりすることが可能です。FTPソフトを利用することで簡単にアップロードでき、後でHTMLのファイルを上書きしてアプロードしたい際にも手間が掛かりません。

おすすめのFTPソフト

• FFFTP
• WinSCP
• FileZilla

HTMLを使わない簡単ホームページ作成方法

HTMLのコードを使用せずに簡単にホームページを作成することもできます。ホームページ作成ソフトを使用すればデザインのテンプレートが既に用意されています。

なかでもCMSがおすすめです。

おすすめ記事：CMSとは？CMSの種類とSEO的に使うと良いメリットを解説

WordPress（ワードプレス）は、初心者の方でもセットアップが簡単です。WordPrssは、世界で公開されているホームページの3分の1が使用しているほど、幅広く普及しています。

ホームページのデザインプレートも豊富に用意されており、さまざまにあるテーマのなかから自社に合ったデザインを無料で選ぶこともできます。

おすすめ記事：ホームページ作成方法とは？無料で作れるソフトの紹介と選び方を解説

失敗しない為のホームページ作成のポイント

ホームページ作成を失敗しないためのポイントを抑え、ユーザーにとって読みやすく有益な情報を与えられるホームページを作成しましょう。

エラーにならないようにルールに沿って記述

HTMLを記述したのにエラーになりブラウザに表示されないという場合もあります。その際は、ルールに沿ってHTMLが記述できているのかを確認してください。

例えばコードには開始タグと終了タグが必要でその間にコードを書くというルールがあります。どちらかが抜けてしまっていても、エラーになり正常にブラウザに表示することができません。

ルールに沿って記述することでエラーが防げます。また、テキストエディタによっては、入力ミスやルールに沿って記述されていないとエラーチェックが表示され教えてくれるものもあります。

スマホに対応しているか

PCのブラウザとスマホに対応しているホームページは、ユーザーの利便性も上がるので閲覧されやすくなります。ホームぺージ作成の際には、PCだけではなくモバイルにも対応した設計にしましょう。

モバイルに対応したホームページは、Googleも推奨しているので検索エンジンからも高い評価を期待できます。ユーザー目線に立った見やすく使いやすいレスポンシブデザインであるホームページにすることが重要です。

おすすめ記事：レスポンシブデザインとは？SEOで重要な理由や対応方法など

複雑なＨＴＭＬタグは避ける

社内でホームページを作成する場合、できるだけわかりやすいHTMLタグを使用することで効率的に作業が進められます。

簡単にグループ化できる「divタグ（ディブタグ）」は一般的に使われる頻度も高く便利ですが、意味の持たないコードなので乱用するとわかりにくくなってしまいます。

そのためできるだけHTML Living Standardに準拠したHTMLコーディングをして、社内で誰が見てもわかるコードを記述することを心掛けてください。

おすすめ記事：SEOで効果を発揮するHTMLタグの置き方を解説

HTMLの構文チェックができるツールで効率的に

便利なツールである「Dity Markup」や「HTMLエラーチェッカー」を利用すれば、自分では気が付かなかったHTMLの記述のエラーをチェックすることができます。

構文の記述ミスを自分で目視するよりも、格段に速く見つけることができるので効率的に作業が進められます。

まとめ

 

SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る

この記事の監修者

アドマノ株式会社　代表取締役　天野　剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、11期目。営業、SEOコンサル、WEB解析（Googleアナリティクス個人認定資格GAIQ保持）コーディング、サイト制作となんでもこなす。会社としては今まで2000以上のサイトのSEO対策を手掛けてきました。