-駆け出しデザイナー向け！- Webデザイナー力底上げ本【12選】
はじめに
今回は私がWebデザイナーに転職を果たすまでに、読んでWebデザインの向上に役立った本を紹介していきたいと思います。
デザインの見た目の整え方だけでなく、情報設計や企画書のまとめ方、コーディングの本、カメラをお持ちの方向けの教本(フリーランスは写真素材が自分で撮れると便利です！)まで幅広く紹介していきます。
本ごとに、具体的に何が学べる本か？どんな人向けかなどを記載しているので、ぜひ自分に足りないところを補填してくれる本と出会って、成長につなげていただければと思います！
【ビジュアル編】
[01] デザインを学ぶ前に知っておきたい、色の基本知識！
タイトル：A・F・T色彩検定公式テキスト3級編 (2020年夏期検定まで対応)
発行者：公益社団法人 色彩検定協会
実は色ってデザインの要素の中で、出来上がりの印象を大きく左右するもとても重要なポイントなのですが、Webスクールではあまり深く触れないことが多いように感じます。
いろんなデザイン知識を学ぶ前に、色の基礎知識を入れておくことによって制作するデザインをブラッシュアップできるようになる為、ぜひ下記に当てはまる方は参考にしてみてください！
[この本で学習できること]
・紙のデザインとWebのデザインのカラーの違いを詳しく分かりやすく学べる
・こう言う印象を持たせたかったらこう言う配色！と言うような、色のイメージの学習。
・うまくいきやすい色の組み合わせ方について学べる
[こんな人向け]
・いつも配色に迷う。
・シーンによってどんな色を選択すればいいか分からない。
・Web向けのカラーモード、紙のデザイン向けのカラーモードがよく分からない。またはざっくり説明されて知っているが、イマイチピンときてない。
[02] 手っ取り早く色使いを学ぶならこれ！
タイトル：配色アイデア手帖 めくって見つける新しいデザインの本［完全保存版］
発行者；桜井 輝子 (著)
色つながりで、こちらは配色のアイディア帳です。
色々なシーンで使えるカラーが、テーマごとに9カラー用意されており、実際にそのカラーパターンを使ったデザイン参考も載っていて、どんな仕上がりになるか確認しながら配色を選べるので配色が苦手な初心者さんにはおすすめの一冊です。
[この本で学習できること]
・シーンによってどんな配色が適切か、カラーコード(RGB/CMYK両方)も具体的に知ることができる
・たくさんのカラーパターンが載っているので見ているだけで楽しく色の感覚を身につけられる。
[こんな人向け]
・いつも配色で色を作っていくとイマイチな色になってしまう。
・シーンによってどんな色を選択すればいいか分からない。
・難しい文章は苦手！カラーを楽しく学びたい！
[03] 絶対に一度は読むべきマスト本！
タイトル：なるほどデザイン
発行者：筒井 美希（著）
これはデザインを学ぶ本のまとめ記事には絶対登場する一冊だと思いますが、細かく基礎的で重要な部分を学べたり、どういう視点を持ってデザインをブラッシュアップしていけばいいかなども学べて、一度は読んだ方がいい一冊と言えます！
中のページも美しいデザインサンプルを見ながら学習していくので、楽しみながら学習できます。
[この本で学習できること]
・デザインの手順、ブラッシュアップの方法
・文字組みやフォントの選び方
・色の基礎知識
・素材写真の選び方
[こんな人向け]
・駆け出しのデザイナー
・現役デザイナーだけど、いつもデザインの仕上がりが今ひとつ。ブラッシュアップしたい
・難しい、文章で語る参考書より、サンプルや図解で感覚的に学びたい
[04] デザインの基礎を網羅した一冊！
タイトル：デザイン入門教室［特別講義］ 確かな力を身に付けられる ～学び、考え、作る授業～ (Design ＆IDEA)
発行者：坂本 伸二（著）
こちらもデザインをする上で知っておくべきポイントがたくさんまとまった、デザインの初心者さん向けの教本です。
具体例のブラッシュアップ前、ブラッシュアップ後が載っており、とても具体的で参考にしやすいので、まだまだインプットが足りない駆け出しデザイナーは読んで損はない一冊です。
[この本で学習できること]
・デザインのルール
・レイアウトのルール
・写真や画像の選定方法やトリミング方法
・配色についての基礎知識
・文字や文章のデザインの方法
[こんな人向け]
・エンジニアや他職種出身でデザインのことは右も左も分からない！
・なんかデザインがイマイチになりがち（ブラッシュアップができるようになりたい）
・なるほどデザインなどで基礎を学んだが、しっかり身につける為に復習してより重要なポイントを把握したい。
[05] フォント選びに困ったらこれ！
タイトル：ほんとに、フォント。フォントを活かしたデザインレイアウトの本
発行者：ｉｎｇｅｃｔａｒ－ｅ
こちらはデザインの中でもとても大事なポイントの"フォント"に特化した一冊です。デザインはフォントがキマるだけでグッとクオリティが上がります！
「いまいちさん」と言う新米デザイナーが作ったデザインを「しゅっと先輩」というベテランデザイナーがブラッシュアップしていく様子が描かれており、楽しくフォントの扱い方を学ぶことができます。
また、色んなデザインの具体例が載っていて、様々なシーン別にフォントの使い方を知ることができる良書です。
[この本で学習できること]
・フォントの役割や基礎知識
・いろんな実例に基づいたフォント紹介
・フォント選びのヒントをたくさん学習できる
[こんな人向け]
・フォント選びのポイントが分からない
・具体例で実際どんなフォントが活用されているか知りたい
・フォント選びでどのくらいデザインが良くなるのか、具体的なビフォーアフターが見てみたい
[06] 余白感を掴むだけで劇的クオリティアップ！
タイトル：けっきょく、よはく。 余白を活かしたデザインレイアウトの本
発行者：ingectar-e (著)
つい要素をギチギチに詰め込んでしまう癖がある方にとっては救世主のような本かもしれません。
NG例ではなぜどの部分が悪いか？OK例ではどこを気を付けて制作されているか？が、同じお題に対して両方掲載されているので具体的でとても分かりやすい一冊です。
[この本で学習できること]
・余白を上手く取ることで具体的にどう良くなるか知れる
・色んなシーンでの余白の取り方とあしらいの方法が具体的に見られる
[こんな人向け]
・たくさんの要素を詰め込むときに、つい隙間なくぎゅうぎゅうにしてしまう
・レイアウトが苦手でごちゃごちゃになりやすい、要素の整理が苦手
【コーディング編】
[07] HTMLとCSSの基礎学習や復習におすすめ！
タイトル：世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書
発行者：株式会社マジカルリミックス 赤間公太郎 (著), 株式会社マジカルリミックス 狩野咲 (著), 株式会社マジカルリミックス 鈴木清敬 (著)
HTML5やCSS3の基礎が一通り説明されている学習本です。Webスクールなどで勉強していても、一度で理解するのは難しいので、とにかく腕を動かしながら忘れてしまったり分からないところの復習に便利です。後ろのインデックスにタグや用語が五十音順に並んでいて逆引き書としても活用できるので、一冊持っていると学習が捗るかと思います。
[この本で学習できること]
・HTMLでできる基礎的なことが学べる
・CSSでできる基礎的なことが学べる
[こんな人向け]
・コーディングの学習をしているが、なかなか頭に入らない
・習ってもすぐ忘れてしまうので逆引き書が欲しい
[08] JavaScriptをハードルを下げて学習したい！
タイトル：スラスラ読める JavaScriptふりがなプログラミング
発行者：及川卓也 (著), リブロワークス (著)
JavaScriptってどんなもの？というところから始まり、学んでいけるので、ハードルを下げて学習できる印象のある一冊でした。私は分からない部分だけ目次から探して読んでいました。
[この本で学習できること]
・JavaScriptってそもそも何なのか？
・JavaScriptの基礎
[こんな人向け]
・JavaScript初心者
・学んだことあるけど、いまいちピンとこない
[09] WordPressの入門書！
タイトル：できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 できるシリーズ
発行者：星野 邦敏 (著), 相澤 奏恵 (著), 漆原 理乃 (著), 大胡 由紀 (著), 清水 久美子 (著), 清水 由規 (著), 戸田 秀成 (著), 山田 里江 (著), 吉田 裕介 (著), できるシリーズ編集部 (著)
教材データがダウンロードできて、実際にWordPressをサーバーにインストールして記事投稿をしたりして実践的にWordPressの基礎が学べる一冊です。とても分かりやすく進めやすい内容で、私は2日ほどで読み切りました。
WordPress化・WordPressカスタマイズの勉強をされる方は、その前の入門書としてこちらを活用してみてはいかがでしょうか。
[この本で学習できること]
・WordPressの基本
・サーバーやドメインの知識
[こんな人向け]
・これからWordPressの学習を始めたい
・他のWordPress本で難しくて挫折した
【他と差を付ける企画提案+α編】
[10] 企画書の教科書的な一冊！
タイトル：社内プレゼンの資料作成術
発行者：前田 鎌利 (著)
あのソフトバンクグループの孫正義さんが一発OKを連発したプレゼン術をまとめた一冊です。私はWebサイト制作をする際にやりたいことややるべきことも分かっていて、市場調査もしましたが、それをどうまとめれば人に正しく分かりやすく伝わるのか分からず、すごく苦労しました。そんな時にこの本に出会ってストーリーの組み立て方やなぜ3分以内に収めなければいけないかなどが明確に理解することができました。
[この本で学習できること]
・プレゼンは3分以内、または5分以内と言われるのはなぜか
・どんな展開で組み立てていけばストーリー性や説得力のある企画書になるか
[こんな人向け]
・企画書なんて作ったことない！右も左も分からない！
・やりたいことは決まっているけど、人にそれをまとめて伝えることができない
・なんとなく企画書は作れているけど、説得力に欠けるのか提案が通らない
[11] "伝わる"スライドデザインを学ぶならコレ！
タイトル：一生使える見やすい資料のデザイン入門
発行者：森重湧太 (著)
スライドのデザインを通して、どうすれば上手く伝わるスライドデザインができるかを学べる一冊です。プレゼンをよくしていてベテランだ！という方も、もし提案が通りにくく、苦戦することが多い場合は見てみると目からウロコ！という発見があるかもしれません。一つ前の本で紹介した企画書の組み立て方の本で学び、ビジュアルをこちらの本で学んで制作すると見違えてとても伝わりやすく説得力のある企画書やプレゼン資料が作れるようになるかと思います。
◆補足◆
本で学ぶ前に私が作った分かりにくい「企画書第一弾」と、この本ともう一冊上記で紹介している「社内プレゼンの資料作成術」を読んだ後に作成して劇的に変わった「改良版の企画書」のビフォーアフターも今後noteにて公開していきたいと思います。
このビフォーアフターでこの2冊は読む価値がある！と確信していただけるのでは・・・というくらい本当に激変してます。
(ビフォーアフター記事を書いたら、こちらにリンクを追記予定です。)
[この本で学習できること]
・伝わるスライドデザインを学べる
・様々なパターンのスライドデザインが学べる
[こんな人向け]
・今のスライドで本当に伝わりやすいか自信がない
・うまく内容をまとめているはずなのに正しく理解してもらえない
・1枚のスライドに情報をたくさん詰め込んでいる
[12] マンガで撮影力、撮れ高アップ！
タイトル：カメラはじめます！
発行者：こいしゆうか (著), 鈴木知子 (監修)
こちらはマンガで一眼レフカメラの使い方を説明してくれる指南書です。なんとなくオートやシーンモード切り替えで使っている人におすすめです。マニュアルでの設定方法を簡単に学べて、マンガ一冊読み終えたあとは早速実践をしていくだけ！
私はなんとなくPオートで撮っていたんですが、この本に出会って、マニュアルモードでより自分の撮りたいイメージに近い、以前よりクオリティの高い写真を撮れるようになりました。フリーランスのWebデザイナーなどで写真素材が必要になる場合も、これで学ぶことで十分素材として使える写真が撮れるようになると思うので、そんなお悩みをお持ちの方にもおすすめの一冊です！
[この本で学習できること]
・一眼レフカメラの選び方
・一眼レフカメラのマニュアルモードでの撮影方法
・シーン別撮影方法
[こんな人向け]
・一眼レフカメラは持っているけどマニュアルモードが使いこなせない、暗い写真になる
・堅苦しい、難しいイメージがあって、カメラの教本には抵抗がある
・設定だけでなく撮り方のコツも知りたい
さいごに
-駆け出しデザイナー向け！-Webデザイン力底上げ本【12選】、いかがだったでしょうか？
全て読むのは大変ですが、私はこの全てを読んで無駄なことは一つもなかったし、本当に読んで良かったと思っています。
また、紹介した中で、今のあなたの苦手を克服してくれそうな一冊とは出会えたでしょうか。「苦手なことは私にはできないんだ！」と考えてしまいがちだった私ですが、たくさんの先生方に相談をし、たくさんの本を読んで、先人の知恵を借りることによって苦手は克服できる！と考えるようになりました。「やり方が分からないから出来ない！」は裏返せば「やり方が分かれば出来る！」ということなのです。
苦手、というネガティブな気持ちをぐっと抑えて、Webデザイン力の底上げにお役立ていただけたら幸いです。
最後までお読み下さりありがとうございます！ サポートではワンコイン100円から著者を応援をすることができます。 頂いたサポートはこれからWebデザイナーになろうとしている人達にお役立てできる情報の収集に使わせていただきます。