menu

2020年3月Webデザインのおすすめ本10選【初心者からでも気軽に学べる厳選の10冊】

The following two tabs change content below.
渡辺
現在会社勤めしながら起業ラボのライターとして活動中。 起業ラボの記事内では、副業で稼ぐ為のヒントやネタなどを中心にお届けしています。

こんにちは、
渡辺です。

「Webデザインを学びたいけどHTMLとCSSって複雑そう」
「Webデザインって難しそうだから勉強しようと思っても手が出なかった」

そんな方のために今回は、
2020年3月Webデザインのおすすめ本を厳選してまとめました。
Webデザインのおすすめの本をお探しの方は是非チェックしてみてください。

2020年3月Webデザインのおすすめ本10冊

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

書籍の内容

知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!
レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!
プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!
〈こんな方にお勧めです〉
・これからWebサイトを作り始める初心者
・HTMLとCSSを基本から学びたい人
・美しいデザインのWebサイトを作りたい人
・Webの最新技術を学びたい人

著者紹介

Mana
日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働いた。現在は全国各地でWeb関連のセミナーに登壇し、Webサイト制作のインストラクターとして教育に携わっている。ブログ「Webクリエイターボックス」は2010年日本のアルファブロガーアワードを受賞。

読み進めながらHTML&CSSを打ち込むだけでフルスクリーン、2カラム、タイル型のページを作成することができます。初心者の自分にもどこかで見たことあるような「ちゃんとオシャレな」Webページが作れて、ちょっと感動しました。HTML&CSSの解説も分かりやすく、かつコンテンツの配置や配色、使用するツール、レスポンシブ対応などWebデザインに関する内容も充実しており、初心者向け本としてとてもバランスが良いです。
私は最初kindle版を買いましたが、読みにくいので書籍版を買い直しました。手元に置いて何度も読み返したい本です。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天でチェックする方はこちら

2.CSS設計完全ガイド ~詳細解説+実践的モジュール集

書籍の内容

SMACSS、BEM、PRECSSなどさまざまな手法の考え方がわかる。
ボタン、ラベル、カード、テーブル…実例コードを多数掲載。
CSSの理解を深めるための8つのポイント設計と実践的なコードを紹介します。

著者紹介

半田惇志
株式会社24-7/テクニカルディレクター・株式会社パンセ/シニアエンジニア。
主に受託制作のフロントエンドの開発から業務全体のワークフロー設計・改善、マーケティングオートメーション、コンテンツ制作まで幅広く業務を行う。特に強い専門領域はHubSpot CMSとCSS設計。好きな言葉は人間万事塞翁が馬。

Web製作で必要になってCSS設計を学びたいと思ったら、読んでいて基礎的なことがわかって、ああよく理解できたという本より、実際にあれをやりたい、これをやりたいというときにどういうコードを使えばいいか具体的にわかったほうがいいと思います。さらに、実践する上でのポイントなんかも教えてくれるとありがたい。そういうこちらが望むことがしっかり書かれている本です。コードの部分は緑の枠になっていて、あとから探すときも見つけやすく、説明も長々としてなくてシンプルで的確なので、わからなくなって調べるというときにも心強く、今のところ一番、手元に常に置いておきたい本だと思いました。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天でチェックする方はこちら

3.HTML&CSSとWebデザインが1冊できちんと身につく本

書籍の内容

この本は、「4つのレイアウトパターン」と「レスポンシブデザイン」を、
実際に手を動かして作りながら、サイト制作の基本が学べる!ライブ感のあるチュートリアル学習により、
まるでWebデザイン会社でOJT(オン・ザ・ジョブ・トレーニング)を受けているような、体験型の独習書です。
〈こんな方にお勧めです〉
・はじめてHTMLやCSSを学び、これからサイト制作をはじめる方
・超初心者ではないが未経験からWebデザイナーを目指している方

著者紹介

服部雄樹
愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、Jimdo、g.o.a.tなど各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、書籍の執筆など精力的に活動中

普段インフラ寄りの仕事をしているのですが、一度フロント側からすべて作ってみたいという衝動にかられ本書を購入しました。
HTMLとCSSの事前知識はほとんどない状態でしたが、それぞれの役割や目的がはじめに丁寧に書かれていて、スムーズに入っていくことができました。その後は基本的な要素をひとつひとつ学習しながら積み上げて作っていく形で進んでいきます。表示される結果をブラウザでリアルタイムに見ながら書いていくので、飽きることなく楽しみながら進められます。今はYoutube動画やGoogleマップの埋め込みがこんなに簡単にできるんだ。。と昨今のWebサービスの便利さやあり方を改めて実感し、いろいろと考えさせらえました。また、フォントといった地味だけれども大切な要素も、いまどきのWebサービスを活用する形でキッチリ押さえられていたのがありがたかったです。
ボリュームもちょうどよく、仕事終わりの毎日1,2時間と土日を使って1週間くらいあれば十分読み終えることのできる分量でした。
1冊目として大満足で、今後は実際に作りながら足りない知識が出てきたら2冊目を探そうと思います。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天でチェックする方はこちら

4.沈黙のWebマーケティング −Webマーケッター ボーンの逆襲− ディレクターズ・エディション

書籍の内容

本書は、Web上で連載され大人気を博したコンテンツの書籍化企画です。
ハードボイルド系ノベル+わかりやすい解説で学ぶ、Webマーケティングの実用入門書!
SEOの仕組みや現在の潮流、マーケッターが押さえておくべき基本がわかる1冊。

著者紹介

松尾茂起
京都のWebプランニングチーム「ウェブライダー」の代表として、様々なWebコンテンツのプロデュースやWebマーケティング支援を行なう。また、松尾シゲオキ名義では作曲家、ピアニストとしても活動。本質を捉えるプランニングを軸とし、様々なフィールドで活動中

上野高史
奈良県宇陀市出身。美術系大学の在学中にイラストレーターとしての仕事を開始し、現在、京都を拠点にフリーランスとして活動中。キャラクターデザインを中心に、書籍やWebコンテンツ向けのイラストレーションを手掛ける

webマーケティングを全く知らなかった初心者です。

webサイトを作ったのちにどう運営していけばいいのか、
さらにwebデザインの本当の意味やそこからどのように広報していくか、
TwitterやFacebook、はてブなどを使った手法は勉強になりました。

マーケティングと聞いていてもこんなに分厚い本を読めるのかと
若干不安でしたが、チャットのような形式で学ぶ敷居も低いので
2日くらいで読み終わりました。

内容はまた2、3度読み込んで自サイト運営に活用したいと思います。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天でチェックする方はこちら

5.配色デザイン良質見本帳 – イメージで探せて、すぐに使えるアイデア集

書籍の内容

本書は合計300点以上の厳選した良質なグラフィックデザイン、Webデザイン、プロダクトデザイン、
写真を集めたプロのデザイナーが使える配色見本集です。
色相、明度、彩度、トーン、色数値、面積比など、配色を構成しているパーツまで分解して解説しているので、
デザインを見るだけではわからなかった「配色の魅力の理由」がわかり、
デザインの制作にもすぐに活用できます。「アイデアが見つからない」
「イメージはあるけど、何が必要でどう配色をつくればいいかわからない」といった時に必見の価値あり。

●本書の対象読者
・デザインのイメージが見つからない方
・色の使い方に自信が持てない方
・クライアントと打ち合わせする際に色の方向性を共有できる見本が欲しい方
・配色の最新トレンドが知りたい方

著者紹介

たじま・ちはる
大阪芸術大学を卒業後、制作プロダクション、広告代理店、企業のインハウスデザイナーを経て2017年にHUMOREという屋号で独立。グラフィックデザインとWebデザイン、双方の分野で「目的を達成するために、誰に何をどんな手段で届けるか」といったマーケティングから携わる。
実務で得た知識を「デザインの考え方」として発信することを好み、Adobe MAX Japan 2017、CSS Nite、Jagatといった数百人規模のイベントにて登壇を行う傍ら、職能訓練校にてデザインの講師も務めている。

他の本ではあまり見なかった、色に対しての「感覚」と、それを説明する「理論」を実例を交えて仕事に応用できる良書。
こういう本ってwebサイトの実例が多い印象だったのですが、キチンと紙物・プロダクトも掲載されていて好印象。
また、あまり見たことの無いデザインが多かったのが良かったです。
資料とて購入しましたが、読み物としても色を基礎から学べる情報が載っているので、読み応えがありました。
色のトーン別でも検索できる索引も必見です。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天でチェックする方はこちら

6.いちばんよくわかるWebデザインの基本きちんと入門 – レイアウト/配色/写真/タイポグラフィ/最新テクニ Design&IDEA

書籍の内容

この1冊でWebデザイナーに必須の基礎知識が網羅できる!
これからはじめる人、一気に学びたい人へ一生使えるWebデザインのテクニック集!絶対に外せない!
レイアウト4つの原則とレスポンシブWebデザイン。今日から使える!配色の基本と、実例デザインの配色見本集。
ユーザーの心を動かす!写真と図版の使い方、タイポグラフィの選び方。
フレックスボックス、インタラクション、マーケティングの知識まで。

●これからWebデザインを学びたい初心者の方
●Webサイト制作に自信が持てない方
●1冊でWebデザイナーの基礎知識を網羅して学びたい方

著者紹介

伊藤庄平
株式会社シロクロ代表取締役。2010年に株式会社シロクロを設立。JAGDA正会員。Webサイトのディレクション・デザイン、WebサービスやアプリケーションのUIなどを手がける

益子貴寛
株式会社まぼろし取締役CMO。Webサイトの企画、設計、プロジェクトマネジメントから、リスティング広告運用、ソーシャルメディア運用、アクセス解析レポーティング、ランディングページ設計、SEOまで、Webマーケティング全般を担当。Googleアナリティクス認定資格者。Google AdWords認定資格者。社団法人全日本能率連盟登録資格「Web検定」プロジェクトメンバー

久保知己
HTML+CSSによるマークアップからCMSの構築まで、さまざまなWebサイトの制作に関わったあと、2014年に株式会社まぼろしに入社

宮田優希
システム開発会社に勤務したあと、専門学校でWebやグラフィックデザインを学びつつ、2014年よりWebデザイナーとして株式会社まぼろしに入社。Webサイトのデザイン業務のほか、HTML、CSS、JavaScriptを用いたフロントエンド実装などを担当している

伊藤由暁
ニュースサイトでCMS構築と開発・運用業務を6年経験したのち、HTMLとJavaScriptベースのブラウザゲーム開発に携わる。2015年5月に株式会社まぼろしに入社。実務ではインタラクティブなフィーチャーサイト、レスポンシブなコーポレートサイトなどを手がける

Webデザインの仕事の流れから、レイアウトや配色、タイポグラフィなど、デザインの基礎的な部分を半分以上かけて教えてくれます。残りの部分はコーディングについてと実際に公開した後の運用やマーケティングの部分をかるーく教えてくれます。

デザインの部分は実際のサイトもたくさん紹介していて参考になりますが、それ以外は本当にかるーくです。
コーディングに関してはflex-boxを使ったcssの新しい概念が紹介されていて、わかりやすく、非常に為になりますが、HTMLやCSSについての知識がないと全くわかりません。他にもJavaScriptについても解説されていますが、これも知識がないとチンプンカンプンです。そもそも何も知らない人に数ページでコーディングなどを理解させることなど不可能なのでこれはこの本が悪い訳ではないと思いますが、この部分は他の本で基礎的な知識を得てから読むことをお勧めします。
マークティング等に関しても本当に触りなので、実際に役に立つかは別の話です。ただ、これから勉強するときに理解しやすくはなると思います。

デザインについては良いと思いますが、他は本当に上っ面だけになります。
ただ入門書なので、Webデザインの全体像などを知るには適していると思います。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天koboでチェックする方はこちら

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

書籍の内容

HTTP、データ形式からシステム開発まで。知識ゼロから全体像をつかめる。
よく使われる用語の意味がわかる。技術のしくみがスムーズに学べる内容となっています。

・これからIT系の仕事に就かれる方
・これから社内の情報システムを担当される方
・Webシステムに関連する技術と実務を、幅広く、バランスよく学びたい方

著者紹介

小林 恭平
兵庫県立大学大学院工学研究科卒業。
大学時代はネットワークセキュリティを研究し、学習型IDSを研究開発。

NRIネットコム株式会社入社後は、アプリケーションエンジニアとして、業務系基幹システムの開発・運用に従事したのち、配置転換によりECサイト、証券システムなどのシステム基盤の設計・構築・運用業務に携わる。
オンプレミス、クラウド、モバイルアプリ、組み込みシステムなど幅広いプラットフォームでの経験あり。

このシリーズは全て購入しましたが、基本から実際の運用に関わる部分まで網羅されており、イメージを掴むのにとても長けています。構成も見開きで纏まっており優れています。これから勉強する方や全体像だけ知りたい方に非常にお勧めです。
深い知識が必要な方も、これを読んでから更に踏み込んだ書籍を読むと良いと思います。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天でチェックする方はこちら

8.初心者からちゃんとしたプロになるWebデザイン基礎入門

書籍の内容

WebデザインやHTML・CSSの学習を
「1日30分からはじめる」をテーマに、やさしくしっかり解説した書籍。

初学者の方が、プロのWebデザイナーを目指す上で必要となる
基本的な知識や技術を体系的に学べます。

著者紹介

栗谷 幸助
福岡県久留米市生まれ。「人と人とを繋ぐ道具」としてのWebの魅力に触れ、1990年代後半にWeb業界へ。
Webデザインユニットを結成し、Webの企画・デザイン・サイト運営などを手掛けながら、各地でWeb関連の講師を担当。
その後、デジタルハリウッドに所属し、現在はデジタルハリウッド大学・准教授として教育・研究活動を行う

おの れいこ
福岡県産フリーランスWebデザイナー。デジタルハリウッド大学非常勤講師。
西南学院大学卒業後、不動産系の企業に入社。その後Web業界へ転身し、
現在はWebやグラフィック制作を中心に個人やチームで活動中。
その他、勉強会やイベント企画・運営等、人と人をつなげる活動も行っている

講師業としてwebデザイン+フロントエンドを教えています。
「webデザイン」のタイトルがつく本書には、フォトショップやXD, Sketch等のデザインツールやデザインの作り方の話はなく、「webデザイン」に関連する記述としては「webサイトで使う素材や技術」の基礎知識中心なので、その点は注意です。
「webデザインを学んでみよう」と思った方がHTMLやCSSという技術の壁にぶち当たってしまったときに、まず手にとってみるとよいのが本書です。後半では実際にページを2つ作れますので、理論→実践の流れとしても良いと感じました。
教えている側としても、前半の理論パートでは逆引き的に学生さんに使ってもらいつつ、後半でテストがわりではないですが、チャレンジしてもらえる流れを作れるので、初学者・初心者におすすめしてみようと考えています。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天でチェックする方はこちら

9.Bootstrap 4 フロントエンド開発の教科書

書籍の内容

ウェブ開発の知識とコツをしっかりマスター。
CSSフレームワークやグリッドデザインの基本から、独自テーマによるカスタマイズ方法まで。
Bootstrap4の全機能がこの1冊でわかる!一歩先を目指すWebデザイナー&Webエンジニアにおすすめの1冊。

著者紹介

宮本麻矢
WINGSプロジェクト所属のフリーライター。専門学校在学中、Webデザインコンペで入賞したことをきっかけに、Webデザインの世界へ。卒業後、文具メーカーにてWeb開発を担当、2013年退職。現在はWebサイトの構築やコンサルティング業務を行うかたわら、執筆活動をしている他、職業訓練校やスクールにてWebやDTPに関するトレーニングを行っている

朝平文彦
神戸芸術工科大学大学院芸術工学研究科(総合デザイン専攻)修了。建築デザイン、都市計画コンサルタントを経て、現在はWebやグラフィックなどのヴィジュアルコミュニケーション分野のコンサルティング・制作業務を行っている。また、大学や職業訓練校の講師としてクリエイター育成にも尽力している

山田祥寛
フリーライター。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」の代表でもある

これ1冊にbootstrapの概念や頻繁に使う機能を網羅できている良書かと思います。
購入時の注意としては、HTMLとCSSの基本的なところは抑えていないといけません。
サンプルコードを写経して実際に確認してみるとこの本の通りにならないものがいくつかあります。
style属性に直書きで色や幅を微調整してやる必要があります。
サンプルコード内に誤植もいくつかあったのでよく確認する必要があります。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天でチェックする方はこちら

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

書籍の内容

いま制作現場でWebデザイナーに求められる広範な知識とスキルを網羅した、
これからプロになる人のために最適な入門書の決定版。
〈こんな方にお勧めです〉
・Webデザインに求められる知識をひととおり身につけたい
・配色やレイアウトといったデザインの基本を知りたい
・UXデザインやUIデザインの考え方を理解してステップアップしたい
・モーションなどの動的なデザインも手がけたい

著者紹介

境 祐司
インストラクショナルデザイナーとして講座企画、IDマネジメント、記事執筆、講演などを中心に活動。2012年5月、電子出版専門のパブリッシャーとして電子書籍のプランニング、情報設計、デリバリデザイン等を手掛ける。2014年、デジタル専門の一人出版社「Creative Edge School Books(クリエイティブエッジスクールブックス)」を立ち上げ、主にクリエイティブ系のオンライン学習コンテンツを企画・制作・販売し始める。2016年より、AI(人工知能)本格導入のためのトライアルを開始し、AIシステムやロボティクス関連の実証実験に参加。ニューラルネットワークを使った機械翻訳と画像置換処理(写真画像のイラスト表現など)を中心に小規模なテストを実施している。2017年より、Adobe Community Evangelistとして主にAdobe Sensei(AI)やAdobe XD関連のイベント登壇、講演などを行っている

小浜 愛香
アパレルからWeb業界へ転身し、地元制作会社での勤務を経てフリーランスとして活動中。Webサイト制作やアプリのUIデザインを主に、一部イラスト制作やグラフィック制作も行う

4原則や配色・トーンマナーなどのデザインの基本から、レイアウト、UI/UXデザイン、アニメーションといった今の時代に必要な視点とトレンドを、良質な参考サイトと共に説明しています。

広い意味でのデザインやレイアウトを学べる他書は、一般的に印刷物を前提にしているものが多く、またWebデザインに関する他書は、困った際のアイディア集といった側面や情報の古さが目立つものが多いなか、本書は”デザインの基礎”と“いまのWebデザインに必要なノウハウ”を体系的に一冊で学ぶことができる構成になっています。

さすがというべきか、当然というべきか、本全体のレイアウト、図のイラスト、説明の言葉選びも優れているのでおすすめできる一冊です。
引用:Amazonレビュー

Amazonでチェックする方はこちら
楽天でチェックする方はこちら

まとめ:webデザインの本おすすめ10冊

webデザインの本のおすすめをご紹介しました。
webデザインのスキルを一度覚えることでサイトデザイン変えたり
ランディングページのデザインを作成できます。

自分でデザインできるのはもちろん、クラウドソーシングなどで仕事を受注できますし
webデザインがわからない人に指導や代理で作成などしてみてもいいですよね。

自分のできるスキルとして収入を得ることが可能なので
覚えておくとプラスになる要素があります。

この記事をきっかけに、
webデザインの本を手に入れてご自身のスキルアップに繋がれば
私もとてもうれしく思います。

ここまでお読み頂きありがとうございました。

メルマガ登録者限定無料プレゼント配布中♪
無料プレゼントのお知らせ
👉無料プレゼントの受け取りはコチラをクリックorタップ

おすすめ記事

2019年12月売れ筋ビジネスマナー本おすすめ7選
2020年1月コピーライティングが学べる本おすすめ10選
2020年3月ビジネス文書の書き方おすすめ本10選

The following two tabs change content below.
渡辺
現在会社勤めしながら起業ラボのライターとして活動中。 起業ラボの記事内では、副業で稼ぐ為のヒントやネタなどを中心にお届けしています。

lonely-604086_1280詐欺師の信頼や説得のプロセス

woman-690118_1280カルト教団の洗脳技術

関連記事

  1. skyscraper-3184798_1280

    大富豪の投資術の口コミが散々な件 読む価値なし!は本当か?

    けんすけ@生涯現役~60にして立つ~定年後起業のけんすけです。私の詳しいプロフィールはこ…

  2. グリッドシステム グラフィックデザインのために

    2020年5月グラフィックデザインのおすすめ本人気ランキング【独…

    独学でグラフィックデザインを学んでみたい、グラフィックデザインってどんなことをするのか知りたい、…

  3. カーネギー話し方入門

    2019年2月売れ筋ビジネス心理学本おすすめ6選

    2019年2月の売れ筋ビジネス心理学本を厳選して6冊ご紹介。ビジネスで大きく結果を出す為に必…

  4. 51Tk90XSloL._SX346_BO1,204,203,200_

    テレワーク導入で使えるおすすめ本まとめ

    2020年企業にとって必須となっているテレワーク、と同時に「テレワークって急に言われても…

  5. いきなりはじめるPHP~ワクワク・ドキドキの入門教室~

    2020年PHP入門のおすすめ本・書籍8選

    PHPについて学びたい、webサイトのカスタマイズがしたい、在宅で仕事するスキルが欲しい。…

  6. 78c66c04f70a920c9dba904dc4c6ccfb_s

    2019年3月売れ筋ビジネス本おすすめ5選

    2019年3月の売れ筋ビジネス本を厳選して5冊紹介します。ビジネスで結果を出すことにフォーカ…

  7. 51cQGDU3iVL._SX338_BO1,204,203,200_

    2019年4月最新版!飲食店の店舗開業おすすめ参考書籍5選

    こんにちは。三橋優也です。今回は飲食店の店舗開業をテーマに考えてみます。現代では、ど…

  8. ブログ飯 個性を収入に変える生き方

    2019年2月ブログアクセスアップにおすすめの集客本10選

    2019年2月ブログアクセスアップにおすすめの集客本を厳選して10冊ご紹介。ブログアクセスア…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP