Web制作を独学しようと思ったとき、最初に迷ったのが「何を使って勉強すればいいのか」ということでした。

Web上にもたくさんの情報がありますが、分からないことが出てくるたびに検索していると、情報がバラバラになってしまうことがあります。

そこで私は、参考書を使いながらHTML、CSS、JavaScript、Webデザインなどを少しずつ勉強していきました。

ただ、参考書を読むだけですべてが分かるわけではありません。

実際にコードを書いたり、自分でデザインを考えたり、分からない部分を何度も確認したりする中で、少しずつ理解できるようになりました。

今回は、私がWeb制作を独学する中で実際に使った参考書を9冊紹介します。

それぞれについて、「なぜ買ったのか」「どのくらい使ったのか」「特に役立ったこと」「難しかったこと」「今のWeb制作にどうつながっているか」をまとめました。

Web制作を独学するときに参考書を使った理由

Web制作を勉強し始めたころは、分からないことがあるたびに検索しながら覚えていました。

しかし、調べるたびに違うサイトを見ることになるので、学んだ内容が自分の中でうまくつながらないこともありました。

そこで、ある程度順番に学べる参考書を使ってみることにしました。

実際に使ってみると、基礎から少しずつ難しい内容へ進めることができ、前に学んだことを振り返りながら次の内容へ進められる点が自分には合っていました。

また、ただコードを読むだけではなく、自分で考えてコードを書く実践問題がある本も多く、実際の制作につながる力を身につけることができました。

---

HTML・CSS・JavaScriptを学ぶために使った参考書

① 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座［第2版］

なぜ買った？

何も知らない状態の初心者に向けた参考書で、基礎から始まり、徐々に技術が発展していく内容だと思ったため、この本を選びました。

最初から難しい内容に進むのではなく、少しずつ知識を増やしていけるところが、自分の学習に合っていると感じました。

実際にどのくらい使った？

1〜3か月ほど使いました。

特に役立ったところ

一つひとつの内容に実践問題があり、コードをただ真似するだけではなく、「自分ならどのようなコードにするといいのか」を考える機会がありました。

そのため、書いてあるコードをそのまま覚えるのではなく、自分で考えてコードを書く力を身につけることができました。

難しかったところ

分からない部分が出てきたときに、その場ですべて解決できるわけではありませんでした。

前に学んだ内容を振り返るために、参考書をさかのぼって確認する必要があり、最初は少し時間がかかりました。

今のWeb制作にどうつながっている？

自分が考えたデザインを、そのままWeb上で表現するために、どのようなHTMLやCSSを書けばいいのかを考える力につながっています。

デザインを見て終わりではなく、それをコードに置き換えることを意識するようになりました。

---

② ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座

なぜ買った？

①の本でHTML・CSSの基礎を勉強したあと、より実践的な内容を学びたいと思って購入しました。

基礎だけでなく、実際のWeb制作で見た目を整えていくための考え方を知りたいと思ったことも理由の一つです。

実際にどのくらい使った？

1〜3か月ほど使いました。

特に役立ったところ

一つひとつのコードを書く意味を考えながら、見た目を変えていくことを意識できるようになりました。

特に、少しのCSSの違いでWebページの印象が変わることを実感できたのが印象に残っています。

難しかったところ

分からない部分があると、前の章や以前の内容に戻って確認する必要がありました。

そのため、自分がどこまで理解できているのかを確認しながら進めることが大切だと感じました。

今のWeb制作にどうつながっている？

自分が考えたデザインを、HTMLとCSSを使って少しずつ形にしていく力につながっています。

コードを書くだけではなく、「この見た目にするには何が必要なのか」を考えるようになりました。

---

③ 1冊ですべて身につくJavaScript入門講座

なぜ買った？

HTMLとCSSを学んでいく中で、Webサイトに動きを付けるJavaScriptについても知りたいと思い、この本を選びました。

初心者向けに基礎から学べる参考書だったので、独学でも進めやすそうだと感じました。

実際にどのくらい使った？

1〜3か月ほど使いました。

特に役立ったところ

こちらも実践問題があり、コードをそのまま真似するだけではなく、自分で考えながら書くことができました。

実際に動くものを作りながら学ぶことで、JavaScriptのコードが何のためにあるのかを考えるきっかけになりました。

難しかったところ

HTMLやCSSと比べて、考えなければならないことが増えたため、最初は難しく感じました。

分からないところがあると、以前の内容を振り返りながら理解する必要がありました。

今のWeb制作にどうつながっている？

HTMLやCSSだけでなく、Webサイトに動きや機能を加えるためにJavaScriptがあることを理解するきっかけになりました。

また、コードをそのまま写すのではなく、自分で考えて実装するという学習方法も、現在の制作につながっています。

---

Webデザインの考え方を学ぶために使った参考書

④ なぜ、これがこうなるのか？Webデザイン&ワイヤーフレーム比較見本Book

なぜ買った？

Webサイトのデザインを考えるときの参考になると思ったため、購入しました。

それまで何となく「きれいなデザイン」を考えていましたが、見た目だけではなく、「なぜこの配置なのか」「なぜこのデザインなのか」を考えられるようになりたいと思っていました。

実際にどのくらい使った？

3か月ほど使いました。

特に役立ったところ

何となくデザインするのではなく、何のためにそのデザインにするのかを考えるきっかけになりました。

見た目だけを整えるのではなく、デザインの意味や目的を意識するようになったことが大きかったです。

難しかったところ

実際に自分のデザインへ取り入れようとすると、思っていた以上に奥が深く、複雑に感じました。

参考にすることと、それを自分の制作に落とし込むことは別の難しさがあると感じました。

今のWeb制作にどうつながっている？

「何となくのデザイン」から、「意味のあるデザイン」を考えるようになりました。

Webサイトを作るときにも、「なぜここにこの要素を置くのか」を考えるようになっています。

---

⑤ デザイナーは何を考え、どう作っていくのか？ WebデザインプロセスBook

なぜ買った？

Webサイトのデザインを考えるときに、デザイナーがどのようなことを考えて制作しているのかを知りたいと思い、購入しました。

デザインそのものだけではなく、制作の考え方を学びたかったためです。

実際にどのくらい使った？

3か月ほど使いました。

特に役立ったところ

デザインを考えるときに、「何となくこうしたい」という感覚だけではなく、なぜそのデザインにするのかを考えることの大切さを学ぶことができました。

難しかったところ

いざ自分のデザインに生かそうとすると、思っていたよりも奥が深く、複雑で難しいと感じました。

参考書を読んで理解することと、それを自分で実践することには大きな違いがありました。

今のWeb制作にどうつながっている？

デザインを見るときに、見た目だけではなく、その裏側にある意図を考えるようになりました。

自分自身のWeb制作でも、「何となく」から「意味のあるデザイン」へと考え方が変わってきています。

---

フロントエンドについて知るために使った参考書

⑥ フロントエンドの知識地図ーー 一冊でHTML/CSS/JavaScriptの開発技術が学べる本

なぜ買った？

エンジニアとして、どのような場所で活躍できるのか、そして今後どのような知識が必要になるのかを知りたくて購入しました。

HTML・CSS・JavaScriptをそれぞれ勉強してきた中で、自分が今どの位置にいるのかを整理したいと思ったことも理由の一つです。

実際にどのくらい使った？

2か月ほど使いました。

特に役立ったところ

今の自分がどのくらいの位置にいるのかを考えるきっかけになりました。

さらに、これから目指したい立場や、身につけていきたいスキルについて知ることができました。

難しかったところ

未経験だったため、初めて聞く単語などが多くありました。

知っている内容だけではなく、これから学ぶ必要がある技術も出てくるため、最初は難しく感じました。

今のWeb制作にどうつながっている？

これから目指していきたい目標や、身につけていきたいスキルを把握することができました。

「今できること」だけを見るのではなく、「これから何を学べばいいのか」を考えるようになったことが大きかったです。

---

デザインの幅を広げるために使った参考書

⑦ Webデザイン良質見本帳 第2版

なぜ買った？

「デザインとは何なのか」「それぞれのデザインにはどのような工夫や意味があるのか」を知るために購入しました。

自分だけでは思いつかないデザインを知り、Webサイトを見るときの視点を増やしたいと思っていました。

実際にどのくらい使った？

3か月ほど使いました。

特に役立ったところ

自分にはなかった新しいデザイン方法や、工夫の仕方を知ることができました。

実際のWebデザインを見ることで、「こんな表現もあるんだ」と知る機会が増えました。

難しかったところ

見本として見ると目を引くデザインが多いのですが、それを実際に自分のサイトで使おうとすると、コーディングするのが難しく感じることがありました。

今のWeb制作にどうつながっている？

自分が作れるデザインの幅が広がりました。

⑧ デザイン入門教室

なぜ買った？

Webデザインを作るうえで、デザインそのものについてもっと知りたいと思い、購入しました。

「見た目をきれいにする」だけではなく、デザインの基本的な考え方を知りたいと思っていました。

実際にどのくらい使った？

3か月ほど使いました。

特に役立ったところ

自分にはなかった新たなデザイン方法や、工夫の仕方を知ることができました。

今まで何となく使っていたデザインにも、さまざまな考え方があることを知るきっかけになりました。

難しかったところ

実際に自分の制作へ取り入れようとすると、参考にしたデザインをどのようにコードへ落とし込むのかで難しさを感じました。

今のWeb制作にどうつながっている？

デザインの選択肢が増え、自分の中にある表現の幅が広がりました。

⑨ 新ほめられデザイン事典 レイアウトデザイン

なぜ買った？

デザインとは何なのか、それぞれのレイアウトにはどのような工夫や意味があるのかを知るために購入しました。

特に、レイアウトのパターンを増やして、自分のデザインに生かしたいと思っていました。

実際にどのくらい使った？

3か月ほど使いました。

特に役立ったところ

自分にはなかった新しいデザイン方法や、レイアウトの工夫を知ることができました。

今までとは違う視点からデザインを考えられるようになりました。

難しかったところ

見本として見ると魅力的なデザインでも、実際に自分で作ろうとするとコーディングの難しさを感じました。

デザインを考えることと、それをWeb上で再現することは別の難しさがあると実感しました。

今のWeb制作にどうつながっている？

自分が考えられるデザインの幅が広がりました。

以前よりも「こういう見せ方もできる」と考えられるようになり、デザインを考えるときの選択肢が増えています。

---

9冊の参考書を使って感じたこと

ここまで9冊を振り返ってみると、参考書にはそれぞれ違う役割があったと感じています。

最初に使った①〜③では、HTML・CSS・JavaScriptを中心に、コードを書くための基礎を学びました。

特に印象に残っているのは、実践問題を通して「コードを覚える」のではなく、「自分で考えてコードを書く」ことを意識できたことです。

その後、④〜⑤ではWebデザインそのものだけではなく、「なぜこのデザインにするのか」という考え方を学びました。

さらに⑥では、フロントエンドについて学びながら、今の自分がどこにいて、これからどんなスキルを身につけていけばいいのかを考えるきっかけになりました。

そして⑦〜⑨では、デザインの見本を見ながら、自分にはなかった表現やレイアウトを知りました。

それぞれの本で学んだことが少しずつつながって、今のWeb制作につながっています。

---

参考書を読むだけでは分からなかったこと

参考書を使って勉強していくと、HTMLやCSSの知識は少しずつ増えていきました。

しかし、実際に自分でWebサイトを作り始めると、参考書を読んでいるだけでは分からなかったことがたくさん出てきました。

例えば、普段ユーザーとして見ていた「画像の上にタイトルが表示されるメインビジュアル」も、自分で作ろうとすると、どのようにHTMLを組み、CSSでどのように配置すればいいのかを考える必要があります。

さらに、PCではきれいに表示できても、スマートフォンではボックスが画面からはみ出してしまうこともありました。

自分が考えたデザインを、ユーザーが見ているさまざまな画面サイズに合わせて調整する必要があります。

そのため、Web制作では「参考書で知識を得ること」と「実際に制作すること」の両方が大切なのだと感じました。

---

デザインを見るだけでも、見え方が変わった

Web制作を勉強する前は、Webサイトを見ても「きれいだな」「おしゃれだな」というくらいの感覚でした。

しかし、デザインの参考書を読むようになってからは、

「なぜここにこの要素があるんだろう？」

「どうしてこの余白になっているんだろう？」

「なぜこの文字サイズなんだろう？」

と考えながら見るようになりました。

実際に制作する経験とデザインを学ぶ経験が組み合わさることで、Webサイトを見る視点も変わっていきました。

---

独学で一番大切だと感じたこと

私が独学を続ける中で感じたのは、参考書を最後まで読むことだけを目標にしないことです。

参考書を読んで分かったつもりになっても、自分でコードを書くと分からないことが出てきます。

そのときに、もう一度参考書を読み返したり、実際にコードを変更してみたりすることで、少しずつ理解できるようになりました。

私の場合は、

参考書を読む
↓
コードを書く
↓
自分のデザインに置き換えてみる
↓
うまくいかない
↓
原因を調べる
↓
参考書を読み返す
↓
修正する
↓
もう一度作る

という繰り返しが多かったです。

最初から完璧に理解しようとするのではなく、分からないところが出てきたら、その都度戻って確認する。

そんな学び方を続けることで、少しずつできることが増えていきました。

---

これからWeb制作を独学する方へ

Web制作を独学し始めたころは、覚えることが多く、どこから手を付ければいいのか分からなくなることもありました。

私自身、HTMLやCSSの基本から始めて、JavaScript、Webデザイン、フロントエンドと勉強するうちに、少しずつ興味のある分野が広がっていきました。

参考書を読むことで基礎を学べましたが、実際に自分でWebサイトを作ってみることで、初めて分かることもたくさんありました。

そのため、知識を覚えるだけではなく、実際に小さなものでも作ってみることが大切だと感じています。

「こんなデザインを作ってみたい」と思ったら、そのイメージを小さなパーツに分けて、一つずつコードにしてみる。

うまくいかなければ、また調べる。

そうやって試行錯誤しながら進めることで、少しずつ自分の力になっていきました。

---

まとめ

今回は、私がWeb制作を独学する中で実際に使った参考書9冊を紹介しました。

① 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座［第2版］
② ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座
③ 1冊ですべて身につくJavaScript入門講座
④ なぜ、これがこうなるのか？Webデザイン&ワイヤーフレーム比較見本Book
⑤ デザイナーは何を考え、どう作っていくのか？ WebデザインプロセスBook
⑥ フロントエンドの知識地図ーー 一冊でHTML/CSS/JavaScriptの開発技術が学べる本
⑦ Webデザイン良質見本帳 第2版
⑧ デザイン入門教室
⑨ 新ほめられデザイン事典 レイアウトデザイン

最初は、HTMLやCSSのコードを書くことだけでも難しく感じました。

そこから、デザインを考えたり、スマートフォンとPCの両方で表示を確認したり、自分のイメージをHTMLやCSSに置き換えたりする中で、少しずつWeb制作について考えることが増えていきました。

参考書から学んだ知識だけで完成したわけではなく、実際に作って、分からなくなって、調べて、また作るという繰り返しが今の自分につながっていると感じています。

これからも、実際にWeb制作をしながら学んだことや、つまずいたことをNoah Labに記録していきたいと思います。