マッシュメモとは >

【独学】Webデザインを学びたい人におすすめな本8選【レベル別に紹介】

【独学】Webデザインを学びたい人におすすめな本8選【レベル別に紹介】

  • マッシュ

    こんにちは!フリーランスWebデザイナーの@mush_designer です。
だいふく
だいふく

Webデザインを独学で学びたいけど、何から学んでいいか分からないよ〜!

そんな方のために【初心者】【初心者〜中級者】【上級者】のレベル分け、おすすめのWebデザイン本をまとめました。

このブログでは次のことを知ることができます。

  • おすすめのWebデザイン本
  • 主に学べること
  • どんな人におすすめか

それではご覧下さい。

初心者向け

HTML&CSSとWebデザイン入門編

HTML&CSSとWebデザイン入門編
主に学べること

  • Webサイトの基本知識
  • Web制作の流れ
  • HTML・CSSの基本
  • フルスクリーンのサイト制作
  • 2カラムのサイト制作
  • タイル型のサイト制作

この本はこれからWeb制作を学びたい初心者向けに①Webサイトの基本知識、②Webの基本構造、③Webの装飾の順番で解説している本です。

これからWebデザインを学ぶ人は必ずこの本を1番はじめに読んでください。この本が1番分かりやすいです!

そもそもWebって何?!からデバイスやサイトの種類まで紹介されており、Webデザイナーだったら知っておきたい基本の「き」から学べることが良いと思いました。

基本を学んだあとは3つのWebサイトを手を動かしながらスキルを身につけられます。

こんな人におすすめ
  • これからWebデザインを学びたい人
  • Web制作超初心者の人
  • HTMLとCSSの基本が学びたい人

世界一わかりやすいPhotoshop操作とデザインの教科書

世界一わかりやすいPhotoshop操作とデザインの教科書
主に学べること

  • Photoshopの基本的な使い方
  • よく使う機能の紹介
  • 写真加工の基本
  • Webデザイン向けのツールの使い方

この本はPhotoshopの機能やツールの基本の「き」を学べる本です。

数ある初心者向けのPhotoshopの本の中から、この本をおすすめする理由はWebデザイン向けのツールの使い方が紹介されているからです。

例として下記の内容が学べます。

  • スマホ・タブレットのデザインの考え方・作り方
  • ガイドレイアウトの作り方
  • テキストスタイルの管理の仕方
  • キービジュアルの作り方
  • 共通項目のパーツ化
  • 画像の書き出し

管理の仕方やパーツ化など知らなかった技術もあり、もっと早く出会っていれば、作業を効率化できたのにと思いました。

こんな人におすすめ
  • Photoshopをはじめて使う人
  • Webデザイン制作に最低限必要なPhotoshopの機能を学びたい人

初心者〜中級者向け

初心者からちゃんとしたプロになるWebデザイン基礎入門

Webデザイン基礎入門
主に学べること
  • Webサイトの基本知識
  • Web制作の流れ
  • HTML・CSSの基本
  • シングルページ制作
  • レスポンシブ対応サイト制作
  • Webサイトの公開
  • Webサイトの運用

まず、この【初心者からちゃんとしたプロになるシリーズ】の紹介です。

この【初心者からちゃんとしたプロになるシリーズ】は学校でWebデザインを教えている現役の先生たちが書いた本で初心者向けに1日30分から学べる本です。各内容ごとに学習時間目安が書いてあるので、学習計画がたてやすく自分のペースで学べるのが特徴です。

また、実際に制作現場で使われている専門用語の解説やHTMLやCSSの書き方・使い方に関しては「なぜ必要なのか」「どうして、そう記述するのか」まで解説しており深く理解しやすいです。

このシリーズは「初心者から」となっていますが、専門用語が多いことから、これからWebデザインを学ぶ超初心者にはハードルが高いです。

繰り返しになりますが、まずは初心者向けで紹介した「HTML&CSSとWebデザイン入門編」から読むことをおすすめします

第1弾のWebデザイン基本入門ではWeb制作の基本から、サイト公開、運用まで学べる本です。

学びながらWeb制作の全体像を把握できるのが特徴で、とくにWebサイトの公開から運用まで紹介されている本は珍しいと感じました

こんな人におすすめ
  • Web制作初心者から中級者にレベルアップしたい人
  • HTMLとCSSの基本が学びたい人
  • Web制作の全体像が学びたい人

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

HTML・CSS標準入門
主に学べること
  • いまのWebデザインについて
  • Web制作の仕組み
  • Webサイトを制作するためのツール
  • HTML・CSSの基本、応用
  • シングルページ制作
  • Flexboxを使ったサイト制作
  • CSS Gridを使ったサイト制作
  • レスポンシブ対応のサイト制作

【初心者からちゃんとしたプロになるシリーズ】第2弾の「HTML+CSS標準入門」では実際の制作現場で行われているHTML・CSS設計が学べる本です。

レベル的にはHTML・CSSの基本の復習がてら、応用へステップアップするための第1歩くらいのイメージです。

わたしが勉強になったのはコーディングをする前の事前準備です。どのような構造にするのか、どんなタグを使えばいいのかなどを考え方が紹介されており参考になりました

こんな人におすすめ
  • HTMLとCSSの基本から応用に向けてステップアップしたい人
  • コーディングをする前の事前準備を学びたい人
  • HTMLとCSSの構造やマークアップについて学びたい人
  • Web制作会社で働きたい人

HTML&CSSとWeb実践講座編

HTML&CSSとWeb実践講座編
主に学べること
  • 管理しやすいCSS
  • デベロッパーツールの使い方
  • ランディングページでレスポンシブを学ぶ
  • ブログサイトで装飾を学ぶ
  • コーポレートサイトでJavaScriptでグラフやデータ整理を学ぶ
  • イベントサイトでアニメーションやブレンドモードを学ぶ
  • ギャラリーサイトでよく見るWebの技術を学ぶ
  • Emmet、calc関数、Sassでコード効率化を学ぶ

この本はHTMLとCSSの基本を理解し、ワンランクアップしたい人におすすめの本です。

特徴としては完成された5つのサイトを見ながら、練習問題を通じて1つ1つテクニックを学べること。紹介されているテクニックは実際にWEB制作の現場で需要の高く実務近いトレーニングができます

こんな人におすすめ
  • HTMLやCSSの基本を理解しワンランクアップしたい人
  • コーダーを目指している人
  • 実践的なコーディングが学びたい人

Webデザイン良質見本帳

Webデザイン良質見本帳
主に学べること
  • WEBデザインの基本知識
  • 印象から考えるデザイン
  • 配色から考えるデザイン
  • 業種・ジャンル別から考えるデザイン
  • レイアウト・構図から考えるデザイン
  • 素材・フォント・プログラムを使ったデザイン
  • トレンドのデザイン
  • パーツ別デザイン

この本はレイアウト、配色、フォント、素材などから目的別にデザインを探せるアイディア集

お客さまへ提案する際やデザインイメージの共有にも使えるのでWebデザイナーなら持っておきたい一冊になっています。

また、フォント、カラー、ワークフローなどWebデザインの基礎知識が幅広く掲載されているので勉強になります。

※HTMLやCSSなどのコードなどの解説は掲載されていないので注意してください。

こんな人におすすめ
  • フリーランスWEBデザイナーの人
  • WEBデザインのアイディア帳が欲しい人
  • お客さまとデザインイメージの共有に使いたい人

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

動くWebデザインアイディア帳
主に学べること
  • 動くWebデザインの基本知識
  • CSSアニメーションやjQueryの基本知識
  • ローディング・画面遷移関連の動き
  • ナビゲーションメニュー関連の動き
  • ギャラリー・動画関連の動き
  • ボタン・検索関連の動き
  • ページトップ・ページ内リンク関連の動き
  • グラフ関連の動き

この本は動きのあるWEBデザインを逆引きできるアイディア集で、CSSやjQueryを使用した実装を紹介しており、そのままコピペすれば動くという優れもの。

普段、お仕事でも活用させていただいており、手放せない一冊になっています。

動くデザインアイディア帳はWebサイトもあり、コードをコピペできるので是非、利用してみてください。

【動くデザインアイディア帳HP】

https://coco-factory.jp/ugokuweb/
こんな人におすすめ
  • CSSやjQueryを学びはじめた人
  • JavaScriptが苦手な人
  • 動くデザインのアイディア帳が欲しい人

 上級者向け

初心者からちゃんとしたプロになるHTML+CSS実践講座

HTML+CSS実践講座
主に学べること
  • Web制作現場のコーディングとツール
  • Web開発環境の構築
  • XDデザインカンプからのコーディング設計
  • BEMを使ったCSS設計
  • Sassの使い方
  • Vue.jsを利用したギャラリーサイト制作

【初心者からちゃんとしたプロになるシリーズ】の「HTML+CSS実践講座」ではコーディングの基本を理解し、もう1歩先にいきたい人向けの本です。

例えばこのようなツールなどが紹介されています。

  • バージョン管理システム「Git」
  • CSSコーディング効率化「Sass」
  • タスクを自動化する「タスクランナー」
  • コーディングエディタ「Visual Studio Code」
  • Web開発作業自動化「Gulp」

基本的な使い方が紹介されているので、まずはどのようなものなのか知ることからはじめると良いと思いました。

わたしがとくに勉強になったのはコーディングを設計の考え方です。

コーディングに設計に絶対の正解はありませんが、「なぜ、こうゆう設計にしたのか」深く考えなから制作を進め自分の納得のいくコーディング設計を行いたいと思いました。

こんな人におすすめ
  • Web制作現場の技術を学びたい人
  • 複数人で制作・開発をしたい人
  • 大規模なWeb制作がしたい人
  • コーダーやフロントエンジニアになりたい人

まとめ

いかがでしたか?

数あるWebデザイン本の中からおすすめしたい本をレベル別にまとめてみました。

内容が重複している本もありますが、「こうゆう考え方もあるのか」「こうゆう表現もあるのか」などさまざまな視点で学べたり、復習にもなるので、1度は手にとって欲しい本ばかりです。

Webデザインおすすめ本は随時更新していく予定ですのでお楽しみに♪

紹介した本の一覧はこちら

【初心者向け】

【初心者〜中級者向け】

【上級者向け】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です