【実例あり】初心者の私が独学でホームページを作成した7つの手順

「独学でホームぺージを作りたいけど、どのような手順・勉強方法で作れば良いかわからない」
「業者に頼むのはお金がかかるから、自分でお店のホームぺージを作りたい」
「プログラミングスクールなどに通わず安くホームぺージを作りたい」

ホームぺージを一から独学で作成して公開したい方は、上記のような悩みをお持ちかと思います。

そこで今回は、初心者の私が独学で一からホームページを作った手順や勉強方法について解説していきたいと思います。
私自身出来る限り安くホームぺージを作れるようになりたかったで、プログラミングスクールなどは利用せず学習しました。

ちなみに、ホームぺージの学習を始める前の私の状況は以下のような感じです。

実際に私が作ったホームぺージも掲載していますので、是非参考にしてみて下さい。

【実例あり】初心者の私が独学で一からホームページを作った手順

それでは、早速お話ししていきたいと思います。
まず、こちらが私が初めて作ったホームぺージです。
※実際にあるお店ではなく、架空のパン屋さんを想定して作成しています。

架空のパン屋さんのサンプルサイト

コーディングからデザイン（ロゴ作成や画像加工など）全て一人でやりました。

かかった費用は月額1,080円の動画サービスと、書籍代のみです。
（サーバーの契約やドメインの取得料金は除きます）

学習開始～ホームぺージ制作までの期間：約7ヵ月

HTMLの学習から始め、学習期間は6ヵ月の制作期間は1ヵ月でした。
計7か月かかりました。

学習期間は人によって個人差があるかと思いますので、あくまで参考までに。

HTMLの学習⇒ドットインストール

HTMLとは、Webサイトを作るために必須となる言語です。

この言語を学ぶために、私はドットインストールという、動画でプログラミングを学習できるサービスを使いました。

初心者向けのレッスンに関しては無料のものが多く提供されていて、有料会員になると全てのレッスンを受けることがができます。
有料会員になる場合も月額￥1,080円ですので、それ程ハードルは高くないかと思います。

当時の私は、

「ホームぺージを一から作るのに安く学べるサービスはないかな・・」

と思っていたので、このような動画サービスがあったのは大変ありがたかったです。

【ドットインストール】HTMLで学習したレッスン

私の場合、レッスン名に「HTML」とついたものを片っ端から学習していきました。
進んでいくにつれて難易度が上がってきますので、順に学習していくのが良いでしょう。

初めは慣れていない部分も多く、一度やっただけでは到底理解できなかったので数回繰り返し行いました。

CSSの学習⇒ドットインストール

CSSは、Webページのスタイルを指定するための言語です。
こちらもHTMLと同様Webサイトを作る上で必須のスキルとなります。

CSSを学習する際も、HTMLと同様ドットインストールで学習しました。

HTMLの学習を終えるとCSSに進む流れになっているので、そのまま進んでいけば良いでしょう。

CSSで受けたドットインストールのレッスン

こちらもHTMLと同様、「CSS」関連のレッスンを片っ端からこなしていきました。

レッスンを進めていくと、

「これはサイトのレイアウトを作るのに役立ちそうだな」

というものも分かってきて、そのようなレッスンを集中的に学習しました。

画像を簡単に等間隔で横並びにできる“フレックスボックス”についてのレッスンである、「詳解CSS フレックスボックス編 (全16回) 」はかなり繰り返してやりました。

JavaScript⇒ドットインストール＋書籍

JavaScriptとはブラウザの操作ができる、プログラミング言語です。
ホームぺージの制作では、スライドショーや*スマホ用のメニューを作る時などに使います。
（*スマホ画面で を押すとメニューがスライドして開くようなもの）

ただこちらの言語は、一からコードを書こうとするとかなり大変です。
基本をざっと学んだ後は、JSを比較的簡単に記述できる“jQuery”というライブラリを学びました。

学習したレッスン

JavaScriptは基本的な操作のみ学習しました。

JavaScriptのレッスンでは上記4レッスンをざっとやりました。

jQuery（JavaScriptのライブラリ）の勉強で使った書籍

私の場合2冊のテキストを利用しましたが、オススメは「jQuery最高の教科書」という書籍です。

【jQuery最高の教科書の写真】

難易度の低いコードから順番に学ぶことができ、初心者でも学習しやすい書籍です。
サンプルファイルでコードを確認できることはもちろん、動きの見本である「サンプルサイト」も用意されています。

ざっとサンプルサイトを確認してみて、自分のサイトに必要そうな機能のみ学習するのも良いでしょう。
ちなみに上で紹介したパン屋のサイトでは、「ホバーエフェクト」「スライドショー」「スティッキーヘッダー」を取り入れています。

【jQuery最高の教科書のリンク】

WordPressの学習⇒ドットインストール

ホームぺージは、作っただけではなく作成後更新していくことが必要になります。

運営者が自分で記事の投稿をしたり、画像を入れたりするためには「Wordpress（ワードプレス）」というサイト作成ソフトを使うのがオススメです。
※WordPressについて詳しくは以下の記事で解説していますので、気になる方は参考にしてみて下さい。

HTML、CSS、Javascriptを勉強した流れで、WordPressでサイトを構築していくためのスキルを学んでいきます。

WordPressで受けたレッスン（ドットインストール）

私がワードプレスでサイトを作るために学んだレッスンはこちらです。

サイトを作っていくためにはPHP（プログラミング言語）やMySQL（データベース）の知識も必要になってきます。
WordPress入門のレッスンだけでも作れないことはありませんが、基本的なことは学んでおいた方が良いでしょう。

Webデザインの勉強⇒書籍＋インターネット検索

続いてはWebデザインの勉強です。

jQuery（JavaScriptのライブラリ）の勉強で使った書籍

まず初めに「Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集」を購入しました。
なぜ本を買ったかと言うと、配色など一から体系的に学びたかったからです。

「一冊くらい持っておいても損は無いかな」

といった程度の動機で買ってみました。
配色から業種別のサイトデザインなどとてもためになりました。

【Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集のリンク】

書籍を使わない場合

書籍を購入しなくても、グーグルなどの検索サイト「Webサイト デザイン」などと検索すれば、様々なWebデザインを紹介しているサイトなどが出てきます。
その中から良質なデザインを見て、学んでも良いでしょう。

画像の加工・イラスト作成（デザイン）⇒書籍

ホームぺージの作成では画像を編集したり、ロゴを作ったりということも必要になります。

画像を透化させる、写真にスモークをかけるなどの編集はAdobe（アドビ）のPhotoshop（フォトショップ）というソフトを使いました。
HTML・CSSだけでも画像に文字を入れたり、加工したりすることはできます。

ただ調べてみると多くのWebを制作する現場では、「Photoshop（フォトショップ）」や「illustrator（イラストレーター）」というソフトが使われていることが分かりました。
そのため私もこちらのデザインソフトを使うことにしました。

Photoshopの使い方を学んだ書籍

フォトショップの使い方については、「Photoshop しっかり入門 増補改訂版 【CC完全対応】[Mac & Windows対応]」で勉強しました。
初心者の方が基本的な使い方を学ぶことができるので、とてもおすすめです。

このようなソフトの使い方に関しては、インターネットなどで都度調べて学んでいくという方法もあります。
しかし私は体系的に一から学びたかったので、書籍を購入することにしました。

ざっと一周勉強してから気になる部分を再度勉強する、といった形で勉強しました。

Illustratorの使い方を学んだ書籍

ロゴ・イラストの作成にはフォトショップと同じアドビ社のIllustrator（イラストレーター）を使いました。

学習には、「Illustrator しっかり入門 増補改訂 第２版 【CC完全対応】［Mac & Windows 対応］」を使いました。

「Photoshop しっかり入門 増補改訂版 【CC完全対応】[Mac & Windows対応]」と同じく“SBクリエイティブ”という会社から出版されており、初心者が基本的な使い方を体系的に学ぶのにおすすめです。

Adobeのデザインソフトはどうすれば使えるの？

また画像加工ツールやイラストツールは無料のものもありますので、ご自身で探され利用されても良いでしょう。

ホームぺージ公開までの手順⇒インターネット検索

最後は、WordPressでホームぺージを公開するまでの手順を学びます。
手順は主に6つです。

ホームぺージをアップするまでの【手順1】～【手順5】

ホームぺージを公開するまでの流れは、全て都度インターネットで検索し進めていきました。

「検索しながらいちいち調べるのが手間・・」

という方のために、【手順1】～【手順5】までを以下の記事でまとめました。
是非参考になさって下さい。

ホームぺージをアップするまでの【手順6】

最後に、ファイル転送ソフト（FTPソフト）を使って、作成したテーマをアップロードします。
私は「FileZilla（ファイルジラ）」というファイル転送ソフトを使いました。

以下のサイトで分かりやすく解説して下さっていますので、是非参考にしてみて下さい。

まとめ

以上、初心者の私が独学でホームページを作った手順について解説させて頂きました。

はじめは、

「HTMLやCSSなんて本当に独学で覚えられるのかな？」

と不安でしたが、ドットインストールなどのサービスを利用しなんとか自分一人でホームぺージをアップするまでやり遂げられました。
（プログラミングの学習サービスには「Progate（プロゲート）」というサービスもありますが、私の場合はドットインストールのような動画教材の方が向いていました。）

独学で一から勉強することは大変ですが、初めてのホームぺージが出来た時はかなりの達成感があります。
自分でやろうという気持ちのある方は、是非チャレンジしてみて下さい。

また当記事はあくまで私個人の経験元にお話ししておりますので、やり方によってもっと安く・早く学習できるかもしれません。
是非参考にして頂き、ご自身に合った学習方法を見つけて下さい。