ホームページ作成「グーペ」 トップ » ホームページ作成お役立ち記事» ホームページ作成» ホームページ作成のヒントになる情報を集めました!

ホームページ作成のヒントになる情報を集めました!

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

わたし自身もはじめてホームページを作った時は、なにも知識がないままレンタルサーバーを契約し、見ようみまねで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">リンクテキスト</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にアクセスした時にホームページが表示されるようになります。

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

▽詳しい説明や手順は、以下の記事でもご案内していますので、ぜひご覧ください♪
【失敗しない!ドメイン選び】オリジナルのURLでアピールしよう!
【人が集まるサイトの常識!?】独自ドメインを取得してみよう!

■ デザインを考える

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

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

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

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

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

▽以下の記事でもご案内していますので、ぜひご覧ください♪
無料で使える♪飾り罫線素材を活用してホームページの印象を簡単に変える方法
【商用利用可・おしゃれ】サイト運営者必見!フリーイラスト素材サイト5選

■ SEO対策

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

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

▽SEO対策に関する記事をピックアップしましたので、ぜひご参考ください♪
ホームページを作成したらまず始めに行いたいSEO対策3つ
【基本のSEO】効果的な「title」「meta description」の書き方
キーワードだけじゃない!地図情報によるホームページSEO対策
HTTPS接続(SSL通信)と、そのメリットを徹底解説!サイト管理者は何をすればいい?

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

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

▽たくさんあるSNSアカウントについて、それぞれご説明しています!
【保存版】初心者でもできる!Facebookページの作り方
【保存版】SNSを活用しよう!【Twitter編】
【初級編】今からでもはじめられる!Instagramの基本の使い方



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


その他の関連記事