- カテゴリー: ホームページ作成
- 2017年4月3日 月曜日
【初心者向け】ホームぺージの作り方を簡単に解説!自作する方法とは?

ホームページを作りたい!と思った時。
「なにからはじめれば…」
「自分で作るのにお金も時間もどれくらいかかるんだろう…」
「なんだかハードルが高そう…」
と、まず立ち止まってしまうケースは多いのではないでしょうか。
わたし自身もはじめてホームページを作った時は、なにも知識がないままレンタルサーバーを契約し、見ようみまねでHTMLを書き、リンクをひとつ貼れただけで「できたー!」とよろこんだことを思い出します。
今回は ホームページを作ろう!作ってみよう!と思い立った方へ、ヒントになる情報を集めました ので、ぜひご活用ください。
・ホームページをつくる前に
・1. ホームページのテーマを決める
・2. ホームページの作り方を決める
・3. アカウント・URLを決める
・ホームページをつくる(作成方法を選ぶ編)
・ホームページ作成サービスでつくる
・ホームページ作成ソフトを利用してつくる
・レンタルサーバーを契約してつくる
・制作会社に依頼してつくる
・ホームページをつくる(実践編)
・リンクをはる
・画像を表示する
・ホームページをよりよくする
・ホームページを表示する独自ドメインを決める
・デザインを考える
・装飾する
・SEO
・SNSアカウントを充実させる
ホームページをつくる前に
ホームページをつくる前に、準備しておくとよいことをピックアップしました。
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を意識されている方や何をしたらよいか探している方が多いことがうかがえます。
・ホームページを作成したらまず始めに行いたいSEO3つ
・【基本のSEO】効果的な「title」「meta description」の書き方
・キーワードだけじゃない!地図情報によるホームページSEO
・HTTPS接続(SSL通信)と、そのメリットを徹底解説!サイト管理者は何をすればいい?
■ SNSアカウントを充実させる
Twitter、Facebookページ、Instagram、LINE@とSNSとよばれるツールをうまく活用することで、SNS上だからこそ知り合えた層にホームページの存在をアプローチできたり、拡散につながるなどメリットがたくさんあります。
・【保存版】初心者でもできる!Facebookページの作り方 ・【保存版】SNSを活用しよう!【Twitter編】 ・【初級編】今からでもはじめられる!Instagramの基本の使い方
いかがでしたか。これからホームページを作る方、つくったものの…なにかにお悩みの方の手引きになれば幸いです。
その他の関連記事
-
【2021年1月】グーペの機能改善まとめ
ホームページ作成サービス「グーペ」で、2021年1月に行った機能改善をお知らせします。 ... -
【事例つき】グーペスタッフが寺院のホームページ作成に挑戦
コロナ禍で人々の行動変容に伴い、寺院や神社のネット活用にも変化が起きています。ホームページ... -
大賞および各賞が決定!【グーペホームページ大賞2020】
「グーペ」で作成されたホームページの中から、優れているホームページを決定する『グー... -
【かんたん集客】Google検索やマップの店舗情報に予約リンクを設置する方...
みなさんは外出先でお店を探すときに、Google検索や地図アプリで「地域名」と「業態」を入... -
【2020年12月】グーペの機能改善まとめ
ホームページ作成サービス「グーペ」で、2020年12月に行った機能改善をお知らせします。 ... -
【グーペホームページ大賞2020】ノミネート20選を発表!
2017年よりスタートした 『グーペホームページ大賞』 ホームページ作成サービス「グーペ」...