いちばんよくわかるWebデザインの基本きちんと入門 読んでみた。
［記事公開日］2017/10/03
［最終更新日］2024/08/20
Amazon：webデザイン
https://amzn.to/46QdXrt
いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA) 単行本 – 2017/2/25
伊藤 庄平 (著), 益子 貴寛 (著), 久保 知己 (著),
目次
いちばんよくわかるWebデザインの基本きちんと入門 読んでみた。
CHAPTER 1 Webデザインの基本
CHAPTER 2 レイアウト
CHAPTER 3 配色
CHAPTER 4 写真と図版
CHAPTER 5 タイポグラフィ
CHAPTER 6 HTML5とCSSS3
CHAPTER 7 インタラクション
CHAPTER 8 運用とマーケティング
過去に出た本とかは、紹介されてる内容が古く、
本に書かれている、サンプルで紹介されてるURLにサイトにアクセスすると、表示がされないとか、
サイトがリニューアルされてて、デザインが変わってる場合もあります。
もっと早く出てほしかった本かもです。
本書は、これからWebデザインを学びたい初心者の方
今、Webデザイナー・クリエイターが身に付けておくべき基礎知識とは、
Webサイト制作に自信が持てない方
企画、デザイン、フロントエンド、運用面まで幅広く取り上げています。
1冊でWebデザイナーの基礎知識を網羅して学びたい方
レイアウト・配色・写真図版・書体などWebのデザインの説明。
HTML5とCSS3・インタラクション・運用とマーケティングなどWeb技術に関連する内容まで
これからのWebクリエイターが身に付けておくべき基礎知識を
本質部分から実践部分まで、きちんと学んでいくWebデザインの入門書で、一生使えます。
本では、いろいろ解説されています。
Web系の仕事に就きたい人は
1冊持っておくと、忘れないために、いいかもです。
この本は、今年に発売されたので、新しいとは思いますが
本内で、載ってるNormalize.cssはバージョンv5ですが、
今ではバージョン7です。
Normalize.css
https://necolas.github.io/normalize.css/
Web系の技術って、次々と新しいものに変わるし、
いろいろと学ぶのは大変です。
基本的な部分は、変わらないと思いますが。
Webスクールに通ってた時に、
課題で、サイト制作などがあり、
ワイヤーフレームやデザインカンプを作ったはいいが、
それを自分の思った通りにコーディングして作れないし、
インターネットで検索しての作業を、みんなしてた思い出。
また、Webサイトとかをコーディング中、講師に聞くと、最初からし直した方がいいんじゃないと言われたりした。
コーディングとかしてないと、タグとか忘れてしまいます。
Adobeとかでも、次々と、便利ないろんなソフトが登場するけど、
出るたびに操作方法など覚えるのも面倒かも。
今では、Adobe製品は月額費用がかかるし。
使えば、便利なんだろうけど。
未経験でも、読めばすぐに始められる! Web系フリーランス働き方超大全 単行本 – 2022/10/4
デイトラ (著)
この一冊で「WEB系ジョブ」に必要な情報がすべて手に入る!
Webデザイン系の本って、いろいろあります。
自分が、Webスクールに通って時は、Webデザインが1冊で学べる、このような内容の本はなかったです。
第2版が発売。
ですが、現在では内容が古いです。
これからはじめる人、
一気に学びたい人、
Webデザインのテクニック集など、いろいろと解説してるので、おすすめな本です。
Webデザインの基本きちんと入門[第2版] 単行本（ソフトカバー） – 2021/8/19
伊藤 庄平 (著), 益子 貴寛 (著), 宮田 優希 (著),
これからはじめる人、一気に学びたい人へ
一生使えるWebデザインのテクニック集!
初心者からちゃんとしたプロになる Webデザイン基礎入門 改訂2版 単行本（ソフトカバー） – 2023/9/22
栗谷幸助 (著), 相原典佳 (著), 藤本勝己 (著), 村上 圭 (著), 吉本孝一 (著)
WebCamp
無料体験会実施中
Webスキルを習得！大人気テックスクール
短期で学びたい方のための講座です。
1ヶ月で集中して一気に学ぶことができます。
プログラミングやデザイン未経験者でも安心のサポート体制をご用意しています。
世界一わかりやすいHTML&CSSコーディングとサイト制作の教科書[改訂2版] (世界一わかりやすい教科書) 単行本（ソフトカバー） – 2022/1/22
赤間 公太郎 (著), 狩野 咲 (著), 鈴木 清敬 (著)
オノマトペでピンとくる! ひらめき配色図鑑 単行本（ソフトカバー） – 2022/2/8
FLAMINGO STUDIO INC. (編集)
ワクワク、きゅんきゅん、ドキドキ、しっとり…
「この感覚、色で表現するには何色がいいだろう?」
そんな悩みがすぐに解決する!
思わずクリックしたくなる バナーデザインのきほん 単行本（ソフトカバー） – 2022/2/9
カトウ ヒカル (著)
バナーデザインで困った時は
この1冊で解決!
バナーは情報量の多いWeb上に掲載されるので
「パッと一目で情報を伝える」必要があります。
なので、目に留めてもらう工夫が必須!
ネットに詳しいだけでネットマーケ担当者になってしまった人が本気でマーケターを目指す本 単行本（ソフトカバー） – 2021/8/21
佐藤 昌弘 (著)
マーケティングにネットは避けて通れない必須の時代
今は、1カラムのサイトが多いです。
Amazonサイトも3カラムから1カラムに。
昔はPCからサイトを閲覧してた。スマートフォンが普及してから、
現在では、スマートフォンでサイトを見るので、1カラム（1ペラ）が支流
Webデザイン良質見本帳[第2版] 目的別に探せて、すぐに使えるアイデア集 単行本（ソフトカバー） – 2021/12/22
久保田 涼子 (著)
35000部突破した大ベストセラーが
最新のWebデザインの見本集を盛り込んで4年ぶりの大改訂!
【特典PDF付き】現場のプロから学ぶ CSSコーディングバイブル (Compass Web Development) 単行本（ソフトカバー） – 2021/8/27
田村 章吾 (著)
本書では、業務でWebサイトをコーディングしていく人を対象として、必要なCSSの知識、CSS設計の基本、CSSを効率的に書くためのSassの基本を解説しました。後半はサンプルサイトのコーディングプロセスを通して、実践的な制作ノウハウを学びます。
初心者からちゃんとしたプロになる Adobe XD基礎入門〈Webデザイン、ワイヤーフレーム、プロトタイピング〉 単行本（ソフトカバー） – 2021/9/22
相原 典佳 (著), 沖 良矢 (著), 濱野 将 (著)
制作フェーズに応じたプロの使い方がわかる！
Webサイトやモバイルアプリの分野で広く使われてるデザイン・プロトタイピングツールであるAdobe XDの入門書
教科書では教えてくれないHTML&CSS 単行本（ソフトカバー） – 2021/7/17
狩野 祐東 (著)
各種講座や書籍でHTML&CSSの学習を終えても、実際の現場では、求められるレベルの業務をこなせない人が少なくありません。デザイナーから渡されたデザインの全体を把握・解釈して、HTML&CSSで書き起こす力が弱い傾向にあります。
動くWebデザイン アイディア帳 実践編 単行本（ソフトカバー） – 2021/7/31
久保田 涼子 (著), 杉山 彰啓 (著)
本書は、好評の「動くWebデザイン アイディア帳」の姉妹本です。
Webデザインの新しい教科書 改訂3版 基礎から覚える、深く理解できる。〈Flexbox、CSS Grid、レスポンシブ〉 単行本（ソフトカバー） – 2021/5/28
こもりまさあき (著), 赤間 公太郎 (著)
Web制作入門書のロングセラーが、最新仕様にアップデート!
Webサイト制作の「正しい基礎」を伝える入門書の改訂3版
本書の章構成
Lesson1 Webデザインの世界を知る
Lesson2 Webサイトを設計する
Lesson3 HTMLの役割とできること
Lesson4 CSSの役割とできることLesson5 Webサイトを構成する素材
Lesson6 Webサイトを表現する色
Lesson7 Webサイトを公開する
Lesson8 Webサイトを運用する
Lesson9 Webサイトを制作する
コンバージョンを上げるWebデザイン改善集 単行本（ソフトカバー） – 2020/6/29
井水大輔 (著), 菊池達也 (著), 井上清貴 (著),
本書は、Webサイトのデザインを改善するために役立つ実際の改善事例やTipsなど、絶えずWebサイトを改善し続けるためのヒントを詰め込みました。
Webデザイン、Web製作などに便利な参考サイト
URAGAWA | 制作会社がわかるWEBデザイン・参考サイト集
国内トップクラスの制作プロダクション、事業会社のクリエイティブが「どの企業が作ったのか」も含めてわかるWEBデザインギャラリー、参考サイト集です。
https://uragawa.work
マネるデザイン研究所
普通のWebデザイン集とは違い、ちょっぴりポイントを解説したWebデザイン集です。
https://maneru-design-lab.net
I/O 3000
Webデザインに関わる人のためのWebデザインギャラリーサイトです。国内外を問わず、Web制作の参考となるサイトをセレクトしています。
https://io3000.com
現代デザイン | Webデザインギャラリー・サイトリンク集
現代デザインはWebサイトを集めたギャラリー･リンク集です。
https://gendaidesign.com
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
https://muuuuu.org
S5-Style、Webデザインギャラリー
ハイクオリティなWebデザインをブックマークしたWebデザインギャラリー。
https://bm.s5-style.com
失敗しないカラーリング 知っておくと役立つ色のあれこれ 単行本 – 2021/3/9
桜井 輝子 (著)
豊富な作例で学ぶ Adobe XD Webデザイン入門 (Compass Booksシリーズ) 単行本（ソフトカバー） – 2021/3/22
池原健治 (著), 井斉花織 (著), 佐々木雄平 (著), 佐藤修 (著), & 4 その他
この1冊で初心者からプロまで、すぐに使える知識が身につく!
Manaさん「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の続編が出版されるみたいです。CSSやJavaScriptを使っての動きやレイアウト組み、またSassを使った、より実践向けの解説本
ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座 (日本語) 単行本（ソフトカバー） – 2021/2/20
Mana (著)
Chapter 1 最初に知っておこう! Webサイトの基本と必携ツール
Chapter2 ランディングページで学ぶ「レスポンシブWebデザインとフォント」
Chapter3 ブログサイトで学ぶ「装飾とカラムレイアウト」
Chapter4 コーポレートサイトで学ぶ「表組み、フォーム、JavaScript」
Chapter5 イベントサイトで学ぶ「特定ページ作り方とアニメーション」
Chapter6 ギャラリーサイトで学ぶ「動画と画像の使い方」
Chapter7 HTMLやCSSをより早く、より上手に管理できる方法
Chapter8 サイトの投稿と問題解決
動くWebデザインアイディア帳 単行本 – 2021/2/27
久保田涼子 (著), 杉山彰啓 (著)
「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
本書はWebサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。
オンスクリーン タイポグラフィ 事例と論説から考えるウェブの文字表現 (日本語) 単行本 – 2021/2/17
文字の扱い方が特徴的なWebサイトの事例約80 例を紹介。
UI/UXデザインの原則 (日本語) 単行本（ソフトカバー） – 2020/10/23
初心者からちゃんとしたプロになる Photoshop基礎入門 (日本語) 単行本（ソフトカバー） – 2021/2/2
画像編集ソフト「Adobe Photoshop」の操作方法や使い方を、初歩からていねいに解説した本。
文字のきほん (日本語) 単行本（ソフトカバー） – 2020/12/8
「書体」と「フォント」の違いから、印刷と文字の歴史、活版・写植のしくみ
【Amazon.co.jp限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ （DL特典：Webデザイナーのポートフォリオの作り方入門講座） (１冊ですべて身につく) 単行本（ソフトカバー） – 2024/3/2
Mana (著)
この本ではカフェのサイト（4ページ）を作成します。
①1ページ目、フルスクリーンWebサイト作成
②2ページ目、2カラムWebサイト作成
③3ページ目、タイル型Webサイト（グリッド レイアウト）作成
④4ページ目、お問い合わせのサイト、フォーム（外部メディアを利用する）
などの4ページを、いろいろなテクニックで作るので、かなりオススメな本です。
デザインカンプの作成（作成してある）からしてあるので本格的です。
デザインカンプは、Adobe XD（無料で利用可能）で作成ですが、Adobe XDの使い方などは載ってないです。
また、Adobe XDはMacの場合、OSのバージョンが古い利用が出来ないです。
Mac10.12だと使用が出来ないので不便かも。
サイトの作成は、index.htmlを作ったら（1ページ目作成）
基本的にコピーして複製して、複製したら、いらない部分を削除して、それを次に2ページ目を作っていく感じです。
テキストエディタはATOMを使用
カスタマイズの仕方も載ってます。
2カラムから3カラムなども載ってます。（バナーなど表示する場合）
レスポンシブの仕方
Webフォント（Google Web Font）使用
CSSリセットはress.cssなど解説
Google Mapの仕方
OGP設定、SNSとかシェアした際の設定
Flexboxなど、他
今日から役立つアイデアを満載! Illustrator魔法のレシピ (日本語) 単行本 – 2020/2/10
思い描いた世界を作る Photoshopレタッチ・加工 魔法のレシピ (日本語) 単行本 – 2020/2/10
世界一わかりやすい Illustrator 操作とデザインの教科書 ［改訂3版］ (日本語) 単行本（ソフトカバー） – 2020/2/27
初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉 単行本（ソフトカバー） – 2019/9/25
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) 単行本（ソフトカバー） – 2010/4/8
Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法 単行本（ソフトカバー） – 2018/12/26
いま知っておくべき、現場のWebデザイン。
「Webデザイン」という言葉が指す仕事の領域は、かつてないほど広がっています。従来はパソコンで見るWebサイトのビジュアルを、画像ベースで制作すれば事足りました。しかし近年は、スマートフォンの小さい画面で、「外出先」や「通勤電車の中」といった様々な使用場面が存在することを想定しながらデザインを考える必要があります。そこでは、画像では表現しきれない細かなUIとインタラクションの設計も重要になりますし、ユーザー心理を把握するUXデザインの視点も理解しておかなくてはなりません。
Webサイトができるまで
Chapter1|レイアウト
Chapter2|配色
Chapter3|UXデザイン
Chapter4|UI・グラフィックデザイン
Chapter5|モーションデザイン
2万回のA/Bテストからわかった 支持されるWebデザイン事例集 単行本（ソフトカバー） – 2018/7/25
知りたいレイアウトデザイン (知りたいデザインシリーズ) 単行本（ソフトカバー） – 2017/11/21
ARENSKI (著)
割り付けのルールから伝わるデザインのアイデアいろいろ
グラフィックデザインのレイアウトに関するルールと、デザインワークのちょい技やアイデアをあつかった書籍。
やってはいけないデザイン 単行本（ソフトカバー） – 2016/12/17
気のきいた短いメールが書ける本―そのまま使える! 短くても失礼のないメール術 単行本（ソフトカバー） – 2017/7/21
中川路 亜紀 (著)
【メールを1分で返せば、仕事の効率は10倍になる! 】
返信・アポ・お詫び・感謝・依頼・催促
すべてのシーンに対応
もう悩まない!
仕事がサクサク進む、効率的ビジネスメールの全技術
【400フレーズ&「季節の言葉」一覧表入り】
これ一冊で大丈夫!
馴れ馴れしくなく、よそよそしくない、周りからの評価が一変するメール術を集約。
Webデザイン、これからどうなるの? キーワードから探るデザイン動向の現在と未来 単行本（ソフトカバー） – 2018/1/17
Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像 単行本（ソフトカバー） – 2017/9/20
古くなった「知識」や「情報」を短時間でアップデート!
ノンデザイナーでもわかる UX+理論で作るWebデザイン 単行本（ソフトカバー） – 2017/9/26
UX(ユーザー・エクスペリエンス)虎の巻-ユーザー満足度を向上する設計開発テクニック- 単行本 – 2017/9/26
最近、ものづくり界隈でUX(ユーザーエクスペリエンス)が、にわかに脚光を浴びている。UXとはユーザーが製品やサービスを使用した結果、得られる体験(快適や満足、不快や不満足)のことを言い、いかにこれを向上させるかが、製品開発においてテーマの一つになっている。実際にUXに関わってきた著者が、その概要やどうすればUXを向上させた製品開発・設計をできるかを説く。
UIデザインの教科書 マルチデバイス時代のサイト設計-アーキテクチャからUXまで 大型本 – 2013/11/19
「しっくりくる」には理由がある。
いちばんよくわかるWebデザインの基本きちんと入門 読んでみた。
いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA) 単行本 – 2017/2/25
伊藤 庄平 (著), 益子 貴寛 (著), 久保 知己 (著),
本書で学べる知識
これからのWebクリエイターが必要とする知識を一気に学べる。
「理論→実例」の説明順序でWebデザインの基礎から実例の使用法までわかる。
レスポンシブ、Webフォント、インタラクションなど最新のWeb技術が学べる。
どうすれば、プロ仕様のWebデザインが作れるのか？
この本では、基礎知識と実例のWebサイトの解説。
コンセプト、レイアウト/配色/写真/タイポグラフィなどWebに関連する基礎知識が、
この1冊で身につきます。
実例デザインなども写真とURLなどが本では載ってます。
ただ、参考のサイトなどは、本が出た当時は、アクセスで見れる場合がありますが、 デザインなど見栄えとか更新されて変わることがあるので、
本と同じように、変わらないサンプルのデータとかで見れるといいかもです。
この手の本って、サンプルデータをダウンロードできない本が多いかも。
本では、プログラムなどのソースとかは載っています。
Chapter1から8まであります。
サンプルのデータとかはないです。
目次
CHAPTER 1 Webデザインの基本
CHAPTER 2 レイアウト
CHAPTER 3 配色
CHAPTER 4 写真と図版
CHAPTER 5 タイポグラフィ
CHAPTER 6 HTML5とCSSS3
CHAPTER 7 インタラクション
CHAPTER 8 運用とマーケティング
1章は、Webサイト制作の企画となる部分、目的、ターゲット、コンセプトなど制作前に考える
2章から5章は、レイアウト・配色・写真・図版・タイポグラフィ」といったデザインをする上で必要な基礎知識。
6章は、HTML5、CSS3の基礎と実践的なテクニック
7章は、Webサイトの動きを扱うインタラクションデザイン
8章は、Webサイト公開後の運用マーケティング、SEOやアクセス解析など
Webデザインは、見た目の印象だけが求められるわけではありません。
Webサイトの目的や目標は何か？誰に伝えたいのか、どう機能するのかといったことを明確にし
デザインを発注するクライアントの思いや、実際に使うユーザーの体験を考えて設計し制作することが大切です。
section1 デザインとは何か
何のためにデザインするのだろう
課題を見つけて解決するため
わかりやすく、伝わりやすくするため
何となくデザインしない
デザインには、理由がある
Webサイトにおけるデザインとは
Webデザイナーの仕事
①仕事を受注する
②打ち合わせをして企画や設計を練る
③制作の進行を管理する
④デザイン作業をする
⑤コーディング作業をする
⑥確認と修正の作業をする
⑦納品して、お金をいただく
アートディレクターという職種
デザイン全般の総責任者
Webデザイナーが学ぶべきこと
など解説。
section2 目的と目標を考える
明確なゴールを見据えたWebサイトを作りましょう。
目的とは
Webサイトで実現したいことは何か
目標とは
Webサイトで達成したい数字は何か
KPIを設定する
WebサイトのKPI
section3 ターゲットを想定する
誰のためのWebサイトなのか
誰に見てもらいたいか
ターゲットを想定することで、コンテンツやデザインがより明確になるからです。
ターゲットと目的からデザインを決める
簡単な分類をする
ターゲットとなるユーザーを
①性別
②年齢
③住居地などで分類
ペルソナの設定をする
ターゲットからデザインの方向性を決める
section4 コンセプトを決める
誰に何を伝えたいのかを考えよう
Webサイトの目的、目標、ターゲットが定まってきたら
コンセプトを固めます。
誰に何を1番伝えたいのか
コンセプトの重要性
コンセプトを元にデザインする
目的、ターゲット、コンセプトを踏まえて企画やサイトの構成
キャッチコピーやデザインの方向性を検討します。
ヒアリングシートを使おう
本では、簡単なヒアリングシートが載ってます。
section5 ワイヤーフレームやプロトタイプを作る
ワークフローをスムーズに進める必須の手法
ワイヤーフレームはスピードが命
ワイヤーフレームには最低限、ページに含める
①企画象
②コピー
③見出し
④本文などの情報をまとめればよく
配置やサイズを詳細に示すものではありません。
例
色使いはグレースケールで
テキストの大部分はダミーで
画像は、このくらいというエリア指定で
ワイヤーフレーム制作ツール
プロトタイプとは
Webサイトの試作品のことです。
section6 70％の完成度を目指してから、細部にこだわる
自発的にスケジュールを調整しよう
納期を守ること
仮に10日間あったとします。
デザイン作業は
1日目から3日目（70%品質で最後まで作る）
ブラッシュアップは
4日目から6日目
確認は
7日目
ディレクターへ提出は
8日目から9日目
提出は
10日目
パーツ単位でスケジュールを決める
細部にこだわる
など解説
section7 ワークフロー全体像
Webサイト作りに必須な作業をしっかりと把握
Webサイト制作は、企画、設計、制作、運用準備の4段階に分かれます。
それぞれで必要な作業を理解しましょう。
Webサイトをデザインする
Webデザインにおけるレイアウトとは、単に見た目が美しい配置を作ることではなく、ユーザーに必要な情報を正確に伝えるようにWebサイトの配置を作ることを指します。
section1 レイアウトとは
ユーザーに伝わるデザインを作るために
デザイン、編集、設計などおいて、何を、どこに、どのように配置するかということを意味します。
ユーザーが欲しい情報を的確に伝える。
レイアウトは、実際に使うユーザーの立場になって考えることが大切です。
section2 レイアウトの4原則
絶対に外せない4つの原則
近接の原則
整列の原則
反復の原則
対比の原則
など解説
section3 Webデザインにおけるレイアウト
よく使われるレイアウトとは
グリッドを用いたレイアウトとフリーレイアウト
グリッドの決め方
Webサイトに、どんな種類のレイアウトが適しているかは、コンテンツの内容や、対象となるユーザーのデバイスによって変わってきます。
section4 Webデザインにおけるナビゲーションのレイアウト
ユーザーが目的を達成できるように誘導する
ナビゲーションの解説
ナビゲーションを配置する際には、ユーザーが目的の情報や、目的のページへと迷うことがないようにする。ことを考えることが大切になってきます。
ナビゲーションの種類など解説
ナビゲーションのレイアウトパターン
section5 レイアウトにおける視線誘導
ユーザーの視線の流れを作る
視線の動線を考える
左上から右下に視線は流れる
Z型
F型など
section6 タッチデバイス向けのレイアウト
PCとは違う操作をするレイアウト
スマートフォンやタブレットなどのタッチデバイス
スマートフォン用サイト
タブレット用サイト
レスポンシブサイト
section7 レスポンシブWebデザイン
よく耳にするデザインの手法について見てみよう
1つのHTMLファイルをCSSにより異なるデバイス画面サイズに応じたページのレイアウト、デザインに調整して表示させる手法のことを指します。
シングルカラム、レイアウト
マルチカラム、レイアウト
など
配色はデザインの見た目を決定する上で重要な要素の1つです。
同じレイアウトのデザインでも配色を変えるだけで、見た目の印象や見やすさ、使いやすさに大きく影響します。
配色を学ぶことで、デザインのイメージをユーザーに届けやすくなります。
section1 色とは
色を学ぶ前の基礎知識
色を認識する仕組み
白は光の全反射、黒は全吸収として定義されています。
色が伝える力
1つの色だけでも多くのイメージを伝えることができます。
配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック 単行本 – 2014/9/24
内容紹介
本書は、イメージどおりの配色にしたい方、配色の理論を学んで自由に配色を行なえるようになりたい方を対象に、配色のルールと実際の配色パターンを美しいグラフィックとともに掲載した配色見本帳です。
レイアウトデザイン見本帳 レイアウトの意味と効果が学べるガイドブック 単行本（ソフトカバー） – 2017/4/18
説得力を生む 配色レイアウト 効果的な配色とレイアウトがわかる本 単行本（ソフトカバー） – 2017/7/13
section2 色の三属性
色は3つの属性に分けられる
色相、明度、彩度
色相
色相は、赤、黄、緑、青、紫といった色の様相の表した色味のことです。
マンセル表色系では、赤、黄、緑、青、紫の5色は主要な色で代表的な色です。
さらに、この5色に、中間色を追加して、円環にして、並べたものを色相環といいます。
色相環の正反対側に位置する色は、補色といい、お互いの色を引き立て合う性質があります。
安定した補色関係を補色調和といいます。
明度
色の三属性の中で1番視認性に直結しているのが明度です。
色数が多くなるほど、色の並びがなだらかになります。
10色の色相環
20色の色相環
彩度
彩度は色の鮮やかさのことです。
色相、明度、彩度の色の三属性はWebデザインからみることができます。
色相は、何色が使われているか
明度は何色か
彩度は何色か
色相、明度、彩度を分解することでWebサイトで使われている色の扱い方を学べます。
section3 トーン
明度と彩度を使った色のグループ
トーンは、明度と彩度が似ている色を集めてグループ化したものです。
トーンの基本
有彩色は大まかに、純色、清色、中間色の3つのトーンに分けらることができます。
PCCSトーン
有彩色は12色
無彩色は5種
PCCSが定めたトーンは、有彩色の明い、暗い、強い、弱い、濃い、淡などの色の調子が12種に分類されています。
トーンを取り入れたWebデザイン
section4 補色・類似色・配色の調和
デザインに合った色の組み合わせ
物理補色
補色は、物理補色といいます。
類似色
色相環で指定した色から近い色を類似色といいます。
配色の調和
色相環には、一定の法則で規則的に選ばれた色は調和するという原理があります。
section5 色の印象
色をコントロールして思い通りのイメージにする
色の与える印象
色が人の心理に働きかける作用のことを、色彩感情といい
抽象的な物事や物体と結び付けることを色彩象徴といいます。
色の寒暖
色の重さと触覚
明度の低い色を下に配色する。
下重心型は安定感がでます。
明度の高い色を下にし、明度の低い色を上に配色する。
上重心型は動きのある印象を与えられます。
進出色と後退色とは？
前に出て見える色を進出色
暖色系
後ろに下がって見える色を後退色
寒色系
膨張色と収縮色
膨張して見える色を膨張色
収縮して見える色を収縮色
色の連想と象徴性
様々な物やイメージを思い浮かべることを色の連想といいます。
配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版] 単行本 – 2017/12/16
桜井 輝子 (著)
ノンデザイナーズ・デザインブック [第4版] 単行本（ソフトカバー） – 2016/6/30
色の事典―色彩の基礎・配色・使い方 (英語) 単行本 – 2012/9/1
section6 カラーモード
デジタルデータを扱うための知識
画像ファイルの作画
Webサイトの画像や写真データを扱う場合はRGBモードを設定します。
RGB
CMYK
など解説
カラーピッカーのカラーモード
画像編集アプリは
HSB、HSL、LCHなど扱えます。
色相はH
彩度はSやC
明度はBやL
で色の情報をコントロールしています。
PhotoshopやIllustratorのカラーピッカーにもHSBモードがありますが、RGBモードの数値表示をHSBに変換して擬似的に表示しているモードです。
環境による色の見え方
デザイン業務をする場合は、正常な色を扱えるように調整するキャリアブレーションを行いましょう。
ただし、ユーザーが見てるディスプレイはキャリアブレーションの設定などされてなく、同じ色で見られているとは限りません。
色の教科書 単行本 – 2015/5/20
桜井 輝子 (監修)
史上最強カラー図解 色彩心理のすべてがわかる本 単行本（ソフトカバー） – 2010/7/16
section7 利用者の視点に立った配色
人や環境に左右されない配色
コントラストを意識した配色
コントラストは、色相、明度、彩度の対比のことをいいます。
Webサイトで扱う色数
Webサイトで使う色の数は3色、4色が扱いやすい色数です。
section8 Webサイト目的にあった配色と比率
同じ配色でも色の比率によって印象がガラッと変わる。
Webサイトの目的に合った配色
目的に合わせた配色の決め方は2種類あります。
1つの色から配色を決定する方法
Webサイトに合う写真を元に配色を選び方法
コンセプトとなる1色を決め、メインカラーとして扱います。
メインカラーが決定したら、その色を基準として
べースカラー、アクセントカラーを決めていきます。
べースカラーは、背景色やホワイトスペースに使われます。
アクセントカラーは、リンクテキストや重要なポイントで使います。
メインカラーから、べースカラーやアクセントカラーを決める場合は
ドミナントカラーを元に、配色を決めます。
配色の比率
Webサイトの配色でよく使われるのは
70:25:5の比率です。
70%はべースカラー
25%はメインカラー
5%はアクセントカラー
ただし、通常のWebサイトは、3色だけでは色が足りません。
section9 リンクの色の扱い
リンクとして認識されやすい色は？
リンクの機能的な色
複数の色合いの中からA/Bテストを行い、効果の高かった青色を採用した所、広告のクリック数などが増加したという。
リンクのデザイン的な色
リンクは青系統にした方がユーザーの使いやすさが向上します。
マウスオーダーやタップした時のリンク
サイト全体のユーザーの操作に合わせた色の反応のルールを決めましょう。
実例のデザインで、Webサイトが紹介されてます。
また
ベースカラー
アクセントカラー
メインカラー
なども書いてます。
写真と図版は、視覚的に、とても強い要素です。
section1 Webデザインにおける写真
何のために写真を使うのか
視覚的な強さ
ナビゲーションや見出しより、ユーザーは、写真に目がいってしまいます。
文章は、読まなくても写真は見てくれるのです。
ユーザーは、最初の数秒で離脱する。
最初の10秒程度で離脱するか判断しています。
写真は
大きさや配置で印象が変わる
補正で、印象が変わる
section2 Webデザインにおける図版
概念図やフローチャートを有効に使おう
写真との違い
強調したい情報だけを表現できます。
また、可愛らしさ、楽しさを演出する時は、写真より、イラストの方が向いています。
図版の種類
文章で説明すると、どうしても長くなる内容があります。
その時は、イラストや文字で概念図を作りましょう。
アイコン
リンクなど使うと目立たせることができます。
イラストの使い所
アイキャッチの必要性
section3 色調補正
補正場所がすぐにわかるくらい見る目を養おう
Adobe Photoshopでの具体的な補正手順
調整すべきことは明るさと、コントラスト、色と彩度の補正です。
Adobe Photoshopで
レベル補正
明るさの分布を表します。
トーンカーブ
明るさと、コントラストの調整
カラーバランス
色かぶりの補正
シャープ
引き締まった写真にします。
直接補正を適用しない、調整レイヤーにする。
section4 写真のトリミング
基本を学び、時には大胆なトリミングで
何を伝えたいか
トリミングテクニック
人物のトリミング
構図を意識する
Photoshopでトリミング？CSSでトリミング？
Photoshopで、個別にトリミングをして画像を作成の他に
CSSでトリミングもできます。
clipプロパティ
画像データは1つで済み管理が楽です。
clipプロパティ。ボックスを切り抜き表示（クリッピング）する
http://www.htmq.com/style/clip.shtml
「写真を使う」デザインのルール 撮影から補正・レイアウトまで 単行本 – 2016/5/6
いちばんやさしい新しい写真&カメラの教本 人気講師が教える良さが伝わる写真の撮り方 単行本（ソフトカバー） – 2018/3/27
カメラはじめます! 単行本（ソフトカバー） – 2018/1/8
写真のことが全部わかる本 センス&知識ゼロからの写真のはじめかた、教えます。 (上達やくそくBOOK) 単行本（ソフトカバー） – 2018/3/16
section5 解像度、ピクセルについて
画面解像度とデバイス、ピクセル比を理解する
解像度とは
Webサイトは、画像の解像度が350dpi必要というわけではありません。
画面解像度とは
一般的には、そのディスプレイに表示されるピクセル数
Retinaディスプレイの解説
実際に、どこまで対応するか
スマートフォンサイトは対応させるべきです。
section6 画像のファイル形式
PNGとJPGを使い分けよう
ファイル形式の種類
jpg、png、svg、gif
ファイルの特徴
PNG-8とPNG-24の違い
PNG-8はGIFと似ています。
JPGとPNG-24の違い
写真のような色数が多いものだと、JPGが大分軽くなります。
SVGについて
ベクター形式の画像フォーマット
ベクターデータは、数値で形や、色を表現しています。
imgを使う
objectを使う
svgを使う
CSSを使うなど解説。
実例のデザインでWebサイトが載ってます。
Webサイトにおいて文字はとても重要です。
section1 書体とは
書体の規則的を学ぼう
文字の役割
書体の仕事なのです。
書体の役割
書体には、種類があります。
明朝体
ゴシック体
書体を変えれば印象が変わります。
書体とフォントは違う？
書体は、統一的にデザインしたスタイルのこと
フォントは書体のデータのことを指します。
Webデザインにおける書体
など解説
カリグラフィー・ブック 増補改訂版: デザイン・アート・クラフトに生かす手書き文字 単行本 – 2017/10/5
西洋の書道といわれる、手書きのアルファベット、カリグラフィー。
その語源はギリシャ語のCALLI(美しい)とGRAPHEIN(書くこと)に由来しています。
美しく手で書かれた文字の温かみや個性が今改めて見直され、
さまざまなクラフト、文字を使ったビジュアルアート、造形、製本、
そしてグラフィックデザインなど、幅広い分野で必要とされています。
本書は、2011年刊行『カリグラフィー・ブック』の増補改訂版です。
大幅にボリュームアップし、カッパープレート体、ドローイングを新たに収録。
手書き文字が人気となっている今、関心の高いこれらのテーマを追加しました。
作例も一部を新しくし、よりわかりやすく、使いこなしていただけるものとしました。
いずれの章も、それぞれの文字、書体のコンセプトや性質を、歴史を含めて基礎からきちんと学び、身につくように解説。
そして、それぞれの個性を生かした自分自身の文字が書けるようになるまでを目指す、これまでにないカリグラフィーの教本です。
タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-[デザインラボ] 大型本 – 2010/11/30
基礎から学ぶ、タイポグラフィ
デザインの良し悪しは
タイポグラフィで決まる。
デザイナー、アートディレクターが知っておくべき
タイポグラフィの基礎知識を、多数の具体例とともに丁寧に解説!
section2 欧文書体と和文書体
セリフ書体とサンセリフ書体の違いを知ろう
欧文書体には、セリフ書体、サンセリフ書体のデザインがあります。
これは、和文書体だと、明朝体とゴシック体にあたります。
セリフ書体
文字の端に小さな飾り（セリフ）が付いています。
キャッチコピーなどに使う
サンセリフ書体
小さな文字でも可読性が高いです。
ナビゲーションや本文で使う。
その他の書体
手書きのストロークに基づいたスクリプト書体
section3 書体ファミリー
用途に合わせてウェイトを使い分けよう
ファミリーとは
ウェイトのバリエーションを持ったファミリー
ウェイト
細い、太さ
イタリックなど解説
section4 書体の選び方
ナビゲーション、見出し、本文で考えよう
コンセプトから考える
サイトの目的
信頼感のあるデザインにしたい
明朝体がよいでしょう
優しいデザインにしたい
丸ゴシック
ウェイトやサイズで、印象を変える
ナビゲーションと見出し、本文
Webサイズのナビゲーションで使われる書体もゴシック体が多いです。
section5 本文の組版
読みやすさを第一に考えよう
一行の文字数
グラフィックデザインでは
30文字から40文字が読みやすいとされています。
読みやすい文字サイズ
16pxから18pxが多いようです。
行間
カーニング
アンチエイリアスなど解説
section6 文字コードとブラウザの表示
文字コードの仕組みを知ろう
現在のWebサイト制作ではUTF-8を選択しておけば問題ありません。
文字コードの種類
Shift_JISなど解説
section7 最適なfont-family
OSやブラウザの差異（違い）を理解しよう。
游ゴシック体、游明朝体を使うか
ブラウザの標準フォント
英語表記と日本語表記の両方が必要
section8 Webフォントについて
Webフォントの仕組みや種類を理解しよう。
Webフォントとは、PCにフォントのデータがなくてもサーバ上からフォントデータを呼び出し、そのフォントデータを表示させる仕組みです。
無料や有料があります。
日本語のWebフォントは、有効が多いです。
容量の問題
日本語のWebフォントを使うと読み込みに時間がかかります。
section9 Webフォントのサービスの紹介
日本語のWebフォントは無料プランもあるので気軽に触ってみよう
費用をかけたくないなら、Google Fontsで日本語Webフォントを利用するの一択です。
section10 Webフォントの使い方
ナビゲーションや見出し、に欧文書体を使ってみよう
Google Fontsの使い方
日本語フォント
Noto Sans Japaneseを使う
実例のデザインが載ってます。
HTML5とCSS3はWeb制作する上で、、必須となる知識です。
詳細は、いちばんよくわかるHTML5&CSS3デザインきちんと入門 のおまかせしますと記載されています。
このChapterでは、基本的な知識など解説されます。
section1 HTML5の基礎
HTML5で始まるセマンティックコーディング
HTML5コーディングの基礎
ドキュメントタイプとhead要素
本では、基本的なマークアップのソースも載ってますが、
この本ではサンプルデータとかダウンロードが無いです。
サンプルデータとかあると、便利かもです。
HTML5の最新情報
HTML5で追加された要素の一覧
タグなど解説してます。
2017年の後半にはHTML5.2の勧告を目指しているみたいです。
section2 CSSの基礎
どんなプロパティの前に、CSSって、どういうものを知ろう
CSSは見た目を定義するものとされています。
CSSの適用方法
CSSをWebサイトに適用するには3つの方法があります。
①link要素での指定
②style要素での指定
③style属性での指定
CSSの構文
セレクタ、ルールセット、宣言ブロック、宣言、プロパティ、値、
CSSコメント
CSSには@ルール（@規則）の決まり事があります。
CSSのカスケーディング、詳細度、継承。
①カスケーディング
ある要素に適用させるスタイルを複数箇所で宣言が可能
CSSの優先順位
ブラウザのデフォルトのユーザースタイルシート
②詳細度
優先度を表すスコアのようなものです。
③継承
ある要素に指定されたスタイルが、その子要素に対しても引き継がれて適用される仕組みです。
スタイルの継承－CSSの基本 – HTMLクイックリファレンス
http://www.htmq.com/csskihon/008.shtml
例、
borderプロパティに、値にinheritを指定すると、引き継がれて要素に継承できます。
border:inherit;
CSSスタイル適用のまとめ
CSSの最新情報
CSS current work& how to participate
https://www.w3.org/Style/CSS/current-work
CSSに存在するプロパティ、仕様とステータス
List of CSS properties, both proposed and standard
https://www.w3.org/Style/CSS/all-properties
CSSプロパティのブラウザ対応の状況
Can I use…
https://caniuse.com
section3 CSSの作り方と管理
あとからやれない。初めから管理して未来の自分を助けよう
管理しやすいCSSを作る
リセットCSSで手間を減らす
Bootstrap
HTML、CSS、Java Scriptのフレームワーク
CSSファイルはエリア分けして記述する
CSSファイルは、できるだけ1つにまとめた方がよいです。
共通スタイルとページごとに、個別でスタイルファイルで管理してる手法もありますが。
CSSのクラス名にプリフィックス（接頭辞）を付けて役割を明示する
SMACSSの解説
CSS設計手法
FLOCSS
SMACSSと同様です。
CSS設計が、なぜ必要か
CSSプリプロセッサー
CSSに不足している機能を補い、CSSファイルを出力するものです。
SMACSSを使ったファイルのエリア分け
FLOCSSを使ったファイルのエリア分け
Sassで分割したファイルを統合する
CSSプリプロセッサーはSassを採用すれば問題ないでしょう。
section4 CSSでレイアウトする
Flexboxを使いこなせればレイアウトも怖くない
ボックスモデル
CSSにはボックスモデルという概念が存在します。
margin
padding
contentの解説
Flexible Box Layout
最新のブラウザではFlexboxは問題なく利用でます。
Flexboxでは、要素にdisplayのflexを指定することで、その要素をフレックスコンテナに変えます。
フレックスアイテムの並べ方など解説してます。
rowは横並び
columnは縦並びなど
図とソースで解説されてますが、実際にサイトなど見ないと、人によってはイメージがわかないかもです。
section5 メディアクエリーで作るレスポンシブWebデザイン
レスポンシブ対応は今後のWeb制作に必須のスキル
レスポンシブWebデザイン
Webサイトを閲覧するデバイスによってスタイルが変わるデザインのことです。
メディアクエリーで利用する
メディアフィーチャー
フィーチャーネーム
min-widthの解説など
ビューポート
ブラウザがHTMLをレンダリングする時の表示領域のことです。
メディアクエリーを利用する場合は、@mediaを使用します。
Flexboxを使ったレスポンシブWebデザイン
ナビゲーションの切り替え
要素の並び順の切り替え
図とソースで解説されます。
簡単なサンプルデータとかあれば便利かもです。
Webの技術が進歩し、現在はアニメーションや3Dなどの表現が可能になってきました。
しかし、技術の進歩により、インターフェース（UI）などの複雑化により、Webデザイナーも本格的にインタラクションについて学ぶ必要が出てきました。
section1 インタラクションデザインとは
ユーザーとWebサイトをつなぐデザイン
ユーザーが一目で配置されているインターフェースが、どういう役割なのか、
どういう操作を行えばいいのかを理解させるように誘導することが大切です。
section2 インタラクションデザインの基本
使いやすいWebサイトを作るために
可能性
見た目のデザインからユーザーに予測させ、操作を補助するのが可視性です。
フィードバック
ユーザーの操作によって、得られた結果をユーザーに渡すことです。
見つけやすさ
誘導する必要があります。
マウスのインタラクション
体験
インターフェースを使用した時にユーザーが感じる満足度です。
UX
Apple
ヒューマンインターフェースガイドライン
開発者のためにガイドラインを用意しています。
様々なユーザーインターフェースのデザインパターンが、カテゴリごとに紹介されてます。
UI-Patterns.com
http://ui-patterns.com
実例デザインの紹介
Webサイトが載ってます。
ノンデザイナーでもわかる UX+理論で作るWebデザイン 単行本（ソフトカバー） – 2017/9/26
ユーザー視点で「目的を達成できる」「使いやすい」Webサイトをデザインするために
UXデザインの教科書 単行本 – 2016/6/1
Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで 単行本（ソフトカバー） – 2016/11/15
section3 マイクロインタラクションとは
楽しいアニメーションをルールとして取り入れる
アニメーションによって待っているストレスを軽減
マテリアルデザインのアニメーション
フラットデザインとマテリアルデザイン
実例デザインの解説
section4 CSSを使ったインタラクション
CSSだけでできるアニメーション
CSS Transitions
マウスオーダーで変化
タイミング関数
ソースと図で解説
section5 JavaScriptとは
動きのあるページを作る
JavaScriptの書き方が解説されてます。
jQueryの使い方
section6 動きのあるサイトを作るときの注意点
どのブラウザでも滑らかなアニメーションを実現する
ブラウザにはソースコードや画像を解析しWebページとして表示（レンダリング）する役割を持ったレンダリングエンジンが搭載されています。
section7 SVGやWebGLを使ったインタラクションデザイン
HTMLだけでは難しいものも、新しい技術を使えば簡単に
実例のデザインなど解説
CMSを使ったWeb制作
Webサイトは公開後の運用とマーケティングが特に大切な時代であり、Webデザイナーとしても、必要な取り組みといえます。
section1 テスト環境と本番環境
Webサイトを安全に準備、スムーズに公開
テスト環境が、そのまま本番環境になるケースもあります。
本では、レンタルサーバーにデータのアップの仕方、レンタルサーバーの解説などは、載ってません。
もし、レンタルサーバーなど使って自分で勉強などしたいなら
自分にあったレンタルサーバーを選ぶといいと思います。
section2 公開前後のチェック作業
丁寧な総仕上げで、クライアントの満足度アップ
公開前には、様々なチェック作業をおこないます。
Webサイトは公開することがゴールではなくスタートラインです。
また、CMSを導入していれば、クライアント企業から、CMSのプラグインのアップデートの対応、システム面の保守を希望されるケースもあります。
section3 Webマーケティングの全体象
Webサイトを発展させるための取り組みを知る
ユーザーをただ、待っているだけでは、Webサイトへのアクセスは増やせません。
いくらアクセスが多くても、コンバージョンにつながらなければ、ビジネス的な意味はありません。
Webマーケティングの3分類
コンテンツ対策
マーケティング視点での目標値を設定することが大切です。
広報
ソーシャルメディアを活用
消費者と直接的なコミュニケーションを計ります。
広告
リスティング広告
section4 インターネット広告の種類
広告制作にもWebデザイナー力が必要
テキスト広告
画像広告
動画広告
記事広告
など解説
section5 リスティング広告
時代は守りの運用から攻めの運用へ
リスティング広告の解説
検索広告
ディスプレイ広告
リスティング広告の基本設定
section6 ランディングページ最適化（LPO）
ランディングページの解説など載ってます。
ただ、ランディングページの作り方とか、コーディングなどは載ってません。
ランディングページだけのコーディングの書籍って、いい本が販売されてないかも。
ほとんどが、解説的な本しかない感じ
section7 検索エンジン最適化（SEO）
検索順位を決める仕組み
など解説。
自分は昔に、Webスクールの説明会に参加したけど、
そこにいた講師は、あるキーワードをソースに入れると、SEO効果で、上位に表示されるっていってたけど、今でも、そんなことを言ってるのかな。
section8 ソーシャルメディアマーケティング
ソーシャルメディアと広告の一体化
section9 Googleアナリティクス
Googleアナリティクスのレポート機能
など解説
section10 Google Search Consoleとタグマネージャ
Webサイト管理者向けのツールです。
など解説
section11 Webサイトの改善策
ユーザー満足を向上させる
問題のあるページを発見する
