Webサイトの作り方は3パターン!それぞれの制作手順を易しく解説


費用をかけずに自分でホームページを作りたい
Web制作に関わる仕事に転職したい

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

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

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

結論からいえば、Webサイトを作る方法は以下の3パターンです。

  • 0からコードを書いて作り込む
  • CMSを利用して、細部をカスタマイズする
  • サービスやツールを活用して手軽に作る

どれも一長一短なので、目的にあわせて適切な方法を選定し、正しい手順を踏むことで誰でもWebサイトを作ることができます。

この記事ではあなたの目的にあったWebサイトの作り方や手順、失敗しないためのコツなど網羅的にご紹介します。Web制作の全体像を掴み、適切な方法を選定してWebサイト作りに着手しましょう。

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

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

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

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

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

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

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

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

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

目次

自分でwebサイトを作る方法は3つのパターンしかない

0から全て自分で手作り

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

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

という場合、イチから全て自分で手作りする方法をオススメします。仕事でWebサイト制作に関わる場合は、インターネットやWebサイトの構造や仕組みなどを理解した方がいいからです。Webサイトを簡単に作成するツールはたくさんあります。

でも基礎的なことをしっかり理解していないと、応用ができずに壁にぶち当たってしまいます。近年多くの便利ツールが登場し、全く知識や経験がない人でもWebサイトを作れるようになりました。だからこそ仕事でWebサイト制作に関わるのであれば、便利ツールでは作れないWebサイト作る必要があります。

もちろん、全く便利ツールを使ってはいけないということではありません。Webサイトの構造や仕組みを理解し自分で作れるようになった段階で、作業効率化のために利用するのは大賛成です。またWebサイト制作にはサイトについてだけでなく、セキュリティやインターネット通信など色々な知識が必要となります。

ただ作れば良いのではなく、安全性や見た目のよさ・使い勝手のよさなども求められます。クライアントの要望に応えるためには基礎をしっかりと理解し、求められるデザインや機能の実現が必要です。

実際にサイトを自分でイチから企画・設計し、組み立てていく経験を積めば、基本的な知識や作業をマスターするだけでなく、どうすれば効率よくWebサイトを制作できるかもわかってきます。

サービスを利用しながら部分的に手作り

簡単に作りたいけど部分的にはこだわりたい
副業やお小遣い稼ぎでWebサイト制作がしたい

そんなあなたは、Webサイトの大枠や基本的な構築がすでに行われているサービスやツールを利用してWebサイトを作ることをオススメします。

例えば世界的に大人気のWordPressというCMSサービスを利用すると良いでしょう。デザインやWebサイトに詳しくなくてもサイトを作ることができて、カスタマイズの自由度も高いです。

ただ自由度が高い分、あなたが自分で考えて決めなければいけない機能や設定も多くあります。なのでWordPressのようなサービスを使いたい場合は、あなたがどれくらいのITスキルがあり、どこまでこだわりたいかしっかりと考えて選択する必要があります。副業でWordPressのカスタマイズで収入を得ようという人も多いですが、ガッツリ稼ぐことは難しいでしょう。

案件数は多く需要もあるのですが、便利ツールの普及により単価が数年前よりもかなり低くなっています。WordPressのカスタマイズだけで生計を立てるのは非常に難しい状況です。ただしお小遣い稼ぎや案件獲得の経験をつむという意味では、チャレンジしてみるのも良いでしょう。

ツールやサービスを使って手軽に

ホームページを作りたいけど外注するほど予算がない
すぐにWebサイトが必要
簡単なものでいいから自分のWebサイトが欲しい

という方には「はてなブログ」のようなブログサービスを利用したり「Wix」などのホームページ作成ツールを利用すると良いでしょう。

パソコンやWebについてよくわからないという人でも、Webサイトが数時間で簡単に作れます。無料で用意されているサービスやツールも多く、コストをかけられない人の強い味方です。

InstagramTwitterなどのSNSも自動で連携してくれる機能があったり、パソコンを使わずにスマホだけでホームページが作れたりと驚くほど便利です。

難しそうで自分には無理そう……などと尻込みせずに、まずは触って体感してみると良いでしょう。

webサイト作る手順や流れを知ろう

画像:Webサイトを作成時の共通の流れ図

まずはWebサイトを作る目的を明確にしよう

まずは何のためのWebサイトが必要なのか明確にしましょう。

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

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

などが考えられます。

よくある失敗のパターンがあります。先にサイトのデザインなどばかりに集中して、どんな情報を発信するためのサイトなのかよくわからなくなってしまうパターンです。

作り手の思いばかりが強く自分本位のWebサイトでは、せっかく作ったのに、アクセスがないWebサイトになってしまいます。そうならないためにもWebサイトを作るときは目的を明確にしブレないようにしましょう。

どんな内容のWebサイトにするか考えよう

目的が決まれば、どんな内容のWebサイトにするかは自然と決まってくるものです。お店のホームページであれば

  • 住所
  • 商品
  • お店のコンセプト

などが考えられますね。また誰に向けたコンテンツにするのかも考えましょう。例えば自己紹介サイトで言えば、誰に見てもらいたいのかを考えるとどんな情報が必要かがわかってきます。

  • 採用担当の人に見てもらいたいのか
  • 近しい友人なのか
  • 外国人なのか

もし採用につなげたいのであれば今までの経歴や職歴、実績などが必要になりますよね。外国人の友人を増やしたいなら、外国人向けて英語など外国語で読めるWebサイトにする必要があります。

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

Webサイトの構造を考えよう

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

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

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

画像:サイト構成図の例

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

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

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

将来Web制作の仕事がしたい人

画像:将来Web制作の仕事がしたい人向けの流れ図

制作の流れ

まずはテキストエディターをダウンロード・インストールします。テキストエディタとはその名の通り文章を編集するソフトウェアです。HTMLやCSSなどを記述するのに便利なツールです。

パソコンに標準でインストールされているメモ帳でも良いのですが、仕事としてWebサイト制作に関わるのであれば、使いこなせるようになりましょう。

【エンジニア監修】テキストエディタとは?〜生産性が100倍変わる〜
更新日:2024年3月1日

次からは実際に手を動かしてページを作る作業です。HTMLとCSSでページ内容とデザインを作っていきます。実はWebページ用に作ったファイルはローカル(自分のパソコンの中)で見ることができるんです。

試しに作ってみました。

HTML

Hello World!


画像:ブラウザ画面

まだネット上にアップロードさせていないので、パソコンの中だけで確認することができます。赤枠の部分はURLが表示されるところです。普段見ているURLと違いますよね。

まずはひたすらHTMLやCSSを記述して表示を確認することを繰り返してみましょう。流れ図には記述していませんでしたが、JavaScriptを使って動きのあるWebサイトにするならこのタイミングで記述するのが良いでしょう。

作ったWebページをいよいよネット上に公開します。ネットに公開するには、ドメインとサーバーが必要になります。

サーバーについて詳しくはこちらのサイトを参考にしてください。

KAGOYA JAPAN
レンタルサーバーとは?契約からできることを初心者にもわかりやすく解説します
https://www.kagoya.jp/howto/rentalserver/basic-01/

サーバーを通してWeb上にファイルをアップロードすれば、Webページが見れるようになります。(サーバーにアップロードする方法の一つにFTPという転送ソフトがあります。)

必要なスキルと知識

  • HTML、CSSの知識
  • 画像加工
  • 文章作成

以上のスキルや知識がWebサイトを作る上で必要になります。JavaScriptは動きがあるWebサイトにするかどうかで必要性が変わってきます。

しかし仕事としてWebサイト制作に関わりたければ、必ず習得したいスキルです。

サクッ簡単に、でもちょこっとこだわりたい人

今回はWordPressを使って、サクッと簡単にWebサイトを作る方法を解説します。

画像:サクッ簡単に、でもちょこっとこだわりたい人向けの流れ図

制作の流れ

WordPressはネット上で動くソフトウェアですので、まずはその準備が必要です。

ネット上であなたがWebサイトを公開するためには、ネット上の住所が必要になります。そのためドメインを取得とサーバー契約が必要になります。

サーバーにWordPressをインストールして使えるようにします。利用するサーバーによってはワンクリックでインストールができちゃうのでとても便利です。

準備ができたらテンプレートをインストールしましょう。テンプレートはデザインや機能・必要なプラグインなどがセットになっている優れものです。無料から有料まで幅広くあります。

初心者も高品質なHPが作れる|ホームページ無料テンプレート厳選3選!
更新日:2024年3月1日

テンプレートがあればコーディングの技術がなくても、デザイン性が高いサイトを作れちゃいます。Webサイト作りに慣れてきたら自分好みのデザインや機能を追加してもいいですね。コンテンツを作って公開すればあなたのWebサイトが完成です。

必要なスキルと知識

  • WordPressの知識
  • 画像加工
  • 文章作成

コーディングの知識は必要ありませんが、WordPressの操作方法を知っておく必要があります。また画像の加工や文章作成は自分でやるので、このスキルも必要です。

知識ゼロでもwebサイトを作りたい人

知識がなくパソコンも苦手というあなたは、ブログやWebサイト作成ツールを活用しましょう。ブログでもいいという場合はアメーバブログやはてなブログなどがあります。ブログではなくWebサイトを作りたいという方は、JimdoやWixなどを利用しましょう。

画像:知識ゼロでもwebサイトを作りたい人向けの流れ図

制作の流れ

ほんの少しのステップで簡単にWebサイトが作成できます。まずはアカウントを作成します。好きなデザインを選択するだけでWebサイトの大枠が完成です。

あとは写真や文章などのコンテンツを作り公開するだけで完了です。全くWebサイトのことが分からないあなたでも、安心して作ることができますね。

必要なスキルと知識

  • 画像加工
  • 文章作成

流れでもおわかりいただけたと思いますが、このパターンならば本当に誰でも簡単にWebサイトを作ることができます。

Webサイト制作を効率よく進めるなら…

ここまでWebサイトを作る3つの方法をご紹介しました。

しかし、いざ実践になると予期せぬエラーが起こり、挫折してしまう可能性もあります(プログラミング学習での挫折に関するアンケート調査より)。より確実にWebサイトをつくりたいなら、

  • エラーが出たときに質問できる環境
  • 適切な学習教材
  • モチベーションを維持するための明確な目標設定

といったポイントを押さえたうえで、スムーズに学べるサービスを利用するのも手段の1つです。

なお、無料の学習サイトやWebサービスを活用すれば、お金をかけず手軽にWebサイトの制作スキルを身につけられます。しかし、無料サイト・サービスの多くは不明点を質問・相談できる機能がありません

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

仮にわからないことを飛ばしながら勉強を進めたとしても、転職や副業などの目的を実現できるほどの実践的なスキルが身につかなければ、結局後悔することになります。

そのため、1人でWebサイト制作に必要なスキルを習得できるか不安な方は、数千円の費用をかけてでも「不明点を質問・相談できる有料の学習サイト」を選ぶのがおすすめです。

そこでおすすめなのが、登録無料でWebサイトの制作スキルを学びつつ、現役エンジニアとのマンツーマンレッスンを受けられる「侍テラコヤ」です。

700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
previous arrow
next arrow
Webサイト制作が学べる侍テラコヤの教材例

「Webサイト制作コース」
HTML/CSSやJavascriptなど、Webサイト制作に必要なプログラミング言語やWebデザインを学びつつ、Wordpressを用いたWebサイトの制作ノウハウを学習できます。

侍テラコヤをおすすめする最大の理由は「登録無料で現役エンジニアに質問しながらプログラミング学習を進められるコスパの良さ」にあります。

先ほど述べたとおり、独学者の多くは自力でエラーを解決できないためにWebサイト制作を挫折しています。そのため、初学者が現役エンジニアのようなプロに質問や相談ができない環境でWebサイト制作スキルを習得するのは難易度が高いといえます。

しかし、侍テラコヤでは

  • 現役エンジニアが応える回答率100%のQ&A掲示板
  • 必要に応じて受けられる現役エンジニアとのオンラインレッスン

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談できます。

20
21
18
19
20
21
18
19
previous arrow
next arrow

Q&A掲示板の例
Google検索等で解決できなかった抽象度の高い質問も解決可能

下記の口コミからも、侍テラコヤなら挫折しづらい環境で学習を進められるといえます。

18
19
20
18
19
20
previous arrow
next arrow

侍テラコヤ利用者の口コミ

また、侍テラコヤは入会金不要・いつでも退会OKに加え、利用から1ヶ月の間は「全額返金保証制度」が適用されるので「他のサービスを選べばよかった」と後悔する心配もありません。

なぜ侍テラコヤがコスパよくWebサイトの制作スキルを習得できるのか気になる人はぜひ公式サイトをご覧ください。

公式サイトで詳細を見る

まとめ

Webサイト制作で大切なのは目的を明確にすることです。Webサイトにどのような情報を載せるのかはその後で考えましょう。

また自分のスキルに合った方法で作成すると、途中で挫折せずにWebサイトを作ることができます。今回3つの方法をご紹介しましたが、どの方法でも共通する作業は

  • Webサイトを作る目的の明確化
  • コンテンツの考案
  • Webサイトの構造を作成

ということです。

とくに目標の明確化は最も重要なプロセスとなるため、漠然としたまま学習を始めるのではなく具体的な目標を立ててから勉強をスタートするのが賢明です。

とはいえ、

目標ってどう明確にしたらいいの?
Webサイトを作る目的って言われてもいまいちピンとこない…

と悩む人もいますよね。

そこで、おすすめしたいのが侍エンジニアの「無料カウンセリング」です。

侍エンジニアの無料カウンセリングでは、Webサイト制作やプログラミング学習に関する疑問や悩みをプロのコンサルタントに直接相談できます。

コンサルタントはあなたの理想や悩みをヒアリングしたうえで目標の具体化をサポートしてくれるため、カウンセリング後に「結局、Webサイトを作る目的が具体的にならなかった…」と後悔する心配もありません。

カウンセリングを活用すれば、1人で悩み続けるよりも短時間かつ効果的に目標の具体化が可能になります。

なぜ侍エンジニアのカウンセリングを活用すると目標を明確にできるのか、その理由が気になる人はぜひ公式サイトをご覧ください。

無料カウンセリングの詳細を見る

この記事を書いた人

猫をこよなく愛する、侍エンジニアブログ編集部のモリシタです。
価値ある情報をお届けする為、日々精進しながら執筆活動に取組んでいます!

目次