初心者でもできるオシャレなホームページを無料で作成する方法

この記事では、ビジネスができるデザインレベルのクールなWebサイトをWordPressを使い無料で作成、運用する方法をお伝えします。成果物は無料サーバの契約と、クールなサイトを無料サーバー上に構築することです。

作り上げるまでの全体像はこんな感じです。

1. 無料サーバーと契約し、サーバー上にWordPressをインストールする
2. WordPressでホームページの骨組み（テーマ）と中身（コンテンツ）を作る

散々WordPressって単語が出てきて、よくわかんないと思いますので、ここいらでWordPressの説明をしたいと思います。

WordPressはオープンソース（無料で使えて、ユーザーも開発に加わることができるエコシステムのこと）のWebページ作成ツールです。WordPressは何ができて、一般的なWebサイトと比較してどのように良いのか説明します。

Web制作会社への依頼は不要。コンテンツ作成ツール「WordPress」を使うメリット

• コーディング、プログラミングの知識がなくてもWebサイトが作れる。
• 「テーマ」という部品の差し替えでサイト全体のデザインを自由に差し替えられる。「テーマ」の開発者は無数にいるため、完全なオリジナルではないにしろ、これまで見たことのないデザインを簡単に取り入れられる。
• 一般的なWebサイト（静的サイトと呼びます）よりも内部構造が優れており、検索の上位表示に役立つ。
• 「プラグイン」という部品を差すだけで、実現したい機能が簡単に実装できる。オープンソースだけあってたくさんの開発者が「プラグイン」を開発していることも魅力（Webには無数に、プラグインが落ちている）。「プラグイン」により、プログラミングなしで機能的なサイトが作れる。
• Microsoft OfficeのWordを使う感覚で、難しい操作なく、Webページが作れる。

上記がポイントです。現在数あるWebページ作成方法の中で最も優れている方法といっても過言ではありません。WordPessをより詳しく知りたい方は、以下のサイトで勉強してみてください。

Web系プログラミング学習サイト：シラバス

これを一通り学べば、Webに関する技術的なことの80%は理解できたに等しいです。むしろ開発ができるレベルになっちゃいます。

静的サイトと呼ばれるHTMLで作られたサイトをざっくり知っておくと、WordPressでの制作が進めやすいと思うので、少し触れたいと思います。HTMLファイルを作って、そのファイル単体をGoogle Chrome等のブラウザに放り込むと、こんな感じで表示されます。

無機質ですね。次にHTMLを装飾するCSSファイルも作って、先ほどのHTMLとセットにして表示するとこんな感じに映ります。

少し装飾されました。さらにアニメーションのような動きを加えたり、計算処理をさせたい場合はJavascriptというプログラミング言語を使用します。

• HTML＝コンテンツそのもの（文字とか画像）
• CSS＝HTMLを装飾するデザインファイル
• javascript=アニメーションのような動きや、計算処理をするプログラミングファイル

この3つがセットになって初めてまともなWebサイトとなります。

しかし、これらを作るにはある程度、専門的な知識が必要です。入門者がそのファイルを見ると、まるで暗号のような文字の羅列で、きっとモチベーションが尽きるでしょう。そこでWordPressなんです。WordPressはこれらの知識を持っていなくても、同等のこと、あるいはそれ以上のことができる魔法のようなWebコンテンツ作成ツールなのです。

なんとなくわかりましたかね？ざっくり知っておく程度でいいです。では、ここからは実作業に入っていきましょう。

ステップ1：信頼のおけるサーバー会社の無料プラン（サービス）を利用し、サーバー上にWordPressをインストールする

サーバーと契約しないと話が前に進まないので契約してみましょう。サーバーとはなんでしょうか？超簡単に言うと「自動応答マシン」です。ユーザーがWebサイトを見つけて、訪問しようとすると、「はい、そんなあなたにはこれをどうぞ」と迎えいれたり、「いや、渡せるものは何もないよ」と断ったりします。サーバーは月数百円から数十万円と仕様によりピンきりです。

そんな中でも無料で使えるものもあります。なぜ無料で使えるかと言うと、サーバーを持つホスティング会社が「無料でサーバーを使ってもいいけど、その代わりにサーバー上で作ったWebサイトに広告を入れさせてね。」と交換条件を提示してきます。この交換条件で無料でサーバーが利用できるわけですね。ちなみに無料サーバーはスペックが高くありません。ユーザーへの返答に少し時間がかかったり、画像や動画等の重たいファイルが置ける容量も大きくないです。有料契約は月1000円程度ですから、本気でやるんなら、投資と考えて、予め有料にしておくことをオススメします。後でのサーバー移行はとても面倒ですよ。
 
はい。ずばり無料サーバーのおすすめはこれです。

Xdomain

エックスサーバーという信頼できる企業が運営する無料レンタルサーバーです。簡単に特徴を上げるとこんな感じ。

月額料金	無料
WordPressインストール可否	可能
Webページ上に表示されるバナー広告	あり
サポート	なし
ハードディスク容量	2GB
独自ドメイン（オリジナルのURL）	可能
データベース容量	100MB
プログラムから送信可能なメール配信数	200通/日

では無料サーバーの契約～サーバー上にWordPressをインストールするところまで一気にいきます。契約と言っても、そんな堅苦しいことはしません。所謂、アカウント登録ですね。

無料サーバーとの契約～WordPressをインストールするまで

Xdomainへの新規登録とサーバーIDを登録する

以下リンク（エックスサーバー社のマニュアル）を参考にサーバー登録までを済ませてください。

サーバー上にWordPressをインストールする

以下リンク（エックスサーバー社のマニュアル）を参考にWordPressのインストールまでを済ませてください。

ブラウザのURL入力欄に”{サイトURL}/wp-admin”を入力し、WordPress管理者としてログインする

サイトのアドレス（URL）を設定したと思います。一般的にURLはブラウザにそのアドレスを打ち込むとWebページが表示されますよね。さらにそのアドレスの末尾に”/wp-admin”を加えると、WordPressの管理ダッシュボード（コンテンツを制作できるダッシュボード）へのログイン画面に遷移します。「②サーバー上にWordPressをインストールする」で作成したIDと生成されたパスワードを使い、ログインしてください。ログイン情報はWordPressインストール後の画面に記載されています。

※WordPressインストール後、すぐには管理者画面にログインできません。少し時間を置いてアクセスしてください。

どうでしょうか？WordPressにログインできましたか？続いて、WordPress上にコンテンツを構築していきます。

ステップ2：ボタンをポチポチするだけでオシャレなホームページの外装（デザイン）を作り、慣れたソフトを使う感覚でコンテンツを作る

テーマを探し、インストールする

では、サイトを作っていきましょう。まずはじめにやることは「テーマ」をインストールすることです。「テーマ」とは、端的に言うと洋服です。「テーマ」をインストールするとデザインや適切な内部構造のサイトが出来上がってしまうんです。

WordPressをインストールすると同時に用意されているテーマが初期設定としてあたります。設定したURLをブラウザに打ち込んで、確認してみましょう。

WordPressをインストールしただけで、あとは何もしていません。それでも、っぽくなっていますよね。これがWordPressの初期テーマのデザインです。テーマを差し替えれば自分好みのデザインにボタン一つで変更できます。ということで先ずは自分好みのテーマを探しましょう。

テーマを探し方

テーマをWebで探しましょう。WordPressはそのオープン性から多くのエンジニアが作った「テーマ」がWeb上に無数にあります。サーチエンジンで「WordPress theme」と検索してみましょう。無料のみを探すんであれば、「WordPress theme free」とすればOKです。

いくつかのサイトを回ってこんなテーマ見つけました。

Colorlib

結構キレイなデザインですね。個人的にはGenesisという有料テーマがオススメですが、今回の目的は無料で作ることなんで、無料で良さげな、これに決めました。ダウンロードをクリックすると、zipファイルになっているテーマがダウンロードされます。

テーマのインストール方法

手元にテーマのzipファイルがあると思うので、次はそれをWordPressの管理画面でインストールします。インストール手順はこんな感じです。

1. 管理画面にアクセスしログインする
2. 左側メニューから「外観」→「テーマ」をクリック
3. 「新規追加」をクリック
4. 「テーマのアップロード」をクリック
5. ファイルの選択もしくは、ドラッグアンドドロップで先ほど、ダウンロードしたテーマ（zipファイル）を選択し、「今すぐインストール」をクリック
6. 左側メニューから「外観」→「テーマ」をクリックし、テーマを選択し、「有効化」をクリック

ボタンをポチポチするだけで、簡単にプロのようなサイトが出来上がってしまいました。まるで魔法ですね。これで骨組みは出来上がったので、次にコンテンツの中身を作っていきます。

コンテンツ（Webページ）を作る

各Webページを作る方法はとても簡単です。その前にWordPressでのWebページの種類を知っておいてください。コンテンツの種類は2種類だけです。

• 固定ページ
• 投稿

固定ページは汎用的に様々なページを作成できるフォーマットです。基本のデザインはテーマに紐づいていますが、作りたいWebページの種類により、カスタマイズすることも可能です。固定ページの用途をざっと上げると、以下の感じです。まあ、ブログ記事以外を作るなら固定ページと覚えておけばいいです。

• About us/企業情報（自己紹介）ページ
• ランディングページ
• 商品・サービスの紹介ページ
• トップページ

ブログ記事を作る場合は、「投稿」を使ってください。2種類共にWebページの作り方に大きな違いはありません。

固定ページを作る場合

1. 左側メニューから「固定ページ」→「新規追加」をクリック
2. タイトルを付け、本文内はMicrosoft Wordを使う感覚で編集していってください。保存する場合は「下書き保存」をクリック
3. 作り終えたら、「公開」をクリック

これで固定ページが作れました。ちなみに本文内には、画像、動画等様々なメディアを挿入できます。また、書式やレイアウトの調節も簡単に行えます。

ブログを作る場合

1. 左側メニューから「投稿」→「新規追加」をクリック
2. 後は固定ページを作る場合と同じです

はい。これで終了。簡単ですね。

アニメーションやインタラクションの多い（ゲームのようなユーザーが操作するコンテンツ）、凝ったコンテンツ作りには専門的な知識が必要になりますが、集客やブランディングを目的としたサイトにそんなコンテンツは不要です。とりあえずここまでの基本を押さえておけば、十分戦えます。しかし、無料でどこまでも頑張り続けようとするのはいかがなものかと、、、。最低限、ビジネスとして本気でやるなら以下のオプションを追加すべきです。

• ビジネスの継続性とブランド価値向上のためにURLをオリジナルにする（独自ドメイン）。
• ユーザーに安心と信頼を提供するためにSSL（通信の暗号化）を導入する。
• 高いトラフィック（アクセス）に対応できるように拡張性のある有料サーバーに移行する。

わからないことがあれば、お気軽にご質問ください。