InfraAcademy

InfraAcademy Blog

Webデザインが学べるおすすめ本5選！【Webデザインを勉強しよう！】

| #参考書 #オススメ商品 #おすすめ本
無料でインフラ学習を始める

こんにちは、フルスタックエンジニアのryuです。

Webデザインについて勉強するならどの本がいいの・・・？

今回の記事は、Webデザインついて学習したい人にのおすすめの本を紹介します。「Webデザインについて勉強するならどの本がいいの？」、「Webデザインについて分かりやすい本は？」とお悩みの方。

これからWebデザインについて学習する人に向けて、おすすめの参考書をご紹介します。

こんな人におすすめ - ****Webデザインについて****勉強しようと考えている方 - Webデザイン**のおすすめの**本を知りたい方

Webデザインについて学べるおすすめ本5選！

「*Webデザイン*のおすすめ本はどれがいいの・・・」とお悩みの方。たしかに、本が多く、選ぶのも大変です。

今回は、参考書選びの助けになるように『*Webデザイン*のおすすめの本4選！』をご紹介します！

今回ご紹介する本は以下の通りです。

No ラベル タイトル
1 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
2 いちばんよくわかるWebデザインの基本きちんと入門［第2版］　レイアウト／配色／写真／タイポグラフィ／最新テクニック
3 動くWebデザイン アイディア帳
4 動くWebデザイン アイディア帳 実践編
2万回のA/Bテストからわかった 支持されるWebデザイン事例集

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

まず初めにご紹介するおすすめ本は、「1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」です

(function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject\=a; b[a]\=b[a]||function(){arguments.currentScript\=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q\=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d\=c.createElement(f),d.src\=g, d.id\=a,e\=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座","b":"","t":"","d":"https:\/\/m.media-amazon.com","c_p":"","p":["\/images\/I\/41a8QSuhu7L._SL500_.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/dp\/B07PS1ZJN6","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https:\/\/www.amazon.co.jp\/dp\/B07PS1ZJN6","a_id":1841358,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https:\/\/search.rakuten.co.jp\/search\/mall\/1%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FHTML%20%EF%BC%86%20CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7\/","a_id":1841357,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https:\/\/shopping.yahoo.co.jp\/search?first\=1\u0026p\=1%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FHTML%20%EF%BC%86%20CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7","a_id":1939783,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"agkNd","s":"s"});

リンク

Webデザイナーに必要なHTMLとCSSの知識が身に付く

こちらの本では、ウェブデザイナーに必要なHTMLとCSSの知識が身につきます。HTMLとCSSの基本からレスポンシブ、Flexbox、CSSグリッドなどを学ぶことができます。

本書の内容は以下のようになっています。

  • CHAPTER1　最初に知っておこう！Webサイトの基本
  • CHAPTER2　Webの基本構造を作る！HTMLの基本
  • CHAPTER3　Webのデザインを作る！CSSの基本
  • CHAPTER4　フルスクリーンのWebサイトを制作する
  • CHAPTER5　2カラムのWebサイトを制作する
  • CHAPTER6　タイル型のWebサイトを制作する
  • CHAPTER7　外部メディアを利用する

コーディングとデザインの両方を学ぶことができます！

(出版社より)

これからWebサイトを作り始める初心者におすすめ

このような方におすすめです。

  • これからWebサイトを作り始める初心者
  • HTMLとCSSを基本から学びたい人

Amazonで試し読みできるので、興味のある方はこちらからどうぞ。

Amazonで試し読み

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

続いてご紹介する本は、「いちばんよくわかるWebデザインの基本きちんと入門［第2版］　レイアウト／配色／写真／タイポグラフィ／最新テクニック」です。

(function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject\=a; b[a]\=b[a]||function(){arguments.currentScript\=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q\=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d\=c.createElement(f),d.src\=g, d.id\=a,e\=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"いちばんよくわかるWebデザインの基本きちんと入門［第2版］　レイアウト／配色／写真／タイポグラフィ／最新テクニック","b":"","t":"","d":"https:\/\/m.media-amazon.com","c_p":"","p":["\/images\/I\/51Yv8pfxlDL._SL500_.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/dp\/B098B158X4","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https:\/\/www.amazon.co.jp\/dp\/B098B158X4","a_id":1841358,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https:\/\/search.rakuten.co.jp\/search\/mall\/%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8BWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8D%E3%81%A1%E3%82%93%E3%81%A8%E5%85%A5%E9%96%80%EF%BC%BB%E7%AC%AC2%E7%89%88%EF%BC%BD%E3%80%80%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%EF%BC%8F%E9%85%8D%E8%89%B2%EF%BC%8F%E5%86%99%E7%9C%9F%EF%BC%8F%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%EF%BC%8F%E6%9C%80%E6%96%B0%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF\/","a_id":1841357,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https:\/\/shopping.yahoo.co.jp\/search?first\=1\u0026p\=%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8BWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8D%E3%81%A1%E3%82%93%E3%81%A8%E5%85%A5%E9%96%80%EF%BC%BB%E7%AC%AC2%E7%89%88%EF%BC%BD%E3%80%80%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%EF%BC%8F%E9%85%8D%E8%89%B2%EF%BC%8F%E5%86%99%E7%9C%9F%EF%BC%8F%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%EF%BC%8F%E6%9C%80%E6%96%B0%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF","a_id":1939783,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"sVjzk","s":"s"});

リンク

Webデザイナーに必須の基礎知識が学べる

こちらの本は、Webデザイナーに必須の基礎知識が網羅できます。レイアウト4つの原則とレスポンシブWebデザインな配色の基本と、実例デザインの配色見本集などを学ぶことができます。

これからWebデザインを学びたい初心者の方におすすめ

このような方におすすめです。

  • これからWebデザインを学びたい初心者の方
  • 1冊でWebデザイナーの基礎知識を網羅して学びたい方

Amazonで試し読みできるので、興味のある方はこちらからどうぞ。

Amazonで試し読み

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

続いてご紹介する本は、「動くWebデザイン アイディア帳」です

(function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject\=a; b[a]\=b[a]||function(){arguments.currentScript\=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q\=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d\=c.createElement(f),d.src\=g, d.id\=a,e\=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"動くWebデザイン アイディア帳","b":"","t":"","d":"https:\/\/m.media-amazon.com","c_p":"","p":["\/images\/I\/517wqa52EbL._SL500_.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/dp\/B08X4GLZTR","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https:\/\/www.amazon.co.jp\/dp\/B08X4GLZTR","a_id":1841358,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https:\/\/search.rakuten.co.jp\/search\/mall\/%E5%8B%95%E3%81%8FWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%20%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E5%B8%B3\/","a_id":1841357,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https:\/\/shopping.yahoo.co.jp\/search?first\=1\u0026p\=%E5%8B%95%E3%81%8FWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%20%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E5%B8%B3","a_id":1939783,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"Tz1zZ","s":"s"});

リンク

Webデザインのアニメーションが学べる

こちらの本では、Webページによく実装される「動くパーツ」を13種類に分類して解説しています。特設サイトやダウンロードできるサンプルデータのコードをそのままコピー＆ペーストするだけで、動きを実装することができます。

これからWebデザインを学びたい初心者の方におすすめ

このような方におすすめです。

  • JQueryやCSSのアニメーションを学びたい方
  • Webデザインの中級者を目指したい方

Amazonで試し読みできるので、興味のある方はこちらからどうぞ。

Amazonで試し読み

こちらの本もおすすめです。

(function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject\=a; b[a]\=b[a]||function(){arguments.currentScript\=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q\=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d\=c.createElement(f),d.src\=g, d.id\=a,e\=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"動くWebデザイン アイディア帳 実践編","b":"","t":"","d":"https:\/\/m.media-amazon.com","c_p":"","p":["\/images\/I\/511Dr2RB3QL._SL500_.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/dp\/4802613237","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https:\/\/www.amazon.co.jp\/dp\/4802613237","a_id":1841358,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https:\/\/search.rakuten.co.jp\/search\/mall\/%E5%8B%95%E3%81%8FWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%20%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E5%B8%B3%20%E5%AE%9F%E8%B7%B5%E7%B7%A8\/","a_id":1841357,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https:\/\/shopping.yahoo.co.jp\/search?first\=1\u0026p\=%E5%8B%95%E3%81%8FWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%20%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E5%B8%B3%20%E5%AE%9F%E8%B7%B5%E7%B7%A8","a_id":1939783,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"3QgEt","s":"s"});

リンク

2万回のA/Bテストからわかった 支持されるWebデザイン事例集

最後にご紹介する本は、「2万回のA/Bテストからわかった 支持されるWebデザイン事例集」です。

(function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject\=a; b[a]\=b[a]||function(){arguments.currentScript\=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q\=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d\=c.createElement(f),d.src\=g, d.id\=a,e\=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"2万回のA\/Bテストからわかった 支持されるWebデザイン事例集","b":"","t":"","d":"https:\/\/m.media-amazon.com","c_p":"\/images\/I","p":["\/51bzO6BQGtL._SL500_.jpg","\/41OR0EikFzL._SL500_.jpg","\/41e3M8hL4zL._SL500_.jpg","\/41ejFDeWGwL._SL500_.jpg","\/41yPQgS3txL._SL500_.jpg","\/41HFj3df-SL._SL500_.jpg","\/418KkD7JkFL._SL500_.jpg","\/51dFwv2y2GL._SL500_.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/dp\/4774199389","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https:\/\/www.amazon.co.jp\/dp\/4774199389","a_id":1841358,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https:\/\/search.rakuten.co.jp\/search\/mall\/2%E4%B8%87%E5%9B%9E%E3%81%AEA%2FB%E3%83%86%E3%82%B9%E3%83%88%E3%81%8B%E3%82%89%E3%82%8F%E3%81%8B%E3%81%A3%E3%81%9F%20%E6%94%AF%E6%8C%81%E3%81%95%E3%82%8C%E3%82%8BWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E4%BA%8B%E4%BE%8B%E9%9B%86\/","a_id":1841357,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https:\/\/shopping.yahoo.co.jp\/search?first\=1\u0026p\=2%E4%B8%87%E5%9B%9E%E3%81%AEA%2FB%E3%83%86%E3%82%B9%E3%83%88%E3%81%8B%E3%82%89%E3%82%8F%E3%81%8B%E3%81%A3%E3%81%9F%20%E6%94%AF%E6%8C%81%E3%81%95%E3%82%8C%E3%82%8BWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E4%BA%8B%E4%BE%8B%E9%9B%86","a_id":1939783,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"ILH1C","s":"s"});

リンク

Webデザインの改善事例が学べる

こちらの本では、Webデザインの改善事例を学ぶことができます。A/BテストでどのようにWebサイトが改善されたのか、どのような効果があるのかの事例を見ることができます。

2万回という大量の実例から厳選されたA/Bテストの実例をもとに、どのようなUIデザインが支持されるのかを解説されています。A/Bテストの結果により導き出された、理論だけではないユーザーから本当に支持されるデザインがわかります。

Webデザインを改善したい方におすすめ

このような方におすすめです。

  • Webデザインを改善したい方
  • LPやECサイトのCVRを上げたい方

Amazonで試し読みできるので、興味のある方はこちらからどうぞ。

Amazonで試し読み

Webデザインのおすすめ本5選まとめ

今回の記事では、Webデザインのおすすめ本をご紹介しました。紹介した本はこちら。

これからWebデザインについて勉強しようと考えている方は参考にしてください。

当ブログでは、このようなITに関する記事を発信しているので興味のある方は引き続きご覧ください。

あわせて読みたい - JavaScriptのおすすめ参考書4選！【JavaScriptを勉強したい方必見】 - Webマーケティングおすすめ本4選！【Webマーケティングを勉強しよう】 - Google Apps Script(GAS)のおすすめ参考書4選！【GASで作業を自動化しよう！】

Next Action

記事で読んだ内容を、講座で実装してみましょう

InfraAcademyでは、ブラウザ上でLinuxやネットワークの実践環境を使いながら学習できます。無料で始められる講座から、学習の流れを試せます。

インフラ講座を無料で始める 最初の講座を見る
#参考書 #オススメ商品 #おすすめ本

Related

関連記事

ブログ一覧へ
【初心者向け】DevOpsのおすすめ学習サイトを3選をご紹介！【DevOpsを学習しよう】

【初心者向け】DevOpsのおすすめ学習サイトを3選をご紹介！【DevOpsを学習しよう】

2024-03-23
 LPICの内容が覚えられない!?LPICの出題範囲を効果的に覚える方法

LPICの内容が覚えられない!?LPICの出題範囲を効果的に覚える方法

2023-12-15
 コーディングのおすすめ本7選ご紹介！【HTML/CSSが書けるコーダーになろう】

コーディングのおすすめ本7選ご紹介！【HTML/CSSが書けるコーダーになろう】

2023-09-22

Roadmap

まずはこの3講座から

記事で気になったテーマを、順番に手を動かしながら学べます。

ロードマップを見る

Step 1

未受講

ディレクトリと相対パス、絶対パス

受講後にできること

  • ・Linuxシミュレーターの使い方について理解できます。
  • ・ディレクトリとルートディレクトリの考え方について理解を深められます。
  • ・絶対パスと相対パスの違いを実践・確認できます。
入門 ログインで無料 60分 演習17問
進捗 0%
学習を始める

Step 2

未受講

ファイルの操作方法

受講後にできること

  • ・touchコマンドによるファイル作成について理解できます。
  • ・lsコマンドによるファイル確認について理解を深められます。
  • ・rmコマンドによるファイル削除を実践・確認できます。
入門 ログインで無料 60分 演習12問
進捗 0%
学習を始める

Step 3

未受講

ファイルのアクセス権限

受講後にできること

  • ・ファイル権限の基本と確認方法について理解できます。
  • ・rwx表記と数値表記の読み方について理解を深められます。
  • ・chmodによる権限変更を実践・確認できます。
入門 ログインで無料 60分 演習16問
進捗 0%
学習を始める