Webサイトの作り方は3パターン!制作手順をわかりやすく解説

国内におけるIT人材不足の深刻化を背景に、ITエンジニアWebデザイナーといったITスキルがある人材の需要は増し、他の職種に比べ高い報酬を設けるケースが増えてきました。

そんななか、転職や副業での収入獲得などに活かすため、Webサイトの制作スキルを養おうと考えている人は多いですよね。

ただ、どうWebサイトを作ればいいのか、イメージが湧かない人もいるはず。

結論からいえば、Webサイトは下記いずれかの方法で作成できます。

  • ゼロからコードを書いて作り込む
  • CMSを活用しながら制作する
  • サイト制作ツールを活用して手軽に作る

上記の方法はどれも一長一短なので、目的にあわせて適切な方法を選定し、正しい手順を踏むことが重要です。

この記事では、上記の方法別でWebサイトの作り方を、具体的な制作手順も交えて解説します。Webサイトを作るのに必要なものや制作時の注意点も紹介するので、ぜひ参考にしてください。

この記事の要約
  • Webサイト制作は「作る目的の明確化」から始める
  • 手軽にWebサイトを作りたい人はツールを活用した制作がおすすめ
  • Webの制作スキルを磨くなら0からプログラミングで自作する

なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。

受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。

\ オンラインで相談可能 /

本記事の解説内容に関する補足事項

本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」を運営する株式会社SAMURAIが制作しています。

また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。

記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。

目次

Webサイトを作る3つの方法

Webサイトを作る3つの方法

さっそく、冒頭で紹介したWebサイトを作る3つの方法を、それぞれ詳しく解説します。

各方法のメリットやデメリット・必要なスキルなどを把握したうえで、自身にあう作り方を探してみてください。

ゼロから自作する

作り方の概要ツールを使わずにプログラミングによってWebサイトを作成する
メリット・プログラミングスキルを身につけられる
・Webサイトの構造や仕組みを理解できる
・制作できるサイトの自由度が高い
デメリット・制作難易度が高い
・制作に時間がかかる
作成に必要なもの/知識/スキル・プログラミングスキル
・デザイン力
難易度★★★★☆
こんな人におすすめ勉強目的でWebサイトを作成したい人

あなたがWebサイトを作る目的が、

  • 仕事としてWebサイトを作れるようになりたい
  • Webサイト制作会社に転職したい
  • 勉強のためにWebサイトの構造や仕組みを理解したい

という場合、ゼロから全て自分で手作りする方法をおすすめします。プログラミングスキルやWebサイトの構造や仕組みに関する知識を身につけられ、のちの仕事に役立つ可能性が高いからです。

ただし他の方法よりも時間がかかるので、短期間でWebサイトを構築したい場合には適しません。また、安全性・見た目・使い勝手などデザイン面も1から検討が必要なので、難易度は高めです。得られるスキルや知識が多い分、苦労や時間も必要な方法といえます。

なお、今すぐ本方法での具体的な手順が知りたい人は、下記から移動してください。

ゼロからWebサイトを自作する4STEP

CMSを活用する

作り方の概要Webサイトの大枠や基本的な構築が完了済のサービス・ツールを利用して、Webサイトを作成する
メリット・Webページの作成や公開が簡単にできる
・テンプレートを利用すれば自力でデザインしなくてもよい
デメリット・サイトのロード時間が遅くなることがある
・ツールの使い方を勉強する必要がある
作成に必要なもの/知識/スキルCMSサービスの使い方に関する知識
難易度★★★☆☆
こんな人におすすめ簡単に作りたいが、部分的にはこだわりたい人

CMS(コンテンツ管理システム)サービスとは、Webサイトの作成や管理を補助してくれるサービスです。代表的なCMSサービスには、WordPressJoomlaDrupalなどがあります。

CMSサービスを用いると、HTML/CSSを記述しなくても、専用のエディタでWebページを作成できたり、ボタン一つでWebページを公開できたりと、Webサイト作成が簡単になります。また、プラグインを用いることで部分的に凝ったデザインや機能を備えたWebページも作成可能です。

ただし、あまりプラグインを導入しすぎるとWebサイトのロード時間が遅くなる場合があるので注意してください。

なお、今すぐ本方法での具体的な手順が知りたい人は、下記から移動してください。

CMSサービスの活用でWebサイトを作る4STEP

サイト制作ツールを活用する

作り方の概要スキル不要で活用できるツールを利用してサイトを作る
メリット初心者でも短時間でWebサイトを作成できる
デメリット自由度が低い
作成に必要なもの/知識/スキル特になし
難易度★★☆☆☆
こんな人におすすめなるべく簡単にWebサイトを作成したい人

なるべく簡単にWebサイトを作成したい人は、ブログサービスやホームページ作成ツールを利用するとよいでしょう。パソコンやWebについてよくわからないという人でも、Webサイトが数時間で簡単に作れます

代表的なブログサービスにははてなブログnote、ホームページ作成ツールにはWixペライチなどがあります。

ただし簡単に作成できる反面、デザインや機能のカスタマイズについてはできることが限られています。Webページへのこだわりがなく、とにかくすぐに作りたいという人むけの方法です。

なお、今すぐ本方法での具体的な手順が知りたい人は、下記から移動してください。

制作ツールでWebサイトを作る4STEP

Webサイトを作る前の確認ポイント3つ

Webサイトを作る前の確認ポイント3つ

ここからは、Webサイトを作る前に確認しておくべきポイントを3つにまとめて紹介します。

これらのポイントを明確にしておくことで、Webサイトの完成像をイメージしやすくなります。

何のために作るのか

はじめに何のためにWebサイトが必要なのか明確にしましょう。目的次第で必要な機能やコンテンツが大きく異なるからです。

たとえばWebサイトの目的には、

  • お店のホームページ
  • 自己紹介サイト
  • アフィリエイト

などが考えられます。

よくある失敗パターンは、先にサイトのデザインなどにばかり集中してしまい、どんな情報を発信するためのサイトなのかを見失うことです。当初のイメージとまったく違うWebサイトにならないためにも、目的を明確にしブレないようにしましょう。

どんな利用者を想定しているか

どんな利用者を想定しているかも重要なポイントです。想定利用者次第で、どのような情報を発信するか、どのようなデザインにするかが決まってきます。

ここで考えておくべきことの例としては、下記が挙げられます。

  • 利用者の性別
  • 利用者の年齢
  • 利用者の住んでいる地域
  • 利用者の職業
  • 利用者の趣味

このように目的を明確にしターゲットを決めることで、どんなコンテンツを提供するかが見えてきます。

どんなサイトにしたいか

構造というと難しく聞こえるかもしれませんが、要はどこにどんな情報を載せるかを考えることです。

例えばレストランのホームページを見たときに、どんな料理があるか知りたいときはメニューという項目をクリックするでしょう。また、実際に店まで行きたいなら地図やアクセスと書かれた項目をクリックしますよね。

Webサイトを見にきたユーザーが迷わないよう、どんな情報が載っているのか整理することを「構造化する」といいます。ためしに私は猫が好きな人・猫を飼いたいと思っている人に向けて飼育に役立つ情報を発信するWebサイトの構造を考えてみました。

画像:サイト構成図の例
画像:サイト構成図の例

上のように、例えば「おもちゃ」について知りたい人はトップページからおもちゃのカテゴリーをクリックすれば、

  • オススメ
  • おもしろ
  • シーン別

このように分けられた「おもちゃ」について知ることができます。ユーザーの目線になってどんなカテゴリー名にすればいいか考えてみましょう

ゼロからWebサイトを自作する4STEP

ゼロからWebサイトを自作する4STEP

ここでは、ゼロからWebサイトを自作する手順を、4つのステップにまとめて解説します。

STEP1:レイアウトを設計する

はじめに、Webサイトの設計図であるワイヤーフレームを作成し、各ページのレイアウトを設計しましょう。画像やテキストをどこに配置するか、区切り線を引いて作成します。

次に、下記のビジュアル要素を選定して、デザインカンプ(仕上がりを示すために作られる完成見本)を作成します。

  • フォント
  • 画像

デザインカンプの作成では、Webサイトに配色をしたりテキストや画像を仮置きしたりして、Webサイトの最終的な完成イメージが見て分かるように仕上げます。

ワイヤーフレームで枠組みを作り、デザインカンプで完成イメージを作るという流れで、段階的にレイアウト設計を進めるのがおすすめです。

クライアントよりWebサイト制作を受注した場合、ワイヤーフレームとデザインカンプの各作成段階でミーティングを行い、一つひとつ確認作業を進めていくことが多いです。そのため、自分のサイトを作成する際も、この手順を踏んで進めて行くことで練習にもなります。

レイアウトを考えるときは自分の好みで選ぶのではなく、前述したWebサイトを作る目的や想定する利用者を考慮して設計することが重要です。

なお、レイアウト作成の基本についてより詳しく知りたい人は次の記事を参考にしてください。

【保存版】Webデザインにおけるレイアウトの基本をやさしく解説

STEP2:設計をもとにコーディングする

レイアウト設計が完了したら、その設計をもとにコーディングを行いましょう。

Webページのコーディングで利用する言語は次のとおりです。

  • HTML
  • CSS
  • JavaScript

また、必要に応じてPHPやPythonでバックエンドの開発も行います。

なお、HTMLを利用したWebページの作り方を詳しく知りたい人は下の記事を参考にしてください。

HTMLのホームページは30分で作れる!5つの手順でわかる簡単な作り方

STEP3:正常に動くかテストする

コーディングが完了した後は、正常にサイトが動作するかテストしましょう。

テストでは、Webサイトのデザインがレイアウト設計通りになっているかを確認しましょう。JavaScriptなどでコーディングした動的な機能が動作するかも重要な確認ポイントです。

また、レスポンシブデザインを採用しているWebサイトの場合は複数デバイスでテストを行い、それぞれの画面サイズに応じて最適化された画面が表示されるかを確認します。

STEP4:作成したサイトを公開する

Webサイトのテストが完了すると、いよいよ作成したサイトを公開します。

Webサイト公開にはさまざまな方法がありますが、初心者にはホスティングサービスがおすすめです。ホスティングサービスは、データセンターなどに設置されたサーバーをレンタルしてくれるサービスであり、契約をすればすぐに利用できます。

ホスティングサービスの契約後、サーバーに作成したHTMLやCSSなどの資材をアップロードし、ドメイン名を設定しましょう。

最後に多くの訪問者が訪れるようにSEOの基本的な設定や検索エンジンへの登録を行えば、Webサイトの作成は完了です。

CMSを活用してWebサイトを作る4STEP

CMSを活用してWebサイトを作る4STEP

ここからは、CMSを活用してWebサイトを作る手順を4ステップにまとめて解説します。

STEP1:活用するCMSを選ぶ

はじめに活用するCMSを選択しましょう。主なCMSとそれぞれの特徴は次のとおりです。

CMSの種類特徴
WordPress・世界中に存在するWebサイトの43%が利用
・Webサイトに対して簡単に機能追加を行える「プラグイン」が5万5,000個以上
・デザインは豊富なテンプレートから好きなものを選択可能
Joomla・2005年にリリースされた世界でも人気があるCMS
・カスタマイズ性が高く大規模サイトが得意
Drupal・大企業や官公庁などの大規模サイトに強み
デジタル庁のWebサイトにて採用

CMSは下記のような点が異なります。

  • 機能
  • 得意とする規模
  • サポート体制
  • 使いやすさ
  • カスタマイズ性
  • シェア率

そのため「Webサイトに実装したい機能を実現できるか」や「初心者でも使いやすいか」などを考慮したうえで、選択することが重要です。

なお、どのCMSにすればよいかわからない人には、WordPressをおすすめします。WordPressは世界的に突出したシェアを獲得しており、充実した機能性や使いやすさを有しています。WordPressに関するWebデザイン案件も豊富なため、習得すればWebデザイナーとして仕事の幅を拡大可能です。

STEP2:選んだCMSを設定・カスタマイズする

CMSを選択したら、設定・カスタマイズを行います。

WordPressの場合、はじめに実施すべき設定・カスタマイズは次のとおりです。

実施すべき設定・カスタマイズ概要
Webサイトアドレスの確認・設定設定画面よりWebサイトアドレスが、取得した独自ドメインになっているかを確認する。
SSL設定Webサイト通信を暗号化する「SSL設定」となっているかを確認する。
テーマ選択Webサイトのデザインを切り替えられる「テーマ」を選択する。
プラグインの追加・削除頻繁に利用される機能などをパッケージ化した「プラグイン」の追加・削除などを行う。

とくにWordPressのテーマは、WebサイトのイメージやSEOにも大きく影響します。複数のテーマを比較したうえで、作成するWebサイトに最適なものを選択しましょう。

STEP3:Webページを作成する

CMSの設定やカスタマイズが完了したら、Webページを作成しましょう。

WordPressでWebページを新規作成する方法は、次の2通りです。

  • ダッシュボード上部の「新規」→「投稿」をクリック
  • 画面左部メニューの「投稿」→「新規追加」をクリック

新規ページの作成に成功すると空白ページが表示されるため、テキストや画像などを入力してWebページに表示するコンテンツを作成可能です。

なお「コードエディター」機能を使えば、HTMLコードを入力できます。また「ビジュアルエディター」は、実際にWebページとしてどのように表示されるかを確認しながらコンテンツの作成に取り組めます。

最終的な結果はどちらも同じなので、自分にあう方法でWebページの作成を進めましょう。

STEP4:作成ページに問題がないか確認する

最後に作成したWebページに問題がないかを確認します。

WordPressをはじめとするCMSは便利なソフトウェアであり、テーマを選択すれば自動的にレスポンシブ対応してくれる点がメリットの1つです。しかし、表示崩れを起こす場合もあるため、複数のデバイスで実際にWebページが問題なく確認されるかを確認する必要があります。

すべてのページの確認が完了したら、CMSを活用したWebサイトの作成は完了です。

制作ツールでWebサイトを作る4STEP

制作ツールでWebサイトを作る4STEP

ここからは、制作ツールでWebサイトを作る手順を4ステップにまとめて解説します。

STEP1:活用するツールを選ぶ

まずは活用する制作ツールを選びましょう。主なWeb制作ツールおよび特徴は下記のとおりです。

制作ツール名特徴
Jimdo(ジンドゥー)・ドラッグ&ドロップやAIで簡単にWebサイトを作成可能
・3,200万以上のWebサイト制作で活用された実績あり
Wix・世界で2億5,000万人以上のユーザーを超える利用実績
・最高水準のセキュリティとパフォーマンスが魅力
・900種類以上の無料テンプレート
アメーバブログ・月間来訪者数7,500万人以上のブログ制作ツール
・240以上のブログテンプレートあり
・毎月4万5,000人以上が収益化に成功
はてなブログ・豊富な機能を持つブログ制作ツール
・無料ではじめられる
・PCはもちろんスマートフォンからでも記事の作成が可能

自由にWebサイトを制作したい人はJimdo(ジンドゥー)Wixなどの制作ツールがおすすめです。これらの制作ツールを活用すれば、初心者でも簡単にWebサイトを制作可能です。

また、ブログサイトを作りたい人はアメーバブログはてなブログなどをチェックしましょう。アメーバブログやはてなブログは、さまざまな人が制作したWebサイトをポータルサイトにまとめているため、比較的簡単にサイト閲覧数を伸ばせる可能性があります。

STEP2:テンプレートを決める

制作ツールを選んだらテンプレートを決めましょう。

テンプレートはWebサイトの外観に大きな影響を与えます。そのため、Webサイトでどのような情報を発信するか、あるいはどのような人に見てほしいかを整理したうえで、選択することが重要です。例えば、政治経済の情報を中心としたWebサイト制作をするのに、かわいらしい色やフォントを選んでしまうと、Webサイトの閲覧者が減少しかねません。

そのような事態を防ぐためにも、Webサイト閲覧者の立場になり「どのようなWebサイトなら見やすいか」を考えてテンプレートを選ぶことが重要です。

下記に、WixでおすすめしたいテンプレートをWebサイトの種類別にまとめました。

Webサイトの種類おすすめのテンプレート
個人ブログ個人ブログ
クリエィティブ履歴書
履歴書サイトB
ECサイトファッション雑貨ショップ
電子機器ストア
企業サイトAI 開発会社
建築会社B

このようにテンプレートを設定するだけで、Webサイトの印象は大きく異なります。Webサイトを制作する目的や主な閲覧者を踏まえ、最適なテンプレートを選ぶようにしましょう。

なお、上記を含めたおすすめの無料テンプレートをより詳しく知りたい人は、下の記事を参考にしてください。

初心者も高品質なHPが作れる|ホームページ無料テンプレート厳選3選!

STEP3:テンプレートにテキストや画像を追加する

テンプレートが決定したら、Webサイトに表示するテキストや画像などを追加しましょう。

WixではWebサイトに表示するコンテンツは「パーツ」と呼ばれる部品を追加しながら全体を構成します。主なパーツは次のとおりです。

  • テキスト
  • 画像
  • ボタン
  • 動画・音楽
  • 支払い
  • サービス予約
  • ソーシャル

「テキストパーツ」や「画像パーツ」を使えば、HTMLに関する知識がまったくない人でもWebサイトの好きな場所にテキストや画像を表示可能です。

さらに「支払いパーツ」を埋め込めば、PayPalによる支払いを簡単にWebサイトへ追加できます。同様に「ソーシャルパーツ」を設定すると、InstagramFacebookなど各種SNSのシェアボタンが表示されます。

このようにツールを活用すれば、初心者でも簡単に高機能なWebサイトを制作できる点が魅力といえるでしょう。

STEP4:ドメインを設定する

最後にWebサイトのドメインを設定します。

WIXの場合はWIXドメイン(wixsite.com)のほか、完全にオリジナルのドメインも設定可能です。お名前.comムームードメインなどのドメイン取得サイトで購入したドメインも設定できるため、お気に入りのドメイン名でWebサイトを公開しましょう。

なお、設定したドメインが反映されるまでは最大48時間程度かかります。反映が完了すると世界中の人がWebサイトにアクセスできるようになります。

挫折なくWebサイトを作るなら

ここまで記事を読み、自力でWebサイトを作ろうとしている人のなかには、

1人でちゃんと作り切れるかな…
途中で挫折したらどうしよう…

と不安な人もいますよね。

実のところ、Webサイト制作といった独学でのプログラミング学習に挫折する人は多くいます。事実、弊社の調査では

  • 不明点を聞ける環境になかった
  • エラーが解決できなかった
  • モチベーションが続かなかった

などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。

プログラミング学習における挫折率の調査
プログラミング学習者の87.5%が挫折を経験したことがある

調査概要:プログラミング学習の挫折に関するアンケート
調査対象:10代〜80代の男女298名
調査期間:2019年8月13日~8月20日
調査方法:インターネット調査
掲載元:PR TIMES

いざ独学でWebサイトを作り始めても、勉強の最中に挫折しては学習にかけた時間を悔やむだけでなく「思っていたよりも難しいな…」とスキルの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER(侍エンジニア)」です。

300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
previous arrow
next arrow
分割料金一括料金受講期間
4,098円~16万5,000円~1ヶ月~
  • 転職・副業・独立などの目的に特化したコースあり
  • 累計指導実績4万5,000名以上
  • 給付金活用で受講料が最大70%OFF

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。

先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、プログラミングスキルを習得するのは非常に難易度が高いといえます。

しかし、侍エンジニアでは

  • 現役エンジニア講師によるマンツーマンレッスン
  • 現役エンジニアに質問できるオンラインでのQ&Aサービス

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境で学習を進められるといえます。

また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもITエンジニアへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なお、侍エンジニアでは最大70%OFFで受講可能な「給付金コース」を提供中。金銭面での支援を受けつつ、理想のキャリア実現に向けたスキルの習得から、転職活動・就業後のフォローアップ(※1)までを一貫してサポートしてもらえます。

※1:転職後の1年間、転職先での継続的な就業や転職に伴う賃金上昇などのフォローアップ

学習と金銭面をどちらもサポートしてくれる侍エンジニアなら、未経験からでも安心してITエンジニアへの転職や副業での収入獲得などの目的が実現できますよ。

公式サイトで詳細を見る

まとめ

今回はWebサイトの作り方を、方法別に具体的な制作手順も交えて解説しました。

Webサイト制作ときくと難しい作業だというイメージを持っている人も多いかもしれません。しかし、WordPressなどのCMSをはじめ、JindoやWixなどの制作ツールを利用すれば誰でも簡単にWebサイト制作が可能です。さらに、HTML/CSSやJavaScriptのスキルを習得すれば、自由にオリジナルWebサイトを作ることができます。

なお、優れたWebサイトを制作するためには、目的の明確化からはじめることが重要です。目的がはっきりすれば自ずとWebサイトのデザインやコンテンツの方針が決まるからです。

Webサイト制作に興味を持っているひとは、この記事を参考にチャレンジしてみてはいかがでしょうか。

この記事の監修者

立川信行

フリーランスエンジニア

立川 信行


【プロフィール】
株式会社ミロク情報サービスにて7年間、法人営業を経験。その後、半年間プログラミングを独学で学び、2021年にフリーランスへ独立。Webサイト制作やWebマーケティング事業を担いつつ、侍エンジニアのインストラクターとしても活躍中。
【専門分野】
Webサイト制作、Webマーケティング

この記事を書いた人

【プロフィール】
Webライター8年目。IT企業でPM(プロジェクトマネージャー)として複数プロジェクトの管理を行う傍ら、2017年からWebライター活動を開始。IT分野を中心に、オウンドメディアの記事執筆を担当。2021年から侍エンジニアブログの記事制作を務めており、現役エンジニアならではの視点を意識し、読者に有益な情報提供を心掛けています。
【専門分野】
Web開発/プロジェクトマネジメント
【保有資格】
基本情報技術者試験
応用情報技術者試験
AWS Certified Developer - Associate認定

目次