ホームページの作り方・基本
もくじ
【概要編】Webサイト・ホームページを作成する3つの方法
ホームページを作成する3つの方法には、大きく以下の3つの方法があります。
- WordPressなどのソフトを利用する方法(レンタルサーバー契約が必要)
- HTML・CSSなどのコードを書いて作成する方法(レンタルサーバー契約が必要)
- Wix・Jimdoなどのクラウド型のホームページ作成サービスを利用する方法
【方法1】WordPressなどのソフトを利用してサイト作成する方法
１つ目は、WordPress(ワードプレス)などのソフトウェア(CMS)を利用してホームページを作成する方法です。
| 項目 | 内容 |
|---|---|
| 名称 | WordPress(ワードプレス) WORDPRESS ORG 日本語サイト |
| 概要 |
WordPressは世界・日本共にシェアNo1のホームページ作成ソフトウェア(CMS)です。オープンソースで自由度の高さが圧倒的で小規模サイトから大規模サイトまで対応できます。 反面、営利企業が運営・サポートしているわけではないので、問い合わせ先やサポートデスクなどはない点が注意点。 |
WordPressは世界・日本共にシェアNo1のホームページ作成ソフトウェア(CMS)です。オープンソースで自由度の高さが圧倒的で小規模サイトから大規模サイトまで対応できます。
下記はWordPressのシェアですが、世界・日本共にダントツのNo1であることがわかります。
Usage Statistics and Market Share of Content Management Systems, October 2019より引用
WordPressは、レンタルサーバー＋独自ドメインを契約後、サーバーにインストールしてデザインテンプレート「テーマ」をを適用してサイトを作成する流れが一般的です。
■WordPress テーマ 追加画面
デメリットとしては、営利企業が運営・サポートしているわけではないので、自作する場合問い合わせ先やサポートデスクなどはなく、定期的な更新・保守管理が必要である点が挙げられます。
【方法2】HTML・CSSなどのコード書いてサイト作成する方法
2つ目の方法は、世間一般で言うプログラミング言語のようなものを自分で記述してWebサイトを作成する方法になります。
| 項目 | 内容 |
|---|---|
| 名称 | HTML・CSSなどのコード書いて作成する方法 |
| 概要 | 【特徴】HTMLやCSS、Javascriptなど、世間一般で言うプログラミング言語のようなものを自分で記述してWebサイトを作成する方法 |
HTMLでは、<html>のような『タグ』と言われるかたまりを使って文章や画像を加えたり、リンクを貼ることができます。
たとえば、下記のようなシンプルなHTMLを作成してWebページを作成します。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Hello World!!</title> </head> <body> <p>こんにちは 僕の(私の)ホームページ!!</p> </body> </html> |
上記のHTMLファイルを契約したサーバーにファイル転送ソフトなどを使ってアップロードします。
Webブラウザで指定のURLでアクセスすると作成した内容をホームページとして閲覧することができます。
このようにHTMLファイルなどを自分で作成してサーバーにアップロードすることでホームページを作ることができます。
HTML・CSSで作る静的サイトとWordPressなどのCMSの違い
HTML・CSSでサイトを構築するサイトを静的サイトと言います。静的サイトはページ数の少ないサイトやランディングページなどに向いています。
一方、WordPressなどのCMSを利用したサイトはコンテンツ量が多いコーポレートサイトやメディアサイト、ブログなど日々、更新作業が発生するサイトに向いています。
CMSを利用したホームページは、基本的に更新作業は管理画面から行いますので、専門知識がなくてもある程度は日々の更新が可能です。
| HTML・CSSなどの静的サイト | WordPressなどのCMS | |
|---|---|---|
| 用途 | 少ないページ数のサイトやLPに適している | 中規模以上、更新の多いのサイトに適している |
| 作成・更新方法 | HTML・CSSで作成・更新する | 管理者用のページから作成・更新する |
| 注意点 | HTMLやCSSを知っていないと更新・修正することができない。 | ソフトウェアのバージョンアップなどの管理が必要 自在にカスタマイズしようと思うとプログラミングやソフトウェア仕様の知識が必要 |
【方法3】クラウド型のホームページ作成サービスを利用してサイト作成する方法
3つ目は、クラウド型のホームページ作成サービスを利用して自作する方法です。
■簡単＆機能も豊富で人気のある「Jimdo(ジンドゥー)
」
| 項目 | 内容 |
|---|---|
| 名称 | クラウド型のホームページ作成サービスを利用する方法 |
| 概要 | レンタルサーバーンを契約を意識しなくても、SNS開設のようにアカウント登録・Webブラウザ上でドラッグ＆ドロップでサイト作成が可能。 |
レンタルサーバーンを契約を意識しなくても、SNS開設のようにアカウント登録・Webブラウザ上でドラッグ＆ドロップでサイト作成が可能です。
有名なホームページ作成サービスとしては、「Jimdo(ジンドゥー)」、「Wix(ウィックス)」、「ペライチ」などがあり、営利企業が運営しているサービスになります。
■世界中で1億人が利用しているので有名なWix(ウィックス)
■一枚のランディングページ(ペラページ)に特化したペライチ
上記のようなホームページ作成サービスを利用する場合は、ドメイン取得、サーバー契約などをそれぞれ意識せずに全てWeb上からまとめてホームページを作ることも可能です。
(※)実際にはサーバーやドメインを利用していますが、利用者はあまり意識しなくても利用できます。
営利企業が運営しているサービスのため一定の範囲内で問い合わせなどのサポートがある一方、デメリットとしてはサービスの仕様上自由度はある程度制限され、中〜大規模サイトには不向きであったり、複数サイト運用したい時に複数契約必要気費用が割高になる点が挙げられます。
【事前準備】サーバーとドメインを契約・取得する
ここからは、レンタルサーバー＋独自ドメインの形式でWordPressでホームページを作成する方法を説明していきます。
ホームページを作るために、まずはWebサイトの入れ物となる建物「サーバー」や「ドメイン」を準備する必要があります。
まずはじめに、ホームページ・Webサイトを開設するためには「サーバー」と「URL(ドメイン)」、「ホームページ(中身)」が必要になることをおさえておきましょう。
- サーバー：インターネット上の建物・部屋のようなもの
- ドメイン：インターネット上の住所のようなもの
- ホームページ(中身)：建物・部屋の中にあるコンテンツ・サービスのようなもの(文章や画像などで構成されるファイル類)
指定の住所(ドメイン)に行ったら建物(サーバー)があって、その中に入ったら中身がある(例. 飲食店なら飲食のサービスなど)」というようなイメージをするとわかりやすいと思います。
- レンタルサーバー会社からサーバーを借りる
- ドメインサービス会社からドメインを取得する
- サーバーに中身(ホームページ)を構築する
【ステップ1】レンタルサーバー会社でサーバーを契約する
まずはWebサイトの入れ物となる建物「サーバー」を準備する必要があります。
現実世界で、「一戸建て」、「ワンルームマンション」、「寮・シェアハウス」といったタイプがあり、広さや設備によって価格がピンキリであるのと同様に、サーバーもいくつかのタイプがあり価格もピンキリです。
いくつかのタイプがありますが、個人が初めてホームページを持つ場合は「レンタルサーバー会社」で「レンタルサーバー」を契約するのが一般的です。
レンタルサーバーも複数のプランがあり価格もピンからキリですが、個人向けだとおおよそ月額500〜1,000円くらいが一般的です。
(参考)【レンタルサーバーとは】仕組みや種類・特徴を徹底解説」
レンタルサーバーを提供している会社として、「エックスサーバー」「ロリポップ」や「さくらのレンタルサーバ」などがシェアが多く有名です。
■2022年日本のサーバー会社のシェア(1位エックスサーバー 2位ロリポップ 3位さくらインターネット)
世界のウェブホスティング市場シェア | HostAdviceより引用
この他にも勉強用なら、制限付きですが、XFREEやXREAといった無料のレンタルサーバーもあります。
【ステップ2】独自ドメインを取得する
サーバーを用意すると同時に、インターネット上の住所に当たるドメインも取得する必要があります。
レンタルサーバーを契約した直後は、初期ドメインというレンタルサーバーのサブドメイン(xxxx.xsrv.jpや、xxxx.sakura.ne.jp、xxxx.lolipop.jpなど)が利用できます。
このサブドメインは実際のビジネス・ブログには不向きです。将来的にそのままビジネスで長く使う可能性がある場合は、自分専用のドメイン(独自ドメイン)も準備する必要があります。
ドメイン名は後から変更できず、訪問者に直接見える内容でSEOにも影響しますのでとても重要です。
本サイトの場合は「webst8.com」が独自ドメインです。
なお、「.com」の部分をトップレベルドメインといいます。「.com」の他にも「.net」や「.info」など数多くの種類があります。
独自ドメインは、「xxxx(自分の欲しい名前)」×「トップレベルドメイン」の組み合わせからどれにするかを選ぶ形になります。
今はその意味が薄くなりましたが元々は「.com」は商用、「.net」はネットワーク関係を意味しています。法人の場合は「co.jp」を取得することもできます。
■代表的なトップレベルドメインと語源
| ドメイン名 | 主な意味 | 備考 |
|---|---|---|
| .com | 商業・商用用途で世界的に広く使用されています。 | 語源はcommercial（商業・商用） |
| .net | オンラインビジネスや起業によく利用されます。 | 元々はネットワーク関係を意味しています。 |
| .org | 非営利団体でよく使用されます。 | organization(組織) |
| .info | 情報提供のホームページでしばしば使用されます。 | 2001年10月1日運用開始 |
| .biz | 商用のドメインで企業に使用されることがあります。 | 2001年5月21日受付開始 |
| .jp | 日本国内にいる人間しか取得できないるドメイン | |
| .co.jp | 法人用ドメイン | 法人登記資料などの提出が必要 |
どれにするべきか悩んでいる場合は、とりあえず「.com」を選んでおくと無難でしょう。
また、ドメイン名はSEO的にはホームページのコンセプトに近い名前をドメイン名に含めるのが良いとされています。たとえば、健康関係のホームページなら「health」という単語、色関係なら「color」、カフェ関係なら「cafe」などの単語をドメイン名に含めると良いです。
他には、ブロガーさんで自分の名前をブランディングしていきたい場合は自分の名前をドメイン名にする場合もありますし、コーポレートサイトであれば会社名をドメイン名にするのが一般的です。
■以下はGoogleが出す推奨のドメイン名のケーススタディですので参考にしてみてください。
なお、最近のレンタルサーバーでは、複数のドメインを一つのレンタルサーバーに設定できることが多いです。二つ目のドメインを利用したい場合でも、必ずしも新しくレンタルサーバーを契約する必要はありませんので、覚えておきましょう（なお、ドメイン代は一個ずつ費用がかかります）。
独自ドメインを取得する方法
トップレベルドメインが「.com」や「.net」の独自ドメインを取得する場合、おおよそ年額1,000〜2,000円程度の取得・更新費用がかかります。
レンタルサーバー会社がエックスサーバーであれば、そのままエックスサーバーで独自ドメインを契約することができます。
ロリポップであれば同じ会社のドメイン専用サービス「ムームードメイン」から、さくらインターネットであればそのままさくらインターネットで独自ドメインを契約することができます。
以下は、ムームードメインで独自ドメインを取得する場合の画面です。
上記のように、取得したいドメインを入力して検索→カートに追加をして取得手続きを進めていきます。すでに誰かが取得済みのドメインは取得できません。
会社によりキャンペーンなどで数百円〜千円程度の取得費用の違いはありますが、初めてホームページを自分で作る場合は、契約した会社でドメインを取得したほうが設定が簡単でおすすめです。
(参考)独自ドメインとは。取得するメリットや取得方法を解説
WordPressをインストールしてサイトを作成する
これでレンタルサーバーの契約とドメインの登録が完了してWebサイトを構築する準備が整いました。
家に例えると今はマンションを契約直後の状態で家具も何もない状態です。
この中にWordPressをインストールしてサーバー(建物)の中にホームページ(中身)を作成していきます。
最近では、WordPressを簡単にインストールできるように多くのレンタルサーバーで用意されています。
■以下はロリポップの管理画面から実施できるWordPress簡単インストール機能です。
まとめ
まとめです。今回はホームページを自分で作りたい初心者の方向けにホームページの作り方について説明しました。
ホームページを作成するために必要なもの
- サーバー：インターネット上の建物・部屋のようなもの
- ドメイン：インターネット上の住所のようなもの
- ホームページ(中身)：建物・部屋の中にあるコンテンツ・サービスのようなもの(文章や画像などで構成されるファイル類)
サーバーとドメインを取得したのち、中身となるホームページを制作していきます。WordPressなどのソフトウェアを利用することで、最近では個人でもホームページやブログが手軽に作成できるように環境が整ってきています。