あなたのWebデザインをレベルアップさせる書籍【厳選17冊】

Photo by Marcy Leigh

こんにちは。谷口です。

現在、Webデザイナーとして働いている皆様はどんな書籍を読んでいますか？

最近は、基礎的なデザインの勉強をしてきた方だけでなく、もともとITエンジニアとしてWebサービスの開発をする中で、Webデザインもすることになったという方も多くいらっしゃるかと思います。

今回は、Webデザインの仕事をしている方々が、デザインをするに当たってジャンルごとに役立つ書籍を17冊ご紹介いたします。

目次

　・IA、UI、UX
　・レイアウト
　・配色
　・HTML/CSS
　・CMS組込み
　・デザイン技法

■IA、UI、UX

◆1.IAシンキング Web制作者・担当者のためのIA思考術

IAシンキング Web制作者・担当者のためのIA思考術

IAやUXについて何となく理解し、大事なのはわかっているけども、具体的にどうするといいのかがいまいち把握できていない……といった方におすすめの書籍です。IAやUXといった正解のないものについて、基本知識・演習問題・ケーススタディを通して学ぶことができます。

◆2.誰のためのデザイン?―認知科学者のデザイン原論

誰のためのデザイン？　増補・改訂版　―認知科学者のデザイン原論

認知心理学者であり、ヒューマンインタフェース研究の草分け的存在の著者が書いた書籍です。普遍的な事例が多く掲載されており、「ユーザーのために何かを作る」という仕事をしている皆さんにおすすめできる一冊だと思います。

◆3.ほんとに使える「ユーザビリティ」

ほんとに使える「ユーザビリティ」 -より良いデザインへのシンプルなアプローチ

UXデザインの第一人者エリック・ライス氏が、多くの事例をもとにユーザビリティの問題を洗い出し、それを解決するための技法をまとめた実践的な書籍です。ライス氏がこれまでに遭遇したユーザビリティが足りない実例が数多く掲載されています。

◆4.インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

長年インタフェースデザインを研究してきた心理学者である著者が、「よりよいデザインに役立つポイント」をWebサービスやアプリのデザインに応用する形でわかりやすく解説しています。チーム内でのコミュニケーションについてなど、チームでデザインをする際の指摘なども記載されています。

■レイアウト

◆5.Webレイアウト見本帳

Webレイアウト見本帳 (MdN DESIGN BASICS)

「コンテンツレイアウトの基本」や「WEBの特性とレイアウト」、「コンテンツ作成技術とレイアウト」といった章立てから、レイアウトやコンテンツ構成の考え方が解説されています。サンプル図が多くて分かりやすく、Webデザインをより効果的にする方法を学べます。

◆6.ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎

ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎

Webデザインの実例からレイアウトを学ぶことができます。レイアウト、文字、配色などのデザインルールを、豊富なサンプルをもとに解説した書籍です。

■配色

◆7.ウェブ配色 決める! チカラ

ウェブ配色 決める! チカラ - 問題を解決する色彩とコミュニケーション

Web配色の第一人者の著者が、Webサイトの配色テクニックやコミュニケーション術について、「知識編」「実践編」「応用編」の章立てから整理した一冊です。「テキストを読ませるための配色とは?」「写真をしっかりと見せたい」など、やりたいことから逆引きで調べることもできます。

◆8.ウェブ配色 コーディネートカタログ

ウェブ配色 コーディネートカタログ

200以上のWebサイトのサンプルを色相別、印象別、目的別に紹介しています。配色のアイディアやヒントを探したり、配色理論を学んだりすることができます。

■HTML/CSS

◆9.レスポンシブWebデザイン「超」実践デザイン集中講義

レスポンシブWebデザイン「超」実践デザイン集中講義

レスポンシブデザインとは、Webページをパソコンやスマホ、タブレットといった異なる機器で見たときに画面サイズやレイアウトなどを最適な状態で表示できるように複数のHTMLファイルやCSSファイルを用意する手法のことで、最近は多くのWebサービスで採用されています。

こちらの書籍ではレスポンシブ対応を行うのに必要な知識が詰まっており、サンプル例も掲載されていますので、HTMLの基礎的な知識がある方であれば、手を動かしながらレスポンシブデザインについての理解を深めることができます。

◆10.これからの「標準」を身につける HTML+CSSデザインレシピ

これからの「標準」を身につける HTML+CSSデザインレシピ (Web Designing Books)

スマホにも対応したレスポンシブWebデザインについてや、CSSフレームワークを利用したページレイアウトの方法等が掲載されています。前半はパーツ別のレシピ集のような形にもなっているので、リファレンス本としても使えます。

◆11.Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

BootstrapとはCSSフレームワークの一つで、自分で逐一CSSを記述しなくてもWebサイトを作成することができ、多くのWebサービスにおいて使われています。

本著は弊社でも購入しましたBootstrapガイドです。Bootstrapを使うに当たって必要な知識が一通り丁寧に解説されていますので、「HTML/CSSは使えるんだけど、今度業務で初めてBootstrapを使うことになったぞ……」という方にもおすすめです。

◆12.Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

Sassとは、CSSの拡張言語で、簡単に言うとCSSを効率よく作成することができる言語です。

こちらはSassを使うに当たってOSごとのインストール方法からかなり丁寧な解説があり、やりたいことから調べられるリファレンスもついた大変親切な書籍です。「CSSは使えるんだけど、業務でSassを使うことになったぞ……」という方にもおすすめです。

◆13.Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

上記のSassの教科書と同様のシリーズになります。

「CSSならある程度使える！」という方でも、後からコードを見て「煩雑で分かりにくい……」「修正しにくい……」と思った経験がある方はいらっしゃるかと思います。本著ではそういった事態に陥らないために、「ちゃんとCSSを書く」ための考え方が解説されています。

■CMS組込み

◆14.Movable Type 6 本格活用ガイドブック

Movable Type 6 本格活用ガイドブック (Web Designing BOOKS)

CMS（コンテンツマネジメントシステム）とはWebブラウザや専用アプリでHTML/CSSWebを使わずにWebコンテンツを管理できる仕組みのことで、その中の一つにMT（MovableType）があります。

本著はMT6.0についての解説があり、Webサイトにおいて6.0を活躍させるための手引書となっています。

◆15.基礎からのWordPress

基礎からのWordPress 改訂版 (BASIC LESSON For Web Engineers)

基本的なHTML/CSSの知識は習得できたので、今後は実務でWordPressの仕組みを理解して応用していきたいという方にぴったりな一冊です。WordPressで使うことの多いPHPの構文についての解説もあります。

■デザイン技法

◆16.デザインする技術 ～よりよいデザインのための基礎知識

デザインする技術 ~よりよいデザインのための基礎知識

絶版ですが中古で買えます。「図」「文字」「色」などといった章立てをもとに、Webデザインに限定されないデザイン技法が多々紹介されています。「デザインというのはセンスや感覚によるものだと思っていた」という方でも、デザインを論理的に学べる一冊です。

◆17.デザインの授業　目で見て学ぶデザインの構成術

デザインの授業　目で見て学ぶデザインの構成術

Webデザインに特化した書籍ではありませんが、様々な作品から「良いデザイン」は「なぜ良いのか」「どこが良いのか」が解説されており、良いデザインについてを論理的に知ることができます。Webに限らずビジュアルのデザインに携わる人であれば、論理的にデザインを組み立てる力を身につけるためにおすすめの一冊です。

■まとめ

本編では直接Webデザインやコーディングに関する書籍をご紹介してきましたが、Webデザイナーの業務には、受発注やディレクション、客先とのコミュニケーションなど、直接のWeb制作以外にも様々な業務が発生します。その際に役立ちそうな書籍も最後にご紹介しておきます。

Web業界 受注契約の教科書 Textbook for Business Contracts in the Web Industry

Webデザイン・コミュニケーションの教科書

Webデザイン受発注のセオリー デザインコントロールが身につく本

paiza運営元のギノでは、現在paizaを一緒に作ってくれる【Web・UIデザイナー/ディレクター】を募集しています。受託でWebサービスを制作していたけど、自社サービスの制作に興味がある方、Webデザインを極めてよりよいサービスを作っていきたい方、大歓迎です！！
www.gi-no.jp

---

paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

「paiza転職」は、自分のプログラミング力が他社で通用するか（こっそり）腕試しができる、IT／Webエンジニアのための転職サービスです。プログラミングスキルチェック（コーディングのテスト）を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。

まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。

また、paiza転職をご利用いただいている企業の人事担当や、paiza転職を使って転職を成功した方々へのインタビューもございます。こちらもぜひチェックしてみてください。
詳しくはこちら