「ウェブサイトを作りたい」
仕事であったり就職用であったり、このサイトみたいに趣味用だったりいろんな理由でサイトが必要になったりしますよね。

例えばウェブ業界であったり、デザイン業界の就活本には耳にタコができるほど「ポートフォリオ！ポートフォリオ！！ポートフォリオォォォおおおお！！」と書いてあります。

私はウェブ制作会社に面接に行く際、自作のサイトを作って面接時に見せたりしていました。未経験就職なのでポートフォリオなどはなく自己紹介を載せた簡単なサイトでしたが、一応サイト自体が制作物として認められたので話が進んだ感覚もありました。

デザイン業界を志望している方はすでに学校やデザイン教室？（詳しくなくてすいません）などで制作物もあることと思います。

近頃では無料でポートフォリオサイトが出来たり、無料ブログなんかでまかなえたりもしますが、どうせだったら自分の個性を出すサイトは自分オリジナルのデザインを使いたくなるもの。

そこで今回はウェブ初学者または何らかの理由で自分のサイトがほしい方に向けた、「WordPressでオリジナルウェブサイトを公開するまでの流れ」をご紹介したいと思います。

以下で書いていく手順は正直順番とかはそんなに考える必要はないです。ただ先に注意しておきたいのは、レンタルサーバーやドメインの取得といったお金がかかる作業はあとに回したほうが他の作業でつまずいたときにお金を払っていないという安心感？があります。

1：コーディングソフトをゲット

なにはともあれオリジナルのサイトを作るとなれば必ず必要になるのがhttpやcss、PHPファイルなんかを編集するエディターソフトが必要です。

私はコーディングを勉強し始めてからずっと「Atom」というエディターを使っています。インストールしたままならとてもシンプルなデザインで、機能に物足りなくなったら自分で簡単に機能を追加できる優れものです。

他のソフトも触ってみたことはありますが、どうも画面がゴチャゴチャしていてよくわからなくてAtomを使い続けることになりました。

ここは完全に好みの問題なので何のエディターを使ってもいいと思います。が、注意したい点があるので挙げておきましょう。

• 文字コードを指定できるもの
• ソフト自体の挙動が軽いもの

文字コードを指定できるもの

大抵のエディターなら普通はできるのであまり気にしなくていいのですが、これは事前に知っておいてもいい知識かなと思います。

ファイルで取り使われる文字・記述には規格（文字コード）があり、システムによって読み込む規格が決まっていたりします。今回取り扱うWordPressの場合は脳死で「UTF-8」という文字コードを取り扱えばよいです。

それで気をつけなくてはいけないというのは、Windowsの「メモ帳」といった簡素なメモ機能を持ったテキストエディターの使用です。

保存時など文字コードが指定できていればよいのですが、ショートカットキーで保存した文字がサイトのコードと合っていなかった！となるのはよろしくないです。（または文字コード自体を変更できないエディター）

エディターを開くのが面倒でどこかのサイトから拾ってきたメモ帳を使ってファイルを更新したら画面が真っ白ホワイトアウト！みたいなことにならないように注意しましょう。

ソフト自体の挙動が軽いもの

まあこれはどんな作業でも同じですが、特にウェブは更新することが多く身軽なエディターのほうが良いと思います。

作業するたびに裏で何かが動いてるようなソフトでは時間がかかってしょうがないですからね。

2：レンタルサーバー、ドメイン取得

ここでウェブサイトをいんたーねっつにアップロードするためのサーバーやドメインを取得していきます。

自分の場合はこれより先に後述するWordPressのテーマファイル（サイトの見た目を決めるテンプレート群）をある程度作成してからサーバーを借りたりします。制作している時間がもったいない気がして(汗)

初学者さんの場合はレンタルサーバーを借りて、そこで少しずつサイトを作っていくのが無理がないかなと思い2番めの手順に持ってきました。

レンタルサーバーの借り方やドメインの取得方法は世の中に腐るほど記事が出回っているので細かいことは割愛しますが、オススメのドメイン販売会社＆レンタルサーバーをご紹介したいと思います。

• 高速＆安定してるけど少しお高めXサーバー + お名前.com
• そこそこ安定で低価格ロリポップ + ムームードメイン

高速＆安定してるけど少しお高めXサーバー + お名前.com

やはり安定のXサーバー。いろんなサーバーを使いましたが速いです。そして安定してます。通信怪しいかなみたいなことが殆ど無い気がします。

また他のレンタルサーバ以上にサーバーのコントロールパネルの操作がしやすく、後述のWordPressも勝手に自動で入れてくれたりもします。優しい。そして速い。

またドメインの組み合わせとしてGMOの「お名前.com」をオススメしましたが、たまに行われているXサーバーのドメインプレゼントキャンペーンがあれば、そちらのほうが良いですね。

そこそこ安定で低価格ロリポップ + ムームードメイン

庶民の味方「ロリポップ＆ムームードメイン」。こちらはレンタル料金、ドメイン価格ともに良心的ながらもそこそこ安定しており、コスパが良いです。ちなみに「こもりみ」もこの組み合わせ。

さすがにXサーバーと比べれば速度・安定性ともに劣りますが、お金をかけられなければアリだと思います。

3：FTPソフトをゲット、サーバ接続

サイトを作り出す前に準備することはまだあります。

まずは契約したレンタルサーバーにアクセスできるようにしなくてはいけません。ファイルやら画像やらなんやらかんたらをアップロードできるようになります。

ここでは最も簡単な「FTP接続」でサーバーにアクセスするのが良いでしょう。

実は、レンタルサーバーのコントロールパネルからもファイルをアップロードする機能はあります。ですが使い勝手が悪いのが殆どで、ひとつずつしかファイルをアップロードできないなんて面倒です。

そこでFTP接続できるソフトを入手しましょう。無料のもので十分です。
オススメは「FileZilla」です。

海外で開発されているソフトですが、日本語で翻訳されているので問題なしです。

FileZillaダウンロードリンク（外部サイト）

FTPアカウントの作り方やFileZillaの設定なんかは巷の記事で溢れているので割愛。

番外編：必要な場合はhtaccessで公開前非表示設定

サイトを使用する用途によって変わってくるので番外編です。

サイトに個人情報を載せたり、通常は他人に勝手に見せたくないものをサイトに載せたい方は、htaccessでサイトにアクセス制限を掛ける必要があります。

そもそもhtaccessとは、

「htaccess」（エイチティアクセス）とは、現在多くのWEBサーバーで使用されている「Apache」（アパッチ）を制御する設定ファイルの１つで、実際のファイル名は「.htaccess」（先頭がドット）となります。

htaccessとは？ | 株式会社シーマン

と、htaccessファイル一つでサーバーのいろんなことを制御できるんです。

今回はサイトの情報が入っているフォルダ（ディレクトリ）に「BASIC認証」を掛けることをオススメします。

簡単に言うとBASIC認証は特定のディレクトリ以下のアクセスをIDとパスワードで保護してくれるものなのです。これまた設定方法は巷に溢れかえってガバガバなのて割愛します。

少し技術的な部分もあるのでできる方だけやりましょう。間違うと画面真っ白でパニックになります。

ちなみにレンタルサーバーには、このアクセス制限をコントロールパネルで行える機能がある場合があります。その場合はアクセス制限をかけたいディレクトリを指定してあげるだけであとはサーバー側で処理してくれるので簡単でいいですよ！

4：WordPressのダウンロード、DB設定

さてやっとここまできました。今回は「ニート、サイトを作る（WordPress編）」なので(違う)、早速WordPressをダウンロードしていきましょう！

…と言いたいところですが、まず先に契約されたレンタルサーバーに「WordPress簡単インストール」みたいな機能がないか確認することをオススメします。

通常WordPressを手動でサーバーにアップロードするときは、
コントロールパネルなどでWordPress用のデータベース（DB）を作成する。
↓
FTP接続してWordPressのファイル群をアップロード
↓
（wp-config.phpを編集・DB情報の入力）
↓
WordPressインストール画面に沿ってインストール

といったことをするんですが、簡単インストールのような機能がある場合、手間をすべて省いてくれるのでパソコンに弱い方などは積極的に利用すると良いと思います。

ひとつだけ注意なのが、簡単インストールを使った場合WordPressのバージョンは自分で選択することは出来ません。利用したいプラグインなどがある場合インストールされるWordPressのバージョンがそのプラグインに対応しているか先に確認しておきましょう。

WordPressのダウンロード

前置きが長くなりましたがそれではWordPress本体をダウンロードしましょう。こちらから日本語版をダウンロード出来ます。

リンクからは最新バージョンしかダウンロードできませんが、過去バージョンもアーカイブされていますので、「WordPress v.4.x.0」とかで検索してみてください。

簡単インストールとは違い、手動インストールの場合はFTP接続ソフトでダウンロードしたWordPressのファイルを自分でアップロードしなくてはいけません。

この辺も巷の記事を参考にしていただければと思いますが、初学者の方が気をつけるのは、

• サイトを表示させたいrootディレクトリは合っていますか？
• ダウンロードしたWordPressのフォルダをまるごとアップロードしていませんか？（必要なのはwp-adminやwp-contentのある階層以下）

こんなところだと思います。

無事にインストールできたら次のステップに参りましょう。

5：テーマの作成

いよいよオリジナルサイトの制作に取り掛かります。

…ここまで書いておきながらなんですが、オリジナルテーマを作れるぐらいの人だったらサイト制作の手順ぐらい知っている気がしてきたけど挫けず進めます。

販売されているテーマやWordPressデフォルトのテーマと違い、オリジナルテーマは最初から最後まで自分のデザインでサイトを完結させる必要があります。

とはいっても個人用で持つサイトならそこまでページ数も多くならないと思いますし、あまり難しい技術も必要ないでしょう。

ケース別で見てみましょう。

就活用自己紹介サイト

• トップページ
• （お知らせ一覧ページ）
• （お知らせ詳細ページ）
• （お問い合わせ）

これぐらいシンプルなサイトの場合トップページ一枚で完結させることも可能です。トップページに直近のお知らせを表示させたり、問い合わせもページ下部においたり。

ポートフォリオサイト

• 制作物一覧ページ（トップページ）
• 制作物詳細ページ
• お問い合わせ

自己紹介サイトと同じように見えますが、今度はトップページらしいトップページをおかないパターンです。

制作物を一覧にして自分の個性を出します。
場合によっては自分のこだわりなんかを書いたページが有っても良いかもしれません。

フリーランス向け営業サイト

• トップページ
• 制作実績
• お問い合わせ
• ブログ

最小限に書きましたが、トップページにはフリーランスとして自分の持つスキルの説明や連絡先などを記すのが定番でしょうか。

制作実績を見せるページや、お問い合わせフォームは必須になるかと思います。またフリーランスの方のサイトでよく見かけるのがサイトに併設したブログです。

もともとWordPressはブログシステムのCMSなのでもちろんブログ用に使い勝手は良いです。情報発信も出来ますし、あって損は無いでしょう。

まとめ

今回は細かいところを飛ばしてざっくりサイトをつくまでの流れについて書いてきましたがどうだったでしょうか。

WordPressのテーマや技術的な細かい情報はネットにたくさん転がっていますが、手続きやチャートみたいなものってそんなに無いと思うんですよね。

この記事は今後もサイトの作り方入門編としてわかりやすいものに改善していきたいと思いますのでよろしくおねがいします。

それではまた別の記事でお会いしましょう！