Webサイトの作り方！知識ゼロの初心者が無料で作る3つの方法

この記事では、Webサイトの作り方をステップ形式で解説します。

「独学と並行しながら、副業で稼げるようになれるかな…」

そんな不安を抱えている人は、ぜひ「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポート。フリーランスエンジニアの支援を受けながら、実際の副業案件にも挑戦できます。

これまで4万5,000名以上の受講生を指導してきた侍エンジニアなら、未経験からでも挫折なく副業での収入獲得に直結するスキルが身につけられますよ。

＼ 給付金で受講料が最大80%OFF ／

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

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

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

ゼロから自作する

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

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

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

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

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

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

なお、副業での収入獲得を目指しているものの、どんな仕事が自分に合うかわからない人は「副業診断」をお試しください。

かかる時間はたった1分ほど。5つの質問に答えるだけで、自分にあう副業を診断してもらえます。

自身が取り組みやすい副業で収入を獲得したい人は、ぜひ一度お試しください。

＼ 5つの質問に答えるだけ ／

CMSを活用する

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

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

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

ただし、あまりプラグインを導入しすぎるとWebサイトのロード時間が遅くなる場合があるので注意してください。今すぐ本方法での具体的な手順が知りたい人は、下記から移動してください。

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

なお、Webサイトを作りたい気持ちはあるものの、どのプログラミング言語が自分にあうのか、どう学習を進めればいいのかなどがあいまいな人は「プログラミング学習プラン診断」をお試しください。

かかる時間は1分ほど。4つの質問に答えるだけで、あなたにあう言語や学習プランを診断してもらえます。

効率よくプログラミングを学習したい人は、ぜひ一度お試しください。

＼ 4つの質問に答えるだけ ／

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

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

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

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

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

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

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

なお、ITの仕事に興味はあるものの、どの職種が自分にあうのかわからない人もいますよね。そんな人は「ITキャリア診断」をお試しください。

かかる時間はたったの1分。5つの質問に答えるだけで、自分にあうIT職種を診断してもらえます。

自身に適した職種が知りたい人は、手軽に試してみると良いですよ。

＼ 5つの質問に答えるだけ ／

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

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

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

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

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

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

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

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

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

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

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

なお、Webサイト作成に際しレイアウトといったWebデザインスキルをどう身につければいいのかイメージが湧かない人は、下の「Webデザインの学習手順」を参考にしてください。

→ Webデザインの学習手順を確認してみる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

なお「やり方はわかったけど、自力でWebサイトを作れるかな…」と不安な人は、ぜひ「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制でWebサイト制作をサポート。月5万円や月20万円など、理想の収入金額に応じて仕事の取り方や進め方も学べます。

これまで4万5,000名以上の方を指導してきた侍エンジニアなら、未経験からでも挫折なく収入UPにつながるスキルが身につけられますよ。

＼ 給付金で受講料が最大80%OFF ／

制作ツールで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サイトへ追加できます。同様に「ソーシャルパーツ」を設定すると、InstagramやFacebookなど各種SNSのシェアボタンが表示されます。

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

STEP4：ドメインを設定する

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

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

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

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サイトを作る前の確認ポイント3つ

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

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

何のために作るのか

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

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

などが考えられます。

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

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

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

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

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

どんなサイトにしたいか

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

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

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

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

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

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

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

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

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

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

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

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

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

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

分割料金	一括料金	受講期間
4,098円~	16万5,000円~	1ヶ月~

• 転職・副業・独立などの目的に特化したコースあり
• 累計指導実績4万5,000名以上
• 給付金活用で受講料が最大80%OFF

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

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

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

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

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

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

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

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

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

＼ 給付金で受講料が最大80%OFF ／

まとめ

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

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

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

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