物販

Webサイトを作るための手段・手順・おすすめツールを全解説!

この記事では、Webサイトを作るにあたって必要な基礎知識、Webサイトを作る手順・方法・ツールについて解説していきます。HTMLやCSSなどのコーディング知識が必要な方法から、全く知識がない初心者でもWebサイトをつくれる方法まで幅広く紹介していきますので参考にしてください。

ホームページ作成前の基礎知識

ホームページを作ってインターネット上に公開しようと思ったら、まずは基礎知識として最低限「サーバー」と「ドメイン」について知っておく必要があります。ここでは、Webサイト作成の第一歩として、サーバーやドメインとはなにか・それぞれどんな種類があるのか、解説していきます。

サーバーがないとホームページを公開できない

ホームページを他者に公開するためには、サーバーが必要不可欠です。ホームページを作成しただけの状態では、自分のパソコンでそのページを閲覧することはできても、他者がホームページにアクセスすることができないからです。あなたが作ったホームページを「サーバーに置いておく」ことによって、そのサーバーにアクセスした人がページを閲覧できます。

ホームページを作りたい!という人でまだサーバーを持っていない、そもそもサーバーとはなんだ?という人は、次項から詳しく説明していくので参考にしてください。

サーバーには無料と有料がある

サーバーを用意するためには、サーバーを提供している会社と契約をしてレンタルすることになります。このとき、選択肢は3つあります。無料の代わりに広告が表示されたり制限が多かったりする無料サーバーと、自由度が高い代わりにお金がかかる有料サーバー、プロバイダ契約するだけで使える代わりに容量が少ないホームページスペースの3つです。

《無料レンタルサーバー》
メリットは、無料で借りられることです。性能については問題なく、初期費用をかけずにホームページを作るには最適だと言えます。デメリットは、広告が表示されてしまうことです。

しかも、自分で設定するもの・自分のホームページの内容に関係あるものではなく、無作為に選出されたものが表示されます。無料レンタルサーバーが無料なのは、広告収入で生計を立てているからなので仕方がないのですが、記事の内容を邪魔してしまう可能性が高いです。

《有料レンタルサーバー》
お金がかかる以外にデメリットはありません。メリットは、動作が快適であること、独自ドメインを取得できること、アフィリエイトやアドセンスに使用できること、安定してサービスが提供されること、容量が大きいこと、機能が多いこと、サポート体制が整っていることなどが挙げられます。アフィリエイトなど収入を得るためのホームページとして使用する場合や企業のホームページを作りたい場合などは迷わず有料レンタルサーバーを選択しましょう。

《ホームページスペース》
インターネットプロバイダと回線契約をするだけで自由に使えるスペースとして提供されるのがホームページスペースです。サーバースペースともいいます。広告表示なく無料でホームページを公開できるのがメリットで、自動広告表示の無料レンタルサーバーの弱点を補ってくれる形です。

ただし、容量が小さく、機能の制限も大きいので、やれることに限界があります。お試しでホームページを公開するには良いですが、継続してホームページ作成をしていくのならやはりレンタルサーバーを借りたほうが良いでしょう。

ドメインは独自ドメインがおすすめ

ドメインとは、ホームページにアクセスするために必ず必要になるものです。ホームページを他者に公開するためにはサーバーが必要ですが、そのサーバーの場所を特定するための住所のような役割を果たしているのがドメインだと考えてください。ドメインがないと、ネット上にあるお目当てのホームページには行きつけません。

そして、ドメインには共有ドメインと独自ドメインが存在します。共有ドメインはサービス運営会社のドメインを複数人で共有して使う方法で、自分の好きな文字列を設定することができません。SEO的に不利なだけでなく、共有して使っている他のユーザーが問題をおこすと自分にも影響が出てしまう、といったデメリットも存在しています。

対して独自ドメインは、世界に一つだけの自分のドメインを取得する方法です。よく企業のホームページを見に行くと、ドメインが企業名になっていることがあります。

独自ドメインはユーザーにURLを覚えてもらうために有利である上に、SEOに強い、サイト自体が消滅するリスクが少ないなど多くのメリットがあります。お試しでホームページを作ってみたい場合やお金をかけずに趣味としてやりたい場合は共有ドメインを選択するのもありですが、本格的にホームページ運用をしていきたい人は独自ドメインがオススメです。

Webサイトを作る手順と作業内容

ここでは、Webサイトを作る一般的な手順を解説します。主な流れは、以下のとおりです。

(1)どんな目的でWebサイトを作るのかを決める
(2)どんな見た目のWebサイトにするかを決める
(3)Webデザインを清書する
(4)HTMLやCSSなどでコーディングする
(5)サーバーにアップロードして公開する

各手順で具体的にどのようなことをするのかの説明もしていきますので参考にしてください。

(1)どんな目的でWebサイトを作るのかを決める

まずは、どんな目的でWebサイトを作るのかを明確にしましょう。企業サイトを作るのか、アフィリエイトサイトを作るのか、趣味の活動を紹介するサイトを作るのかなど目的によって最適な構成、必要な要素は異なります。

画像のように、簡単な構成図を書いてみると良いです。画像を多く使う・テキストの内容はこんな内容・サイト全体の雰囲気はこんな感じ・メインカラーはこれ、など全体の軸も決めておきましょう。

(2)どんな見た目のWebサイトにするかを決める

構成図をもとに、各ページのデザインを細かく練っていきます。

店舗名・店舗住所・電話番号・画像・インフォメーション・地図・テキストなど、構成要素を細分化して、それぞれがどの位置に来るようなデザインにするのか図案に書き起こしましょう。この段階では手書きで構いません。

(3)Webデザインを清書する

2で作った図案をもとに、Photo ShopやIllustratorなど専用ツールを使って画像として作成します。

この段階ではWebサイトとしての機能は持っていないただの画像ですが、これをそのままサイト上に再現する作業がコーディングです。今はまだ画像としてそこにあるだけのボタンやタイトル、ナビゲーションにもリンク機能がつき、普段使っているようなWebサイトが作り上がっていくのです。この段階で作ったロゴやボタンデザインは後で使用しやすいようにパーツごとに保存しておきましょう。

(4)HTMLやCSSなどでコーディングする

いよいよ、Webサイトを作り上げていく作業です。HTMLやCSSといったプログラミング言語を使いながら、3で作ったデザインどおりにコーディングしていきます。

HTMLが文章を記述したり画像を表示させたりといった骨組みを作る役割を果たし、CSSが文字の大きさや色など装飾を施す役割を果たします。この2つだけでもWebサイトを作ることは可能ですが、動きをつける役割のJavaまで扱えるようになるとWebサイトの完成度は更に高くなるので、余裕があれば取り入れるのがおすすめです。コーディングが完了したら、アップロード前に動作確認をおこないましょう。

(5)サーバーにアップロードして公開する

Webサイトの作成ができたら、いよいよサーバーにアップロードします。この作業によって他者からもWebサイトを閲覧することができるようになるわけです。レンタルサーバーには有料と無料がありますが、本格的にWebサイトを運用していくのであれば有料版を選択しましょう。

公開されたページを自分で見に行こう

制作段階で散々見てきたページとはいえ、初めて作ったWebサイトが実際に公開されているのを見に行くのは感動ものです。自分でサイトを見に行く・友人にサイトのURLを教えるなどして、アップされたページを確認してみましょう。

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

Webサイトを作りたいと思ったとき、必ずしもHTMLやCSSといったプログラミングの知識を持ち合わせている必要はありません。ここでは、Webサイトを作るために選べる4つの手段を紹介します。それぞれにメリットとデメリットがあり、作成できるものや使える機能に違いがありますので、自分のスキルや目的に応じて選びましょう。

WordPress

WordPressは、手軽に本格的なWebサイトを作ることができるうえ、ホームページ・ブログ・キュレーションサイトなどさまざまな用途に合わせて利用できるおすすめのツールです。ただ、初心者には初期設定が難しく、プラグインやHTML、CSSなどの知識もある程度必要になるので、万人向けとは言えません。

《WordPressのメリット》
・テーマが豊富で目的にあったおしゃれなサイトデザインが容易にできる
・プラグインを使うことによって機能拡張やカスタマイズができる
・Webサイトを自社管理できる
・複数人での管理が可能

《WordPressのデメリット》
・WordPress自体の更新などメンテナンスが必要
・初期設定が多く公開までに時間がかかる
・レンタルサーバーがないとWebサイトをアップできない

ホームページ作成サービス

ホームページ作成サービスは、HTMLなどのコーディング知識・プログラミング知識が一切必要なく、用意されたテンプレートに文字入力をするだけで簡単にホームページが作成できるサービスです。無料と有料があり、無料版でも独自ドメインの設定ができるなどある程度の機能は備わっていますが、機能の多さや広告の設定などを考えると有料版のほうがおすすめです。

《ホームページ作成サービスのメリット》
・レンタルサーバーやドメインの知識がなくても大丈夫
・プログラミング知識がなくてもWebサイトをつくれる
・少ない手順であっという間にWebサイトを公開できる
・デザインテンプレートも多く、おしゃれなページが作成できる

《ホームページ作成サービスのデメリット》
・カスタマイズには制限があるため、自由度は高くない
・無料プランだと使える機能が少ない

ブログサービス

企業ホームページやキュレーションサイトなどではなく、ただ記事を書いて公開したいという人はブログサービスを使うのがおすすめです。アカウントさえ作ればすぐにWebサイトを公開できますし、コーディングやレンタルサーバーなどの知識も必要ありません。ショップの紹介をする場合にも、ホームページではなくブログを使って情報発信しているケースもありますし、使いようによっては個人用にも商業用にもなります。もともと用意されたテンプレートの中からデザインを選んで、テキスト入力や画像挿入をおこなうだけですので、初心者でも大丈夫です。

《ブログサービスのメリット》
・レンタルサーバーやドメインの知識がなくても大丈夫
・プログラミング知識がなくてもWebサイトをつくれる
・少ない手順であっという間にWebサイトを公開できる

《ブログサービスのデメリット》
・企業ホームページを作るのには向いていない
・カスタマイズには制限があるため、自由度は高くない
・無料プランだと使える機能が少ない
・ブログサービスの提供が終了してしまう恐れがある

コードを書いてWebサイトを作る

自分でコードを書いてWebサイトを作るのは、一番時間がかかり専門知識も必要ですが、すべて自分の好きなようにどんなサイトでも作れます。コーディングの勉強はオンラインでも可能ですし、半年ほど学べばWebサイトをつくれる程度になれますので、興味のある人は頑張ってみましょう。

《コードを書いてWebサイトをつくるメリット》
・自分の思い通りのデザインでWebサイトをつくれる
・自由度が高く、好きなようにカスタマイズできる
・問題が起きたときも自分で対処できる

《コードを書いてWebサイトをつくるデメリット》
・レンタルサーバーが必要
・問題が起きたときに自分で対処する知識が必要
・メンテナンスを自分で行わなければいけない
・コーディング知識が必要
・Webサイト公開までに時間がかかる

目的別Webサイトを作るために必要な知識

ここでは、Webサイトを作るためにどんな知識が必要なのか、目的別に解説していきます。目的によっては特に何も学ぶ必要なく、今すぐにでもサイトを立ち上げることが可能です。

WebデザインをしたいならHTMLやCSSの知識が必要

自分でイチからWebサイトを作り上げたいときには、最低限HTMLとCSSの知識が必要です。加えて、Webサイトに動きを加えたいときにはJavascriptなども学ぶ必要が出てきます。

単純にブログを書きたいだけなら知識は不要

Webサイトを作るといっても、ただ記事を書いてネット上にアップしたい、つまり「ブログを書きたいだけ」という人なら、ブログサービスを使うだけで事足ります。無料で利用できるサービスも多く、もともとあるデザインテンプレートの中から好きなものを選んでテキストを入力していくだけなので、コーディングの知識も必要ありません。普通にネットを使える程度の知識さえあれば、特に新しく勉強することなくはじめることが可能です。

おしゃれなブログ・アフィリエイトサイトを作りたいならWordPressの知識が必要

無料ブログサービスでは機能が足りない、豊富なデザインテンプレートの中から選びたい、アフィリエイトサイトを作りたい、などという場合にはWordPressがオススメです。初期設定が少々難しいので、WordPressについて書かれたブログや書籍で勉強しましょう。ただし、自由にカスタマイズしていくにはHTML・CSSの知識も必要です。

無料でホームページを作れるツールを5つ紹介

無料でホームページをつくれるサービスを5つ紹介します。無料というだけあって、容量が少ない、広告が自動表示されてしまうなどの制限がありますが、趣味としてやお試しでホームページを作ってみるには最適なサービスです。独自ドメインの取得ができるか、有料プランへの移行は可能かなどもあわせて解説していきますので参考にしてください。

Ameba Ownd(アメーバオウンド)

サイバーエージェントが提供している、無料でホームページ・ブログ・メディアサイトが作れるサービスです。商用利用もOKでスマホサイトにも対応しているため、さまざまなニーズに合わせた利用ができる点が魅力です。

・無料プランでも独自ドメイン設定が可能
・無料で最大10サイトまで作成可能
・ページ数10ページまで
・画像ストレージ1024MB
・年間9,600円のプレミアムプランに移行するとページ数や画像ストレージが無制限になり、広告の非表示もできる

参考:Ameba Ownd

Jimdo(ジンドゥー)

コーディング不要のホームページ作成サービスとコーディングでカスタマイズできるホームページ作成サービスの2つから選んで使えるのが魅力です。初心者から上級者まで対応できるので、用途やスキルによって合う方を選びましょう。

・独自ドメイン取得は有料プランのみ
・無料だとページ数5ページまで
・無料だとサーバー容量500MB
・990円と1,590円の2つの有料プランあり
・無料プランの制限が大きいので、無料プランはお試し用で運用するなら有料に切り替える必要あり

参考:Jimdo

WIX(ウィックス)

初心者でも簡単にWebサイトがつくれる「WixADI」、コードを使ってデザインできる「Wixエディタ」、デベロッパー向けの「Corvid」の3つのツールを提供しています。Webサイトだけでなくロゴ作りなどもでき、ブログからネットショップまで幅広く対応できるのが魅力です。

・独自ドメインの取得は有料版のみ
・無料だとサーバー容量500MB
・ホームページ作成用の有料プランが月額500~2,500円までの4段階
・ネットショップ用の有料プランが月額1,800~3,800円の3段階
・無料プランだと制限が大きいので、本格的に運用するなら有料プランへの切り替えが必要

参考:WIX

BiNDup(バインド・アップ)

用意されたテンプレートの文字や画像を入れ替えるだけでWebページの作成ができるので、初心者でも簡単に完成度の高いサイトを作り上げることが可能です。エントリープランという初年度無料のプランがありますが、永年無料プランというものはなく2年目以降480円がかかってくる点に注意です。容量が少なくてもいいから無料で開設したい、有料プランへの移行は考えていない、という人には向いていないと言えます。

・独自ドメインの取得は有料プランのみ
・無料だと1サイトまで作成可能
・無料だと公開サーバー1GB
・無料プランではじめても2年目以降は月額480円が発生
・月額2,980円~の有料プランあり

参考:BiNDup

FC2ホームページ

FC2は、広告無しでホームページを作れる無料ホームページスペースです。商用利用可能でディスク容量は1GB、WEBマンガやフォトアルバムの作成もできます。

・独自ドメインの取得は有料
・無料だと容量1GB
・独自ドメインを使いたいなら年間999円、2年目以降年間2,780円の支払いが必要

参考:FC2ホームページ

まとめ


自由度が高く、思い通りのWebサイトを作るにはコーディングの知識が必要不可欠ですが、今はさまざまなWebサイト作成サービスがあり、ある程度の範囲までなら初心者も簡単にWebサイトの作成が可能です。無料で利用できるものも多いので、お試しで自分が作ったWebサイトを公開してみたい、という人は今すぐにでも試してみると良いでしょう。

本格的にやってみたい、もっと自由にデザインしたいという欲求が出てきたら、有料プランに移行するなりコーディングの勉強をするなりしてみれば良いのです。Webサイトを作るのは今や誰にでも簡単にできること、あまり気負いすぎずに挑戦してみましょう。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。