【初心者決定版】ホームページの作り方で最低限知っておきたいポイント

はじめに

今回は初心者向けに、ホームページを作りたい！

だけどホームページの作り方が全くわからない… というあなた

そこで、わかりやすくホームページ作成の重要ポイントを解説し「わかった！こうすればホームページが作れるんだ！」とホームページ作成の道筋が明確になるように、解説したいと思います！

ホームページを公開するために必要なもの

まずホームページを作る前に、ホームページを公開するまでに、最低限必要なものを把握しておきましょう

ドメイン

ドメインとは「yahoo.co.jp」「google.co.jp」など、インターネットの世界の住所のようなものです

ドメインは他の人に使われていなければ、「google」 や「yahoo」などの先頭部分は、自由に自分の好きな名前を取得することができます

「.co.jp」「.com」などの部分はトップレベルドメイン(TLD)と呼ばれ、TLDはいくつかあり、その中から1つを選択します

TLDは個人では「.com」「.jp」を選択することが多く、会社では「.co.jp」「.biz」「.shop」などを選ぶことが多いです

ドメインを取得を行う業者があるので、そこに申し込んでドメインを取得します

費用は初期登録料が100〜10000円ぐらいで、維持費が年間1500〜10000円ぐらいでTLDによってかなり費用に幅があります

レンタルサーバー

レンタルサーバーとは、インターネットの世界の土地のようなものです

レンタルサーバーの業者に申し込んで、レンタルサーバーを借ります

レンタルサーバー上に、ホームページの表示に必要なファイルを置きます

費用は初期費用3000円ぐらいで、月額500〜3000円ぐらいです

ホームページを作成するためのツール

ホームページ作成の基本は、テキストエディタにHTMLとCSSという言語を記述してホームページを作成していきますが、初心者はHTML/CSSの習得に時間がかかります

そのためホームページ作成初心者のために、簡単にホームページが作成できるツールがいくつかあります

どのホームページ作成ツールが良いのかは、後述します

・HTMLとは？

HTMLとは、ホームページを作成するために開発された言語です

HTMLでどういうホームページの構造にするかを記述します

例えば、画像は画面上部に表示する、文章は画像の左側に表示する、表は2行×3列で画面下部に表示するなどは、HTMLで指定します

・CSSとは？

CSSとは、ホームページのデザインを設定するための言語です

例えば、文字の色を赤にする、文字を太字にする、背景色を青にする、枠線を黄色にする、動画の表示サイズを設定する、画像を表示させる時のアニメーションの方法など、デザインに関することはCSSで設定します

個人でホームページを作るポイント

ここでは個人でホームページ作成のポイントを解説したいと思います

また副業、独立起業などで、ホームページから収益を得る方法も解説します

おすすめのドメイン・レンタルサーバーは？

個人でホームページを作成する場合、おすすめのレンタルサーバーはロリポップです

ロリポップ！

ロリポップがおすすめなポイントは、以下のとおりです

• 月額500円の格安の費用である
• 管理画面の操作が、初心者にもわかりやすい
• 初心者にもわかりやすいマニュアルが、豊富に用意されている
• 月額500円のスタンダードプランなら、電話でのサポートも受けられる

ドメイン取得は、ロリポップと同じ運営会社のムームードメインが良いでしょう

ムームードメイン

ドメイン取得する費用はどの業者もあまり変わらないので、業者はどこでも良いのですが、レンタルサーバーをロリポップにした場合は、ムームードメインの方が簡単に設定ができます

ホームページを作成する方法は？

ホームページを作成する方法は、主に以下の3つの方法があります

まずは、ホームページを作るのにどのような方法があるか把握しておきましょう

1.メモ帳などのテキストエディタでHTML、CSSを直接書く

ホームページを作る最も基本的な方法は、Windowsなどのメモ帳などのテキストエディタで、HTML/CSSを記述する方法です

プログラミングをやったことがある経験があれば、HTML/CSSの習得は1〜3ヶ月ぐらいで習得できると思いますが、全くの初心者の場合は習得に半年〜1年かかると思います

学習コストが高いのが難点ですが、HTML/CSSを習得すれば、自由自在のデザインのホームページが作成できます

2.ホームページ作成ソフトでホームページを作成する

2つ目の方法はホームページ作成ソフトを使って、ホームページを作成する方法があります

HTML/CSSを直接書くよりは、簡単にホームページを作成することができます

マイクロソフトOfficeのWordで、ビジネス文書を書くような感じで、ホームページを作ることができます

ただデザインが良いホームページ作るには、ホームページ作成ソフトでもHTML/CSSの知識が必要になり、それなりに学習コストがかかります

またホームページ作成ソフトは有料で、数万円の費用がかかるのも難点です

代表的なホームページ作成ソフトは、ホームページビルダーやDreamweaverなどがあります

・ホームページビルダーとは？

PC・スマートフォン ホームページ作成ソフト ホームページ・ビルダー21 | ジャストシステム

ホームページビルダーは、ジャストシステムから販売されている、ホームページ作成ソフトです

ホームページ作成ソフトで一番有名で、昔から販売されています

初心者向けのソフトで簡単にホームページが作れますが、検索結果で上位に表示すること(SEO対策)が難しという欠点があります

検索結果で上位に表示されているホームページで、ホームページビルダーで作成されたものは、ほとんど見たことがありません

・Dreamweaverとは？

Adobe Dreamweaver CCの購入 | webデザインソフトウェア

Dreamweaver(ドリームウィーバー)とは、Adobeから発売されているホームページ作成ソフトです

ホームページビルダーは初心者向けに対して、Dreamweaverはプロ仕様で、ホームページ制作会社でもよく使われています

しかしホームページビルダーはテンプレートがあり初心者でもそれなりのホームページが作れるのに対して、Dreamweaverはテンプレートがないので一からデザインしてホームページを作らなければなりません

初心者がDreamweaverを使いこなすのには、かなりの学習コストが必要です

さらにHTML/CSSも学習しないと、Dreamweaverは使いこなせません

ただDreamweaverを使いこなせるようになると、テキストエディタより効率的に、HTML/CSSが書けるようになります

CMSを使ってホームページを作る

3つ目のホームページを作る方法は、 CMSを使ってホームページを作れます

CMSとは、コンテンツ・マネージメント・システムの略で、HTMLやCSSをわからない人でも、簡単にホームページ作成、更新ができるようになるシステムです

ホームページ作成ソフトはソフトを購入し、パソコンにインストールして使用しますが、CMSはインタネットエクスプローラー、FireFoxなどのWebブラウザ上で使用します

初心者でも無料ブログを更新する感覚で、ホームページを作成することができます

代表的なCMSは、WordPress、Wix、Jimdoなどがあります

・WordPress(ワードプレス)とは？

日本語 – WordPress

WordPressはよく使われているCMSで、日本だけではなく世界中で人気のCMSです

当初はブログを作成するためのCMSでしたが、バージョンアップされ、ホームページ制作でもよく使われるようになりました

検索結果で上位に表示させやすく、検索上位のホームページがWordPressで作られている場合がかなり多いです

大企業の大規模なホームページでも、WordPressはよく使われます

Wix、Jimdoと比べると、WordPressは多少HTML/CSSの知識が必要になります

・Wix(ウィックス)とは？

ホームページ作成 | 無料ホームページの作り方 | WIX

WixもWordPressと同様に、世界でよく使われているCMSです

初心者でもデザインの良いホームページが簡単に作れます

テンプレートでデザインを選択して、それの画像や文章を変更する形で、ホームページを作っていくので、WordPressよりも簡単にホームページが作成できるようになっています

ドメイン、レンタルサーバーは、Wixで用意してくれて、Wix自体も無料で使用できるので、完全に無料でホームページが作成できます

Wixは自分で取得したドメインも設定でき、その場合はドメイン取得と維持費の費用がかかります

しかしその場合は、自分でドメイン、レンタルサーバーを用意したほうが割安になるので注意が必要です

・Jimdo(ジンドゥ)とは？

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

JimdoもWixとほぼ同じで、初心者でも簡単にホームページ作成ができます

ホームページの作り方も、Wixとほぼ同じです

Wixと同様にドメイン、レンタルサーバーはJimdoが用意してくれますが、自分で取得したドメインを設定する場合は、自分でドメイン、レンタルサーバーを用意したほうが割安になります

ただJimdo、Wix共に、検索で上位に表示させにくい欠点があります

個人でホームページ作成する場合、初心者おすすめの方法は？

初心者におすすめするホームページの作成方法は、WordPressで作成するのがオススメです

ドメインとレンタルサーバーの費用がかかりますが、収益が目的であればドメイン、レンタルサーバーの費用は、きちっとホームページを作ればすぐに回収できます

完全に趣味でホームページを作る、収益は全く考えていないという場合は、完全無料のWixやJimdoを使うという手もアリです

WordPressでホームページ作成を作成する手順は後述します

ホームページを作る方法をまとめると、以下のようになります

勉強するために、あえてHTML/CSSでホームページを作成するのもあり

時間がかかってもよい、勉強してきちっとホームページを作成したいのであれば、HTML/CSSでホームページ作成を作成するのもアリです

ホームページで集客するためには、HTML/CSSの知識は絶対に役に立ちます

きっちりと学習してインターネットで集客したいという場合は、一度勉強のためにHTML/CSSでホームページを作成してみてください

HTML/CSSでホームページを作成する方法は後述します

副業や独立起業などで、ホームページで稼ぎたい場合

ホームページで稼ぐ方法は？

個人でも副業でホームページを作って稼ぎたい、独立起業のためにホームページを作って稼ぎたいという方もいると思います

ホームページを作ることによって稼ぐ方法は、主にアフィリエイトとGoogleアドセンスの2つの方法があります

・アフィリエイトとは？

アフィリエイトとは、ホームページやブログに自分が選んだ広告を掲載して、そこから商品やサービスが購入されれば、自分にも収益が発生するという仕組みです

アフィリエイトは「○○万円が簡単に稼げる」「簡単にお金を稼げる」という怪しい業者が多いのでイメージが悪いですが、アフィリエイト自体は真っ当なビジネスです

アフィリエイトサービスプロバイダー(ASP)にユーザー登録を行い、そこから自分の好きな広告を選択して、自分のホームページやブログに広告を貼っていきます

・Googleアドセンスとは？

Googleアドセンスは、アフィリエイトと似ていて、広告を貼ることで収益が発生します

アフィリエイトとの違いは、Googleアドセンスは自動的に広告を用意してくれて、クリックするだけで収益が発生します

自分で広告が選ぶ必要がなく、クリックするだけで収益が発生するので、アフィリエイトより収益が発生しやすいです

ただ、1クリック10〜100円の収益でアフィリエイトより安い傾向があり、アドセンスの審査は厳しく、しっかりホームページを作っていないと審査が通らない場合があるのが、Googleアドセンスのデメリットです

ホームページで稼ぐおすすめの方法は？

アフィリエイトとアドセンスどちらが良いというのは無く、使い分けるのが良いです

ホームページで書かれている内容と同じような製品・サービスの広告がある場合はアフィリエイト、良い広告がどうしてもない場合はアドセンスという形で使い分けます

でもなるべくは、収益が高いアフィリエイトから広告を探すようにしましょう

独立起業を考えている人は、最初から自分独自の製品やサービスを考える人が多い傾向があります

それを考える前に、まずはアフィリエイトで、売れている他社の商品を、自分で売ってみることから始めてみるのも一つの方法ではないでしょうか？

他社の商品で売れてきてから、独自の製品やサービスを考えた方が、集客のノウハウが蓄積しているので、リスクが少なく独立起業ができると思います

会社のホームページを作るポイント

ここでは初心者が会社のホームページを作成する場合のポイントを解説したいと思います

ホームページ制作会社に依頼する場合

ホームページを制作会社に依頼する場合は、以下の記事を参考にしてください

ホームページ制作会社の選定のポイントなどを解説しています

これだけは知っておきたい！会社ホームページの作り方のポイント

おすすめのドメイン・レンタルサーバーは？

法人向けのレンタルサーバーはどれも月額3000円以上と若干高くなります

セキュリティーや安定性、高速性能を考えるのであれば、Xserverが定評があり、企業やアフィリエイトをしている人がよく使っています

Xserver Business

ただ大規模なホームページを作る予定でなければ、個人の場合と同じロリポップでも十分です

ドメイン業者もどの業者でも良いですが、TLDは「.co.jp」「.biz」「.shop」などの企業向けのドメインにしておきましょう

会社でホームページ作成する場合、初心者おすすめの方法は？

会社のホームページを作成方法は、個人のホームページ作成と同様に、HTML/CSSで作る、ホームページ作成ツールで作る、CMSで作るという3つの方法があります

会社のホームページを作成するおすすめの方法は、WordPressで作るのがおすすめです

HTML/CSSでホームページを作成するのは、日々の業務の追われている会社では、時間がかかりすぎておすすめできません

実際に中小企業はWordPressでホームページを作る会社が多く、大企業はデザインにこだわる場合はホームページ制作会社に依頼し、あまりデザインにこだわらない場合はWordPressをよく利用します

WordPressでホームページを作る手順

WordPressでホームページを作る手順を、初心者でもわかりやすいように、ポイントを絞って解説します

ドメインの取得

最初にドメインを取得しましょう。ムームードメインの画面で説明します

以下のムームードメインにアクセスします

ムームードメイン

自分好きなドメイン名を入力して、検索をします

好きなTLDを選択して「カート追加」を選択します

「取得できません」という表示の場合は、すでに他のホームページなどで使われているので、取得できません

後は申し込み画面の説明に従って申込みを行ってください

また取得したドメインでメールアドレスを取得したい場合は、メールアドレスも取得しておきましょう

メールアドレス取得は、月数百円で取得することができます

レンタルサーバーを借りる

ドメインを取得したら、次にレンタルサーバーの契約を行います

レンタルサーバーがロリポップの場合で説明します

ロリポップ！

ロリポップの以下の画面で、「まずは無料の10日間ではじめよう」を選択します

次にプランを選択します

WordPressが利用可能で、電話サポートがあるスタンダードプランを選択します

あとは画面の説明に従って、申込みを行ってください

レンタルサーバーとドメインの関連付け

ドメインとレンタルサーバーを用意したら、関連付けを行います

レンタルサーバーが用意できたら、ユーザー専用ページにアクセスできると思います

以下の画面は、ロリポップのユーザー専用ページの画面です

ロリポップの場合は、関連付けを行う場合は「サーバーの管理・設定」から「独自ドメイン設定」を選択します

画面下にある「独自ドメイン設定」を選択します

以下の画面で取得したドメインと、公開フォルダの名前を入力します

注意点としては公開フォルダの名前は、空白にしないで必ず任意の名前を入力してください

あとは「独自ドメインをチェックする」を選択して、画面の指示に従ってください

SSLの設定

SSLとはインターネットで、自分のホームページの通信を、外部から機密情報を抜き取られないように暗号化することです

ホームページに訪れるユーザーのためにも、自分のホームページは絶対にSSLで暗号化しておきましょう

ロリポップの場合は、「セキュリティ」から「独自SSL証明書導入」を選択します

取得したドメインの左側のチェックを入れて、「独自SSL(無料)を設定する」を選択します

これだけで、独自SSLの設定は終了です

メールアカウントの設定

取得したドメインで、メールを行いたい場合はメールアカウントの設定を行います

「メール」「メール設定/ロリポップ！webメーラー」を選択します

画面下にある「新規作成」を選択します

メールアドレスとパスワードを入力して、「作成」を選択するとメールアドレスが作成されます

作成したメールアカウントの「確認・変更」ボタンを選択します

メールアドレスの設定に必要な情報が用事されるので、以下の画面の「各種メールソフトの設定マニュアルはコチラ」を参考に、自分のパソコン、スマホなどでメールアカウントの設定を行ってください

WordPressをインストール

WordPressのインストールというと、難しい作業だと思われますが、ユーザー専用ページで簡単にWordPressをインストールすることができます

「サイト作成ツール」「WordPress簡単インストール」を選択します

以下の情報を入力して、「入力内容確認」を選択するとWordPressがインストールされます

メールアドレスの項目は、メールアカウントを作成した場合は作成したメールアカウント、作成していない場合は自分の都合の良いメールアドレスに設定してください

WordPressの初期設定を行う

上記の手順を行えば、実は既にホームページは公開されて見ることができます

ただ未完成の状態で公開されているので、ホームページが完成するまでは他の人からはホームページが見えない状態にしましょう

ロリポップで「セキュリティ」「アクセス制御」を選択します

ドメインを選択して、任意のアカウント名とパスワードを入力して「作成」を選択すると、そのアカウント名とパスワードを知らないとホームページにアクセス出来ないようになります

WordPress簡単インストール完了時に、WordPressログインのURLが表示されるので、そのURLにアクセスすると以下の画面が表示されます

WordPress簡単インストールで設定したユーザー名とパスワードを入力してログインします

アクセス制御のアカウント名とパスワードでは無いので注意してください

以下のようなWordPressの管理画面が表示されます

左側のメニューで「設定」「表示設定」を選択します

以下の画面で「検索エンジンがサイトをインデックスしないようにする」のチェックをONにしてください

これで、Googleなどの検索結果に自分のホームページが掲載されなくなります

これでホームページが完成するまでは、他の人から見れないように設定されます

次にメニューから「設定」「一般設定」を選択し、WordPressアドレスとサイトアドレスの項目を確認します

そこに設定されているアドレスの先頭が「http://」を記載されていた場合は、「https://」に必ず変更してください

WordPressのテーマを選択

次にWordPressのテーマを選択します

WordPressのテーマをおすすめしているサイトはたくさんあるので、以下のページなどを参考にお気に入りのテーマを探してみてください

開発者の僕が選ぶ、WordPressのおすすめテーマ。７種類を厳選した

企業サイトに最適なWordPressテーマ32選

高品質で安全性も高い！ビジネス向けWordpressテンプレートまとめ

WordPressのテーマのマニュアルに従って、サイトタイトル、メニューなどの設定を行ってください

またWordPressではプラグインがあり、プラグインを追加することでWordPressの機能を拡張することができます

WordPressのおすすめプラグインについては、以下を参考にしてみてください

Xeoryテーマのプラグイン設定方法

WordPressで記事を書く

WordPressで記事を書くには、「投稿」「新規追加」を選択します

以下の記事作成画面が表示され、ここで記事を作成していきます

WordPressには「ビジュアル」「テキスト」2つの編集モードがあります

ビジュアルモードだと、以下の編集画面で無料ブログで記事を書く感じで記事を作成できます

テキストモードに切り替えるとHTMLが表示され、ここではHTMLで記事を書いていきます

ビジュアルモードとテキストモードを切り替えて比較することで、徐々にHTMLがわかってくるようになります

ホームページを公開する

記事を作成してホームページが完成したら、ホームページを公開します

WordPressの表示設定の「検索エンジンがサイトをインデックスしないようにする」をOFFにして、ロリポップで設定したアクセス制御を解除しましょう

これでWordPressで作成したホームページが公開されます

HTML/CSSでホームページを作成する手順

次にHTML/CSSでホームページを作成する手順を解説します

WordPressより時間がかかりますが、じっくり勉強するつもりで取り掛かってください

ドメインの取得、レンタルサーバーを借りる、レンタルサーバーとドメインの関連付け、SSL設定、メールアカウントの設定

この手順はWordPressの場合と全く同じです

自分が使っているPCで、ホームページ作成する環境を構築する

次に自分のPCに、ホームページを作成する上で便利なアプリをインストールしましょう

以下のソフトをインストールしてください

Webブラウザ Google Chrome

普通はインターネットエクスプローラーやFireFoxを称していると思いますが、ホームページ作成で便利なのはGoogle Chrome(グーグルクローム)ですので、Google Chromeをインストールしてください

Chrome ウェブブラウザ

テキストエディタ VisualStudio Code、Atom、SublimeText

最初からあるメモ帳では、ホームページ作成で使用するにはかなり非効率です

VisualStudio Code(ビジュアルスタジオコード)、Atom(アトム)、SublimeText(サブライムテキスト)はホームページ作成に特化したテキストエディタなので、この中から使いやすそうなものを1つインストールしてください

Visual Studio Code

Atom

SublimeText

ファイル転送ソフト WinSCP(Windowsの場合)、FileZilla(Macの場合)

HTML/CSSでホームページを作成する場合は、作成したファイルをレンタルサーバーの公開フォルダーに転送しなければいけないです

そこで必要なのが、WinSCP(ウィンエス・シーピー)はFileZilla(ファイルジラ)などのファイル転送ソフトです

WinSCP

FileZilla

(参考)XAMPP(Windowsの場合)、MAMP(Macの場合)

参考までに初心者はこれはインストールしなくてもいいですが、とことん勉強したい、将来Webエンジニアを目指している場合は上記のXAMPP(ザンプ)、MAMP(マンプ)をインストールして、勉強してください

プロのWebエンジニアはこれらをインストールして、自分のPCにWebサーバーを立てて、作ったホームページの検証作業を行っています

XAMPP

MAMP

HTML/CSSを勉強する

以下のサイトや本などからHTML/CSSを勉強しましょう

基本的な部分だけで良いです、HTMLとCSSの概要がわかればOKです

全部完璧に勉強しようと思うと膨大な時間がかかります

HTMLクイックリファレンス

HTML入門(全15回) – プログラミングならドットインストール

HTML/CSSでホームページを作成する

いよいよHTMLとCSSでホームページを作成します…

と言われても、上記の勉強だけでは、ホームページをいきなり作成することはできないでしょう

ここでホームページ作成を挫折する人がとても多いです

そこで、初心者でもHTML/CSSでホームページを作成するには、いくつかの良い方法があります

以下を参考にホームページを作成してみてください

テンプレートを使用してホームページを作る

HTML/CSSを書く初心者におすすめなのが、テンプレートを使用してホームページを作ることです

テンプレートでは、既にHTMLとCSSの骨格ができているので、その文章や画像を差し替えたり、追加する事によって、ホームページを作成していきます

文章や画像を差し替えるたりすることで、HTMLとCSSを深く理解することができます

おすすめのテンプレートは、以下を参考にしてみてください

ホームページ制作におすすめ！無料HTMLテンプレート10選

PowerPointなどで、ホームページのイメージを作成する

テンプレートの扱いに慣れてきたら、一度マイクロソフトのPowerPointなどで、自分で作りたいホームページのイメージを作成してみましょう

PowerPoint以外でもホームページのイメージを作成しやすいツールなら何でも良いです

プロのWebデザイナはAdobeのPhotoshopで、ホームページのイメージを作成することがありますが、Photoshopは価格が高いのが難点です

その作成したイメージを、HTML/CSSでイメージ通りに作成してみましょう

テンプレートでのホームページの作成に慣れているのであれば、イメージ通りに作成できるようになると思います

(参考)デザインの良いホームページをそのままマネる

参考までにプロのWebデザイナがやっている方法は、デザインの良いホームページをそのままマネる方法です

自分の気に入っているデザインのホームページを探して、そのままそのホームページをマネます

ただあまりにもアニメーションなどの動きのあるホームページは、JavaScriptなどのプログラミング言語などが使われて難しいので、最初は簡単そうなホームページを選んでください

Webデザインの参考サイト集

Google Chromeを使えば、参考にするホームページのHTML/CSSがどう書かれているか、効率的に確認することができます

参考にしたいホームページで右クリックして「検証」を選択します

すると以下の画面が表示され、右上にHTMLの内容、右下にCSSの内容が表示されます

右上のHTMLの部分を選択すると、それに対応する部分がハイライトになり、その部分に適用されているCSSが右下に表示されます

これでHTMLで書くときに、どうやってCSSを書けばよいか、かなり参考になります

更に右上のボタンを押すと、スマホで見た場合にはどういう見た目になるかも確認することができます

左上のボタンを押すと、スマホの機種も細かく指定することができます

自分のPCでホームページが正常に表示されるか確認する

ホームページが作成できたら、最初に自分のPCで正常に表示されるか確認します

自分で作成したHTMLファイルを開いて、表示がおかしい部分がないかチェックします

インターネットエクスプローラー、FireFox、Chromeなどの複数のWebブラウザで必ずチェックします

できれば、Windowsだけではなく、MacのSafari、Firefox、Chromeなどでも確認しましょう

もし、自分のホームページの表示がおかしい場合は、上記で述べたChromeの機能を使って、どういうCSSが適用されているか、表示がおかしくなったのがどのCSSの設定が適用されているのか調査してみましょう

スマホ、タブレットで確認する

PCでの表示が確認できたら、スマホやタブレットで正常に表示されているか確認します

できれば、iPad、iPhone、Androidスマホ、Androidタブレットなど、たくさんの機種で確認しておきましょう

自分のPCにHTMLファイルがある場合は、スマホからの確認ができないので、レンタルサーバーでアクセス制御をかけた後に、ファイルをアップロードしてからスマホなどで確認しましょう

ファイルをレンタルサーバーにアップロードする

ホームページを公開するには、自分のPCにあるファイルをレンタルサーバーの公開フォルダに転送しなければなりません

このことをレンタルサーバーにファイルをアップロードするといいます

ファイルをアップロードするには、WinSCPやFileZillaなどのファイル転送ソフトを利用する必要があります

まずはファイルをアップロードするための情報を、レンタルサーバーのユーザー専用ページから確認します

ロリポップの場合は、「ユーザー設定」「アカウント情報」を選択します

以下の情報が表示されるので、「FTPサーバー」「FTP・WebDAVアカウント」「FTP・WebDAVパスワード」の3つの情報をメモしておきましょう

FileZillaの画面で説明します

ホスト名に「FTPサーバー」の内容、ユーザー名に「FTP・WebDAVアカウント」の内容、パスワードに「FTP・WebDAVパスワード」の内容を入力し、「クイック接続」を選択します

接続に成功すると、以下の画面が表示されます

左側が「ローカルサイト」と呼ばれ、自分のPCのフォルダとファイルが表示されています

右側は「リモートサイト」で、レンタルサーバーに置かれているフォルダとファイルが表示されています

その画面で左側にある、作成したファイルを左側の公開フォルダにドラッグすると、レンタルサーバーにファイルがアップロードされます

レンタルサーバーで、任意に名前をつけた公開フォルダに、ファイルを置かないとホームページが表示されないので注意してください

これで自分で作った、ホームページが公開されます

アフィリエイトでホームページに広告を載せる手順

ここでは作成した、WordPressのホームページにアフィリエイトの広告を貼り付ける手順を解説します

まずアフィリエイトサービスプロバイダー(ASP)に登録する必要があります

おすすめのASPはA8.netになります

A8.netがおすすめな理由は、一番メジャーなASPで、登録時にはホームページの審査が無く、手軽に登録できるのが理由です

ただ広告掲載時には、広告によってはホームページの審査があるので、きちんとホームページは作っていきましょう

ホームページを作り込んだら、A8.netだけではなく、できるだけ多くのASPに登録しましょう

特定のASPにしかない広告がある場合があるので、たくさんのASPで広告をチェックしましょう

A8.netに登録する

以下からA8.netにアクセスします

【アフィリエイトA8.net】日本最大級の広告数・サイト数のアフィリエイトサービス

下の画面で、「アフィリエイトをはじめてみる！」を選択します

あとは画面の指示通りに登録を行います

A8.netから掲載したい広告を探す

A8.netで登録が完了し、A8.netにログインすると以下の画面が表示されます

広告を探す方法はいろいろありますが、今回は左上の検索にキーワードを入力して検索します

検索結果一覧画面が表示されるので、気になる広告があったら「詳細を見る」を選択します

審査有りの場合は、ホームページが審査されますので、ホームページはきっちり作ります

審査はそこまで厳しくなく、ホームページがとりあえず完成していれば、まず審査は通ると思います

広告主サイトを確認して、売れそうな商品なのか？自分が自信を持っておすすめできる商品なのか？をよく検討しましょう

報酬などを確認し広告提携したい場合は、「提携申請する」を選択して提携申請を行います

審査がある場合は、審査が済んだあと、メールで提携審査結果が届きます

審査がない場合は、すぐに広告を掲載することができます

広告のコードを取得する

A8.netの上部メニューから、「プログラム管理」「参加中プログラム」を選択します

広告提携した、広告一覧が表示されるので、掲載したい刻々の「広告リンク」をクリックします

好きな広告のタイプを選択し、「素材をコピーする」を選択すると、広告のコードを取得することができます

WordPressに広告を貼り付ける

広告はホームページのいろいろな場所に、貼り付けることができます

ただ、よく貼り付けられる場所は決まっています

広告がよく貼られている場所は、サイドバーの上部と、記事の一番下に貼り付けられることが多いです

そこで、WordPressのホームページに、サイドバーの上部と記事の一番下に広告を貼り付ける方法を解説します

サイドバー上部に広告を貼り付ける

WordPressのメニューから、「外観」「ウィジェット」を選択します

左側の項目の中から、「テキスト」を選択して「サイドバー」にチェックが入っているのを確認してから、「ウィジェットを追加」を選択します

タイトルに「広告」「PR」などを入力して、テキストモードでコピーした広告コードを貼り付けます

広告コードを貼り付けたら、「保存」をクリックします

テキストの項目をドラッグして、サイドバーの上部に移動させます

ホームページで確認して、サイドバー上部に広告が表示されていれば、広告の貼り付けは完了です

記事の下の広告を貼り付ける

広告を掲載したい記事を編集します

表示モードをテキストモードにします

記事の一番下の部分に、コピーした広告コードを貼り付けます

ビジュアルモードにして、広告が表示されていれば、広告の貼り付けは完了です

まとめ

長くなりましたが、初心者がホームページを作成するポイントをまとめます

• ホームページ作成には、ドメイン、レンタルサーバー、ホームページ作成ツールが必要
• 初心者はWordPressでホームページを作成するのがおすすめ
• きっちりとホームページの集客方法を勉強するのであれば、HTML/CSSでホームページを作製するのもあり
• 会社のホームページの作成方法はWordPressの一択
• ホームページで稼ぐ方法はアフィリエイトとGoogleアドセンスがある
• ホームページの内容によって、アフィリエイトとGoogleアドセンスを使い分ける

この記事で初心者でも、ホームページが作成できるようになりますが、それだけでは集客できるホームページにはなりません

集客できるホームページを作る方法は、別の記事で解説します