Webサイトは制作は昔ほど専門的な知識やスキルがなくても、パソコンとインターネットの環境さえあればできるようになりました。

あなたも、

などの理由からWebサイトを作る方法や手順を調べているのではないでしょうか。

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

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

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

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

０から全て自分で手作り

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

などが考えられます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

制作の流れ

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

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

【エンジニア監修】テキストエディタとは？〜生産性が100倍変わる〜

更新日：2023年3月21日

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

試しに作ってみました。

HTML

Hello World!

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

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

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

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

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

必要なスキルと知識

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

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

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

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

制作の流れ

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

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

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

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

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

更新日：2023年3月21日

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

必要なスキルと知識

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

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

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

制作の流れ

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

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

必要なスキルと知識

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

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

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

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

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

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

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

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

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

そこでおすすめなのが、月額2,980円でWebサイトの制作スキルを学びつつ、現役エンジニアとのマンツーマンレッスンを受けられる「SAMURAI TERAKOYA（侍テラコヤ）」です。

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

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

しかし、侍テラコヤでは

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

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

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

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

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

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

公式サイトで詳細を見る

まとめ

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

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

ということです。

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

とはいえ、

と悩む人もいますよね。

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

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

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

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

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

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