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

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

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

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

ホームページをつくる前に

ホームページをつくる前に、準備しておくとよいことをピックアップしました。

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

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

人の数だけ、ホームページのカラーや目的があるので、ざっくりとで大丈夫です◎
例をあげると、こんな感じです。

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

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

次に、ホームページのつくり方を検討します。 ホームページのつくり方は、以下のようにいくつかあります。

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

それぞれの特徴や、かかるコストを見てみましょう。
※それぞれの作り方は「ホームページをつくる（作成方法を選ぶ編）」項目で後述しています。

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

3. URLを決める

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

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

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

このURLを「テーマや目的」に添ったものにすると、ホームページを閲覧する人や検索する人にも「なんのホームページなのか？」が伝わりやすくなります。

ホームページをつくる（作成方法を選ぶ編）

この項目では、実際の作り方をご説明していきます。
どの方法でホームページを作るか？によって変わり、ひとつの方法を選んですすめることになります。

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

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

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

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

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

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

「HTMLファイル」や「CSSファイル」をアップロードする先になります。
「ホームページ作成ソフトで作成したファイル」について前述しましたが、HTMLやCSSを書く知識がある場合は、ソフトを使用しなくても作成したファイルをアップロードすることが可能です。

なお、ファイルをアップロードする際に使用するFTP機能について、別途用意する必要があるのか、レンタルサーバーサービスに付属しているのかなど、調べておく必要があります。

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

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

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

ホームページをつくる（実践編）

この項目では、実際にホームページを作る時によく使うHTMLタグをピックアップしました。実際に作業する際に見ていただくと、より理解度が高まりそうです。

■ リンクをはる

リンクとは、ホームページのあるページから異なるページに遷移する記述方法です。
「HTMLファイル」を2つ用意し、「HTMLファイル（A.html）」から「HTMLファイル（B.html）」に遷移する方法についてご説明します。

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

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

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

<a href="B.html">リンクテキスト</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の公式情報となる「Search Consoleヘルプ」でも、alt属性は重要 との記載があります。
Search Consoleヘルプ – 画像と動画「優れた代替テキストを作成する」

ホームページをよりよくする

ホームページが完成したら、もっと多くの人に見てもらいたい！もっと見た目をきれいにしたい！という気持ちが湧いてくるでしょう。続いては、完成したホームページをよりよくする方法 をご案内します。

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

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

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

■ デザインを考える

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

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

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

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

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

■ SEO

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

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

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

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

---

いかがでしたか。これからホームページを作る方、つくったものの…なにかにお悩みの方の手引きになれば幸いです。

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