ホームページを自分で作る方法|手順をわかりやすく解説

ダウンロード: CMSを活用したWEBサイト作成無料ガイド
水落 絵理香(みずおち えりか)
水落 絵理香(みずおち えりか)

最終更新日:

公開日:

「ホームページ制作を自分でやってみたいけど、プログラミングの知識やスキルがない」とお悩みではありませんか?

ホームページを自分で作る方法|手順をわかりやすく解説

CMSを使うと、専門知識ゼロでも
本格的なWebサイトが作れます

CMS(Content Management System)」は、Webサイトの管理や更新ができるシステムです。CMSを活用すれば専門知識がなくても本格的なWebサイトの制作と管理が実現します。初期費用やランニングコストもほとんどかかりません。

HubSpotが作成した、CMSを使ったWebサイトの作り方とCMSサービスの比較表をまとめた無料のガイドブックを使って、最適なWebサイトを作成してみませんか?

CMSを活用したWEBサイト作成ガイド & CMS選定シート

HTML/CSSの知識がない場合は、初心者でも簡単にホームページ制作ができるツールの利用がおすすめです。

本記事では、ホームページを自分で制作したい方に向けて、制作方法をご紹介します。ホームページを自分で作る方法は主に3つあり、それぞれメリット・デメリットがあります。本記事を参考に、自分のスキルや目的に合った方法を選びましょう。

CMSを活用したWEBサイト作成ガイド & CMS選定シート

Webサイトの作成に必要な機能を比較して最適なCMSを導入しましょう

  • Webサイト構築方法別導入検討シート
  • WordPress、WIX、Jimdo各システム機能比較表
  • CMSサイト構築チェックシート

    今すぐダウンロードする

    全てのフィールドが必須です。

    ダウンロードの準備ができました

    下記のボタンよりダウンロードいただけます。

    ホームページに必要なものとWebサイトの基本の仕組み

    ホームページをネット上で見てもらうためには以下の3つが必要です。

    • ドメイン
    • サーバー
    • ホームページのデータファイル

    ドメインとは、ホームページがネット上のどこにあるのかを特定する、いわば「住所」です。

    HubSpotのサイトを例に見てみると

    https://www.hubspot.jp

    「hubspot.jp」がドメインになります。

    ドメインが「住所」であるのに対して、サーバーは家を建てるための「土地」です。つまり「家」そのものとなるデータファイルを置く場所になります。

    ホームページの基本の仕組みは、ドメイン(住所)を頼りに、サーバー(土地)にデータファイル(家)を設置した状態といえます。

     

    ホームページを自分で作る4つの方法

    ホームページを自分で作る方法を3つ紹介

    ホームページを自分で作るにはいくつかの方法があります。プログラミングの知識がある方にはコーディングがおすすめです。初心者の方は、CMSかホームページ作成ツールを活用しましょう。
     

    1. イチからコーディングする

    デザインや機能など完全オリジナルのホームページを作りたい場合は、HTML/CSS、JavaScriptなどを使ってイチからコーディングする方法が最適です。

    自分自身でコーディングができれば、100%自社仕様にカスタマイズが可能です。他社とデザインが被る心配もないので、ブランディング効果の高いホームページを作れます。

     

    2. CMSを使う

    CMSとは「Contents Management System」の略で、HTML/CSSなどの知識がなくてもホームページを簡単に作れるサービスです。「コンテンツ・マネージメント・システム」という名前の通り、自分でホームページ上のコンテンツを自由に登録・追加できるのがCMSの大きな特徴です。個人のブログから企業のホームページまで、幅広く利用されています。

    ホームページの作成や更新はCMSの管理画面上で行うことができ、プログラミングの知識は必要ありません。プラグインと呼ばれる拡張機能を使えば、問い合わせフォームや決済フォームなども手軽に追加できます。

    CMSにはいくつかの方法があり、代表的なサービスとして知られているのがWordPress(ワードプレス)です。WordPressは非営利団体が運営するオープンソースなので、誰でも無料で利用可能です。

     

    3. ホームページ作成ツールを使う

    3つ目は、ホームページ作成ツールを利用する方法です。作成ツールの多くはクラウドベースなので、アカウントを発行すればすぐに利用できます。

    ホームページを作った経験がない方でも、手順に沿って作業を進めていけば、わずか数分でデザイン性の高いホームページが完成します。ツールによってはサポート体制も充実しているため、チャットや電話などでサポートを受けることも可能です。

    ホームページ作成ツールには、無料のものと有料のものがあり、機能もツールによって異なります。詳しくはこちらの記事をご覧ください。

     

    4. 部分的にプロの手を借りる

    ホームページのトップページや主要ページ、ヘッダー、フッター、ナビゲーションといった全ページ共通部分など、土台をプロに制作してもらい、その後追加する下層ページや記事コンテンツを自分で制作する方法もあります。

    ゼロから全て自作する手法は時間も労力もかかり、さらに思わぬバグが起きることもあります。プロに土台制作を依頼すれば、コストも削減しつつクオリティの高いホームページが制作できるでしょう。
     

    自分でホームページを作るメリット・デメリット

    無料のツールを使って自分でホームページを作ると制作費用を抑えられますが、HTML/CSSを用いてプロが制作したホームページのような細かいデザインの調整は難しいでしょう。

    デメリットも理解したうえで制作方法を選ぶことが大切です。ここでは、自分でホームページを作るメリット・デメリットを詳しく解説します。
     

    自分で作るメリット

    自分でイチからホームページを作ることは、コスト面やカスタマイズ性の面で大きなメリットがあります。具体的なメリットについて見ていきましょう。
     

    コストを抑えられる

    ホームページを自分で作れば、外注費や毎月のランニングコストを抑えられます。ホームページ制作を外注した場合、外注先や制作の範囲にもよりますが、20万円~100万円ほど費用がかかります。

    規模によってはそれ以上にかかる場合もあるでしょう。保守・運用なども依頼すると、毎月数万円のランニングコストが追加で発生します。

    無料のツールを活用して自作すればホームページの制作費用はかからず、コンテンツも自由に修正できます。

    ホームページ作成費用に関して、詳しくはこちらの記事をご覧ください。

     

    自由がききやすい

    ホームページを自分で作れば、サイト全体のコンセプトからWebデザイン、制作スケジュール管理にいたるまで、自由に調整できます。

    外注するとプロの手によって美しいデザインのホームページができあがりますが、発注者側にデザインの知識がないと、自分の思い描いたイメージをうまくデザイナーに伝えられないことがあります。

    また、デザイナーにもそれぞれ得意分野やこだわりがあるため、できあがったホームページが自分の理想と合わない可能性もあるでしょう。

    無料ツールであっても、豊富な種類のテンプレートから好みのものを選んで自由にホームページを作ることができます。HTML/CSSでのコーディングが可能なら、さらに自由度を高めることが可能です。
     

    管理がしやすい

    ホームページには、定期的にコンテンツを見直すメンテナンスが欠かせません。ホームページ制作と管理をWeb制作会社に委託した場合、ちょっとした修正にも費用が発生したり、日数がかかったりすることがあります。

    ホームページ内で使用している写真や文章を変更したい場合でも、自分で修正対応ができれば、費用やスケジュールの心配もありません。
     

    自分で作るデメリット

    ここからは、自分でホームページを作るデメリットをご紹介します。場合によっては、外注した方が良いケースもあります。
     

    自身の動ける時間が減る

    ホームページを自分で作るとなると、コンテンツの制作から写真撮影、デザインの考案などをすべて行う必要があるため、完成までにかなりの時間を要します。本来の事業活動に支障が出る可能性もあるでしょう。

    一方、外部の専門業者に委託すれば、サイト設計からデザイン制作・実装・本番リリースまですべて任せることができるので、自分たちは進捗状況の確認だけで済みます。
     

    HTMLやCSSなどの勉強が必要

    自分でコーディングを行ってこだわりのホームページを作りたい場合は、HTML/CSSの知識も必要です。さらに、動的な動きを組み込みたいなら、JavaScriptの知識も求められます。

    デザインテンプレートを使った簡易的なものであれば、プログラミングの知識はほとんど不要ですが、細かい調整は難しいでしょう。そのため、ある程度こだわりを持って作り込むのであれば、最低限のWebデザインスキルや知識は習得しておく必要があります。

    最近ではオンラインでプログラミングの学習ができるサービスも増えており、1か月程度で基本的な知識を身に付けることも可能です。

     

    デザイン性が見劣りしやすい

    ホームページ制作の専門知識や技術がない状態で自分で作る場合は、どうしてもWebデザインのプロが作ったホームページに比べて見劣りしてしまいます。

    ホームページ作成ツールのテンプレートであれば、誰が作ってもある程度同じような仕上がりになりますが、他社と代わり映えしない、無難な印象を与える可能性があります。

    また、初心者であれば高度な技術を要する機能実装も難しいため、結果的に簡易的なホームページになりがちです。

    プライベートや趣味の範疇であれば問題ありませんが、事業用として作る場合はその会社の印象につながるので、明らかに見劣りする場合は注意が必要です。
     

    ホームページを自分でイチから作る方法・手順

    ホームページを自分で作る場合の基本的な手順を、5つのステップに分けて解説します。

    1. 企画

      まずは、ホームページの企画を検討します。ホームページで実現したいことが会社案内なのか、ネットショップなのか、人材採用なのかなどによって、サイト全体のコンセプトや構成が異なるため、目的を明確にしましょう。

      続いて、目的を数値化できる指標(KGI・KPI)を設定します。「問い合わせ数」や「Webサイト経由の採用数」などが設定すべき指標です。

      ホームページの目的・目標が明確になったら、「誰に」「何を伝えたいのか」を具体的にしましょう。ターゲットとなるユーザーに伝えたいメッセージが明確になれば、それがサイトのコンセプトになります。

    2. Webサイト設計

      Webサイト設計とは、サイトデザインを実際に作る前に、コンセプトに沿って全体の大枠を構築することです。サイト全体を構造化するサイトマップを作ることで、ページ同士の関連性やページの抜け漏れを防ぐことができます。
      また、ページの画面設計書となるワイヤーフレームを作成することで、ページごとのデザインを具体的にイメージすることができます。

    3. デザイン制作

      成果につながるWebサイトを作るためには、その場の感覚や思いつきでデザインするのではなく、コンセプトに沿ってデザインルールを設定することが大切です。

      カラールール・フォントルール・素材ルール・レイアウトルールなどを、あらかじめ設定しておくことで、サイト全体に一貫性を持たせることができます。

    4. 実装

      Web上でサイトを実際に機能させるために、HTML/CSSやJavaScriptを使ってコーディング作業を行います。

      作成するホームページの目的によって、使用する言語は異なりますが、主にユーザーの目に触れる部分を構築する「フロントエンド」と、サーバー構築やデータベースといった裏側部分を構築する「バックエンド」の作業が必要です。

      それぞれのコーディングが完了したら、テストリリースを行い、問題なく動くことを確認します。

    5. 公開

      テストに問題がなければサーバーに公開します。サーバーに公開する際は、自社サーバーを使用するかクラウドサーバーを使用するかによっても手順が異なるため、自社のやり方に合わせて適した方法を選択しましょう。

     

    ホームページを自分で作る際の注意点

    最後に、ホームページを自分で作る際の注意点を2つご紹介します。

     

    他社サイトをコピーしない

    当然ながら、他社のホームページデザインをそのまま模倣するのは、著作権侵害にあたります。その他、他社がサイト内で使用している画像を無断でコピーし、自社のサイトに使用することも違法です。

    最近では無料でダウンロードできるフリー素材サイトも登場していますが、なかには商用利用が認められていない場合もあります。利用する際には、必ず利用規約を確認しましょう。

    一方、いくつかのWebサイトを研究・分析し、参考とする程度は著作権侵害にはあたりません。特定のサイトだけを模倣しないように十分に注意しましょう。
     

    セキュリティ体制を整える

    インターネット上には、さまざまな脅威が存在します。万が一、顧客情報をデータベースに保管するようなサイトが情報漏洩を起こしてしまえば、企業としての社会的信用も失われてしまうでしょう。

    具体的なセキュリティ対策としては、次のようなものがあげられます。

    • サーバーにログインする際のパスワードは容易に予測できないものにする
    • 信頼性の高いサーバーを選ぶ
    • 定期的に保守・点検を行う

     

    ホームページの目的・用途に合わせて、まずは自分で作ってみよう

    プログラミングの知識がなくても、専用のツールを活用すれば自分でホームページ制作ができます。CMSを実装すれば、コンテンツの更新も自由自在です。

    ホームページ制作を始める際は、コンセプトや目的を明確にしましょう。また、常にユーザー目線で使いやすさや見やすさを考えながら制作することが大切です。

    当社HubSpotでは、ドラック&ドロップで簡単に操作できるホームページの作成ツールを提供しています。SEO対策やEメールマーケティングなど、Webマーケティングに必要な機能も充実しているので、Webサイトの運用まで見据えたツールをお探しの方はぜひチェックしてみてください。

    ウェブサイトを簡単に作成 HubSpot CMS Hub

    HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

     

    CMSを活用したWEBサイト作成ガイド & CMS選定シート

    トピック: ホームページ

    関連記事

    Webサイトの作成に必要な機能を比較して最適なCMSを導入しましょう。