Webサイトの作り方|自分でサイトを制作・公開する方法と注意点

自社のホームページ制作を自分でしたいものの、何から始めればよいのかわからないという人も多いでしょう。この記事では、ホームページを制作するために必要なものや、制作方法などの基礎的な知識を解説します。ホームページ制作を自分でするメリット・デメリットや、おすすめの無料ツールなども紹介しているので、ぜひ参考にしてください。

→ノーコードで誰もが作れる!ホームページ作成サービスBiNDupを最大30日間無料体験

そもそもインターネット・Webとは

インターネットとは、コンピューターをネットワークで繋げて情報をやり取りするための仕組みです。Webはインターネット上のひとつの機能であり、情報を公開するための役割を果たします。
インターネット・WEBのイメージ画像

ホームページを制作するために必要なものとは

ホームページを制作する場合、さまざまなものが必要になります。ここでは、具体的に必要なものについて解説します。

サーバー

サーバーとは、Webサイトとして公開するデータを保存するためのものです。サーバーにデータをアップロードすると、インターネット上で確認できるようになります。一般的には、レンタルサーバーを借りてWebサイトを制作するケースが多いです。

ドメイン

ドメインとは、インターネット上での住所を表すためのものです。ドメインを取得してWebサイトに設定すると、インターネット上からアクセスできるようになります。Webサイトを制作する場合は、独自ドメインがおすすめです。

ホームページ

ホームページとは、ホームページの中身にあたる部分です。テキストや画像などを表示させるための役割を果たします。CMSとよばれるソフト(サービス)を使用すると、比較的簡単にホームページを作成できます。

→ノーコードで誰もが作れる!ホームページ作成サービスBiNDupを最大30日間無料体験

ホームページの作り方は大きく3つに分けられる

ホームページの作り方を大きく分けると、3種類あります。ここでは、それぞれの方法について解説します。

方法1:すべて自分で制作する

ホームページやインターネットの仕組みを知っている人であれば、自分ですべてを制作できます。ホームページをゼロから制作する場合は、HTMLやCSSといったプログラミング言語の知識が必要です。
HTMLやCSSコードを使い制作する場合

方法2:サービスを利用して一部だけ自分で制作する

CMSを利用すればホームページの制作に必要な素材を用意したり、プログラミング言語を習得したりしなくても自分で制作できます。プログラミングが不要なノーコードに対応するサービスの利用が便利です。
たとえば、ノーコードCMSのBiNDupを使用すれば、Webに関する専門知識がなくてもオリジナルホームページを制作可能です。

方法3:作成ツールを利用する

作成ツールはホームページやインターネットに関する知識がない人でも、短時間で簡単にホームページを制作できるツールです。利用料金が無料のツールも多く、パソコンだけでなくスマホでも制作や運用を行える特徴があります。

→ノーコードで誰もが作れる!ホームページ作成サービスBiNDupを最大30日間無料体験

ホームページ制作を自分でするメリット

ホームページを自分で制作した場合、次のようなメリットを得ることができます。

コストを抑えられる

自分でホームページを作成することで、コストを抑えられます。有料のツールやサービスを利用しない場合は利用料金がかからないため、ホームページを無料で作成できます。制作会社に外注した場合、初期費用だけで数十万円~数百万円かかることもめずらしくありません。

更新のタイミングや頻度が自由

ホームページを自分で制作した場合、情報を更新するタイミングや頻度を自由に設定できることもメリットです。ホームページの運用には情報の更新や追加する作業が不可欠です。自分でホームページを制作すれば、外注する必要がありません。

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

ホームページの制作を自分ですると、以下に挙げるデメリットが生じます。それぞれのデメリットについて解説します。

労力がかかる

ホームページの制作を自分でする場合、制作に関する作業だけでなく、情報の更新やサーバー、ドメインの契約更新を含む管理に手間がかかります。また、ホームページやインターネットに関する知識がゼロの人が担当する場合は、膨大な時間が必要です。

自分に適した制作方法がわからない

ホームページの制作は、社風やコンセプトに合わせたデザインと適切な更新の頻度が重要です。ホームページ制作の未経験者がすべての作業を自分ですると、自社に適した方法を判断できないため、他社との差別化が難しくなります。

→ノーコードで誰もが作れる!ホームページ作成サービスBiNDupを最大30日間無料体験

ホームページ制作を自分でするためのツール

ホームページの制作を自分でするなら、作成ツールの利用をおすすめします。ここでは、代表的なツールを紹介します。

BiNDup

BiNDupはホームページの制作が初めての人でも、トレンドに合ったものを作成できるツールです。テンプレートや自動生成機能を活用し、文字や画像を入れ替えるだけで目的に合ったホームページを制作できます。
BiNDup

>WordPress

WordPressは、ホームページの制作に関する知識がある人におすすめの無料ツールです。無料のテンプレートを利用すれば、コストをかけずにホームページを作成できます。
WordPress

>Wix(ウィックス)

Wixはすでに用意されている雛形を使用することで、短時間で簡単なホームページを作成できるツールです。料金プランは、無料プランと有料プランから選べます。
Wix

ジンドゥー

ジンドゥーは質問に答えていくだけで、自社の業種や目的に合ったホームページを作成できるツールです。YouTubeの動画をはじめとする幅広いコンテンツを配置できるうえに、SNSとの連携も可能です。
Jimdo

Google Sites(グーグルサイト)

Google Sitesは、Googleが提供しているホームページの作成ツールです。プログラミングの知識や経験がなくてもホームページを作成できます。また、複数人で共同編集できる機能があり、リアルタイムでの編集も可能です。
Google Site

STUDIO(スタジオ)
STUDIOは、白紙からもテンプレートからも無料でホームページを作成できるツールです。国産のCMSなので、日本語によるサポートを受けられます。質問に対するレスポンスが速いことも特徴のひとつです。
STUDIO

Goope(グーペ)

Goopeはテンプレートが豊富で、業種別のコンセプトを打ち出しやすいホームページを作成できるツールです。カート機能やインターネット上で予約できる機能などを利用できます。
グーペ

ペライチ

ペライチは1ページにすべての情報を掲載したホームページを、無料で制作したい人におすすめのツールです。有料プランを契約すれば、独自ドメインを利用できたりページ数を増やせたりできます。
ペライチ

CLOUD LINE
CLOUD LINEは、無料で利用できる素材ツールと連携が可能なホームページ作成ツールです。問合せフォームの追加や画像の加工などもツール内で行えます。直感的な操作で作業を進められるため、ホームページ制作が未経験でも安心です。
Webサイトの作り方|自分でサイトを制作・公開する方法と注意点

Ameba Ownd(アメーバオウンド)
Ameba Owndは、Amebaブログの運営会社が提供しているホームページ作成ツールです。Amebaブログのユーザーなら、スムーズな操作が可能でしょう。
Ameba Ownd

Weebly(ウィーブリー)

Weeblyは、デザインのクオリティが高いテンプレートがそろう作成ツールです。メールマーケティングシステムのアドオンを追加すれば、メールマーケティングを効率よく行えます。
Weebly

Strikingly(ストライキングリー)

Strikinglyは、作成ガイドを基にホームページを制作できるツールです。作成ガイドの内容が充実しているため、ホームページ制作が初めての人でも簡単に操作できます。
Strikingly

Crayon(クレヨン)

Crayonは、スマホでホームページを制作できるツールです。スマホでの作業に慣れている人におすすめです。有料プランを利用すれば、独自ドメインの取得や本格的なホームページの運用ができます。
Crayon

SITE123
SITE123は、シンプルなデザインのホームページを簡単に作成できるツールです。直感的な操作が可能なため、ホームページ制作が初めてでも複雑な操作はいらず、簡単に作業できます。
Webサイトの作り方|自分でサイトを制作・公開する方法と注意点

→ノーコードで誰もが作れる!ホームページ作成サービスBiNDupを最大30日間無料体験

ホームページの制作で考えるべきポイントとは

ホームページを制作するときは、さまざまなポイントを意識する必要があります。意識したいポイントを具体的に解説します。
ホームページの制作で考えるべきポイント

ホームページを制作する目的をきちんと設定する

目的によっても、ホームページに必要な要素は異なります。そのため、ホームページを制作する前に目的を確認しておく必要があります。たとえば、ホームページを個人のポートフォリオとして活用したい場合もあれば、自社のビジネスを宣伝したい場合もあるでしょう。
目的を意識し、どの方法でホームページを構築するか決めてください。

ホームページのコンセプトを決める

ホームページの目的をもとにし、全体のコンセプトを決めましょう。ホームページに掲載するコンテンツの内容についても、コンセプトとともに決定します。コンセプトがはっきりしていれば、方向性を統一して魅力的なホームページを制作しやすくなります。
ホームページのターゲットにあわせて、コンセプトを検討するのもひとつの方法です。

どのような構造のホームページにするか考える

どこにどのような内容を掲載するか決める作業を構造化といいます。トップページを起点にし、カテゴリごとに内容を分類しましょう。

構造化を行うと、ホームページを閲覧する人が情報を確認しやすくなります。初めてホームページを訪れた人でもスムーズに情報を得られるように意識し、見やすいホームページを作ってください。

→ノーコードで誰もが作れる!ホームページ作成サービスBiNDupを最大30日間無料体験

自分でホームページ制作をする手順

自分でホームページを制作する場合は、設計、制作、テスト、公開の順番で作業を進めましょう。

設計

ホームページ制作は、サイトマップと呼ばれる、ホームページ全体の構造を設計することから始めます。サイトマップを作成することで、ホームページがどのような階層構造になっているのかが一目でわかります。

制作(デザイン)

設計ができたら、ホームページの具体的なデザインを決めていきます。デザインやコンテンツを配置する場所、文字の種類、配色、装飾など、制作する目的を決めたときに設定したターゲットに合わせて検討しましょう。

制作(コーディング)

ホームページのデザインが決まったら、制作を開始します。HTMLやCSSを使用してホームページを制作する場合は、コーディング作業を行います。自社にプログラミングに精通した人材がいない場合は、ノーコードに対応した作成ツールを利用するのもひとつの方法です。

ブラウザチェック(テスト)

ホームページを一通り制作したしたら、パソコンだけでなく、AndroidやiPhoneなどさまざまなブラウザで、動作や表示が正常であるかテストを行います。正しく表示されない部分やレイアウトが崩れている部分があれば修正しましょう。

公開

ブラウザチェックで問題がない場合や直すべき部分をすべて修正した場合は、ホームページを公開します。公開後に問題点が発覚する場合もあります。問題に対して迅速に対応できるように、エンジニアとデザイナーを待機させておくことをおすすめします。

「HTML・CSS」「CMS」でWebサイトを制作する違い

HTML・CSSとCMSでは、ホームページを制作する際にどのような違いがあるのか解説します。

HTML・CSSとは

HTMLとCSSは、どちらもコーディングでコードを書く際に使うプログラミング言語です。HTMLとCSSの知識があれば、ホームページのデザインや追加したい機能を自在に作成できます。専門知識が必要なため、ホームページ制作の未経験者には向いていません。
HTML・CSSのイメージ

CMSとは

CMSはホームページの制作に必要な機能がそろっているため、ホームページ制作の未経験者でもプロ並みのデザインを作成できます。高機能のツールは複雑な操作が必要になるため、初心者は直感的な操作ができるツールがおすすめです。

→ノーコードで誰もが作れる!ホームページ作成サービスBiNDupを最大30日間無料体験

ホームページの作り方を方向性別に詳しく解説

ホームページは、作成したい方向性に合った作り方を検討しましょう。ここでは、方向性別のホームページの作り方を解説します。

とりあえずホームページで情報発信をしたい場合

ホームページを活用する具体的な戦略を検討していない段階で、とりあえず情報発信から始めたいという場合は、シンプルなデザインのホームページを制作できる作成ツールがおすすめです。簡易的なホームページを制作できるツールの場合、画面の指示で作業を進められるため直感的な操作が可能です。

シンプルなデザインのテンプレートを基に配色や画像、文章を編集することでホームページを作成できます。ツールにカスタマイズできる機能があれば、ホームページのデザインを自社のコンセプトに合わせて変えられます。無料で試せる作成ツールもあるため、まずは実際に操作してみるとよいでしょう。

少しこだわったホームページを立ち上げたい場合

HTMLやCSSの知識はないものの、ホームページのデザインや機能にこだわりたいという場合は、CMSサービスの利用がおすすめです。CMSサービスはブラウザとインターネット環境が整えば、プロ並みのおしゃれなデザインのホームページを作成できます。

CMSサービスには、ホームページ制作に必要な機能がそろっているものも多いことから、自由にカスタマイズでき、自分で機能を充実させることも可能です。専門知識を学ぶことで、細部にこだわったホームページを作成できるようになります。

将来的にホームページ制作の仕事に携わりたい場合

将来、ホームページ制作に携わる仕事に就くなら、HTMLとCSSを活かしたホームページを作成する方法がおすすめです。コーディングを行って構造を決定し、コードを書いたファイルを自社が使用するサーバーにアップロードすることで、オリジナルのホームページを作成できます。
HTMLとCSSを用いてゼロから作成する方法は、競合との差別化を図れるホームページを制作したい場合にも向いています。

→ノーコードで誰もが作れる!ホームページ作成サービスBiNDupを最大30日間無料体験

ホームページを運用するときに気を付けたいポイントとは

ホームページを運用する際は、以下に挙げるポイントに注意しましょう。それぞれのポイントを解説します。

SEO対策を考える

SEOとは、検索結果ページの上位にホームページを表示させるための手法です。効果的なSEO対策ができれば、見込み客にアプローチできます。

ただし、SEO対策の成果が出るまでは時間がかかるため、長期的な視点をもってホームページの運用に取り組む必要があります。SEO対策を効率よく進めるには、SEOに強いツールやサービスを活用することをおすすめします。

独自SSLを設定する

SSLとは、インターネット上のやり取りを暗号化していることを証明するためのものです。SSLとしては共有SSLもありますが、独自SSLを選んだほうが信頼性の高さをアピールできます。

また、共有SSLではドメインの変更が必要ですが、独自SSLならドメインはそのままで大丈夫です。そのため、独自SSLを選ぶ人が増えています。

イラストや写真は著作権に注意

他人が制作したすべてのものは、制作者に著作権が付与されます。制作者に無断でイラストや写真をホームページに使用すると、著作権を侵害する恐れがあります。他人が制作したイラストや写真を使用する際は、著作権フリーのものを選びましょう。

SNSを連携させる

ホームページとSNSを連携させると効果的な宣伝ができます。たとえば、自社や製品の認知度を高めたい場合は、情報の拡散力が期待できるTwitterがおすすめです。SNS映えする写真を活用してビジュアルで勝負したい場合は、Instagramと連携するとよいでしょう。
SNSのイメージ

基本的な用語を理解する

ホームページを運営するためには、ホームページやインターネットに関する知識を学んでおく必要があります。ここでは一例として、Webページ、Webサイト、ホームページのそれぞれの違いについて解説します。

Webページとは

Webページとは、情報をまとめてインターネット上に公開している1枚のページのことです。ホームページには、複数のWebページにより構成されています。

Webサイトとは

Webサイトは、Webページを集めたものです。Webサイトのトップページから各Webページに飛べるようになっており、関連するさまざまな情報を閲覧できます。

ホームページとは

ホームページは、基本的にWebサイトと同じ意味です。複数のWebページが含まれており、それを構造化してホームページとしてまとめています。
そのほかにも、ホームページ制作に役立つ用語は以下の記事で詳しくご紹介しています。

これだけは知っておきたいホームページ専門用語|自作する人も依頼するときも役立つ31語


→ノーコードで誰もが作れる!ホームページ作成サービスBiNDupを最大30日間無料体験
h2:ホームページを公開した後にすべきこと
ホームページは公開して終わりではありません。適切にホームページを運用するために公開後にすべきことを解説します。

検索エンジンへの公開

公開後は検索エンジンにホームページの公開を知らせるために、Googleサーチコンソールと連携する必要があります。Googleサーチコンソールとは、無料のサイト管理ツールです。ツールに登録すれば、検索エンジンが自動的に自社のホームページを巡回してくれます。

アクセス解析

ホームページのアクセスを解析するためには、Googleアナリティクスの導入が必要です。Googleアナリティクスは、ホームページのアクセス数、ニーズの分析を行うために役立つ無料ツールです。

改善・更新

アクセス解析の結果を基にホームページを運用し、修正が必要な部分があれば改善します。ホームページをよりよくするための具体的な行動に繋がるように、日々のデータを解析して活用しましょう。

SNSやWeb広告の活用

ホームページを多くの人に見てもらう方法として、SNSやWeb広告の運用が挙げられます。SNSやWeb広告にはさまざまな種類があるため、目的や業種に合ったものを選定することをおすすめします。

まとめ

ホームページ制作を自分でする場合、コスト削減や自社のタイミングに合わせて運用できるメリットがあります。ただし、ホームページ制作の未経験者がゼロからホームページを作成する場合、自分に適した制作方法がわからず、制作が思うように進まなくなる恐れがあります。効率よくホームページ制作を自分でしたいなら、BiNDupがおすすめです。

BiNDupは、ノーコードでホームページの制作・運用ができる国産のCMSです。ホームページの運用に必要な機能がそろっているため、外注コストをかけずに自分で制作・運用できます。テンプレートが400種類以上あり、カスタマイズも可能です。

BiNDupの無料トライアルは登録後にご利用いただけます。ぜひ一度お試しください。

BiNDupを無料で使ってみるBiNDの制作事例を見る

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

今すぐ資料をダウンロード
  • POINT

  • 専門知識がなくてもスムーズにWebサイトを構築できカスタマイズもできるCMSがおすすめ
  • 作るだけでなく、公開後にきちんと集客できるサイトを目指そう
  • BiNDupはサーバー、ドメイン、常時SSL、写真等の素材、SEO対策、SNS連携が備わったCMS

あわせて読みたい