この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
こんにちは！フリーランスWebデザイナーの@mush_designer です。
Webデザインを独学で学びたいけど、何から学んでいいか分からないよ〜！
そんな方のために【初心者】【初心者〜中級者】【上級者】のレベル分け、おすすめのWebデザイン本をまとめました。
このブログでは次のことを知ることができます。
- おすすめのWebデザイン本
- 主に学べること
- どんな人におすすめか
それではご覧下さい。
目次 非表示
初心者向け
HTML＆CSSとWebデザイン入門編
- Webサイトの基本知識
- Web制作の流れ
- HTML・CSSの基本
- フルスクリーンのサイト制作
- ２カラムのサイト制作
- タイル型のサイト制作
この本はこれからWeb制作を学びたい初心者向けに次の順番で解説している本です。
- Webサイトの基本知識
- Webの基本構造
- Webの装飾
これからWebデザインを学ぶ人は必ずこの本を１番はじめに読んでください。この本が１番分かりやすいです！
基本を学んだあとは３つのWebサイトを手を動かしながらスキルを身につけられます。
そもそもWebって何？！からデバイスやサイトの種類まで紹介されており、Webデザイナーだったら知っておきたい基本の「き」から学べることがいいと思いました。
- これからWebデザインを学びたい人
- Web制作超初心者の人
- HTMLとCSSの基本が学びたい人
世界一わかりやすいPhotoshop操作とデザインの教科書
- Photoshopの基本的な使い方
- よく使う機能の紹介
- 写真加工の基本
- Webデザイン向けのツールの使い方
この本はPhotoshopの機能やツールの基本の「き」を学べる本です。
数ある初心者向けのPhotoshopの本の中から、この本をおすすめする理由はWebデザイン向けのツールの使い方が紹介されているからです。
例として下記の内容が学べます。
- スマホ・タブレットのデザインの考え方・作り方
- ガイドレイアウトの作り方
- テキストスタイルの管理の仕方
- キービジュアルの作り方
- 共通項目のパーツ化
- 画像の書き出し
管理の仕方やパーツ化など知らなかった技術もあり、もっと早く出会っていれば、作業を効率化できたのにと思いました。
- Photoshopをはじめて使う人
- Webデザイン制作に最低限必要なPhotoshopの機能を学びたい人
初心者向け〜中級者向け
初心者からちゃんとしたプロになるWebデザイン基礎入門
- Webサイトの基本知識
- Web制作の流れ
- HTML・CSSの基本
- シングルページ制作
- レスポンシブ対応サイト制作
- Webサイトの公開
- Webサイトの運用
まず、この「初心者からちゃんとしたプロになるシリーズ」の紹介です。
この「初心者からちゃんとしたプロになるシリーズ」は学校でWebデザインを教えている現役の先生たちが書いた本で初心者向けに１日30分から学べる本です。
各内容ごとに学習時間目安が書いてあるので、学習計画がたてやすく自分のペースで学べるのが特徴です。
また、実際に制作現場で使われている専門用語の解説やHTMLやCSSの書き方・使い方に関しては「なぜ必要なのか」「どうして、そう記述するのか」まで解説しており深く理解しやすいです。
このシリーズは「初心者から」となっていますが、専門用語が多いことから、これからWebデザインを学ぶ超初心者にはハードルが高いのが注意ポイント。
第1弾のWebデザイン基本入門ではWeb制作の基本から、サイト公開、運用まで学べる本です。
学びながらWeb制作の全体像を把握できるのが特徴で、とくにWebサイトの公開から運用まで紹介されている本は珍しいと感じました。
- Web制作初心者から中級者にレベルアップしたい人
- HTMLとCSSの基本が学びたい人
- Web制作の全体像が学びたい人
初心者からちゃんとしたプロになるHTML＋CSS標準入門
- いまのWebデザインについて
- Web制作の仕組み
- Webサイトを制作するためのツール
- HTML・CSSの基本、応用
- シングルページ制作
- Flexboxを使ったサイト制作
- CSS Gridを使ったサイト制作
- レスポンシブ対応のサイト制作
【初心者からちゃんとしたプロになるシリーズ】第２弾の「HTML＋CSS標準入門」では実際の制作現場で行われているHTML・CSS設計が学べる本です。
レベル的にはHTML・CSSの基本の復習がてら、応用へステップアップするための第１歩くらいのイメージです。
わたしが勉強になったのはコーディングをする前の事前準備です。どのような構造にするのか、どんなタグを使えばいいのかなどを考え方が紹介されており参考になりました。
- HTMLとCSSの基本から応用に向けてステップアップしたい人
- コーディングをする前の事前準備を学びたい人
- HTMLとCSSの構造やマークアップについて学びたい人
- Web制作会社で働きたい人
HTML＆CSSとWeb実践講座編
- 管理しやすいCSS
- デベロッパーツールの使い方
- ランディングページでレスポンシブを学ぶ
- ブログサイトで装飾を学ぶ
- コーポレートサイトでJavaScriptでグラフやデータ整理を学ぶ
- イベントサイトでアニメーションやブレンドモードを学ぶ
- ギャラリーサイトでよく見るWebの技術を学ぶ
- Emmet、calc関数、Sassでコード効率化を学ぶ
この本はHTMLとCSSの基本を理解し、ワンランクアップしたい人におすすめの本です。
特徴としては完成された5つのサイトを見ながら、練習問題を通じて１つ１つテクニックを学べること。紹介されているテクニックは実際にWeb制作の現場で需要の高く実務近いトレーニングができます。
- HTMLやCSSの基本を理解しワンランクアップしたい人
- コーダーを目指している人
- 実践的なコーディングが学びたい人
Webデザイン良質見本帳
- Webデザインの基本知識
- 印象から考えるデザイン
- 配色から考えるデザイン
- 業種・ジャンル別から考えるデザイン
- レイアウト・構図から考えるデザイン
- 素材・フォント・プログラムを使ったデザイン
- トレンドのデザイン
- パーツ別デザイン
この本はレイアウト、配色、フォント、素材などから目的別にデザインを探せるアイディア集。
お客さまへ提案する際やデザインイメージの共有にも使えるのでWebデザイナーなら持っておきたい一冊になっています。
また、フォント、カラー、ワークフローなどWebデザインの基礎知識が幅広く掲載されているので勉強になります。
※HTMLやCSSなどコードの解説は掲載されていないので注意してください。
Webデザインの配色やテイストの参考によく見ています！
- フリーランスWebデザイナーの人
- Webデザインのアイディア帳が欲しい人
- お客さまとデザインイメージの共有に使いたい人
動くWebデザインアイディア帳
- 動くWebデザインの基本知識
- CSSアニメーションやjQueryの基本知識
- ローディング・画面遷移関連の動き
- ナビゲーションメニュー関連の動き
- ギャラリー・動画関連の動き
- ボタン・検索関連の動き
- ページトップ・ページ内リンク関連の動き
- グラフ関連の動き
この本は動きのあるWebデザインを逆引きできるアイディア集で、CSSやjQueryを使用した実装を紹介しており、そのままコピペすれば動くという優れもの。
コードの意味も書いてあるので理解しやすいです。
動くデザインアイディア帳はWebサイトもあり、コードをコピペできるので是非、利用してみてください。
【動くデザインアイディア帳公式サイト】https://coco-factory.jp/ugokuweb/
普段、お仕事でも活用させていただいており、手放せない一冊になっています。
- CSSやjQueryを学びはじめた人
- JavaScriptが苦手な人
- 動くデザインのアイディア帳が欲しい人
上級者向け
初心者からちゃんとしたプロになるHTML＋CSS実践講座
- Web制作現場のコーディングとツール
- Web開発環境の構築
- XDデザインカンプからのコーディング設計
- BEMを使ったCSS設計
- Sassの使い方
- Vue.jsを利用したギャラリーサイト制作
【初心者からちゃんとしたプロになるシリーズ】の「HTML＋CSS実践講座」ではコーディングの基本を理解し、もう１歩先にいきたい人向けの本です。
例えばこのようなツールなどが紹介されています。
- バージョン管理システム「Git」
- CSSコーディング効率化「Sass」
- タスクを自動化する「タスクランナー」
- コーディングエディタ「Visual Studio Code」
- Web開発作業自動化「Gulp」
基本的な使い方が紹介されているので、まずはどのようなものなのか知ることからはじめると良いと思いました。
わたしがとくに勉強になったのはコーディングを設計の考え方です。
コーディングに設計に絶対の正解はありませんが、「なぜ、こうゆう設計にしたのか」深く考えなから制作を進め自分の納得のいくコーディング設計を行いたいと思いました。
- Web制作現場の技術を学びたい人
- 複数人で制作・開発をしたい人
- 大規模なWeb制作がしたい人
- コーダーやフロントエンジニアになりたい人
まとめ
いかがでしたか？
数あるWebデザイン本の中からおすすめしたい本をレベル別にまとめてみました。
内容が重複している本もありますが、「こうゆう考え方もあるのか」「こうゆう表現もあるのか」などさまざまな視点で学べたり、復習にもなるので、１度は手にとって欲しい本ばかりです。
Webデザインおすすめ本は随時更新していく予定ですのでお楽しみに♪
