こんな疑問に答えます。
記事の内容
- Webデザインのおすすめ本4選
記事の信頼性
- 制作会社からサイト製作（WordPress案件）を請け負っています。デザインからコーディングまで一貫して対応しています。
- Webサイト製作のフリーランスエンジニアとして活動中。月収は40万円程度（2020年3月）
- 30歳文系未経験から3ヶ月間の独学でプログラミングを習得。
こんにちは、フリーランスエンジニアの涼です
今回、Webデザインを独学する上でおすすめの本を紹介します。ぜひご覧ください。
Webデザインのおすすめ本4選【初心者向け】
おすすめ順に紹介します。
Webデザイン必携。プロにまなぶ現場の制作ルール84
おすすめ度：
Webデザインの実務のポイントがたくさん盛り込まれている本です。
例えば、ハンバーガーメニューのサイズは縦横44px以上にする、PCサイトは画面を指でタップされることを考慮する、Webサイトのデザインの推奨サイズは○○など。
1ページあたりの情報の質が高いです。
納品データの作り方やPhotoshopとIllustratorの上手な使い方も書かれてます。
「コーディングに困るデザインデータ」という章が特によかったです。コーディング経験がないデザイナーが見るとためになります。
Webデザインの案件を受注する前に、一度読んでおきたい本です。失敗を未然に防げます。
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
おすすめ度：
415個のWebサイトを様々な視点から解説した本です。
例えば、「男性的なデザインのサイト」「レストランのサイト」「青色を基調とした配色のサイト」といった視点です。
「男性的で力強い感じのデザインでお願いってクライアントから言われたけどどうしよう」って時に使えます。
手元に1冊置いておくと重宝します。
本の前半では、Webデザインの基礎知識がコンパクトにまとめられてます。
自分の場合、デザイン案を作成するときはこの本で参考になる箇所がないか確認してます。
デザイン入門教室[特別講義] 確かな力を身に付けられる
おすすめ度：
Webデザインに特化した本ではなく、デザイン全般に関する本です。
ポスター、チラシ、企画書、プレゼン資料、ビジネス文書など、サイト製作以外でも活用できる内容になってます。
デザインの悪い例、いい例の両方が書かれてます。「デザイン1つでここまで印象が変わるんだ」と驚くはずです。
デザインの基本（レイアウト、写真、フォント、配色など）が網羅されているので、入門書として向いています。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
おすすめ度：
カフェのWebサイトをコーディングしながら、HTML・CSS、Webデザインを学べる本です。
Webデザインというよりは、コーディングをできるようになりたい方向けです。
コードを書けようになれば、実装が難しいデザインや、実装に手間がかかるようなデザインを作成することがなくなります。
Webデザインもコーディングも両方できるようになりたい方は本書が向いています。
【補足】UXを学べる本を紹介します
UXを学びたい方向けにおすすめの本も紹介します。
UXと理論で作る Webデザイン: デザイナーでなくてもわかる
おすすめ度：
UX（ユーザ体験）とUI（ユーザインターフェース）について書かれた本です。
Webサイトに特化してUXとUIを解説した本はなかなかないので貴重です。
実際のコーポレートサイトのUIを取り上げて解説してるのもいいです。例えば、みずほ銀行のカードソーティング、Amazonの在庫情報のデザインとか。
UX、UIを勉強したいWebデザイナーは必読の本です。UX初心者でもすいすい読めます。
ちなみにKindle Unlimited会員は無料で読めます。無料なので期待せずに読んだら、普通にクオリティ高かったです。
「ついやってしまう」体験のつくりかた 人を動かす「直感・驚き・物語」のしくみ
おすすめ度：
任天堂の玉置という方が書いた本です。Wiiの企画担当、Wiiのエバンジェリストと呼ばれています。
任天堂のゲームにハマってもらうために、どのように体験を設計をしたかが書かれてます。
ゲーム好きな人（特にドラクエ、マリオが好きな人）にはたまらない本です。
「ここまで考えて作られてたんだ！」とびっくりします。
【UX】「ついやってしまう体験の作り方」を読んだ
ドラクエにぱふぱふがある理由
→シリアスな場面が続いた後に下ネタ。予想を裏切るカジノがある理由
→長い冒険でプレイヤーは疲れてる。あえて休憩させる結婚イベントがある理由
→嫁を1人選ばせて、ユーザの性格を引きずり出すUXはおもしろい
— 涼🇹🇭Web系フリーランス (@ryoblog2) February 5, 2020
まとめ
今回、Webデザインを独学する上でおすすめの本を紹介しました。
ご参考になれば幸いです。
ぜひTwitterのフォローもお願いします！
-
-
Photoshopでデザインカンプを作る方法【Udemyの講座を紹介】
Photoshopでデザインカンプを作れるようになりたい。おすすめの方法があれば教えて。（コーダー） このような疑問に答えます。 記事の内容 Photoshopでデザインカンプを作る方法をUdemyで ...
続きを見る
