アラフォー会社員がWeb系の副業をオススメするブログ

知識0からのWebデザイン学習本おすすめ22選


Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45

Notice: Undefined index: main in /home/yuzuskill/yuzuskill.com/public_html/wp-content/plugins/kattene/plugin.php on line 45
ユズト
Webデザイン、Web制作スキルアップのために様々な本を読んで知識を得てきました。

・知識0からデザインスキルが身につく本はどんな本?

・知識0からWeb制作全般に関する知識が身につく本はどんな本?

このような悩みに対して本記事を読むことで以下のようなことを知ることができます。
  • 知識0からWebデザイン+Web制作スキルを習得できるオススメWebデザイン関連本22冊がわかる。

僕が実際購入した本、Webデザインスクール講師からのオススメされた本などWebデザインスキルが0から身につく本を厳選してまとめましたので参考になれば幸いです。

目次

知識0からのWebデザイン学習本おすすめ22選

僕はテックアカデミー、デジハリ×LIGと受講して一通りWebデザイン、Web制作に関する知識を習得し副業ができるまでに至ったのですが、その過程から

「この本があればこの授業いらなかったな」

「この本があったからここまでスキルがのびたな」

「この本紹介してもらったけど本当に役に立ったな」

と思うことがあります。「」という学習教材に焦点をあててこの記事で紹介していきます。

  • Webデザインの概論が分かる本
  • デザイン理論が分かる本
  • UI/UXが理解できる本
  • デザインツール(Adobe製品)が使えるようになる本
  • コーディングが理解できる本(HTML、CSS)
  • jQueryが学習できる本
  • WordPressが学習できる本
  • ディレクションスキルが身につく本

以上のカテゴリで全22冊紹介します。

動画学習やオンラインスクールのサブ教材として何かいい本ないかなぁ、と思う人いると思うんですよ。本屋でブラブラして何かいい本ないかなぁ、と探してみたり。「ディレクションスキル本」「ランディングページの作り方本」なんて本があると知らない人もいるはず。

大型店の本屋に行けば色々そろっていますが大型店に行く機会もあまり無い、という方に読んでいただければと思います。僕は何度も大型書店に足を運び色々本を買っています。そんな中でオススメする本を厳選して紹介していきます。

ではいってみましょう!

Webデザインの概論が分かる本

Webサイト作ってみたいな、そう思ったらまずは全体の流れ、どんなことを学習するか全体像を知りたいですよね。そんなとき網羅的に要点を伝えていて分かりやすい本があればと思いませんか?そんな本をご紹介します。

1:いちばんよくわかるWebデザインの基本きちんと入門

伊藤 庄平 (著), 益子 貴寛 (著), 久保 知己 (著), 宮田 優希 (著), 伊藤 由暁 (著)
ユズト
特にWebサイトの「企画」を考える時に活用しました。配色、写真画像、文字(書体)が網羅的でちょっとした疑問を調べるのに役に立ちます。コーディングの流れについては概略になっているので詳しさに欠けるところはあり。Web制作、 Webデザインの全体像を理解する本という位置付けで買っておくと辞書がわりになって便利。
発売日 2017/2/25
価格 単行本:¥2,618 kindle:¥2,356
目次 CHAPTER 1 Webデザインの基本
CHAPTER 2 レイアウト
CHAPTER 3 配色
CHAPTER 4 写真と図版
CHAPTER 5 タイポグラフィ
CHAPTER 6 HTML5とCSS3
CHAPTER 7 インタラクション
CHAPTER 8 運用とマーケティング

2:Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法

境 祐司 (著), 小浜 愛香 (著), 森本 友理 (著), 野田 一輝 (著), & 2 その他
ユズト
シンプルなデザインの表紙にグッときて買ってみました。内容もとてもわかりやすく整然と整理されておりGOOD。上で紹介した「いちばんよくわかるWebデザインの基本きちんと入門」と異なる点は文字(書体)の話しがない、コーディング、マーケティングの話はほぼない。代わりに、レイアウト基本の説明がより詳しい、UI/UXデザイン理論の説明がしっかりされている、という違いがあります。今どきのWebサイトに求められるデザインとは何か、を知りたい方が持っておくと基本が整理できてGOOD!
発売日 2018/12/26
価格 単行本:¥2,420 kindle:¥2,299
目次 Introduction Webサイトができるまで
Chapter1 レイアウト
Chapter2 配色
Chapter3 UXデザイン
Chapter4 UI・グラフィックデザイン
Chapter5 モーションデザイン

デザイン理論が分かる本

デザインってそもそもどうやったら上達するの?と絵も描いたことがない僕には謎な領域でした。Webデザインは情報の整理です。芸術ではありません。なのでデザインを理論で学ぶと論理的にデザインが理解できます。僕はデザインについては主に本で学習しました。

3:なるほどデザイン

この本は、通学制スクール(デジタルハリウッドSTUDIO by LIG)でも勧められた本。 「どんな人に、何を、なぜ、いつ・どこで」伝えるためにどういうデザインをすべきか、という観点から色、フォント、レイアウトの実例豊富にグラフ・チャートの見やすいデザイン例まで書かれています。
ユズト
個人的には「擬人化力」というチャートが納得感あり。書体を声色に例えてみる、とか色を年代に例えてみる、とか身近なイメージをデザインに落として説明しているのが分かりやすい。伝える相手と伝えたい目的がまず大切でそこからデザインでどう伝達するか、が分かる本。デザインは伝達手段な訳です。見やすく分かりやすい
発売日 2018/12/26
価格 単行本:¥2,420 kindle:¥2,299
目次 ・編集×デザイン(編集とデザインの関係、デザインしてみよう)
・デザイナーの7つ道具(ダイジ度天秤、スポットライト、擬人化力、連想力、翻訳機、虫眼鏡、愛)
・デザインの素(文字と組み、言葉と文章、色、写真、グラフとチャート)

4:ノンデザイナーズ・デザインブック

Robin Williams (著), 米谷 テツヤ (監修, 翻訳), 小原 司 (監修, 翻訳), 吉川 典秀 (翻訳)
ユズト
デザインの原則はこれが軸になっているのだ、ということが理解できる本。Webデザインスクールでもオススメされましたし、とにかくオススメする人が多いデザインの原理原則が書かれている本。基本を押さえたい、という人にオススメ。海外で出版された本を日本語訳しているのでちょっと読みにくさがあるのは否めず。
発売日 2016/6/30
価格 単行本:¥2,398 kindle:¥2,158
目次 ・デザインの原則(イントロダクション、近接、整列、反復、コントラスト、4つのデザイン原則の復習、カラーを使ったデザイン、おまけのチップス&トリック)
・活字でデザインする(欧文タイポグラフィの基本、活字と人生、活字のカテゴリー、活字のコントラスト)
・Extra

5:けっきょく、よはく

余白のとり方」をメインにデザインをとりあげた本。レイアウトの「余白の活用」をより具体的に知りたい方向けの本です。目立たせたいポイントをより強調するために余白が必要ということをNGデザインとOKデザインの比較事例が豊富で分かりやすく説明されています。デザインは「余白」が9割とまで言っちゃってる本です。
ユズト
かっこいいデザインってよく見ると「余白」がかなりあるのが分かります。デザイン素人って情報色々詰め込みたくなるんですよね。何もない空間が不安になるというか埋めたくなるというか。しかしながら、「余白」がデザインの一部であり目出させたいポイントを最大限に活かすための手法である、ということを理解することはとても大切だということが分かります。
発売日 2018/7/20
価格 単行本:¥1,980 kindle:¥1,834
目次 「CAFE DESIGN」「NATURAL DESIGN」「BUSINESS DESIGN」「SCHOOL DESIGN」「JAPANESE DESIGN」「SALON DESIGN」「COSMETICS DESIGN」「SEASON DESIGN」「LUXURY DESIGN」

6:知りたいレイアウトデザイン

Who×What×How(誰に、何を、どうやって)」を整理し、直観的に知りたいことが分かるデザイン制作方法について事例豊富に説明されています。事例も豊富に「判読性」「視認性」「可読性」というくくりで論理的にも説明されています。
ユズト
この本は、本屋で立ち読みして購入しました。最初のパートが論理的な説明で分かりやすかったんです。デザインを論理的に考えてレイアウトを決めていくのにとても役に立ちました。個人的には、「How」の考え方が参考になりデザイン制作の基準となりました。この本のデザイン制作の進め方を参考にしてオリジナルデザインの製作をしました。何かAmazonレビューが少なすぎるけれど僕は参考になりました。
発売日 2017/11/21
価格 単行本:¥2,288 kindle:¥2,174
目次 ・レイアウトの基本(伝わるレイアウトとは、デザインの進め方)
・レイアウトのルール(「判読性」「視認性」「可読性」)
・レイアウトのアイデア(法則、動き、メリハリ、ビジュアル、ターゲット)

7:デザインノート 今さら聞けないデザインの基本

ユズト
大型書店をブラブラしていた時、これ分かりやすいやん。と立ち読みして買っちゃいました。デザイン基礎にプラスして一流デザイナーのコメントや対談などが書かれています。雑誌サイズで大きくて見やすいです。僕が買ったのは2018年に発売された「No.78」のデザインノートでしたが2020年度版として同じテーマで一新して発売されていると分かりこの記事で最新版「No.90」をご紹介します。
発売日 2020/3/26
価格 ¥1,760
目次 ・デザインの基本
・文字のキホンと文字のデザイン
・実践編
・レイアウトの基本テクニック
・写真を使ったデザイン
他スペシャルインタビュー、連載コラム

Webサイト見本がたくさん整理された本

オリジナルサイトを作る、となったらとにかく色々なWebサイトを見て参考にしていくことになります。Webサイトギャラリーをググって見てもいいのですが、本でまとまっていると読みやすくていいと思いませんか?本の良いところはぺらぺらと行ったり来たりできるのと情報が整理されているので見やすいというメリットがあります。

8:Webデザイン良質見本帳

・印象から考えるデザイン(キュート、エレガント、クール、信頼感、透明感など)
・配色から考えるデザイン(ブランドカラーから考える、赤、ピンク、青、緑、白、黒など)
・業種、ジャンルから考えるデザイン(カフェ、ファッション、音楽、士業、ポートフォリオ、コーポレートなど)
という切り口でまとめられています。トレンドデザインなども整理して紹介されているので便利です。
ユズト
コーポレートサイトで緑を基調にしたWebサイトにしたいな、とか高級感のあるデザインってどんなんだろうか、とかクールで先進的なデザインは?とか透明感のあるデザインは?などなどこんな印象にしたいな、と思ったとき大活躍します。イメージに合う具体的なWebサイトを紹介してくれているのでこんな感じに作ればいいのね、ということが一目で分かる!
発売日 2016/6/16
価格 単行本:¥2,530 kindle:¥2,277
目次 第0章 Webデザインの基礎知識
第1章 ユーザーに伝わる印象から考えるデザイン
第2章 ロゴやカラーから考える配色デザイン
第3章 サイトの業種・ジャンル別から考えるデザイン
第4章 レイアウトや構図から考えるデザイン
第5章 素材や書体、プログラムを効果的に使ったデザイン
第6章 Webデザイントレンド
第7章 パーツ別デザイン

UI/UXが理解できる本

UIとUXについては理解必須です。Webサイトを作る目的って何でしょう?Webサイトで集客したい、物を売りたい、問い合わせが欲しい、など目的があるはず。目的が達成できないWebサイトに価値はありません。Webサイトを見るユーザーがどのような経験をWebサイトを通じてするのか、結果Webサイトでアクションを起こすのはどういうときなのか、を考える、それがUXでありそれをスムーズに誘導したり行動しやすくさせる手法がUIです。

9:ノンデザイナーでもわかるUX+理論で作るWebデザイン

川合 俊輔 (著), 大本 あかね (著), 菊池 崇 (監修)
「UXの理解>UX設計>UXからUI設計>具体的なデザイン」と表紙に書かれている通り、UXが理解できればデザインも決まってくる、という本。UXからデザイン、レイアウトが決まってくるのだからUXをしっかり理解しよう、ということ。UXは概念がモヤっとしていて分かりづらいですがこの本を読めば理解可能。
ユズト
この本はWebデザインスクール(デジタルハリウッドSTUDIO by LIG)で勧められた本。卒業制作の企画段階でフル活用しました。UX、ペルソナ、カスタマージャーニーって何よ、というのがすごくよく分かる本。マーケティングの理解も進みます。UX設計、そしてUI設計というのがよく理解できます。ユーザーは何のためにWebサイトを見るのか、それが分かればWebサイトの目的もレイアウトも決まってきます。
発売日 2017/9/26
価格 単行本:¥2,739
目次 第1章 デザイン思考とWebデザイン
第2章 WebデザインとUX
第3章 ビジネスモデルのデザイン
第4章 サイト構成のデザイン
第5章 情報のデザイン
第7章 画面設計のデザイン
第8章 ユーザー操作とモバイルのデザイン
第9章 ユーザーの感性に訴えるデザイン

10:UIデザインの教科書[新版] マルチデバイス時代のインターフェース設計

この本はUIに焦点をあてて「しっくりくる」には理由がある、というコンセプトで書かれています。PC、スマホ、タブレットで使われているユーザーインターフェースの技法を色々と紹介しています。
ユズト
ナビゲーション一つとっても縦に表示させるのか、横に表示させるのかで見た目も使いやすさも変わってきます。ユーザーにとって使いやすい、見やすいWebサイトとはどんなサイト設計になっているのか、を色々な角度から説明しています。デザイン本というよりもサイトを「設計」するための方法論について書かれた本です。
発売日 2019/1/21
価格 単行本:¥2,618 kindle:¥1,309
目次 1章 デザインの目的とUI/UX
2章 物理的な制約
3章 ソフトウェアの影響
4章 人間の認知特性
5章 階層と構造
6章 ナビゲーションとインタラクション
7章 デザインを形にする

デザインツール(Adobe製品)が使えるようになる本

デザインを作るためには道具が必要。業界のスタンダードは「Adobe」製品です。デザイン業界にいなかったら一生使わないであろうこのAdobeを使いこなすのは難しいです。機能が多すぎ。何となく触ってたら使えるようになるだろう、なんて考えても使えるようになりません。そんなAdobeを触ったことがない人でも分かりやすい本を紹介していきます。

11:グラフィックデザイン Illustrator & Photoshop (デジタルハリウッドの本)

なぜにこの本を最初に勧めるのか?というと、実際に見本通りにデザインする方法を手順立てて書かれているから。この本の通りに進めていけば、Illustraotorで名刺デザイン制作もできるし、Illustraotorの基本的な使い方も覚えられる。PhotoshopでWebサイトを見本通りに作れて一通りのWebサイトを制作できるスキルを身につけることができる。ので紹介します。

ユズト
僕がデジハリ×LIGに通ったので受講した流れで書かれていてこれならWebサイトデザインが0から作れるな、と思い紹介します。これを勧めている人ってまあいないと思うんですけど実際Adobeって機能多すぎでPhotoshop学習本買ってもWebデザイン制作スキルで不要なスキル(写真加工技術とか)を学習してしまって結果Webデザイン作れない、という事態になりがち。最低限AdobeツールでWebデザイン制作スキルを身につけることができれば仕事をすることができます。
発売日 2015/10/8
価格 大型本:¥3,168
目次 ・Illustratorの基本操作
図形の描画
線の描画
アイコン・ロゴをつくろう
レイヤー
文字の入力
名刺をつくろう
オブジェクトの変形
線の設定とアピアランス
フライヤーをつくろう
・Photoshopの基本操作
画像の補正
画像の加工
文字の入力
シンプルなWebサイトのデザイン
情報量のあるWebサイトのデザイン
コーポレートサイトのデザイン
スライス

12:世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

ちょっとした操作の説明も豊富で画面キャプチャー付きだから見やすい。便利な辞典となってくれます。XD操作も理解できるのでお得。「Lesson07:PhotoshopでのWebページ制作テクニック」でWebサイトデザインを作る基本が学習できます。
ユズト
Webデザインといえば、Illustrator & Photoshop。どちらも使えると超便利。PhotoshopでWebサイトデザインが作れて、Illustratorでロゴやアイコンが作れてバナーや名刺デザインも作れたりします。またAdobeXDは現場でもバリバリ使われているPhotoshopの簡易版ツール。簡単にデザインカンプやワイヤーフレームなど作れます。Illustrator & Photoshop & AdobeXDがまとまっている本という意味でこの本はオススメです。
発売日 2018/10/5
価格 単行本:¥2,728 kindle:¥2,592
目次 Lesson01 Webデザインにおける各アプリの使い分け
Lesson02 ワイヤーフレームからレイアウトへのスムーズな進行
Lesson03 Illustratorでアイコンやロゴマークなどのパーツを制作しよう
Lesson04 Photoshopで写真の編集をしよう
Lesson05 Photoshopで写真・パーツ加工をしよう
Lesson06 Creative Cloudライブラリへのパーツの登録と活用
Lesson07 PhotoshopでのWebページ制作テクニック
Lesson08 XDを利用したレイアウトをしよう
Lesson09 XDを利用したプロトタイプ作成を学ぼう
Lesson10 各アプリで効率的にテキストをデザインする
Lesson11 Photoshopから画像を書き出そう
Lesson12 Illustratorから画像を書き出そう
Lesson13 XDからの画像書き出しとコーダーとのデータ共有
Lesson14 PSD・AIファイルからCSSやテキストを抜き出そう
Lesson15 ほかのアプリとの連係について知ろう

13:Illustrator しっかり入門 増補改訂 第2版 【CC完全対応】[Mac & Windows 対応]

Illustratorの基礎の基礎から教えてくれます。Illustratorを基礎から学べる初心者向けの本。とても分かりやすい説明になっていて基本をしっかり身につけることができます。
ユズト
Illustraotorは使い方が特殊で最初はよく分かりません。「ベジェ曲線」とか「パス」とか。どこに何の機能があるかも分からないので未経験者向け超入門本を1冊手元においておくのはアリです。
発売日 2018/9/21
価格 単行本:¥2,178 kindle:¥1,960
目次 Lesson 1 Illustratorの基礎知識
Lesson 2 はじめてのIllustrator
Lesson 3 基本図形の描き方と変形操作
Lesson 4 パスの描画と編集
Lesson 5 オブジェクトの編集とレイヤーの基本
Lesson 6 色とグラデーションの設定
Lesson 7 変形・合成・特殊効果
Lesson 8 画像の配置と編集
Lesson 9 文字操作と段落設定
Lesson 10 総合演習
Lesson 11 環境設定とデータ出力

14:WebデザインのためのPhotoshop+Illustrator

この本の優れているところはPhotoshopで制作すべきデザインとIllustratorで制作すべきデザインを両方紹介し、Photoshopで制作したデザイン内にIllustrator制作パーツを埋め込むという方法も紹介されています。ハイクオリティーのWebサイトを制作するためにはどちらも使えると良いのでこの本はその基本となる考え方が書かれています。(Photoshopの写真加工の方法も書かれているので細かい画像修正もできるようになります)
ユズト
基本の使い方がわかったら、Webデザインで利用するアイコンやロゴパーツ、背景パターン、バナーなどの実践的なIllustrator制作方法を紹介しているこの本も参考になります。
発売日 2017/3/30
価格 ¥2,640
目次 1 Webデザイン+Photoshop+Illustratorの基礎知識
2 ワイヤーフレーム制作で使えるテクニック
3 画像処理に使えるテクニック
4 パーツ制作で使えるテクニック
5 カンプ制作で使えるテクニック

コーディングが理解できる本(HTML、CSS)

コーディングについてはプロゲートやドットインストールなど使いやすいサービスがありますし、オンラインスクールでも学習しやすいスキルです。ただ全体を網羅的に理解するには辞書的な本が1冊あると超便利。これどういう風に使うんだっけ?と思ったらサラッと本を見れば解決できたりします。

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

ユズト
制作会社でWebディレクターしているWebデザインスクール時代の同期が購入したと言っていました。Webデザインスクール卒後に購入したということ。情報が整理されており発売日も新しいので最新技術もしっかり書かれています。
発売日 2019/3/16
価格 単行本:¥2,486 kindle:¥2,237
目次 CHAPTER 1 最初に知っておこう! Webサイトの基本
CHAPTER 2 Webの基本構造を作る! HTMLの基本
CHAPTER 3 Webのデザインを作る! CSSの基本
CHAPTER 4 フルスクリーンのWebサイトを制作する
CHAPTER 5 2カラムのWebサイトを制作する
CHAPTER 6 タイル型のWebサイトを制作する
CHAPTER 7 外部メディアを利用する

jQueryが学習できる本

jQueryはなぜ学習する必要があるかというと、「ハンバーガーメニュー」「ドロップダウンメニュー」という今どきのWebサイトでは絶対ある機能を作ることができるから。なのでjQuery本を選ぶときは自分が実装したい動き、機能が作れるかどうか、で選ぶとモチベーション高く学習できます。

16:Web制作の現場で使うjQueryデザイン入門

かなりの人がオススメしている本で「ドーナツ本」とか言われているようです。この本では、アコーディオンパネル、タブパネル、ロールオーバー付きナビゲーションバー、ドロップダウンメニューというよく見る動作の実装方法が学習できます。
ユズト
よく知られている本ですが発売日が古いです。ただjQueryって自分が実装したい動きが作ることができて基礎理解ができればあとはググれば色々なプラグインをインターネットから拾うことができます。この本は初学者向けに優しい表現で書かれているので基礎理解がしやすくオススメです。
発売日 2013/3/7
価格 単行本:¥3,278 kindle:¥2,950
目次 第1章 jQueryをはじめる前の基礎知識

第2章 サンプルで学ぶjQueryのキホン

第3章 現場で使えるデザインレシピ

[3-1]CSS3セレクターでストライプテーブル
[3-2]スライド式イメージギャラリー
[3-3]なめらかアコーディオンパネル
[3-4]ポータルサイト風タブパネル
[3-5]個性的な3種類のツールチップ
[3-6]ロールオーバー付きナビゲーションバー
[3-7]多階層対応ドロップダウンメニュー
[3-8]Lightbox風モーダルウィンドウ
[3-9]ドラッグ&ドロップで動くフローティングウィンドウ
[3-10]バリデーション付きメールフォーム
[3-11]Amazon風カルーセルパネル
[3-12]Ajaxでスムーズページング
[3-13]Flashみたいなスライドギャラリー
[3-14]指で操作するスマホ用スワイプギャラリー
[コラム]Google Chromeのデベロッパーツールによるデバッグ
[コラム]jQueryの高速化

第4章 jQueryプラグインでラクラクWeb制作

17:jQuery最高の教科書

株式会社シフトブレイン (著)
サンプルをもとにスライドショーやスティッキーヘッダー(ヘッダー部分がスクロールに合わせて移動する)、スムーズスクロール、タブなどが使えるようになります。
ユズト
これはデジハリLIG同期も購入していたオススメ本です。僕ももちろん買いました。先ほどの「ドーナツ本」よりも少し難易度高めの動き、機能を紹介しています。下の目次で紹介した機能で実装してみたいものがあればこちらの本をオススメします。
発売日 2013/11/26
価格 単行本:¥2,838 kindle:¥2,554
目次 Chapter01 jQueryの基礎知識と本書の特徴

Chapter02 3ステップではじめるかんたんjQuery入門

Chapter03 jQueryの基本的な書き方

Chapter04 確かな基礎力を養うjQueryの基本テクニック
-さまざまなホバーエフェクトで学ぶ動きのある表現の基本
-画像とキャプションの表現
-丸いボタンのレイアウト
-見え隠れするサイドバー
-タイポグラフィの表現

Chapter05 活用の幅を広げるjQueryの必修テクニック
-Basic 滑らかな動きのスライドショー
-Advanced 多機能なスライドショー
-Basic スティッキーヘッダー
-Advanced デザインが変化するスティッキーヘッダー
-Basic 画面領域を有効活用できるタブ
-Advanced 高機能で拡張しやすいタブ
-Basic スムーズスクロール
-Advanced 拡張性のあるスムーズスクロール

Chapter06 高機能なギャラリーページを作ってみよう!
-ギャラリーページの全体像
-Basic シンプルなギャラリーページの作成
-Advanced フィルタリング機能を持つギャラリーページの作成
-Advanced 選択画面の拡大機能とキャプションの追加
-Advanced マウスの移動方向によるホバーエフェクト機能の追加

Chapter07 jQueryを活用したさまざまな表現
-画像の読み込みのプログレス表示機能
-画像シーケンスのアニメーション
-回転のアニメーションによるインフォグラフィック
-マスクのアニメーション

WordPressが学習できる本

WordPressスキルが身につけば案件単価もグッと上がります。WordPress本はただ既存テーマと言われる誰かが作ったものをカスタムしたり設定変更したりするだけの本からWordPressで作ったサイトを管理画面からゴリゴリにカスタムする本まで様々。ここで紹介する本は、HTML・CSSを学習してWebサイトを作れるようになった後でさらにワンランクアップのスキルを身につけたい、そんな人にオススメする本です。静的Webサイト(HTML・CSSだけで作られたサイト)をWordPressテーマ化するというスキルを習得するための本を紹介します。

18:ビジネスサイトを作って学ぶWordPressの教科書 Ver.5x対応版

ユズト
実際のサイトを作るので実案件もイメージしやすいのがいいです。WordPress案件を受注するためのエッセンスが色々書かれていてGOOD。
発売日 2019/10/29
価格 単行本:¥3,080 kindle:¥2,800
目次 1 開発環境を準備しよう
2 まず表示させてみよう
3 「Gutenberg」の使い方
4 基本サイトの構築
5 ユーザビリティの向上
6 SEO対策
7 コミュニケーション
8 アクセス解析
9 SSLによるセキュリティ
10 発展的な機能を使う
11 パフォーマンスチューニング

19:WordPressのツボとコツがゼッタイにわかる本

ユズト
WordPressはPHPというプログラミング言語を使うからちょっと理解が難しいな、、と思うことあります。WordPressをテーマ化するというPHPに関する知識をプログラミングやったことのない自分にも分かりやすく理解させてくれる本でした。プログラミングやったことない、PHPよく知らない、けどWordPress知識を深く身につけたい、そんな初学者にオススメ。
発売日 2017/3/10
価格 単行本:¥2,750 kindle:¥2,173
目次 第1章 WordPressでホームページを作るメリット

第2章 WordPressの基本的な仕組み

第3章 ホームページをWordPressに載せ替える準備をしよう

第4章 ホームページの共通部分をテンプレート化しよう

第5章 各ページをWordPressに載せ替えよう

第6章 誰でも「安全」に更新できるホームページにしよう

第7章 ホームページの運用を助けるプラグイン

ディレクションスキルが身につく本

20:Webディレクションの新標準ルール

栄前田 勝太郎 (著), 岸 正也 (著), 滝川 洋平 (著), タナカ ミノル (著)
ユズト
この本はデジハリ同期がWeb制作会社にディレクター職として働き始めてから職場の人に勧められて買った、と聞いたので購入した本です。ディレクションができるようになれば仕事の幅が広がります。自分一人でできることには限界があるし専門性も多岐にわたるWeb制作の現場では知っておいて損なしスキルです。
発売日 2020/3/17
価格 単行本:¥2,530 kindle:¥2,530
目次 CHAPTER 1 ディレクションの「いま」
CHAPTER 2 企画
CHAPTER 3 設計
CHAPTER 4 制作・進行管理
CHAPTER 5 運用・改善

21:Webディレクションの新・標準ルール システム開発編

岩瀬 透 (著), 栄前田 勝太郎 (著), 河野 めぐみ (著), 岸 正也 (著), 藤村 新 (著), 藤原 茂生 (著), & 1 その他
Webディレクターが知っておくべきシステム知識を開発工程のフローに沿って解説。発注側・受注側、両方の視点が理解できます。ベンダー、要件定義書などシステム開発側なら知って当たり前用語もバッチリ解説されています。
ユズト
ディレクターはプログラミングなどシステムの具体的な知識は無い人が多いです。しかしながらシステム理解があることでディレクションをスムーズにすることができます。どのような工程がありどれくらいの労力、時間がかかるのかを理解しているのとしていないのでは大違い。プログラミングまで手をつけられない、でも知っておきたい、そんな人にオススメ本。
発売日 2017/11/21
価格 単行本:¥2,420 kindle:¥2,200
目次 CHAPTER 1 システム開発の基本とフロー
CHAPTER 2 「与件」を整理する
CHAPTER 3 「要件」を定義する
CHAPTER 4 設計・開発・テスト
CHAPTER 5 リリース・運用・改善

ランディングページの作り方

Web案件受注できるようになると「LP制作」案件を受注することがあります。LP=ランディングページです。ランディングページの目的とデザインのポイントを知っておかないとデザイン制作できません。普通の会社案内ホームページとは目的が違うわけです。

22:ランディングページ 成果を上げる100のメソッド

目標とするコンバージョンを獲得するために、必要な情報だけを1ページに凝縮したサイト。それが「ランディングページ」。
この本では、コンバージョンの決め方、入り口と出口の設計方法、ワイヤーフレーム、デザイン開発の工程、UIデザイン、色や図の印象、サイト改善方法(キャッチコピー変更、フォント変更、カラー変更、図変更、レイアウト変更、など)など目標を達成するために必要なデザイン要素について詳しく書かれています。
加えて、Googleアナリティクス分析方法、競合分析、ABテストなど分析方法についても詳しく書かれています。
ユズト
初めてランディングページ案件受注したときに買った本です。ランディングページは目標を達成するために情報を凝縮したサイトです。マーケティング要素がモリモリなのです。マーケティングを学びながらそれを達成するデザイン要素を学習できる本になっていてとても勉強になりました。
発売日 2018/1/17
価格 単行本:¥2,530 kindle:¥2,404
目次 ■PART1 事前準備・制作のポイント
■PART2 ランディングページを分析して課題を見つける
■PART3 ランディングページを改善する
■PART4 A/Bテストで検証する
■PART5 実装・最適化のポイント

まとめ:良書を選んで効率的に学習しよう

良書を選んで効率的に学習しよう

Webに関する本はなるべく新しい発売日のものがいいとは思います。特にコーディングやプログラミングに関する知識は新しい機能や技術が出てきます。

ただ、根本的な概念が変わらないものもあります。デザイン理論やディレクションスキルなどはそうです。またjQueryで紹介した本は多少古いです。基礎概念をおさえればあとはググればできる、と思った本は多少古くても分かりやすさ重視で紹介しています。

新人Webデザイナー、コーダー、Webディレクターになったから学習しよう、Web制作・Webデザインで副業案件を取っていこう、そんな方であればここで取り上げた本で問題なくスキルアップができます。

知識0から、という表題のもと小難しい表現で書かれていたり分かりにくい専門書はこの記事では紹介していません。分かりやすく見やすい良書を紹介いたしました。

僕はノウハウコレクター気味なところがあるので情報をなるべく多く取り入れて活用しよう、と思いがちなのです。ここで紹介した以外にも本買ってます。ただ色々買ってみて思うことは、基本が理解できればあとは「ネット検索力=ググる力」でWebサイト制作はできるようになることが分かりました。基礎をおさえる、そしてググる。基礎はこの記事の本で大丈夫。デザインは基礎をおさえたらWebデザインギャラリーサイトで最新Webサイトデザインを見るようにするといいですね。Webサイトには流行があります。そして実践が一番成長します。実践して振り返る。振り返ってみてスキルが不足してるな、と思えばその分野の本を新たに買ったりして学習を進めましょう。

 

 

この記事はここまでです。

知識0からのWebデザインおすすめ本
情報発信しています♫