CFブログ

Blog

Webデザイン独学方法

【2024年版】独学でWebデザインを学ぶ!おすすめ本14冊まとめ&便利な勉強サイト

通学でもオンラインでも受講可能!

【募集中!】43期Webクリエイティブコース募集中!

たにまちくん

もっとデザインのことを詳しく勉強したくなってきた!
勉強用の書籍を買おうと思うんだけど、種類がありすぎてどれがいいのかわからないよ〜。

トリペン先生

そんな君のために、デザイン初心者さんにもオススメの書籍をまとめておいたよ!
ぜひ気になる本はチェックして、これからの学習に役立ててほしいな。

独学でデザインの基本を学びたい皆さんの中には、書店やネットでオススメされている書籍が多すぎて、
結局どれを買ったらいいのか分からない、といったことはないでしょうか?
この記事では、多くのデザイナーも愛用しているデザインの自学習に最適な書籍やEWebサイトを紹介しています。
このブログの記事執筆にも参考にしている書籍です。

独学でWebデザインを学ぶのに最適なオススメデザイン書籍

デザインを学ぶにはWebでも書籍でも実際に学んでみたことを実践してみることが、デザインの上達の近道です。
デザインの基本的な考え方や初心者向けの情報を覚えて、自分が作りたいデザインが作れるようになるまで、新しい知識をいれてみてくださいね。

デザインの教室

このブログ記事の執筆でも参考している、これから初めてデザインを学ぶ方に一番最初に進めたい書籍です。
書籍と学習素材がセットでついてくるので、書籍の内容に合わせて実際のファイルを見ながら学ぶことができます。
またかなり初心者向けの知識や参考例が豊富に載っているので、情報が多すぎて最初は全てを理解するのは難しいですが、デザインの教科書として1冊持っておいて損はないでしょう。

こんな人にオススメ!

  • デザインの基本から応用まで学びたい方
  • 初めてのデザインの勉強を始める方に方
  • 実際に手を動かしながら、基本を覚えたい方

なるほどデザイン

こちらもデザインの勉強書籍として有名な1冊です。
写真や図解が多く、ノンデザイナーの方でも分かりやすく重要なポイントが全般的に要約されています。
デザイン制作の考え方についても紹介されているので、知識をどうやって制作に落とし込めばいいのか悩んでいる方にもオススメです。基本的な知識についてはあまり解説が無いので、基本は別の書籍で学びながら合わせて読むとさらに理解が深まるといえます。

こんな人にオススメ!

  • いまいち初心者っぽいデザインから抜け出せない方へ
  • 広報担当やノンデザイナーでも分かりやすい内容がいい方
  • 分かりやすい、応用向けのデザインの考え方を知りたい方

やってはいけないデザイン

こんなデザインは避けたほうがいいという「悪い見本」から、具体的に心地よいデザインを学んでいける1冊です。
見本や事例が多く掲載されているので、問題点や気をつけるべきポイントを具体的に理解できます。
デザインを学びたての方にはぜひオススメしたい書籍と言えます。

こんな人にオススメ!

  • 悪いデザインからデザインの暗黙のルールを学びたい方
  • 制作物別に具体的な参考例や見本を見たい方
  • デザイン制作のプロセス、判断方法を学びたい方へ

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

デザイン学習の書籍としてこちらもかなり有名な1冊。
デザインの基本から活字の扱い方まで、幅広く網羅した非デザイナーにもオススメできる書籍です。Webデザインに関しての記載もややあるので、広くカバーしたい方、デザイン入門にピッタリです。

こんな人にオススメ!

  • デザインの基本から活字、Webまで幅広く学びたい方
  • デザイナーでは無いけれど、デザイン知識が必要な方
  • デザインの入門書籍が難しくてわかりにくいと感じた方

けっきょく、よはく。余白を活かしたデザインレイアウトの本

経験を重ねないと分かりにくい「余白」のとり方から、心地良いデザインやその参考例を学べる1冊です。
すでにデザインを学び始めて時間が立っている方や、一皮向けたいと感じているデザイナーにもオススメです。言葉で説明できない感覚的な部分を、分かりやすく言語化しているので人にデザインを教えたりする方にも役立つでしょう。

他にも色々なシリーズを出版している書籍になりますので、他のもチェックしてみてください。

こんな人にオススメ!

  • こなれてきた雰囲気から一皮向けたい方へ
  • 分かりやすいデザインや資料を作りたい方へ
  • 色彩とフォントの項が分かりやすくて便利

デザインの言語化(クライアントの要望に応える4つのステップ)

デザイナーにとって言語化は、非常に重要なスキルです。
本書では、デザインの言語化をするにあたり、様々なシーンでの解説があります。
もちろん読むだけでは意味がないので、実践の前に読む一冊に入れてもいいでしょう。

こんな人にオススメ!

  • 言語化が苦手な人
  • デザインのプレゼンが上手くなりたい人
  • デザインに説得力を出したい人

フォント・文字に関する書籍

オンスクリーン タイポグラフィ(事例と論説から考えるウェブの文字表現)

デジタルに表示するための文字の理解は、紙に出力する場合と概念が変わります。
Webデザイナーであれば知っておくべき知識の1つになりますので、1冊は手元に置いておきたい本になります。
初心者には少し難しいかもしれませんが、さらっと読んでおいて損しないはず。

こんな人にオススメ!

  • タイポグラフィの勉強がしたい人
  • フォントが好きな人

タイポグラフィの基本ルール (プロに学ぶ、一生枯れない永久不滅テクニック)

こちらの方が、先ほどの書籍より初心者向けかもしれません。
基本となるタイポグラフィを学びつつ、実践的にも使える知識を得ることができます。

こんな人にオススメ!

  • タイポグラフィの勉強がしたい人
  • フォントが好きな人

色彩

このブログのk時で紹介した色彩の知識に加えて、もっと配色や色についてしっかり学びたい方にオススメの書籍を紹介します。
配色系の書籍は探し始めると種類が多すぎるので、学習用の書籍と配色見本として持っておきたい書籍は分けて選んでおくといいでしょう。
学習書にも配色見本が掲載されていることが多いですが、配色専門書の方がその数やバリエーションが豊富です。逆に配色系の書籍では基本を学ぶことは難しいでしょう。

色彩検定3級・2級 公式テキスト

「公益社団法人 色彩検定協会」が発行している色彩検定の公式テキストです。1級から3級までレベル別にテキストが分けられているため、入門書としては3級、より実践レベルの知識を学ぶなら2級が分かりやすくまとまっています。
1級は専門的な内容が増えてくるので、人によっては必須ではありません。

知識が定着してきたら、実際に試験を受けてみてもいいかもしれませんね。

こんな人にオススメ!

  • 基本的な色彩知識を浅く広く学びたい方
  • 色彩検定に興味があり、テストを受けてみたい方
  • ファッション、インテリア、その他の色彩分野も学びたい方

光と色彩の能力テストTOCOL BASIC

かつてテレビでも話題になった光と色彩の能力テスト「TOCOL(トーコル)」の公式テキストです。
色彩検定の書籍と異なり、1冊で色彩全般の知識、配色などの全般的に網羅している書籍です。セットで販売されている色見本を実際に書籍に貼り付けながら学んでいくため、体感的に色の組み合わせや仕組みが理解できます。図解も多く色彩の専門書として持っておきたい1冊です。レベルはBASICでも十分な内容です。
※現在は、上巻・下巻と2冊で過去に販売されていた1冊分の内容となるようです。

こんな人にオススメ!

  • 基本から応用まで、幅広い知識を網羅して学びたい方
  • 配色の参考例や色の見え方など仕組みも学びたい方
  • 同社が公開、販売しているツールと合わせて学習したい方

配色アイデア手帖 めくって見つける新しいデザインの本

色彩の知識よりも、配色や色の組み合わせ方を重点的に学びたい方は、こちらの配色見本の専門書がオススメです。
色の組み合わせて感じられる印象や、イメージごとに配色例が多数掲載されているので、見ているだけで楽しい1冊になるでしょう。

こんな人にオススメ!

  • 多くの配色見本がたくさん欲しい方
  • イメージや言葉からピッタリの配色を探したい方
  • Kindleや電子書籍に対応の配色見本が欲しい方

デザインツールの使い方

デザインの基礎を学んでも実際のソフトやツールをどんな風に覚えていいか分からないということも、デザインを独学で学ぶときの壁の一つです。
デザインツールや書籍は常にソフトがアップデートで更新され続けていくため、書籍だけで学ぶよりも書籍と合わせてWebサイトの情報を参考にしてみてくださいね。

Photoshop よくばり入門 CC対応

初心者向けのPhotoshop本になります。
Photoshopは難しいツールですが、実際に手を動かしながら習得することができます。
同じように初心者向けの本はたくさんありますので、自分のお気に入りの1冊を探してみるのもいいかもしれません。

こんな人にオススメ!

  • Photoshopを基礎から学びたい方
  • Photoshopを使ってデザインを作りたい方

10年つかえる逆引き手帳シリーズ

昔からPhotoshopやillustratorなどの技術書を販売している会社の書籍です。
「逆引き手帳」はやってみたい加工やデザイン案から、ツールの使い方を学ぶタイプになっており、基本的なツールの使い方に加えてやりたいことから使い方を学ぶことができます。

こんな人にオススメ!

  • 機能を網羅的に知りたい方
  • 必要になったら調べるので辞書的な本が欲しい方

これからはじめるFigma Web・UIデザイン入門

Webデザインをする上で、Figmaは今後メインのデザインツールになるでしょう。
まだこれからの部分もありますが、今から学習する方はFigmaを学んでおけば間違いありません。
無料で尚且つ操作性も軽いため、初心者の方でもすぐに習得できるはずです。

こんな人にオススメ!

  • UIデザインツールを学びたい方
  • Webデザインをデジインしてみたい方

学習可能なWebサイトサービス

デザインの基本はいつになっても変わりませんが、ツールの使い方やはやりのデザインの傾向などは、情報の早いWebサイトを駆使して学ぶこともこれからは大切です。

デザインの情報を公開しているサイトはたくさんありますので、以下で紹介したサイトを参考に、自分と相性がいいサイトをいくつか見つけておくのがいいでしょう。

Adobe公式サイト

Adobe公式サイト

Adobe製品のソフトやツールを使っているのなら、公式サイトをチェックするのがいいでしょう。
Adobeの公式ヘルプではソフトの使い方のチュートリアルから、ソフトの小技やテクニック動画まで無料で公開されています。
特に世界中のデザイナーの最新のテクニックや技術が動画で見れるのは初心者から上級者は特に必見です。

こんな人にオススメ!

  • Photoshopとillustratorの基本的な機能を学びたい
  • Adobe社の最新情報も一緒にチェックしたい方
  • 基本的な操作とちょっとしたときに使える小技も知りたい方

PhotoshopVIP

Photoshopやillustratorで使えるパターンやブラシ素材から、話題のデザイン関連のニュースを更新しているサイトです。
Photoshopとサイト名に書かれていますが、illustratorやその他のAdobeソフト系の情報も網羅しています。
特にパターン素材などのまとめ記事が優秀です。

こんな人にオススメ!

  • デザインソフトのテクニックや小技をたくさん見たい
  • テクスチャやパターン素材などを楽にたくさん集めたい
  • 流行のデザインや新しい情報をまとめて見たい

PhotoshopVIP

coliss(コリス)

コリス

Webデザインよりの情報が多いですが、話題のデザインの情報やフォントや素材などの情報がまとめられた有名なサイトです。
定期的に無料の素材集プレゼント抽選企画やKindleセールのお知らせなども発信してくれるので、Twitterなどと合わせてチェックしておくと便利なサイトです。
セール情報では、上記で紹介した書籍の割引なども含まれるため時期を合わせて購入したいところです。

こんな人にオススメ!

  • Webデザインの情報も同時にチェックしたい方
  • お得なセールやキャンペーン情報を見逃したくない方
  • Webデザインの勉強もしている方

サルワカ

サルワカ

Webデザイン業界ではほとんどの人が知っている情報系ブログです。内容のわかりやすさに加え、ブログや記事自体のUIデザインが素晴らしく、心地よく記事を読み進める事ができます。
WordPressテーマ「SAMGO」の製作者でもあり、このブログでも使用中のテーマです。

こんな人にオススメ!

  • 分かりやすくソフトの使い方やデザインを学びたい方
  • Webデザインの勉強もしている方
  • その他仕事をする上での小ネタや便利ツールを知りたい方

まとめ:まずは1冊ずつ。成長に合わせて買い揃えたりしよう!

今回はデザインを独学で学ぶ人のために、業界の中でも有名な書籍やサイトを紹介してきました。
書籍で学ぶのが合っているのか、Webで調べるのが好きなのか、または誰かに教えてもらうほうが成長できるのか、どんな勉強法が一番合っているかは人それぞれです。
今回紹介した書籍もあくまでも参考ですので、他にも学習に最適なものがあれば随時追加していきます。

【募集中!】43期Webクリエイティブコース募集中!

クリエイターズファクトリーでは毎週、説明会・相談会を開催しております。
オンラインでも参加が可能となります。
受講生の9割が全くの未経験からWeb業界へ進んでいますので、不安を感じている方でも安心して受講いただけます。
詳しく聞きたい方は、説明会にご参加下さい。

consultation

contact

活動レポート・ブログ

日々の活動やスクールの情報をまとめています