MENU
アーカイブ
つな
医療従事者からWebデザイナーへ転職。現在はフロントエンドエンジニア。このブログでは私自身が異業種からWeb業界に転職した体験を元に、Webデザイナーやコーダーを目指す方に役立つ記事、サイト制作にまつわる知識や技術について発信しています(適当な日記もたまに)。

Web制作が学べるオススメ本10選【現役Webデザイナーが厳選】

WebデザインやWeb制作が学べる参考書ってたくさんあるなぁ…。オススメがあれば教えてほしい。

そんな疑問にお答えします。

私は日々、腰や肩、首を爆発させながら、時には発狂したり血反吐を吐いたり血眼になりながら制作をしているWebデザイナーです。(楽しいですよ)

そして仕事はインプットとアウトプットの連続!
わからないことは都度ググりながらこなしていますが、土台となる知識は、駆け出しの頃に受けたスクールや、本で習得したと言っても過言ではありません。

そんなわけで今回は、私がWebデザイナーとして働きはじめて購入したもの、中でも実務で大いに役立っている本を厳選して10冊ご紹介します
Webデザイナー向けの書籍を購入する際に、ぜひ参考にしてみてください!

この記事を書いた人

つな

医療従事者からWebデザイナーへ転職。現在はフロントエンドエンジニア。このブログではWebデザイナーやコーダーを目指す方に役立つ記事、サイト制作のあれこれについて発信しています。さらに詳しく

X
お問い合わせ

目次

デザイン関連

デザインツールやデザインの参考になるオススメの本は以下の3つです。

デザイン関連でオススメの本

Adobe XDではじめるWebデザイン&プロトタイピング

Webサイトをデザインする際に使用する「Adobe XD」の使い方を詳しく解説しています。
際に架空Webサイトのデザインを作りながら機能を学んでいけるため、XDを全く触ったことない初学者の方にもオススメです。

この本を読むまではなんとなくの直感でXDを使っていたのですが、きちんと学ぶことで「効率の良さ」を知れたり「こんなこともできるんだ!」という発見がありました。
現場の流れに沿ったXDの使い方も勉強になります。

Webデザイン良質見本帳

「Webデザイン」に特化した参考書です。

テーマに沿った実際のWebサイトが429個も載っている見本集になります。
そのサイトに使われている色やフォント、パーツなどを詳しく解説しているため、パラパラめくるだけでもデザインの参考になるでしょう。

Webデザインのアイデアを見つけるために非常に役立つ本です。

現場で使える Webデザインアイデアレシピ

created by Rinker
¥2,752 (2024/10/09 10:18:17時点 Amazon調べ-詳細)

サイト全体というよりは見出しやボタン、写真の見せ方など「パーツ」のデザインが揃った本です。
実際のコードも記載されているので、簡単にデザインを再現することができます。

「え、こんなこともCSSでできるの?!」という発見もあるので面白いです!

HTML/CSS関連

HTML/CSS関連でオススメは以下の3つです。

HTML/CSS関連でオススメの本

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

AmazonのWebデザインのカテゴリでベストセラー1位を獲得している参考書です。

Web制作の基礎知識が網羅的にまとめられています。初学者の方はこの本を一通り読んで実践すれば、Web制作の大枠は掴めるはずです。

入門講座の知識がある程度ついたら「実践講座」という続編もあります。
気になった方は併せてチェックしてみてくださいね。

CSS設計完全ガイド

Webサイトのページ数が多くなるほど増えていくCSS、サイトの追加修正で複雑になっていくCSS、さらに複数の人が関わると崩壊していくCSS…。
そんなCSSをどのように設計・記述していけば良いのか、参考になる本です。

完全ガイド」という名の通り、自分が持っている参考書の中でもトップを争う分厚さ。

この本は「CSS本来の書き方」の解説ではなく「設計(全体の組み立てかた)」の本なので、ある程度CSSを書ける人向けになっています。

Web制作者のためのSassの教科書

Sassを使うための環境構築方法、Sassの書き方、Sassを使った効率的なテクニックなど、Sassの魅力が詰まった本です。

Sassを使えるようになると作業効率が格段とアップするので、ぜひ身に付けておきたい技術です。

JavaScript(jQuery)関連

JavaScript(jQuery)に関しては、基礎的な実装に特化した以下の一冊を選びました。

JavaScript(jQuery)関連でオススメの本

動くWebデザインアイディア帳

created by Rinker
¥2,800 (2024/10/09 10:18:21時点 Amazon調べ-詳細)

Webサイトでよく使われる「動き」に関するデザインを網羅的に集めた本になります。

実際のコードも書かれているので、すぐに実装することが可能です。

JavaScript(jQuery)はHTML/CSSよりもプログラミング的な要素が多いので、最初は取っ付きにくさがありますよね。
本を参考にして最初はコピペで実装しつつも、徐々に自分でアレンジを加えることで、理解のスピードが早くなるはずです。

WordPress関連

WordPressに関しては、網羅的に学べる本を一冊選びました。

WordPress関連でオススメの本

WordPress 仕事の現場でサッと使える! デザイン教科書

WordPressの構造やサイトをWordPress化する方法、WordPressの効率的な運用方法などが学べる本です。

私が駆け出しの頃は、この本でWordPressの基礎的な構築方法を覚えました。
本の中で実際にHTMLで作られた架空サイトを一からWordPress化していくので、理解が深まりやすいです。

ツール関連・その他

デザインやコーディング以外のWeb制作にまつわる本です。

その他オススメの参考書

コンバージョンを上げるWebデザイン改善集

created by Rinker
マイナビ出版
¥2,728 (2024/10/09 10:18:22時点 Amazon調べ-詳細)

Webサイトは作って終わりではなく、そこに成果(コンバージョン)を発生させなければ意味がありません。

コンバージョンを上げるためにサイトの作りをどのようにするべきか、参考になる一冊です。

そしてこの本を読むことで、サイトを提案・修正する際の自信材料になります。
上司に、社長に、クライアントに対して、提案の説得力が増すことでしょう。

イラスト図解式 この一冊で全部わかるWeb技術の基本

仕事上色々なことを調べている中で、よく見るけどイマイチよく理解できてないWeb用語がたくさんでてきます。
そんな「よく見るけどイマイチよく理解できてないWeb用語」が載っている本です。

Web制作というよりは、サーバーやドメイン、SSLなど「Web」という技術全般に関わる知識が身につけられます。

図解式なので、頭に入ってきやすいのも良いですね。

まとめ〜その知識を得る前に

ここで紹介した本は、私がWeb業界に転職してから購入したものがほとんどです。
現場に入る前の知識としては、HTML/CSSで簡単なサイト制作ができるくらい。そしてWordPressを少しかじる程度。

転職後に「この知識・技術は必要だな。もっていたら仕事の効率やクオリティがあがるな」と感じた部分を穴埋めしてくれる参考書を購入し、学んできました。

そこでお伝えしておきたいのは「この知識は必要かもしれない」という不確定な段階で多くの勉強するというのは、少し非効率ということです。
例えば「WebデザイナーになるにはJavaScriptもしっかり書けたほうがいいかもしれない」と感じて、JavaScriptの勉強をし始めるのはちょっと気が早いということです。

というのもこれは過去の自分なんですが、駆け出しの頃にProgateやドットインストールでせっせとJavaScriptを学んだりしてました(結局わけわからなすぎて挫折しました)。

しかし私がWebデザイナーとして入った会社では、一からJavaScriptを組み立てて〜みたいな案件はほぼありませんでした。なのでその知識をつける優先度は低いです。

WebデザイナーであればHTML/CSS、デザインの知識はある程度必須です。

しかしそれ以外の知識(複雑なJavaScriptやWordPressなど)は、その会社で必要であることがわかった後にガッツリ勉強するで良いと思います。

本は知識や技術を体系的に理解できる最高のツールです!
プロの方たちがなるべくわかりやすくまとめて世に出してくれたものなので、ネットの情報とは違って信憑性があります。

ぜひ参考にしてみてくださいね。

シェアする
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次