【初心者向け】ホームぺージの作り方を簡単に解説！自作する方法とは？

ホームページを作りたい！と思った時。
「なにからはじめれば…」「自分で作るのにお金も時間もどれくらいかかるんだろう…」「なんだかハードルが高そう…」と、まず立ち止まってしまうケースは多いのではないでしょうか。

わたし自身もはじめてホームページを作った時は、なにも知識がないままレンタルサーバーを契約し、見ようみまねでHTMLを書き、リンクをひとつ貼れただけで「できたー！」とよろこんだことを思い出します。

今回は ホームページを作ろう！と思い立った方、自作する方法をお探しの方へ、ヒントになる情報を集めました ので、ぜひご活用ください。

ホームページの作り方には種類がある！作成方法を解説！

ホームページの作り方には種類があることをご存知ですか。本記事では、4つの作成方法を紹介します。
この中から、ひとつの方法を選んで進めることになり、作業内容や手順はどの方法でホームページを作るか？によって変わります。

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

あらかじめ用意されたフォームに、ブログを書くように入力していくだけでホームページが完成するサービスです。とにかく手軽につくりたい！サーバーを用意したり、HTMLを学んだりする時間がない！という方におすすめです。

■ ホームページ作成ソフトを利用する

ホームページ作成ソフトは、HTMLを自分で書くものから、HTMLを書かずにパズルのように組み立てるものまで、いろいろな種類があります。「ホームページ作成ソフトで何をしたいか？」によって、ソフトの価格も変わってくるので、よく調べて決めるとよさそうです。

なお、ホームページ作成ソフトを利用してつくれるのは「HTMLファイル」や「CSSファイル」と呼ばれるファイルになります。このファイルをFTPと呼ばれる機能でサーバーにアップロードすることで、ホームページが表示されることとなります。

■ レンタルサーバーを契約して作る

契約したレンタルサーバーに「HTMLファイル」や「CSSファイル」をアップロードすることでホームページが表示されます。
ファイルをアップロードする際に使用するFTP機能が、レンタルサーバーサービスに付属しているケースもありますので、調べておく必要があります。

■ 制作会社に依頼して作る

ホームページを制作する会社に依頼する方法になります。前述した「ホームページ作成サービス」「ホームページ作成ソフト」「レンタルサーバー」での作成を制作会社が行うことになり、「ホームページ作成サービス」や「レンタルサーバー」にかかる料金の他、制作会社へ制作代金を支払うケースが多いでしょう。

依頼する会社によって、ルールや条件は様々かと思いますので、よく調べましょう。

ホームページを作る前に

ホームページ作成に取りかかる前に、準備しておくことをピックアップしました。
ここで紹介する内容を事前に用意しておくことで、作成が格段にスムーズになり、ホームページを見に来る人にとっても見やすくわかりやすい構成になります。

1. ホームページのテーマを決める

まずは作成するホームページのテーマや目的を書き出してみましょう。
最初に考えておくことで、作成中に迷った時などテーマや目的をもとに方向性を決めやすくなります。

次の例のように、箇条書きで充分ですが、飲食店や病院、ミュージシャンなど取り扱っているジャンルによって大きく変わるところです。

• 集客をしたい
• 認知度をあげたい
• お客さんとコミュニケーションしたい

2. ホームページを見に来る人をイメージする

続いて、ホームページを見に来る人をイメージしましょう。
年齢層やどんな情報を探している人なのか、お店や病院などのホームページであれば初めて訪れる人なのか常連さんなのかと、どんどん掘り下げていきます。

ここでイメージした内容は、ホームページのメニュー名を英語にするのか日本語にするのかや構成を考える際に役立ちます。

3. ホームページのつくり方を決める

次に、ホームページのつくり方を決めます。
冒頭の「ホームページの作り方には種類がある！作成方法を解説！」でも解説しましたが、ホームページのつくり方は以下のようにいくつかあります。

• ホームページ作成サービスを利用する
• ホームページ作成ソフトを利用する
• レンタルサーバーを借りて作る
• 制作業者に依頼する

それぞれの特徴や、かかるコストを調べ、自分に合った方法を見つけましょう。

つくり方	特徴	こんな方におすすめ	かかるコスト
ホームページ作成サービス	簡単、手軽 ブログを書く感覚で完成	HTMLの知識がない とにかく手軽につくりたい方	契約費用
ホームページ作成ソフト	ソフトの操作方法を覚える必要がある ファイルをサーバーにアップロードする必要がある	ソフトの操作に慣れている HTMLがなんとなくわかる	ソフト購入費用 サーバー契約費用
レンタルサーバー	HTMLが得意であれば、自由にカスタマイズできる	HTMLファイルはつくれる WordPressを使いたい	契約費用
制作会社に依頼	費用の許す限り、おまかせできる	なにもかもわからない	会社へ支払う作成費用

▽「ホームページ作成サービス」「ホームページ作成ソフト」「レンタルサーバー」に関する記事
・ソフトがなくてもホームページは作れる！
・【初心者のための基礎知識】レンタルサーバーとホームページ作成サービスの違いとは？

4. ホームページのURLを決める

次に、ホームページのURLを決めます。最初に「テーマや目的」を決めたことで、このポイントがスムーズになります。ここで決めるのは独自ドメインとは違いますので、くわしくは以下をご覧ください。

ホームページのつくり方のうち、ホームページ作成サービスを利用する場合 も、レンタルサーバーを利用する場合 も「アカウント」などと呼ばれる URLになるもの を決めることになるでしょう。

例えば、ホームページ作成サービス「グーペ」を契約すると＜https://r.goope.jp/＊＊＊＞というURLになりますが、この「＊＊＊」部分がそれにあたります。

独自ドメインは設定せずに、このURLを使用する場合、ホームページを見に来る人がアクセスしたり検索結果に表示されるものになります。個人のニックネームなど適当なものにはせず、店舗の名前や「テーマや目的」に添ったものにすることで「何のホームページなのか？」が伝わりやすくなります。

5. 構成（メニュー）を決める

最初に洗い出した「ホームページのテーマ」や「ホームページを見に来る人」をもとに、ホームページに掲載するメニュー名と内容を決めます。
最初から細かく設定しようとすると行き詰まってしまうことがあります。まずは大枠を決めて、少しずつ具体化していくと良いでしょう。
扱うジャンルによって異なるため一例ですが、次の表のようなイメージです。

メニュー名	掲載する内容
お知らせ	お知らせを発信する
スタッフ紹介	スタッフを紹介する
アクセス・駐車場	店舗の場所をGoogleマップで表示する
予約	予約を受け付ける
お問い合わせ	お問い合わせを受け付ける

ホームページ作成に役立つHTML

この項目では、実際にホームページを作る時に知っていると便利なHTMLを紹介します。
どのホームページ作成方法を選ぶか、どのサービスを選ぶかによって、HTMLの使用箇所は様々かと思いますが、中でもよく使うものをピックアップしました。実際に作業する際に見ていただくと、理解度が高まりそうです。

■ リンクをはる

リンクとは、ホームページのあるページから異なるページに遷移する記述方法です。
2つのページ「ページA」から「ページB」に遷移する方法についてご説明します。

リンクをはるのに使用するHTMLタグはこちらになります。

<a href="">リンクテキスト</a>

「ページA」から「ページB」に遷移するには、「ページA」内に以下のような記述をします。「ページB」がどこに置かれているかによって記述が変わります。うまくリンクされない時などは、http://～やhttps://～からはじまるすべてのURLを記載してみるとよいでしょう。

<a href="ページBのURL">リンクテキスト</a>

さらに、リンク先を今表示しているウィンドウとは別ウィンドウで表示したい時は、次のような記述を加えることで可能です。別ウィンドウで表示することで「今表示しているウィンドウ」からの離脱を防げるメリットがあります。

<a href="" target="_blank" rel="noopener noreferrer">リンクテキスト</a>

■ 画像を表示する

ホームページ内の画像は、実はこんな記述をもとに表示されています。

<img src="http://〜画像URL〜">

画像をどこにアップロードされているかによって「～画像URL～」の記述が変わります。うまくリンクされない時などは、http://～やhttps://～からはじまるすべてのURLを記載してみるとよいでしょう。

また、画像を表示するタグを意識して見てみると、次のようなaltという記述を見かけるかと思います。

<img src="http://〜画像URL〜" alt="">

こちらは画像の説明を記述するもので、altを設定することで次のようなメリットがあります。

• 画像が表示されない、画像の読み込みが遅いときに、altに設定したテキストが表示される
• Google検索などの画像検索で画像の内容について伝えることができ、SEO効果が高まる
• ホームページの画像を見ることができないユーザーに情報を提供できる

▽Googleの公式情報となる「Google 画像検索でのおすすめの方法」でも、alt属性（代替テキスト）がないケースを悪い例として紹介しています
Google検索セントラル – Google 画像検索でのおすすめの方法

作成したホームページをよりよくする

ホームページが完成したら、「もっと多くの人に見てもらいたい！」「もっと見た目をきれいにしたい！」という気持ちが湧いてくるでしょう。この「お役立ち記事」では、完成したホームページをよりよくする ための記事が多数公開されていますので、次の5つに分けて紹介します。

• ホームページを表示する独自ドメインを決める
• デザインを考える
• ホームページを装飾する
• SEO
• SNSアカウントを充実させる

■ ホームページを表示する独自ドメインを決める

まず最初に、「独自ドメインってなんだろう？」という方へ。
ドメインは、よく「インターネット上の住所」と例えられ、独自ドメインの取得と設定を行うことで、独自ドメインのURLにアクセスした時にホームページが表示されるようになります。

テーマに合ったもの、わかりやすいものなど、ホームページのイメージが伝わるドメインになっているかどうかは、検索結果や訪問数に影響を与えます。

▽独自ドメインに関する記事
・【失敗しない！ドメイン選び】オリジナルのURLでアピールしよう！
・【人が集まるサイトの常識！？】独自ドメインを取得してみよう！

■ デザインを考える

どのような方法でホームページを作成するかによって、あらかじめ用意されたデザイン（テンプレート）であるか、自分で設定する必要があるかなど異なってくるかと思いますが、ホームページの内容に合ったデザインにすることは重要なポイント です。

【見た目が9割！】ホームページのデザインを選ぶコツ という記事の中でも「食べ物をおいしく見せるテンプレート」「お店の雰囲気に合うテンプレート」「商品を引き立たせるテンプレート」などをピックアップしてご紹介しているので、ぜひ参考にしてみてください。

また、PCだけではなくスマートフォンやタブレットでも最適化されて表示されるよう考慮が必要です。

■ ホームページを装飾する

ホームページを彩る方法として、罫線などの無料素材を使った装飾方法があります。前述した、画像を表示する方法で手軽に雰囲気を変えられるので、ホームページの更新が止まっている感を払拭したい時などにもおすすめです。

▽ホームページの装飾に関する記事
・無料で使える♪飾り罫線素材を活用してホームページの印象を簡単に変える方法
・【商用利用可・おしゃれ】サイト運営者必見！フリーイラスト素材サイト5選

■ SEO

作成したホームページが、検索結果でより上位に表示されるように対応を行うことを「SEO」と言いますが、具体的に何をすればいいんだろう？という方は少なくないのではないでしょうか。

この「お役立ち記事」でも、SEOに関する記事がよく見られているので、SEOを意識されている方や何をしたらよいか探している方が多いことがうかがえます。

▽SEOに関する記事
・ホームページを作成したらまず始めに行いたいSEO３つ
・【基本のSEO】効果的な「title」「meta description」の書き方
・キーワードだけじゃない！地図情報によるホームページSEO
・HTTPS接続（SSL通信）と、そのメリットを徹底解説！サイト管理者は何をすればいい？

■ SNSアカウントを充実させる

Twitter、Facebookページ、Instagram、LINE@とSNSとよばれるツールをうまく活用することで、SNS上だからこそ知り合えた層にホームページの存在をアプローチできたり、拡散につながるなどメリットがたくさんあります。

▽SNSアカウントに関する記事
・【保存版】初心者でもできる！Facebookページの作り方
・【保存版】SNSを活用しよう！【Twitter編】
・【初級編】今からでもはじめられる！Instagramの基本の使い方

---

以上をふまえて、実際にホームページを作成してみると扱うジャンルごとに様々なデザインのホームページが仕上がります。それは、ホームページの目的や見に来る人の年齢層、性別がジャンルによって異なるためです。見に来る人にとってわかりやすいメニュー名にすること、知りたい情報にたどり着きやすい構成にすることが大切です。

ジャンルごとのホームページ作成方法 解説一覧

この「お役立ち記事」では、病院やサロン、音楽などの各ジャンルごとのホームページの作り方を解説しています。歯医者や整骨院のホームページでは、施術を行うスタッフの顔写真を掲載することで患者さんの安心感につながりますが、ミュージシャンのホームページでは、ミステリアスな写真でもよかったりと、ジャンルごとにポイントが異なります。下記にまとめましたので、ぜひ参考にしてみてください。

自由なレイアウトでページを作成できるフリーページ機能を使って、初めてのお客様へ予約〜来店〜施術完了までをご案内する方法を解説しています。フォトアルバムを使って実績をまとめ、デザイン集として見せることも可能です。

顧客の層を把握したうえでホームページのデザインやメニューの配置を決めることが大切です。サロンを一人で運営している場合にもスムーズに更新できる方法を解説しています。

TwitterやFacebookなどのSNSをホームページに集約する方法を解説しています。選んだテンプレートによるイメージの違いも紹介しています。

診療時間の表を作成する方法を解説しています。幅広い年齢層の人が通うジャンルでは、どの人にとってもわかりやすいメニュー名にするのがポイントです。

保険診療と自由診療の違いや、国家資格の記載など患者さんが必要としている情報を適切な場所に掲載するための構成の組み立て方について解説しています。ホームページのフォントを変更することで、信頼感がアップする例も紹介しています。

「医療広告ガイドライン」の規制の対象にならないホームページの作成方法を解説しています。Googleが提供する無料ツール「Googleマイビジネス」を利用したSEOについても紹介しています。

YouTubeで試聴できるページやCDを購入できるページを作成する方法を解説しています。プロフィールでは多くを語りすぎず少々ミステリアスにしたり、写真の顔がはっきりと写っていなくても、それが世界観を表現する手段になります。

入園案内や同意書、申込用紙など提出してもらう書類を、ホームページからダウンロードできるようにする方法を解説しています。イベント予約機能を使って「園の見学予約」ページを作成することも可能です。

メンバーや保護者だけが見られる合言葉付きのページを作る方法を解説しています。メンバーの顔写真や詳しい集合場所など配慮が必要な情報は限られた人だけが閲覧できることで、保護者の安心感が増すのではないでしょうか。

お客さまが他の旅館・ホテルと比較する要素になるため、ホームページに掲載する写真はとても大切。写真の準備や配置を考える手順、写真を調整する際のポイントを解説しています。

ホームページの項目名を寺院・神社に合わせた内容に変更する方法を解説しています。結婚式やテンプルモーニングの予約をホームページで受付けるなど、新しい時代に合わせた取り組みも紹介します。

ホームページで相談予約を受け付ける方法を解説しています。「グーペ」をご利用になっている行政書士のホームページを抽出して、どのような内容を掲載しているかも調べてみました。

今後も様々なジャンルをピックアップする予定です。取り上げてほしいジャンルがありましたら、「グーペ」のお問い合わせフォームよりお気軽にご連絡ください。
いずれもHTMLなどの難しい知識は不要なため、これからホームページを作る方、作ったものの「これでいいのかな」「不足している情報はないかな」とお悩みの方の手引きになれば幸いです。

ホームページをつくってみる方はこちらから

▼関連記事
・ 【初心者のための基礎知識】レンタルサーバーとホームページ作成サービスの違いとは？
・ ソフトがなくてもホームページは作れる！
・ 5分で理解できる！インターネット用語集【保存版】