【初心者向け】ホームページの作り方や高品質なサイトを作るポイントを解説!

【初心者向け】ホームページの作り方や高品質なサイトを作るポイントを解説!

本ページにはプロモーションが含まれています。

ビジネスを立ち上げたばかりであれば「ホームページが欲しいけど、外注するお金がない…。」といった方も多いのではないでしょうか?

そんな方はホームページを自作するのがおすすめです。

また、ホームページを自作することで制作過程を一通り体験するため、その後の運用方法も理解できるようになります。

今回は、ホームページの作り方や高品質なサイトを作るポイントを解説します。

Ryo

こんにちは!当サイト管理人のRyoです。
本記事では、現役フリーランスのWeb制作者・コーダーとして活動する僕が記事の執筆を担当しています。

目次

【事前知識】ホームページを作るのに必要なもの

サーバーとドメインを土地、住所に例えた図

まずは事前知識として、ホームページを作るのに必要なものを紹介します。

ホームページを作ってインターネット上に公開するには、「サーバー」と「ドメイン」が必要になります。

家(ホームページ)を作る際に必要な土地と住所が、サーバーとドメインだとイメージするとわかりやすいかと思います。

サーバー

サーバーは、インターネット上の「土地」のようなもので、ホームページのデータが格納されています。

サーバーは自分で構築することもできますが、膨大な費用や手間がかかるため、レンタルサーバー(サーバーを貸し出ししているサービス)を利用するのが一般的です。

レンタルサーバーは無料で使えるものもありますが、多くの場合は月額500〜1,500円程度の料金がかかります。

ドメイン

ドメインは、インターネット上の「住所」のようなものです。

同じドメイン名は存在しないようになっているため、あるドメインをブラウザのアドレスバーに入力すると、そのドメイン名と紐づいたサーバー上にあるホームページが表示されます。

ドメインにはいくつか種類がありますが、代表的なものには「⚪︎⚪︎⚪︎.com」や「⚪︎⚪︎⚪︎.jp」といったものがあります。

また、ドメインの種類によって異なりますが、大体年間1,000〜2,000円程度の維持費がかかることが多いです。

ホームページを自作する3つの方法

ホームページを自作する3つの方法

ホームページを自作する方法は大きく3つあります。

以下では、それぞれの方法の難易度やメリット・デメリット、実際の流れなどを簡単に紹介します。

ホームページを自作する3つの方法
  1. WordPressを使って自作する [難易度: 3]
  2. HTML・CSSを使って自作する [難易度: 5]
  3. ホームページ作成サービスを使って自作する [難易度: 1]

1. WordPressを使って自作する [難易度: 3]

スクロールできます
難易度
メリットWebスキルが必要ない

選びきれないほどたくさんのデザインテンプレートが使える

カスタマイズ性が高い

WordPress自体は無料で使える
デメリット本格的にカスタマイズしたい場合は専門知識がいる
自分でサーバーやドメインを契約する必要がある

定期的なアップデートをする必要がある
こんな方におすすめ手軽に運用しやすいWebサイトを開設したい方
簡単な流れ1. サーバー、ドメインを契約する
2. サーバーにWordPressをインストールする
3. WordPressのテーマを選択する
4. WordPressの管理画面からカスタマイズを進めていく

1つ目は、WordPressを使って自作するという方法です。

WordPressとは、WEB専門知識がない初心者でも簡単にWEBサイトの作成や運用・更新ができるソフトウェア「CMS」の一種。世界のCMSシェアランキングでは、断トツでトップのシェアとなっており、世界中のウェブサイトの約40%にWordPressが使われていると言われています。

世界のCMSシェアを示した図
引用:Usage Statistics and Market Share of Content Management Systems, September 2023

WordPressでは、高機能なデザインテンプレートを用いることで、Webの知識がなくてもクリック操作のみで簡単に好きなデザインのWebサイトが作成できます。

また、プラグインをインストールすることで、簡単に機能を拡張できるため、運用面も考えてカスタマイズ性の高いWebサイトを作りたい方に向いています。

一方、WordPressにはサポート窓口がないため、何か問題があった場合は自分で調べて解決をする必要のある点がデメリットです。また、細かなところまで本格的にカスタマイズをしたい場合は専門的な知識が必要になります。

とはいえ、世界的なシェアが多い分インターネット上に情報が溢れており、高機能なテーマを使えば専門知識がなくてもかなりのカスタマイズができるため、迷っている方はWordPressを使ってホームページを作る方法が最もおすすめです。

WordPressを使ったホームページ自作の流れは以下の通りです。

WordPressでの自作の流れ・手順

STEP
サーバー、ドメインを契約する

まずは、サーバーとドメインの契約をしましょう。

多くの場合サーバーを契約する際に、セットでドメインの契約ができる場合が多いので、特別な理由がない限り、同じサービスを利用するのがおすすめです。

また、サーバーによっては、ある一定期間のサーバー契約を結んでいると独自ドメイン(独自に登録しているドメインのこと)の永久無料特典が付いてくる場合があります。

STEP
サーバーにWordPressをインストールする

次にサーバーにWordPressをインストールしましょう。

レンタルサーバーによっては、サーバーの管理画面から1クリックで簡単にWordPressをできる機能が用意されています。

X serverの管理画面
大手レンタルサーバー「X server」のサーバーパネル
STEP
WordPressのテーマを選択する

WordPressがインストールできたら、WordPressのテーマ(デザインテンプレート)を選択しましょう。

WordPressの公式ディレクトリに登録されている無料テーマであれば、WordPressの管理画面から簡単にインストールすることが可能です。

WordPressのテーマインストール画面

また、公式ディレクトリに登録されていない無料テーマや有料テーマの場合は、外部サイトからzip形式のファイルをインストールしてきて「テーマのアップロード」からアップロードすることができます。

公式ディレクトリに登録されていない無料テーマや有料テーマの場合は「テーマのアップロード」からアップロード
STEP
WordPressの管理画面からカスタマイズを進めていく

WordPressのテーマのインストールが終わったら、あとはWordPressの管理画面からサイトのカスタマイズを行なっていきましょう。

新たにページを追加したい場合は「固定ページ>新規追加」から追加していくことができます。

固定ページ>新規追加

また、ロゴやレイアウトの変更、その他デザインのカスタマイズをしたい場合は、基本的には「外観>カスタマイズ」から操作を行なっていきます。

外観>カスタマイズ

なお、カスタマイズできる項目は使用しているテーマに依存します。

2. HTML・CSSを使って自作する [難易度: 5]

スクロールできます
難易度
メリット細かなところまで自由にカスタマイズができる

セキュリティリスクが低い

ページの表示スピードが早い
デメリット必要最低限の専門スキルを身につける必要がある

自分でサーバーやドメインを契約する必要がある

サイトの更新が面倒
こんな方におすすめWeb制作スキルを身に付けたい方
簡単な流れ1. サーバー、ドメインを契約する
2. 必要なファイルを作成・準備する
3. FTPソフトを使ってサーバーにアップロードする

2つ目は、HTML・CSS を使って自作するという方法です。

HTMLはHyper Text Markup Languageの略で、テキストや画像、音声、動画などのコンテンツの表示や、各コンテンツの役割を示すのに使用されます。

一方、CSSはCascading Style Sheetsの略でHTMLで挿入したコンテンツのスタイルを整えるために使用されます。

HTMLのみで作った場合
HTMLのみで作った場合(架空ウェブ制作会社のホームページ)
HTML・CSSで作った場合
HTML・CSSで作った場合(架空ウェブ制作会社のホームページ)

この方法では、細かなところまで自分でコードを書いてカスタマイズできるため、自由度が高いのがメリットです。

また、HTML・CSSのみで作成されたサイトは、WordPressのようなCMSと異なり、サーバー側でのページ生成処理が不要。そのため、ページの読み込みスピードが早く、動的なコンテンツ管理やデータベースのクエリがないため、セキュリティリスクも低くなります。

しかし、この方法では最低限のWebスキルを身につけなければならないため、Web制作を仕事にしたいと考えている方以外にはおすすめしません。

HTML・CSSを使ったホームページ自作の流れは以下の通りです。

HTML・CSSでの自作の流れ・手順

STEP
サーバー、ドメインを契約する

まずは、サーバーとドメインの契約をしましょう。

作成したHTML・CSSファイルをオンライン上で見られる状態にするには、後ほどFTPソフトを使ってサーバーにアップロードする必要があります。

STEP
必要なファイルを作成・準備する

次に、必要なファイルを作成・準備しましょう。

HTML・CSSファイル以外にも、画像をサイトに挿入する場合は画像ファイルが、サイトに動きを加えるなどをしたい場合はJavaScriptファイルが必要になります。

ホームページ作成に必要なファイル類
  • HTMLファイル ・・・ テキストや画像、音声、動画などのコンテンツの表示や、各コンテンツの役割を示すのに使用されます。拡張子は「.html」
  • CSSファイル ・・・ HTMLで挿入したコンテンツのスタイルを整えるために使用されます。拡張子は「.css」
  • 画像ファイル ・・・ ページに使用する画像です。拡張子は「.jpg」「.png」「.svg」など様々。
  • JavaScriptファイル ・・・ 動的なWebページを作成するのに使用されます。

なお、HTML・CSSファイルの編集にはテキストエディターが使用されます。

有名なテキストエディターには、「Visual Studio Code」や「Atom」、「Brackets」などがあります。

STEP
FTPソフトを使ってサーバーにアップロードする

最後にFTPソフトを使って作成したファイル類をサーバーにアップロードしましょう。

ファイル類をサーバーにあげて始めて、インターネット上で見られる状態になります。

なお、有名なFTPソフトには、「FIleZilla」や「Cyberduck」などがあります。

FIleZillaの画面

3. ホームページ作成サービスを使って自作する [難易度: 1]

スクロールできます
難易度
メリットWebスキルが必要ない

別途サーバーやドメインの契約をする必要がない(独自ドメインを利用する場合を除く)

無料から始められる
デメリット自由にカスタマイズできない

サービスが終了するとホームページが消える可能性がある
こんな方におすすめ手軽にホームページを作ってみたい方

3つ目は、ホームページ作成サービスを使って自作するという方法です。

ホームページ作成サービスとは、あらかじめデザインテンプレートが用意されており、Webスキルがなくても直感的にホームページが作れるサービスのことを言います。

サービスが提供するホスティング環境にウェブサイトを公開することができるため別途サーバーを契約する必要がなく、サービス名が入った共有ドメイン(Wixの場合: 〇〇〇.wixsite.com)であればドメインの契約の必要もないため手軽に始められます。

また、ホームページ作成サービスの多くではお試しで始められる無料プランを用意しています。無料プランの場合、機能は限られますが、操作感を確かめることができるため、ある程度触ってみてから上位プランにアップグレードするといったことが可能です。

一方、ホームページ作成プランではカスタマイズに制限があり、サービスが終了するとホームページが消えてしまうといったデメリットがあります。

そのため、自由にカスタマイズができなくても手軽さを求める方はこの方法がおすすめです。

なお、有名なホームページ作成サービスにはWixやJImdo、ペライチやSTUDIOなどがあります。

無料で使えるホームページ作成ツールについては、以下の記事で詳しく解説しているので、興味がある方はこちらをあわせてご覧ください。

Wix
Jimdo

初心者でも質の高いホームページを作るには?

初心者でも質の高いホームページを作るには?

自分に合ったホームページの作り方が決まったら、質の高いホームページを作るためのコツ・ポイントを抑えておきましょう。

以下では初心者でも質の高いホームページを作るコツ・ポイントを4つピックアップしました。1つひとつ見ていきましょう。

初心者でも質の高いホームページを作る方法
  1. ホームページの目的やコンセプトを明確にする
  2. 質の高い画像・動画素材を準備する
  3. 競合他社のサイトを分析する
  4. 高機能なデザインテンプレートを利用する

1. ホームページの目的やコンセプトを明確にする

1つ目は、ホームページの目的やコンセプトを明確にするということです。

目的やコンセプトが明確になっていれば、サイト全体のデザインやコンテンツに一貫性をもたせることができます。

また、目的がはっきりしていると必要なコンテンツやその優先順位が決めやすくなるため、特に見てもらいたい情報に関しては、ホームページが開いた瞬間から見られる位置に配置しておくなどといった計画が立てられます。

2. 質の高い画像・動画素材を準備する

2つ目は、質の高い画像・動画素材を準備するということです。

質の高い画像・動画素材が使用されていれば、それだけでプロフェッショナルな印象を与えられます。

また、ユーザーに見てもらいたい情報を整理した画像・動画素材を用意することで、ユーザーの注意を惹きつけやすくなります。

ホームページのユーザビリティや信頼性を向上させるためにも、質の高い画像・動画素材の使用は効果的です。

3. 競合他社のサイトを分析する

3つ目は、競合他社のサイトを分析するということです。

初心者の方であれば「自社のホームページにどのようなコンテンツを入れたら良いかわからない」ということもあるかもしれません。

そういった場合、競合他社のホームページを分析することで、その業界ではどのようなコンテンツを取り上げれば良いかを参考にできます。

また、自社と差別化できるポイントを考えながら分析することで、自社独自のコンテンツやアプローチが考えられます。そのため、ホームページを作る際は、まず競合他社のサイトを詳しく分析してみるのが良いでしょう。

4. 高機能なデザインテンプレートを利用する

4つ目は、高機能なデザインテンプレートを利用するということです。

WordPressを利用している場合、使用しているデザインテンプレート(テーマ)によってカスタマイズできる幅が異なります。

作りたいホームページの全体像が見えたとしても、カスタマイズ性の低いテンプレートを利用していると、それを実現できないといったことになるかもしれません。

そこで、WordPressでホームページを作成しようと考えている方はなるべく高機能なデザインテンプレートを利用するようにしましょう。なお、会社ホームページ(コーポレートサイト)であれば「Swell」や「Arkhe」といったテーマがおすすめです。

ホームページの作り方に関するよくある質問

ホームページの作り方に関するよくある質問

1. Webの知識がない初心者におすすめの作り方を教えてください。

Webの知識がなく手っ取り早くホームページを作りたい方は、サーバー・ドメインがセットになったホームページ作成サービスがおすすめです。

ただし運用面も考えるのであれば、若干ハードルは上がりますがおしゃれなデザインテンプレートが豊富なWordPressを使って自作するのが最もおすすめです。

2. 将来的な運用面を考えた上で最もおすすめな制作方法は何ですか?

将来的な運用面を考えた上で最もおすすめな制作方法はWordPressを使って自作する方法です。WordPressであれば拡張機能を追加できるプラグインが豊富に存在しており、ブログ更新機能などもデフォルトで使えます。

3. 自分に合った制作方法を選ぶにはどうすれば良いですか?

「手軽さ」「予算」「カスタマイズ性」「サポート」といった観点から、自社にあった作り方を選択するのが良いでしょう。

  • 手軽さ第一 → ホームページ制作サービス、WordPress
  • 低予算第一 → いずれもとんとん
  • カスタマイズ性第一 → WordPress、HTML・CSS
  • サポート第一 → ホームページ制作サービス

まとめ・初心者でもホームページの自作は可能!

ホームページはインターネット上の会社の顔となる大切な要素です。

ホームページの出来の良さで、サービスの利用を検討する・しないを決めている方も少なくありません。

そのため、これからホームページを自作しようと考えている方は、ぜひ本記事の内容を参考に自社にあった作り方で高品質なホームページを作ってみてください。

なお、本記事では自作の方法にフォーカスして解説しましたが、最近では低予算で高品質なホームページを作ってくれるWeb系フリーランスも増えています。

そのため、若干予算がかかっても手軽に高品質なホームページを作りたい方は外注という選択肢も加えておくと良いかもしれません。

Ryo

サイト運営者の私もパッケージ料金のホームページ制作プランをご用意しているので、興味がある方はぜひチェックしてみてください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

【初心者歓迎】WordPress・Webに関する質問に何でもお答えします!

教えたいと学びたいをつなぐまなびのマーケット「ストアカ」にて、WordPress講座を開講しています。

  • WordPressのインストールのサポートをして欲しい・・・
  • レンタルサーバーとドメイン取得方法を教えて欲しい・・・
  • WordPressのバックアップ復元方法を教えて欲しい

など、WordPressやWeb制作に関することであればどんな質問でもOKです。

興味を持たれた方は、講座ページをチェックしてみて下さい。

著者情報

Ryoのアバター Ryo サイト運営者

当ブログを運営しております、フリーランスWebコーダーのRyoです。

元々はWebとは無関係の日本語講師をしていましたが、仕事をしながら旅をするWebエンジニアの男性と知り合い、「自分もこんな生き方をしたい」と感じ、その道を歩むことを決意しました。

人脈・実績0からの挑戦でしたが、泥臭くも約4年近くフリーランスとして生活しています。

目次