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

あなたはどれにする? Webサイトを作る3つの方法

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

あなたも、


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

そう思ってWebサイトの作る方法や作り方・手順などを調べてるんじゃないでしょうか?

Webサイトを作る場合、目的によって3つの方法に分かれます。Web制作で失敗しないコツは目的を明確にし、それにあった方法で手順を踏むことです。

この記事ではあなたの目的にあったWebサイト作りの方法や流れを知ることができます。Web制作の全体像を掴み、あなたにどの方法があっていてそのために何が必要かを確認しましょう。

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

イチから全て自分で手作り

あなたが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サイトが数時間で簡単に作れます。無料で用意されているサービスやツールも多く、コストをかけられない人の強い味方です。

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

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

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

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

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

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

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

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

などが考えられます。

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

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

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

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

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

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

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

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

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

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

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

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

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

画像:サイト構成図の例

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

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

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

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

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

制作の流れ

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

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

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

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

試しに作ってみました。

HTML


Hello World!


画像:ブラウザ画面

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

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

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

初心者必見!ホームページのドメインとは?種類の選び方と取得方法
更新日 : 2019年6月6日

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

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

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

必要なスキルと知識

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

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

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

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

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

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

制作の流れ

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

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

詳しくは以下の記事を参考にしてください。


レンタルサーバー徹底比較|WordPressを使うならこれだ!
更新日 : 2018年12月4日

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

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

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

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

必要なスキルと知識

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

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

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

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

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

制作の流れ

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

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

必要なスキルと知識

  • 画像加工
  • 文章作成

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

まとめ

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

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

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

することです。正しい手順と方法で素敵なWebサイトを作ってくださいね。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

モリシタ

モリシタ

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説