PR 副業のノウハウ

【すぐ分かる】0から始めるWebサイトの作り方と公開までの流れ

【すぐ分かる】0から始めるWebサイトの作り方と公開までの流れ
悩み中の人
悩み中の人

Webサイトってどうやって作ればいいんだろう?自分だけのサイトを公開してみたいな。

こんな悩みにお答えします。

本記事の内容

  1. Webサイトの種類と違い
  2. Webサイトの作り方と公開方法
  3. サイトのデザインについて

この記事を書いた人

ブログ歴5年、アフィリエイト歴10年以上の僕がWebサイトの作り方についてお伝えします。

ひろ
ひろ

今は個人でも簡単にWebサイトを作ることができて、3パターンの中から好きなものを選ぶだけです。

Webサイトの作り方はたった3パターンですが、どうせなら「サイトオーナー」になる方法がお勧めですね。自分でサイトを運用・管理するほどレベルアップもするので、その辺りを詳しく解説していきますね。

この記事を書いた僕ですが、サイト運用歴は10年以上になります。そんなにハードルが高いことではないので、初心者の方でもすぐ始められますよ。

ぶっちゃけ今はサイト公開もそんなに難しいことでもなくて、この記事を読んだ後、パッと作業すればすぐに公開までできるくらいです。

この記事ではWebサイトの作り方から公開までの流れを、ゼロから始める初心者の方でも分かるようにまとめました。では早速、そもそもWebサイトとは?から始めていきましょう。

そもそもWebサイトとは何か?を正しく理解しておこう

Webサイト?それともホームページ?

ホームページとかWebサイトとか呼び方が色々あって、そもそもどれが正しいのか何がどう違うのか分かりにくい、って思うかもしれませんが、実は「Webサイト」と呼ぶのが正式です。

ホームページとは本来、ブラウザを開いて1番最初に表示されるページのことを言います。複数ページの集まりのことを総称して「Webサイト」実はこれが正式名称です。

悩み中の人
悩み中の人

え・・じゃあ日常会話の「ホームページ」って、本来の意味とは実は違うの?

ひろ
ひろ

日常会話はもうホームページで全然悪くないですけどね。詳細な違いも含めて覚えておくと、より分かりやすくなりますよ。

サイトの呼び方と意味

  • Webページ
    →1つのページ
  • Webサイト
    →Webページの集まり
  • ホームページ(HP)
    →ブラウザを立ち上げて最初に表示されるページのこと

厳密に言うとこうですね。
ただ「HP」という単語も使いやすいので、ここでも使ってます。一応知識として知っておくと理解が早いと思いますよ。

サイトの種類と違いは大きく分けて3つだけ

ブログにするかHPにするかの違い

ではWebサイトの種類についてです。
サイトの種類はった3つだけ。世の中のほとんどのWebサイトは、この3つのどれかと言っていいと思います。

Webサイトの種類

  • 無料ブログ
  • WordPressブログ
  • Webサイト(いわゆるホームページ)

世の中のサイトはほぼ全てこのどれかですね。会社やお店のサイトはいわゆるホームページになっていることが多く、個人で作っている僕のこのサイトは、WordPressブログのサイトです。

どれも複数ページが集まっているWebサイトであることには変わりありません。ホームページは会社概要やスタッフ紹介など、整理された情報を見せるのに向いています。ブログは更新が前提なので、新着情報を見せるのに向いていますね。

ブログタイプかホームページタイプか選び方に迷う人は、自分がどんなサイトを作ってどんな情報を見せたいのか用途に合わせて決めましょう。

目的に合わせてタイプを選ぼう

例えば10ページの会社ホームページは、htmlファイルというファイルを10ページ分作成すればそれでサイトは完成です。(もちろんその後ページを追加していくことも全然できます)

見せたい情報がある程度決まっていて、1度作ったらそこまで頻繁に更新するわけじゃなければホームページタイプ向き。サイトに追加情報をどんどんストックしていくなら、ブログ向きです。

ブログ記事は新しい記事から時系列で順番に流れていきます。ホームページは作成した順番に関わらず好きな場所に配置できるという違いがありますね。

悩み中の人
悩み中の人

この3つなら、無料ブログが手っ取り早くてすぐできそうだよね。無料ブログでも、自分のWebサイトって言えるのかな?

ひろ
ひろ

無料ブログは簡単ですが最もお勧めしないです。あれはあくまで「運営会社の物」なので、自分がオーナーのサイトとは言えませんから。

無料ブログはやめておこう

amebloやライブドアなど有名な無料ブログも確かにありますが、無料ブログは賃貸物件、つまり「借りている物」です。無料ブログは運営会社の規約次第なので、ブログが急に凍結されるリスクもゼロじゃありません。

無料ブログのデメリット

  • ブログ運営会社の広告が入る
  • 検索で上位に表示されにくい
  • ブログサービス自体が突然終了したりする

最初の練習くらいならいいかもですが・・。
自分だけのWebサイトを作って公開するなら、やはりHPを作るかWordPressブログにするかどちらかがいいですね。

HPを作るか、WordPressブログのどちらかにしておけば間違いはないです。途中までの手順は同じなので、サイトオーナーとしてWebサイトを運用していく流れをこれから解説していきますね。

まずはWebサイト公開までの土台作りを

サイトの土台は2ステップで完成

最初は土台作りからですね。
まず先にやらないといけないのが、サイトのURLとサーバーの準備です。サイトのデザインはそれからになります。

まずはサイトをアップロードする場所(サーバー)と、サイトを公開する住所(URL)が必要になります。

step
1
サイトのURLを決める

自分のサイトのURLを決めて、ドメインを取得します。「~.com」や「~.net」というやつですね。他かの誰かと同じURLは取得できないので、自分だけのURLを考えて取得しましょう。

step
2
サーバーを準備する

サイトをアップロードする場所は、専用のレンタルサーバーを借りて使うのが一般的です。有名なWoredPressブロガーやサイト運営者も、もみんなレンタルサーバーを借りて使っています。

ドメイン(URL)を取得する

ホームページタイプでもブログタイプでもまず最初にやるべきことはドメイン(URL)を決めることです。これからサイトオーナーになるわけなので、世界で1つ自分のだけのURLを決めましょう。

ドメインは早い者勝ちです。他の人と同じURLを取得することはできないので、思いついたらすぐに取得手続きを済ませましょう。

当サイトであれば『hiro07.com』というのが僕が決めて取得したドメイン(URL)です。自分のサイトの象徴とも言えるほど大事な名前になります。

ドメインは登録業務や維持管理を行っている、ドメイン管理事業者のところで購入手続きをするのが一般的です。既に使われているかURLかどうかも、すぐに調べることができます。

をこれまで取得したことがないという人は「お名前.com」が使いやすく便利なのでそこで探してみて下さい。
↓↓

.com/.net/.jp ドメインはお名前.comが便利です

サーバーを借りる

これもWebサイト作りには欠かせない作業です。ドメイン(URL)はネット上の自分の住所のようなもので、サーバーは自分のサイトを設置するための土地のようなものになります。

住所(URL)と土地(サーバー)があれば、あとはWebサイト(店舗)をネット上にアップロードすることができます。

一般的にネット上の住所(URL)は購入し、土地(サーバー)は購入ではなくレンタルして使います。自前で準備もできなくはないですが、相当な知識と技術が必要なので、サクッと借りましょう。

住所(URL)は購入し、サーバーはレンタルする。これが最も一般的で、最も安心確実な方法です。

「XSERVER」か「mixhost」のサーバーなら間違いない

ネット上の土地(サーバー)を貸し出ししてくれる業者さんはたくさんいますが、最強のレンタルサーバーというのが実はもう決まっています。

レンタルサーバーならXSERVER(エックスサーバー)か、mixhost(ミックスホスト)が間違いなくお勧めです。サイト表示の高速性、安定性、実績と人気を考えてもこの2つがずば抜けています。

この他にも確かにレンタルサーバー業者はいますが、結局コスパや機能性を突き詰めていくと必ずこの2つに絞られていくのです。

ちなみに僕はこのサイトでは、XSERVERのレンタルサーバーを使用しています。

XSERVER(エックスサーバー)とは?

高安定性のエックスサーバーは、知名度と実績で他社を大きく引き離している超人気のサーバー会社です。サイト運営者で、エックスサーバーを知らない人はいないと言ってもいいくらいですね。

高速表示、高い安定性、リーズナブルな料金、どれを取っても1級品のレンタルサーバーです。エックスサーバーを業界1と推す人も多いです。

初心者だろうが玄人だろうがここを使っておけばまず間違いないです。エックスサーバーの詳細はコチラから
↓↓

無制限機能盛りだくさんのレンタルサーバー

mixhost(ミックスホスト)とは?

これまでサーバーと言えばエックスサーバーの一択!が定説でしたが、2017年に突如現れたmixhostが、市場をガラリと変えることになりました。他社をゴボウ抜きし、一気にトップクラスの仲間入りを果たしたのです。

より高品質を追求したmixhostは、とにかく高スペックで使いやすい。さらにエックスサーバーでは必要な初期費用3,000円も、mixhostなら要りません。

僕がmixhostを気に入った理由は色々ありますが、とにかく設定がとても簡単で使いやすく、お試し期間を過ぎても辞める気が一切起こりませんでした。

値段もエックスサーバーよりさらに安く、しかも高速・高性能で使いやすいのでここに決めました。mixhostの詳細はコチラから
↓↓
mixhost

初期費用0円で使える高性能サーバーmixhost

HP作成ソフトかWordPressでデザインしていく

サイト公開までもう少し!

ドメインという住所(URL)が決まって土地(サーバー)まで準備できたら、あとはいよいよWebサイト(店舗)をネット上に出すだけです。

Webサイトにはブログタイプとホームページタイプの2種類があることは前述のとおりですが、この2つでWebサイト(店舗)の作り方が異なります。

ホームページタイプはHP作成ソフトで作り、ブログタイプはWordPress(ワードプレス)を使ってサイトを作ります。作成後、サーバーにアップロードして完了です。

僕のこのサイトはブログタイプなので、サーバー内にWordPress(ワードプレス)をインストールしてサイトを公開しています。

WordPressを無料でインストール

WordPress(ワードプレス)とはサーバー内にインストールができる無料ブログソフトウェアのことです。WordPressでブログサイトを作りますが、エックスサーバーやmixhostならこれを簡単にインストールすることができます。

最強の2社以外のサーバーでは、WordPressのインストールが分かりにくく、使い方も厄介な場合があります。サーバー選びから間違えてはいけない理由がここです。

エックスサーバーもmixhostも、マイページにログインすれば簡単にワードプレスをインストールすることができます。

ワードプレスなら商用サイトも作れるし、プラグインという他のソフトにはない様々な機能を追加して使うことができますよ。

HP作成ソフトの場合

HP作成ソフトと検索すると色んなソフトが出てきます。使いやすいホームページビルダーから、プロが使っているDreamweaver(ドリームウィーバー)まであって、最初はどれがいいかまず分からないはずです。

HP作成ソフトを習得するまでに時間をかけていては、いつまでたってもサイト公開することなどできません。とは言え、世の中に公開されるサイトなのでデザイン性やクオリティも重要です。

主なHP作成ソフト

  • SIRIUS(シリウス)
  • ホームページビルダー
  • Dreamweaver

Dreamweaverは難しくて、最近は使っている人も少ないですね。やっぱり最初は、ホームページビルダーとかSIRIUSみたいな使いやすいソフトが良いですね。クオリティも高いですから。

今はサイトをPCよりスマホで閲覧する人の方が上回っています。最近のHP作成ソフトは、数クリックでPC用サイトとスマホ用サイトの両方を作ることができます。めっちゃ便利ですよ。

「モバイルファースト」の時代で最も重要なのは、スマホサイトがきれいに見やすく作れるかどうかということです。スマホ対応のサイトが同時に作れないなど論外なのです。

閲覧者の画面サイズに合わせてWebサイトを構築する技術を、専門用語でレスポンシブウェブデザインと言います。 

レスポンシブウェブデザインに対応しているHP作成ソフトがお勧めです。だから僕はSIRIUSやホームページビルダーを選んで使っています。詳細は公式サイトをご確認ください。

ホームページビルダーの公式サイト

  • この記事を書いた人
  • 最新記事

HIRO(ひろ)

2016年ブログ開設、ブログ歴8年目。ブログ運営のノウハウを中心に多彩な情報を発信しています。ブラック企業で働きながらコツコツと自分のブログを育てたら人生変わりました。当ブログが少しでもヒントになれば幸いです。

-副業のノウハウ