2022.05.18

初心者向けホームぺージ作成方法!CMSツール・HTMLを徹底解説

ホームページの自主制作は敷居が高いと思われがちですが、必ずしも専門的なスキルが必要なわけではありません。一方で専門的な知識を用いて0から作成したいと思っている方も、ホームページの基本的な仕組みや最低限求められる知識を把握することで、初心者でも十分に作成可能です。

そうはいっても、初めてのホームぺージ作成にあたって以下のような問題を抱える方も多いのではないでしょうか?

  • 初めて聞く専門用語が多くて難しそう
  • そもそも自分でホームページを作る方法を知らない
  • 費用感がわからない

本記事では、これらの問題を解決すべく、作成前に知っておきたい基礎知識やホームページを自作する方法、費用感を踏まえたおすすめツールの紹介を行っています。

ホームページ作成が初心者の方でも実際の作成フェーズへ移ることができるよう、わかりやすく解説しているので是非参考にして下さい。

ホームページはいくらで作れるの?
最短1分で料金シミュレーション!

「ホームページ作成の相場を知りたい」
「自分に合ったホームページを作ると、どれくらい料金がかかるのかな」
と、ホームページ作成の料金について知りたい!とお考えではないでしょうか。

そのような方には、無料で使えてオンラインで完結する
「料金シミュレーション」のお試しがおすすめです。

最短1分、カンタンな質問に答えるだけ!
もちろんその場で結果をご覧いただけます。
こちらから無料でお試しください。

【前提】作成前に知っておきたい!3つの基礎知識

ホームページを作成する前に、基本的な仕組みや構造を理解することが重要です。以下ではホームページの仕組みをはじめとして、作成時に必要なドメイン・サーバー、そしてホームぺージ運用について説明します。

1. ホームページの仕組み

ホームページが表示される仕組みは「クライアント」と「サーバー」によって成り立っています。クライアントは簡単にいえばホームページの閲覧リクエストを送信するユーザーです。

サーバーとは、ホームページのHTMLファイルを配置する土地のような役割をもつコンピュータを指します。ユーザーが閲覧したいホームページのURLをWebブラウザに入力すると、そのリクエストがサーバーに送信されます。

そして、URLのリクエストを受け取ったサーバーがドメイン名からIPアドレスを探し出すことで、ユーザー側のWebブラウザにホームページが表示されます。これがホームページが表示される基本的な仕組みです。

2. ドメインとサーバーの説明

ホームページを作成する上で不可欠な要素が2つあります。それが「ドメイン」と「サーバー」です。先述しましたが、サーバーは、ホームページのHTMLファイルを配置する土地のような役割をもつコンピュータを指します。ドメインは、端的にいえばホームページの住所です。

たとえば、すべてのホームページには「https://www.○○○○○.com/」という形式のURLが存在します。「https://」はスキーム、「www」はホスト、そして「○○○○○.com」の部分がドメインと呼ばれる要素です。

一般的にホームページはHTMLとCSSでマークアップされたファイルによって構成されており、サーバーという土地ににファイルをアップロードすることでWeb上に公開されます。そして、公開されたホームページを世界中のどこからでも特定できるようにする住所のような役割を果たすのがのがドメインです。

実際の住宅に土地と住所が必須なように、ホームページもサーバーという土地とドメインという住所が揃ってはじめて、あらゆるユーザーがアクセス可能な環境が構築されます。

ドメインの料金

ドメインの費用相場は年間で数百円~数千円です。特にこれといったこだわりがない場合には安価で提供されているドメインを含めて検討してみるとよいでしょう。

.com.jp.co.jp.net
平均金額1,408円1,628円4,158円1,628円
特徴商用サービスや企業向け日本を意味日本国内で登記を行っている会社向けネットワークに関するサービス向け
引用元:お名前ドットコム(https://www.onamae.com/service/d-price/

ドメインについてより詳しく知りたい方は以下の記事を参考にしてください。おすすめのドメイン登録サービスや、実際にドメインを取得する際の注意点などが記載されています。

サーバーの料金

最近では、多くのケースで低価格のレンタルサーバーが利用されています。レンタルサーバーの費用相場は会社によってさまざまですが、年間数千円~数万円の低価格で使えるレンタルサーバーもあります。ホームページの規模や用途に合わせて、プランを選定してください。

おすすめのレンタルサーバーを紹介しますので、是非比較してみて下さい。以下の表でおすすめのレンタルサーバーをいくつか紹介します。

エックスサーバーConohaWingロリポップミックスホスト
初期費用3,300円0円1,650円0円
月額費用1,100円~931円~550円~1078円~
サイトの表示速度
無料常時SSL化
バックアップと復元0円0円有料0円
※月額費用は契約期間12ヶ月で試算

3. ホームページの運用

ホームページについて、作成が完了すれば完成と思っている人が多いかもしれませんが、実は作成後にも必要なことがあります。それがホームページの運用です。作成したホームページを安全なサイトとして保ち続けるためには、最新の状態であり続けることが不可欠なので、ホームページを作成する前に確認しておくようにしましょう。ホームページ運用の主な内容は以下の5つです。

  1. サーバーやドメインの維持・管理

    ホームページを作成する上で不可欠な要素であるサーバーとドメインですが、ただ取得すればいいと言うわけではなく、実は定期的な更新が必要になります。更新を忘れたことによるホームページ運用の失敗事例も少なくありません。ホームページを運用していく場合には必ず確認するようにしましょう。

  2. SSLサーバー証明書の維持・管理

    SSLサーバーとは、ホームページ運営者の実在を確認するための仕組みです。通信を暗号化する役割も果たしており、インターネット上の情報取引を安心して行うためにも欠かせません。こちらもドメインなどと同様に更新が必要なので注意しましょう。

  3. CMSのアップデート

    本記事でご紹介するホームページ作成方法のひとつであるCMSを利用する場合、CMS自体のアップデートが極めて重要です。最新の機能を利用したり、適切なサポートを受けたりするためにも、CMSのバージョンアップの度に確認することをお勧めします。

  4. データのバックアップ

    データファイルやデータベースを含む全てのデータのバックアップは、運用保守に不可欠な作業です。データの消失は企業にとって大きなデメリットを生みます。システム障害などのトラブルによるデータの消失も考えられますので、必ずデータのバックアップを行い、正確にバックアップができているかの確認も欠かさないようにしましょう。

  5. 外部連携の仕様変更対応

    近年では、ホームページだけでなくSNSを併用して広告・宣伝を行う企業が増えていますが、SNSのバージョンアップや仕様変更に合わせて素早く対応することも、運用保守の大事な作業のひとつです。

    以上5点がホームページ運用における基礎的な作業内容です。様々な作業があり複雑ですが、外注することで簡単に運用を続けていくこともできます。費用感は1~5万円です。

    また、ホームページ運用には、より良いホームページを作り上げていくために運用改善といった作業もあります。例えばアクセス解析に基づいた分析などが運用改善にあたります。

    ホームページ運用に特化した情報やおすすめの外注業者については、以下の記事に掲載してありますので、本格的にホームページの運用について知りたいと言う方は是非ご覧ください。

ここまで、ドメインやサーバー、運用について紹介してきましたが、ホームページは作成すれば完成ではないことがお分かりいただけたでしょうか。初めてのホームページ作成の場合、わからないことが多くて不安に感じた方もいるかもしれません。

ホームページ作成サービスFLUX siteflowなら、充実したサポート体制が整っているので、ホームページ開設後のサポートに不安がある方も安心してご利用いただけます。

また、サポートのみならず、多彩なテンプレートの中から、プロが効果の出る最適な構成・デザインを選んでくれるので、高品質なホームページも作成できます。

はじめてのホームページ作成で失敗したくないという方は、ぜひ一度、FLUX siteflowにお問い合わせください。

自分でホームページを作成する方法

初心者からホームページを作成するには以下にある2つの方法が挙げられます。

  • CMSツールを利用する
  • HTML・CSSで作成する

この章では2つの作成方法に関する概要や違いについて詳しく説明します。

CMSとは?

CMSとは「Contents Management System」の略称で、サイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報(テンプレート)などを一元的に保存・管理するシステムのことを指します。

ホームページを作成するにはHTMLやCSSなどの知識が必要ですが、CMSツールならこれらの知識はいっさい不要で、誰でも本格的なサイト作成が可能です。

たとえば、テキストコンテンツを追加したいケースでも、HTMLを使用せず、CMSのインターフェース上で記入するだけでOKです。CMSによっては、豊富な数のテンプレートも用意されているため、容易に新規ページを作成することができます。

HTML・CSSとは?

HTMLとは、「Hyper Text Markup Language」の略で、コンピュータが理解できるマークアップをするための言葉です。

CSSとは「Cascading Style Sheets」の頭文字をとった略称で、ホームページのスタイルを指定するための言語を指します。たとえば、フォントサイズや行間、文字色や背景色、レイアウトや余白の指定など、ホームページの細かいデザインを調整するために不可欠な言語です。

ホームページは基本的にマークアップ言語のHTMLと、スタイルシート言語のCSSによって構築されるメディアです。そのためツールを使わない場合はHTML・CSSを用いて0からコーディングする必要があります。

ひと目でわかる!作成方法比較表

CMSツールを利用するHTML・CSSなどのコードを
自分で書く
費用の相場無料~(別途サーバー費用等)無料~(別途サーバー費用等)
期間の目安1カ月~半年~(勉強時間等含む)
難易度★★☆★★★
おすすめの方中級者/なるべく早く作りたい方経験者/時間に余裕がある方

ホームページの自作は、費用を大幅に抑えることができる一方で初心者の方にはかなり難易度が高い方法と言えます。さらに、ホームページを作成できたとしても、その後の運用でトラブルが発生したときに相談できる相手がいないのも大きなデメリットの一つです。

ホームページ作成サービスFLUX siteflowなら、充実したサポート体制が整っているので、ホームページ開設後のサポートに不安がある方も安心してご利用いただけます。

また、サポートのみならず、多彩なテンプレートの中から、プロが効果の出る最適な構成・デザインを選んでくれるので、高品質なホームページも作成できます。

ホームページ作成で失敗したくないという方は、ぜひ一度、FLUX siteflowにお問い合わせください。

CMSツールを利用してホームページを作成する場合

CMSツールを使用してホームページを作成する場合のメリットとデメリットについて見ていきましょう。

CMSツールのメリット

CMSツールを導入する最大のメリットは、コンテンツの新規作成や更新が容易になる点です。

たとえば、WordPressであれば無料テンプレートが豊富に用意されているため、HTMLやCSSの知識がなくても簡単にホームページを公開できます。

テキストエディタによるコーディングとは異なり、Webブラウザ上に管理ページが構築されるため、コンテンツの追加や更新が容易というのも大きなメリットです。

CMSを使用する場合のデメリット

CMSはハイクオリティなデザインテンプレートが豊富にあるものの、オリジナルのホームページを作成するためにはHTMLとCSS、そしてPHPの知識が不可欠です。つまり、デザインの独自性に欠けるという点がCMSの大きなデメリットです。

また、CMSはコンテンツがWeb上の管理ページに格納されるため、ローカルデータが保存されません。そのため、適切なバックアップ体制を構築するために相応の知識が求められます。

種類別!おすすめCMSツール3選

一言にCMSツールといっても様々な種類があります。今回は「オープンソース型」「パッケージ型」「クラウド型」の3種類に分けておすすめのCMSツールを紹介します。

1.オープンソース型

オープンソース型は元となるコードが無償で公開されているCMSです。特にWordPressなどは利用しているユーザーも多いため、わからないことがあっても様々な情報がインターネット上に公開されているので自分自身で解決できる可能性が高いです。また、プラグインやテンプレートの種類が豊富なため、表現の幅が広がります。

一方、サポートが薄いためにセキュリティー対策などは自分で行う必要があり、ある程度の前提知識を踏まえたうえで作成に取り掛かることをおすすめします。

例)WordPress

引用元:WordPressホームページ(https://ja.wordpress.org/

WordPressとは、世界で最も多く使用されているホームページ作成ツールです。サイトの作成やブログの作成といったCMS(コンテンツ管理システム)の一つで、豊富なテンプレートがある点と無料から使用できる点が大きな特徴と言えます。

ただし、自身でサーバーを契約したりなどする必要があること、自由度が高いからこそ逆に素人には扱いにくいことがあります。

初めてホームページを作成する方から制作業者などの専門家まで幅広い方々におすすめできる作成ツールの一つです。

おすすめのWordPressテンプレート3選

中でも、オープンソース型のCMSツールはコーディングのようにheadタグやbodyタグの記述は必要ありませんがプラグインやウィジェットなどの設定を行うことで更に表現の幅が広がります。

よりハイクオリティなデザインを求めるのなら、有料テンプレートの導入もおすすめです。とくに市場シェアの大きいWordPressは豊富なテンプレートが揃っており、1万円前後でWeb制作会社の顔負けのホームページを作成できます。

おすすめのWordPressテンプレート(テーマ)として以下の3つを紹介します。

JIN

引用元:JIN(https://jin-theme.com/

JINは初めてのブログ作成におすすめのWordPressテーマです。ブログの収益化を見込んだ機能が多数搭載されている点が魅力的です。

また、JINを利用している方限定のオンラインコミュニティ「BLOG CAMP」が用意されているため、ブロガー同士コミュニティーを広げたり、稼ぎ方を学ぶことができます。料金は14,800円です。

SANGO

引用元:SANGO(https://saruwakakun.design/

SANGOもブログを開設するのに適したテンプレートです。その魅力はUI/UXに見られます。UIとはユーザーインターフェースの略で、フォントやデザインのような人とデバイスを繋ぐもの全般のことを指します。

また、UXはユーザーエクスペリエンスの略で、ホームページを観た時にユーザーが感じる体験や経験のことを指します。SANGOではアニメーション機能や20種類以上の箇条書き、カラー設定などを通じてUI/UXの優れたホームページを作成できます。

料金はBOOTHで購入する場合は11,000円でConoHa WONGで購入する場合は通常契約で11,000円、3か月以上の契約で9,900円です。

TCD

引用元:TCD(https://tcd-theme.com/wp-tcd

TCDは企業ホームページを作るのに適したテンプレート(テーマ)です。累計ユーザー数100,000を超えるTCDはBtoBとBtoCのそれぞれに向け様々な種類が展開されています。

また、テーマ比較ナビゲーションガイドでは歴代の人気テーマやジャンル別テーマがわかりやすくまとめられているため、自分に合ったものを見つけることができます。料金はテーマごとに異なりますが、約1〜5万円で提供されています。

2.パッケージ型(ソフト)

パッケージ型は自社サーバーにインストールして運用するCMSを指します。これはホームぺージソフトとも呼ばれており、企業での仕様を前提とした機能が充実しています。

オープンソース型とは異なり、サポートが手厚いのでセキュリティ対策に期待できます。一方で、コストがかかってしまう点がデメリットです。メーカーや製品によって、価格は大きく異なります。5,000円未満で購入できるものもあれば、30,000円以上するものもあります。

例)ホームページビルダー

引用元:ホームページビルダー(https://www.justsystems.com/jp/products/hpb/

ホームページビルダーとは、初心者からプロのデザイナーまで幅広く使用されているホームページ作成ソフトです。直感的な操作感でレスポンシブデザインの「ホームページ・ビルダー SP」とHTMLやCSSを直接編集することもできる「ホームページ・ビルダー クラシック」という使い方に合わせた2つのビルダーを選ぶことができます。

3.クラウド型

クラウド型は、インターネット上でホームページを作成・運用できるCMSです。テンプレートがあるので専門知識がない初心者の方でも簡単に始められます。また無料で始められるCMSツールがあるのでコストもそれほどかかりません。

しかし、無料で始める場合は自分の作ったサイトに作成元の広告が表示されてしまうため、本格的なサイトを作りたいと思う方は有料プランへ加入することをおすすめします。

例)Wix

引用元:Wixホームページ(https://ja.wix.com/

Wixはイスラエル発のホームページ作成ツールの開発提供企業です。作成者のスキルに応じて、様々な利用方法が選択できる点が大きな特徴の一つと言えます。

また、目的別の細かな料金プランがあることもユニークな点で、大きく分けて「ホームページプラン」と「ビジネス&Eコマースプラン」に分かれており、幅広いユーザーが使用するケースを想定した料金プラン体系となっています。

CMSツールは、制作会社ごとにテンプレートの幅や、費用感などが異なってきます。あらかじめ作成したいホームページのイメージを膨らませたり、相場を決定してから制作会社を選定することをおすすめします。

CMSを使ったホームページ作成を検討される方は、以下の記事でより詳細な内容を掲載していますので、参考にしてください。

HTML・CSSを使用してホームページを作成する場合

HTMLとCSSによるコーディングでホームページを作成する場合のメリットとデメリットを見ていきましょう。

CSSを使用する場合のメリット

HTMLとCSSによるコーディングで構築されたホームページは一般的に「静的サイト」あるいは「静的ページ」と呼ばれます。静的サイトはHTMLとCSSでマークアップされたファイルをサーバーにアップロードするだけなので非常に表示速度が速く、サーバーへの負荷も軽いという点が大きなメリットです。

また、ファイルをローカルに保管するため、バックアップが容易でセキュリティインシデントに強いというメリットがあります。

CSSを使用する場合のデメリット

静的サイトを構築するためにはHTMLとCSSの専門的な知識が必須です。ローカルに保存されたファイルからページを生成するため、複数人による管理に向かないという点も大きなデメリットといえるでしょう。

また、ユーザーごとに異なるページを表示したり、リアルタイムで情報を表示したりといった動的な表示を苦手とします。

実際の作業内容を解説

HTMLでホームページを作成するには以下の4つのステップを踏む必要があります。

1.テキストエディタを用意
    ↓
2.ブラウザを用意
    ↓
3.HTMLファイルにコーディング
    ↓
4.FTPソフトを使ってサーバーへアップロード


HTMLとCSSによるコーディングで静的サイトを構築する場合、一般的にはテキストエディタを利用して記述します。「Visual Studio Code」や「Atom」など、どのようなものを使用してもかまいません。まずはHTMLファイルを作成し、headタグやbodyタグを記述してコンテンツを配置していきます。次にデザインの土台となるワイヤーフレームやデザインカンプに基づきCSSを記述していきます。

そして、ホームページ全体のバランスを見ながらHTMLとCSSでデザインを微調整します。完成後はHTMLファイルとCSSファイル、そして画像ファイルをサーバーにアップロードして公開完了です。

実際にコーディングで0からホームぺージ作成をしようと考えている方は以下の記事を参考にしてください。それぞれのステップにおいて必要な作業内容について詳しく解説しています。

コーディングでのホームページ作成は、プログラミングに関する専門的な知識を要するので、まったくの初心者の方にはあまりお勧めできません。現在は、ホームページの作成を代行してくれる制作会社が多数存在するので、外部委託してホームページを作成するのもひとつの手です。

ホームページ作成を外注する際の費用感としては、50〜500万円とピンからキリまであり、オリジナリティや高いデザイン性を求めれば求めるほど費用が高騰していきます。また、作成にはおおよそ3ヶ月から半年ほどかかることが一般的です。おすすめの制作会社として以下で株式会社LIGを紹介します。

株式会社LIG

引用元:株式会社LIG(https://liginc.co.jp/

LIGは電通やNTTドコモのような誰もが知る大企業とも取引する、実績豊富な制作会社です。

LIGはホームページ制作、Webマーケティングのサポート、業務システムやアプリのシステム構築のほか、Webクリエイターの育成事業まで手掛けていて、費用は100万円、制作期間は短いものだと1ヶ月からホームページの作成を行なっています。

ひと口に制作会社と言っても、マーケティングが得意な制作会社や、UI・UXに強い制作会社など、それぞれの会社によって強みがあります。また、ホームページ作成を外注する場合には、制作会社の実績やホームページ完成後のサポート体制など、制作会社選びに失敗しないための注意点もあります。

費用と時間をかけて外注するからには、作成したいホームページのイメージにあった、信頼できる制作会社を選びたいところです。以下の記事では、ホームページ制作会社を特徴ごとに紹介し、選定するときの注意点も解説していますので、ホームページ作成の外注を検討する場合は、是非参考にしてください。

まとめ

ホームページ作成は敷居が高いと思われがちですが、WordPressのようなCMSや、ホームページ・ビルダーのようなWebオーサリングツールを利用することで、専門的な知識を有していなくても十分に作成可能です。

ホームページの作成と運営を内製化できれば、作成費用だけでなく運用コストの削減にもつながるでしょう。ぜひ、本記事を参考にしてホームページ作成に取り組んでみてください。

ホームページはいくらで作れるの?
最短1分で料金シミュレーション!

「ホームページ作成の相場を知りたい」
「自分に合ったホームページを作ると、どれくらい料金がかかるのかな」
と、ホームページ作成の料金について知りたい!とお考えではないでしょうか。

そのような方には、無料で使えてオンラインで完結する
「料金シミュレーション」のお試しがおすすめです。

最短1分、カンタンな質問に答えるだけ!
もちろんその場で結果をご覧いただけます。
こちらから無料でお試しください。

この記事を書いたメンバー FLUX siteflow編集部
ホームページ作成に関連する情報発信を行っております。弊社ホームページ作成サービスFLUX siteflowや運営に関するご質問などは「お問い合わせ」ページよりお願いいたします。

03-6555-2282

受付時間:平日 10:00~19:00