はじめに

Webサイト制作・Webデザインの勉強を始めるにあたって、初心者の方は「何から手をつけたらいいの？」「どの本を選べばいいの？」と迷いませんか！？

この記事では、多くの方から支持されている7冊の書籍を、分かりやすく解説します。それぞれの書籍の特徴や、どんな方におすすめなのかも詳しくご紹介しますので、参考書迷子の方や「自分でホームページを作ってみようかな！？」と思っている方は、ぜひぜひ参考になさってください。

はい、もちろん私は全部持っています！私がWeb制作の勉強を始めた1年目に実際に読んだ本達です。

一応Amazonリンクを貼っていますが、参考書籍を新品で揃えていくと…課金かきんカキーン！！で諭吉じゃない栄一がどんどん飛んでいく。私は参考書籍の８割は中古でゲットしました。メルカリ、PayPayフリマ、サンキュー。

※中古で買う場合は、改訂版との中身の違いについて注意・検討すべし。

※リンクを貼っておいてアレですが、できれば書店で実際手にとって「見やすさ・読みやすさ」を確認した方がベストではあります！

ーーーHTML/CSSの基礎ーーー

1. 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

◾️Amazonリンクはコチラ

【この本がおすすめな人】

Webデザインをゼロから学びたい人、HTMLとCSSの基礎をしっかり固めたい人

【特徴】

• オールインワン:

  HTML（ウェブページの構造を記述する言語）とCSS（ウェブページの見た目をデザインする言語）の基礎から、レイアウト、配色、タイポグラフィ（文字のデザイン）まで、Webデザインに必要な知識をまんべんなくに学べます。

• 図解豊富:

  写真や図解をふんだんに使っているため、初心者でも視覚的に理解しやすいです。

• 実践的な演習問題:

  各章の最後に練習問題があり、学んだことをすぐに実践できます。

【どんなことができるようになる？】

この本を一冊マスターすれば、簡単なWebページを自分で作成できるようになるかと！また、Webデザインの基本的な考え方や、美しいWebページを作るためのコツを学ぶことができます。

【マツダ談】

私は学校（職業訓練校）の先生から勧められた、次に紹介する『2. 初心者からちゃんとしたプロになる　HTML+CSS標準入門』をまずはじめに買いました。そして、コードの勉強を始めてしばらくしてから、コチラの本もお買い上げ。だって…

• 2019-2024年、5年連続、売上第1位！（日販売上げランキング: HTML関連書籍）

• シリーズ40万部突破の大ヒット!

• 全国の書店員がオススメする本 第1位 受賞（2019年度 CPU大賞）」

うーーん、全くの初心者でだったら、こっちの方がとっつきやすいかも！という印象。重なっている内容も多いです！そして、同じ見せ方をするのに、微妙に書き方が違うことがあったり、見比べて面白かったし学びになりました。

2. 初心者からちゃんとしたプロになる　HTML+CSS標準入門

◾️Amazonリンクはコチラ

【この本がおすすめな人】

 Webサイト制作の基礎をしっかりと学びたい方におすすめの一冊です。初心者にもわかりやすく、かつプロの現場で役立つ知識を網羅！

【特徴】

• 基礎から応用まで:

  HTMLとCSSの基礎から、実践的なコーディングテクニックまで、順序立てて学ぶことができます。 1冊で完結するので、他の書籍を探す手間が省けてGood。

• 最新のWeb技術に対応:

  モバイルファースト、レスポンシブデザイン、Flexbox、CSS Gridなどなどについてしっかり書かれています。 Webサイト制作の現場で必要な知識をゲットできます。

• 豊富な図解と丁寧な解説:

  図解を豊富に使い、難しい概念もわかりやすく解説してくれています。 初心者でもくじけずに学習を進めることができるような工夫が感じられます。

【どんなことができるようになる？】

この本を学ぶことで、より高度なHTMLとCSSのコーディングができるようになります。レスポンシブデザイン（様々なサイズの画面に対応できるデザイン）やアニメーションなど、現代的なWebサイトを作るための技術を習得できます。

【マツダ談】

先ほど書いたように、私はまずコチラを書きました。私が勉強した職業訓練校では、この本に準拠してHTML・CSSの学習が進められていました。プロの目から見て「良い！」という認識だと思います。この一冊をマスターすれば、簡単なWebサイトは作れるようになります！

『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』の対象読者が「初心者、Webデザインの基礎を学びたい人」とするのに対し、こちらは「初心者〜中級者、より深く学びたい人」。Amazonサイトに、どちらの本も内容のサンプルが載っています！目次とデザインを見て、比較するのがおすすめ。

ーーーJavaScriptの基礎ーーー

3. スラスラ読める JavaScript ふりがなプログラミング

◾️Amazonリンクはコチラ

【この本がおすすめな人】

JavaScript（ウェブページに動きやインタラクティブな機能を追加するためのプログラミング言語）の基礎を楽しく学びたい人、Webページに動きをつけたい人

※インタラクティブとは『ユーザーがWebサイトと双方向にやり取りできること』。

例えば、「ボタンをクリックするとページが変わる、フォームに入力して情報を送信する、画像をドラッグして位置を移動する、動画を再生・停止する」このような、ユーザーのアクションに対してWebサイトが反応し、何かしらの変化が起こることをインタラクティブと言います。

【特徴】

• 初心者向け:

  難しい単語にふりがなが振られているため、プログラミング初心者でも分かりやすく学ぶことができます。

• 図解とイラスト:

  図解やイラストを豊富に使っているため、視覚的に理解しやすいです。

• 実践的なサンプルコード:

  実際に動くサンプルコードがたくさん載っているので、手を動かしながら学習できます。

【どんなことができるようになる？】

この本で学ぶことで、JavaScriptの基本的な文法をマスターし、Webページに動きやインタラクティブな要素を追加できるようになります。

【マツダ談】

HTML・CSSまでは良かったんです。JavaScriptで…心が折れかけました。国語は好きだけど数学が苦手なマツダ。関数と再び関わる人生が訪れるなんて涙

でも！そんなJavaScriptで心が折れかけている生徒達に、職業訓練校の先生がおすすめしてくれた本がコチラでした。いやーーー分かりやすい。これなら何とか勉強してやってもいい（何様）。

JavaScriptの壁にぶつかった方にはホントおすすめっ！！

ーーー動きのあるWebデザイン（CSS・j Query）ーーー

4. 動くWebデザインアイディア

◾️Amazonリンクはコチラ

【この本がおすすめな人】

Webサイトに動きをつけたい人、インタラクティブなWebサイトを作りたい人

【特徴】

• 動的なデザインのアイデア:

  jQuery（ジェイクエリー）（JavaScriptのライブラリ）やCSSアニメーションを使った、動的なWebデザインのアイデアが満載です。

• 実際のコード例:

  実際のコード例が掲載されており、すぐに自分のWebサイトに適用できます。

• デザインの解説:

  各デザインの意図や効果が解説されているため、デザインの背景を理解することができます。

【マツダ談】

こちらは、職業訓練校時代にめちゃくちゃ使わせていただいたサイトの書籍版。

◾️動くWebデザインアイディア帳

※現在は書籍購入者のみが閲覧できるサイトになりました。

ポートフォリを作成するときに、動きのあるデザインにしたくて、コチラには大変お世話になりました！ありがとうございました！

5. 動くWebデザイン アイディア帳 実践編

◾️Amazonリンクはコチラ

【この本がおすすめな人】

 動くWebデザインアイディア帳で学んだことをさらに深めたい人

【特徴】

• 応用編:

  動くWebデザインアイディア帳の応用編として、より高度なテクニックが紹介されています。

• 実践的な事例:

  実際にWebサイトで使用されている動的なデザインの事例が多数掲載されています。

ーーーWebサイトデザインの具体例ーーー

6. Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

◾️Amazonリンクはコチラ

【この本がおすすめな人】

デザインのアイデアが欲しい人、Webサイトのデザインの参考書を探している人

【特徴】

• 豊富なデザイン事例:

  様々な業種のWebサイトのデザイン事例が掲載されており、デザインの参考になります。

• 目的別の検索:

  目的別にデザイン事例を検索できるため、効率的にアイデアを探すことができます。

• 高品質なデザイン:

  プロのデザイナーが制作した高品質なデザインが多数掲載されています。

【どんなことができるようになる？】

この本を見ることで、デザインのセンスを磨くことができます。また、自分のWebサイトのデザインを作る際のヒントを得ることができます。

7. Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集

◾️Amazonリンクはコチラ

【この本がおすすめな人】

 Webデザイン良質見本帳の第1版を持っている人、最新のWebデザイントレンドを知りたい人

【特徴】

• 最新のデザイントレンド:

  第1版に比べて、最新のWebデザイントレンドが反映されています。

• より多くのデザイン事例:

  より多くのデザイン事例が掲載されていて、幅広いジャンルのWebサイトのデザインを参考にすることができます。

【マツダ談】　

初版と第２版、どちらもオススメ！内容が結構違うので、2冊持っていて損はナシ！　

まとめ

本記事では、Web制作の世界に入ったばかりの方に、きっと役立つ7冊の書籍を紹介しました。これらの本を参考に、スキルアップに役立てていただけたら、とても嬉しいです。

ちなみに、私は今ほとんどのWebサイト制作をノーコードツールのStudioで行っていますが、「ノーコードといえど、コーディングの知識があった方が絶対スムーズ！」だと実感しています。他のStudio使いの方もそう言っている方が多いです。他のノーコードツールも同じ。全くコーディングやデザインの知識がないより、コーディングとWebデザインの基礎知識は絶対あった方がいい！と個人的には思います。

一緒に頑張りましょー！物づくりはたのし！