Webデザインの勉強におすすめの本総合18選|独学やスキルアップにおすすめ

CXBOTTLE編集部
25

Webデザインとは

Webデザインとは、PCやスマートフォンなどの画面に表示されるもののデザインを作成することです。

具体的には、企業などのホームページや商品紹介のWebサイトなどに、どのようなコンテンツを掲載するのか、配置や見出し、テキストの文字のフォントをどうするのか、画像や背景の色はどうするのかなどを決めます。

Webデザインの基礎が学べるおすすめ本7選

Webデザインに必要な知識や技術は、目で見た画面のデザイン知識や技術ばかりでなく、パソコンやスマートフォンのディスプレイにWebページを表示するための、HTMLやCSSというプログラミング言語についての知識、技術も含まれます。

これらの知識、技術を学ぶにはオンライン講座やスクールに通うなどの方法もありますが、先ず手軽にできる方法は本を読んでみることです。

さまざまな本が出版されていますが、以下に「Webデザインの基礎が学べるおすすめ本7選」を紹介します。


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

第1に紹介するのは『初心者からちゃんとしたプロになるWebデザイン基礎入門』という本です。栗谷幸助氏、おのれいこ氏、藤本勝己氏、村上圭氏、吉本孝一氏の共著書です。

初学者がプロのWebデザイナーになるためのステップとして、Webデザインの概論、デザインに必要なツール、素材、配色について学習し、次いでHTMLとCSSの基礎・実践を学習できます。単行本やKindle版共に出版されています。

2:なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

第2に紹介するのは『なるほどデザイン(目で見て楽しむ新しいデザインの本。)』という本です。著者は筒井美希氏です。

この本は目で見るデザインの制作で、プログラミングの領域は扱っていません。第1章:編集とデザインに関すること、第2章:デザイナーが使う道具、第3章:写真や色、言葉や文章などデザインの要素、という構成でKindle版と単行本の両方が出版されています。

3:Webデザイン必携。プロにまなぶ現場の制作ルール84

第3に紹介するのは『Webデザイン必携。プロにまなぶ現場の制作ルール84』という本です。北村崇氏と浅野桜氏の共著書です。

この本は、見た目のデザインの専門家が制作したデザインデータを、Webサイトとしてのデザインに作り直すことを依頼されたエンジニアが悩まなくて済むように、Webサイトのデザインに関するルールが掲載されており、Kindle版と単行本の両方が出版されています。

4:デザイナーになる!伝えるレイアウト・色・文字の大切な基本と生かし方

第4に紹介するのは『デザイナーになる!伝えるレイアウト・色・文字の大切な基本と生かし方』という本です。著者は永井弘人氏です。

書名からも分かるように、見た目のデザインの領域を扱っており、Webサイトとしてブラウザに表示させるためのプログラミングに関することは扱っていません。デザインに関する心構え、手法、事例を説明しており、Kindle版と単行本が出版されています。

5:Webデザイン・スタンダード

第5に紹介するのは『Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法』という本です。

境祐司氏、小浜愛香氏、森本友理氏、野田一輝氏、北村篤志氏、有吉学氏の共著書です。

この本では、スマートフォンが普及した現代に適したUI・UXデザインを念頭に置き、導入部のWebサイトの表示の仕組みでHTML、CSS、JavaScriptについても説明しています。

第1章でレイアウト、第2章で配色、第3章でUXデザイン、第4章でUI・グラフィックデザイン、第5章でモーションデザインについて説明しています。Kindle版と単行本の両方が出版されています。

6:Webデザイン良質見本帳

第6に紹介するのは『Webデザイン良質見本帳』という本です。

著者は久保田涼子氏です。

デザインのアイデアが湧かない、クライアントと打ち合わせの際に見本が欲しいといった要望に応えるため、良質なデザインの見本例をジャンル別に分けています。導入部でWebデザインの基礎的な知識の説明があります。

第1部で与える印象で分けたデザイン、第2部で配色で分けたデザイン、第3部で業種・ジャンルで分けたデザイン、第4部でレイアウト・構図で分けたデザイン、第5部で素材・フォントで分けたデザインを集めており、kindle版と単行本が出版されています。

7:Webデザインとコーディングのきほんのきほん

第7に紹介するのは『Webデザインとコーディングのきほんのきほん』という本です。瀧上園枝氏著、浜俊太郎氏監修です。

この本の意図は、デザインとコーディングが分業化されているWebデザイン制作の現状を踏まえて、両方の知識を共有することの必要性を説くことです。

第1部ではデザインということの基本、第2部ではWeb制作の基本としてHTML、CSS、JavaScriptの説明、第3部ではWebサイトの制作についての説明をしています。Kindle版と単行本の両方が出版されています。

Webデザインで重要なHTML&CSSを学べるおすすめ本4選

上には初学者向けに「Webデザインの基礎が学べるおすすめ本」を7冊紹介しましたが、見た目のデザインに重点を置いたものが中心でした。

しかしWebデザインでは、コーディングの段階でHTMLとCSSというプログラミング言語の知識が重要です。

以下に「Webデザインで重要なHTML&CSSを学べるおすすめ本4選」を紹介します。

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

第1に紹介するのは『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』という本です。著者はWebクリエイターボックスのMana氏です。

Web、HTML、CSSの基本事項から始めて、サイト制作の段階まで書かれていることが特徴です。レスポンシブの書き方や、FlexboxやCSSグリッドについても書かれています。初心者から中級者向きで、Kindle版も単行本も両方出版されています。

2:今すぐ使えるかんたんEx HTML&CSS 逆引き事典

第2に紹介するのは『今すぐ使えるかんたんEx HTML&CSS 逆引き事典』という本です。

著者は大藤幹氏です。

この本の特徴は、HTMLやCSSに関して困った時や、何かやりたいことが出て来た時に、すぐに使える逆引きタイプの参考書であることです。項目はやりたいこと別にまとめられています。初心者~中級者向きで、Kindle版も単行本も両方出版されています。

3:今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典

第3に紹介するのは『今すぐ使えるかんたんPLUS+HTML5&CSS3 完全大事典』という本です。著者は中島真洋氏です。

TML5の要素およびCSSのプロパティについて解説した本です。例えば、HTML編では、HTMLの基礎、基本構造、セクション、テキスト、テキストの装飾と強調などの枠を設けて項目がまとめられています。kindle版と単行本が両方出版されています。

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

第4に紹介するのは『HTML&CSSとWebデザインが1冊できちんと身につく本』という本です。著者は服部雄樹氏です。

HTMLばかりでなく、Webデザイン全体の基礎を知りたいという人に適した本です。レスポンシブデザインについてもしっかり書かれています。未経験でWebデザイナーを目指す人を対象にした初心者~中級者向けで、Kindle版も単行本も両方出版されています。

Webデザインで重要なPhotoshop・Illustratorを学べるおすすめ本3選

Webデザインの画像編集の際によく使われるツールに、PhotoshopとIllustratorがあります。Photoshopは画像を複雑に処理したり、軽い加工や補正を施したりする時に使われます。Illustratorはテキストや図形のレイアウトを直感的にデザインする時に使われます。

この2つのツールを本で学ぶために「Webデザインで重要なPhotoshop・Illustrator を学べるおすすめ本3選」を紹介します。

1:世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書

第1に紹介するのは『世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書』という本です。

黒野明子氏、庄崎大祐氏、角田綾佳氏、森知恵氏の共著書です。

Photoshopやllustratorの基礎的な使い方はできるが、実際にWebデザインの制作方法がまだよく分かっていないというレベルの読者を対象にしています。レッスンファイルもダウンロードできます。Kindle版と単行本の両方が出版されています。

2:デザインの学校 これからはじめる Illustrator & Photoshopの本

第2に紹介するのは『デザインの学校 これからはじめる Illustrator & Photoshopの本』という本です。黒野明子氏著、ロクナナワークショップ監修です。

この本の腰帯に「一番やさしいデザインの入門書」と書かれているように、初心者を対象とし、IllustratorとPhotoshopについての知識と操作の仕方を身につけることを目的としています。Kindle版と単行本の両方が出版されています。

3:WebデザインのためのPhotoshop+Illustratorテクニック

第3に紹介するのは『WebデザインのためのPhotoshop+Illustratorテクニック』という本です。著者は瀧上園枝氏です。

Webデザインの初心者やWebデザインを手掛けたいと望むグラフィックデザイナーを対象にして、Webデザインの各段階に分けてPhotoshopとIllustratorの使い方、ノウハウなどを解説しています。単行本のみが出版されています。

Webデザインの参考にしたいおすすめの本4選

これまで主に、初学者を対象にした本を紹介して来ました。

現役のWebデザイナーがスキルアップをするためにも、参考書が役に立ちます。ここからは「Webデザインの参考にしたいおすすめ本4選」を紹介します。

1:配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版]

第1に紹介するのは『配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版]』という本です。著者は桜井輝子氏で、Kindle版と単行本が両方出版されています。

盛りだくさんの配色のサンプルを提供しており、これらの中から欲しいと思うイメージを取り出して利用できます。

2:[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書

第2に紹介するのは『[改訂版]WordPress 仕事の現場でサッと使える!デザイン教科書』という本です。中島真洋氏著、ロクナナワークショップ監修で、Kindle版と単行本が両方出版されています。

世界の約3割以上のWebサイトの構築に用いられている、WordPressの使い方について詳述した技術書です。普通のWebサイトの構築では、WordPressの基本的な機能を使うだけで十分ですが、さらに複雑な機能も使えるようになることを目指しています。

3:気づけばプロ並みPHP 改訂版

第3に紹介するのは『気づけばプロ並みPHP 改訂版』という本です。谷藤賢一氏著、徳丸浩氏協力でできた本で、Kindle版と単行本の両方が出版されています。

ゼロの段階から出発して、プログラミングによってシステムを作り上げる、スクラッチ開発という操作ができる段階に至ることを目指しています。プログラミングの基礎をしっかり勉強したい人におすすめの本です。

4:確かな力が身につくJavaScript「超」入門 第2版

第4に紹介するのは『確かな力が身につくJavaScript「超」入門 第2版』という本です。著者は狩野祐東氏で、kindle版と単行本の両方が出版されています。

スマートフォンに適したWebサイト作成に必要な、JavaScriptを使えるようにすることを目的としています。プログラミングの経験がない人も対象にしており、初歩から出発できるように書かれています。

Webデザインの本は電子書籍もおすすめ

いろいろなWebデザインの参考書を紹介して来ましたが、その内のほとんどは、Kindle版という電子書籍と、単行本の紙書籍の両方が出版されています。

電子書籍には、持ち運びしやすい、置き場所を多く取らない、価格が紙書籍より安いなどのメリットがあるためおすすめです。

たくさん本を読んでWebデザインを学ぼう

Webデザインを勉強するには、オンライン講座を受講する、スクールに通うなどの方法もありますが、マイペースで手軽にできる方法は本を読むことです。Webデザインの本はいろいろなものが出版されています。

紹介した本のほとんどが、初歩の段階から始めて高度なスキルが身につく段階まで到達するように書かれています。これらの本をたくさん読んで、Webデザインの確かな知識とスキルを身につけましょう。

LPやWebデザインを効率的に検索するには、たくさんのサイトを検索して参考になるデザインを探すのは時間がかかって大変です。

そこでおすすめなのが、LeanGoの提供する「Dejam」です。

https://leango.co.jp/dejam/

「Dejam」は、豊富なデザインデータベースを無料で公開している、LP・Webデザインの参考事例サイトです。

業種や画面名などでデザインを検索することができます。デザインを検索したい方は活用してみましょう。

記事スコア: 25

CXBOTTLE編集部の他の記事も読む

  • LPとは?運用のメリットとデメリット・特徴などを細かく解説!

    LPとはLPとは、ランディングページのことを指しています。ランディングページとは、検索結果や広告からの訪問者が最初にアクセスするページのことを言います。ちなみに、着地する(land)という意味からこの名前がついています。LPには、広義の意味合いと狭義の意味合い 続きを読む

  • プロセスマネジメントの意味|導入する利点や結果を出すコツとは?

    プロセスマネジメントの意味「プロセスマネジメント」という言葉をよく耳にすることでしょう。プロセスマネジメントは、結果を最大化させると言われています。このコラムではプロセスマネジメントの基本について解説し、その成功事例を紹介します。プロセスマネジメントが必要な理 続きを読む

  • LPの制作会社おすすめ12選|メリットやデメリット・依頼時の注意点を紹介!

    LP(ランディングページ)とは?LP(ランディングページ)は、もともと検索や広告経由で最初に見るページで、ホームページに着地するイメージからこのように呼ばれるようになりました。しかし、一般的には、縦長の情報量が多いページのことをLPと呼ぶことが多いです。商品の 続きを読む

  • LPの作り方の8つの手順とは?構成の要素や注意したいポイントも解説

    LPとはどのようなものかLP(ランディングページ)とは、集客を目的とした縦長1枚で完結するWebページのことです。Webページと聞くと、「TOPページ」「会社概要」「商品紹介 」「問い合わせ」等、複数のページから成るホームページを連想する方も多いでしょうが、そ 続きを読む

  • デザインの参考になるギャラリーサイト16選│自社にぴったりなLPの作り方も

    自社にぴったりなLPを作成する4つのコツLPとはランディングページのことです。最初にユーザーがアクセスするため、直訳すると着地ページという意味になります。サイトの顔となるLPは自社商品やサービスの特徴や利点が伝わりやすく、ユーザーの心をつかむデザインにするのが 続きを読む

  • 参考にしたいWebデザインのポートフォリオ22選|作成のポイントも詳しく説明

    WebデザインのポートフォリオとはWebデザインのポートフォリオとは、過去の作品を集めたWebサイト・ファイルのことを指します。自分の感性や個性をアピールすることも可能です。具体的には、クラウドソーシングで受注した案件や企業で残した実績を掲載します。ポートフォ 続きを読む

  • おすすめWebデザインのテンプレート41選|無料と有料のものを幅広く紹介

    Webデザインのテンプレートとは?Webデザインのテンプレートとは、Webサイトのデザインやレイアウトの雛形のことです。サイトの用途や予算に合わせた、様々なテーマやパッケージのものが販売されており、未経験者でも簡単に自分のサイトを作成できます。しかし、ひとくち 続きを読む

  • 無料で使えるWebデザインツール11選!選ぶ際のチェックリストも紹介

    Webデザインとは?Webデザインは、Web上に存在するホームページを制作することを意味します。他のデザインの仕事とは違い、Webデザインにはデザインだけではなくホームページとして表示するためのコーディングが必要です。Webをデザインするときは、コーディングを 続きを読む

  • Webデザイン業務が副業におすすめな8つの理由|在宅で副収入を得よう

    副業フリーランスの市場規模企業の副業解禁にも相まって、副業フリーランスの市場規模は、年々増えています。2020年に発生したコロナウイルスの発生も相まって、ここ数年で人々の働き方に対する意識が大幅に変化しました。また、ランサーズによる、フリーランス・副業・複業ワ 続きを読む

  • Webデザインの参考になるサイト37選|流行りのデザインの動向についても解説

    Webデザインの幅を広げる方法とはWebサイトを作る上でWebデザインのスキルは大変重要です。デザインによってWebサイトの見やすさ、企業やサービス内容の伝わりやすさ、ユニークさなど、見る人に与える印象が大きく変わります。多種多様なサイトデザインを研究すること 続きを読む

  • LPデザインの参考おすすめ17サイト!成功に導くポイント・見せ方のコツも紹介

    LPデザイン決定までの5つの流れLPとはランディングページの略で、Webサイトにおいてユーザーのアクションを誘導するためのページです。具体的には商品紹介ページやサービス紹介ページなどがLPになります。LPのクオリティはサイト売り上げに大きく影響するため、LPは 続きを読む

  • Webデザインを独学で学ぶには?6つの勉強方法や学習手順を解説

    独学でもWebデザインを学ぶことはできる優秀なWebデザイナーは引く手あまたで、高収入が得られる場合もあります。そのようなWebデザインを学んでみたいという人も少なくありません。しかし、専門のスクールに通わなければ学べないのではと考えている人も多くいるでしょう 続きを読む

  • BPMを導入するメリットを解説|必要な理由や海外との違いとは?

    BPMとはBPMとは「Business Process Management」を略した言葉で、業務管理手法の1つです。BPMは業務の流れをモデル化することで課題の分析を行い、課題解決のための新しい業務プロセスを作ることで、継続的に業務改善を行うというものです。 続きを読む

  • LPを構成する大切な10個の要素をご紹介|基本を押さえよう!

    LP(ランディングページ)の役割LP(ランディングページ)の役割は、webページ上の広告をクリック・タップして誘導された最初のページに対して効果的に商品やサービスの宣伝をする重要なものとなります。来訪してきたユーザーに対して購入意欲・資料請求・問い合わせといっ 続きを読む

  • 2021年Webデザインのトレンド15選|アニメーションを駆使したものも登場

    2021年のWebデザインのトレンドの傾向2021年はコロナウィルス蔓延による影響で、外出自粛やリモートワークが促進され、より長い時間を家で過ごす人が急増しました。必然的に人々がWebサイトを見る時間も長くなり、Webサイトを工夫することによる効果は大きくなっ 続きを読む

  • Webデザイン初心者におすすめの勉強法4選|おすすめの本15選も紹介

    Webデザインとは?ホームページ作成やデザインに興味がある人は、Webデザインを学んでみたいと思う人も多いでしょう。そもそも、Webデザインとはどんなことをするのでしょうか。Webデザインとは、パソコンやスマホなどのネット上に掲載されるホームページの文字や色の 続きを読む

  • Taskworldが持つ特徴8つとメリット4つ!料金プランや使い方も解説

    TaskworldについてTaskworldとはタスク管理ツールです。その特徴は充実した機能と、洗練され使いやすくデザインされたひとつひとつのツールの使い易さです。 機能性と使いやすさの2つを追求した、総合タスク管理、プロジェクト管理ツールとしてTaskwor 続きを読む

  • QuickSolutionの4つの特徴|7つの導入メリット・料金プランを紹介

    QuickSolutionとはQuickSolutionは、日本の産学官連携による共同研究によって開発された純国産の企業内検索ソフトです。QuickSolutionのコア・アルゴリズムは豊橋技術科学大学で開発され、その後、住友電工・住友電工情報システムが評価や 続きを読む

  • AdFlowとは?AdFlowの特徴7つに制作に必要な搭載機能7つを紹介

    AdFlowとは?AdFlowは、創業の2007年からインターネット広告を中心に10万本を超える広告クリエイティブを手掛けてきた株式会社クリエイターズマッチが、自社の業務を効率化するために開発した、制作現場から生まれたプロジェクト管理ツールです。アパレル・化粧 続きを読む