目次

第0章 Webデザインの基礎知識
Webデザインの基礎知識
Webページの構成とワークフロー
Webページに入るデザインパーツ
WEBサイトで扱う画像
Webデザインとタイポグラフィー
色彩の基礎知識
配色の基礎知識

第1章 ユーザーに伝わる印象から考えるデザイン
キュートで可愛いデザイン
ポップで元気あふれるデザイン
エレガントで気品に満ちたデザイン
ナチュラルで優しいデザイン
クールで先進的なデザイン
ヴィンテージで憧れるデザイン
ノスタルジックで郷愁感じるデザイン
クラシックで格調高いデザイン
和を感じるデザイン
透明感のあるデザイン
子供向けのデザイン
女性らしいデザイン
男性らしいデザイン
高級感があるデザイン
信頼感があるデザイン
食べ物が美味しそうに見えるデザイン
春夏秋冬、季節を感じるデザイン

第2章 ロゴやカラーから考える配色デザイン
ロゴやブランドカラーから考える配色
黄をメインカラーにした配色
橙をメインカラーにした配色
赤をメインカラーにした配色
ピンクをメインカラーにした配色
緑をメインカラーにした配色
青をメインカラーにした配色
紫をメインカラーにした配色
茶をメインカラーにした配色
白、グレーをメインベースカラーにした配色
黒をベースカラーにした配色
トーンを合わせた配色

第3章 サイトの業種・ジャンル別から考えるデザイン
レストラン・カフェサイト
医療・病院サイト
ファッションサイト
美容・エステサイト
アートフェス・イベントサイト
音楽サイト
ウェディングサイト
アニメ・ゲームサイト
士業サイト
学校・幼稚園サイト
ポートフォリオサイト
ニュース・ポータルサイト
ネットショップ
コーポレートサイト
スポーツ・フィットネスサイト

第4章 レイアウトや構図から考えるデザイン
安定感を持たせるグリッドレイアウト
遊び心を持たせるフリーレイアウト
シンプルにすっきり見せる1カラムレイアウト
複数のマルチカラムレイアウト
ビジュアルを沢山見せるタイル・カード型のレイアウト
対比させたい時に使うシンメトリーなレイアウト
ビジュアルを印象付けるフルスクリーンレイアウト
線を効果的に使ったレイアウト
構図を意識したレイアウト

第5章 素材や書体、プログラムを効果的に使ったデザイン
1 写真をメインに使ったデザイン
2 たくさんの切り抜き写真を使ったデザイン
3 テクスチャを使ったデザイン
4 飾りパーツを使ったデザイン
5 イラストを使った親しみやすいデザイン
6 タイポグラフィを使ったデザイン
7 手書き文字を使ったあたたかみのあるデザイン
8 動画を効果的に使ったデザイン
9 動きを持たせたデザイン
10 インフォグラフィックスを用いて情報をわかりやすく伝えるデザイン

第6章 Webデザイントレンド
1 レスポンシブWebデザイン
2 Webフォントを使ったサイト
3 スプリットスクリーン
4 フラットデザインとマテリアルデザイン
5 マイクロ・インタラクション
6 大きなイメージや動画を使ったヒーローヘッダー
7 パララックスで見せる動きのあるサイト
8 カード型レイアウトとグリッドをあえて外したレイアウト
9 より鮮やかな配色

第7章 パーツ別デザイン
ヘッダー
グローバルナビゲーション
見出し
ボタン・ページトップナビ
テーブル
フォーム
ファビコン・アップルタッチアイコン
フッター
まとめサイトの紹介
サンプルサイト索引