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