いちばんよくわかるWebデザインの基本きちんと入門

レイアウト/配色/写真/タイポグラフィ/最新テクニック
伊藤 庄平、益子 貴寛、久保 知己、宮田 優希、伊藤 由暁

【好調シリーズ第2弾!!】
【これから本気で学びたい人の最高の教科書!】

一生使えるWebデザインの本気の入門書!

これからはじめる人、一気に学びたい人へ
一生使えるWebデザインのテクニック集!

絶対に外せない! レイアウト4つの原則とレスポンシブWebデザイン
今日から使える! 配色の基本と、実例デザインの配色見本集
ユーザーの心を動かす! 写真と図版の使い方、タイポグラフィの選び方
フレックスボックス、インタラクション、マーケティングの知識まで

この一冊でWebデザイナーに必須の基礎知識が網羅できる!

<本書の対象読者>
●これからWebデザインを学びたい初心者の方
●Webサイト制作に自信が持てない方
●1冊でWebデザイナーの基礎知識を網羅して学びたい

<目次>
CHAPTER 1 Webデザインの基本
SECTION 1 デザインとは何か
SECTION 2 目的と目標を考える
SECTION 3 ターゲットを想定する
SECTION 4 コンセプトを決める
SECTION 5 ワイヤーフレームやプロトタイプをつくる
SECTION 6 70%の完成度を目指してから、細部にこだわる
SECTION 7 ワークフローの全体像

CHAPTER 2 レイアウト
SECTION 1 レイアウトとは
SECTION 2 レイアウトの原則
SECTION 3 Webデザインにおけるレイアウト
SECTION 4 Webデザインにおけるナビゲーションのレイアウト
SECTION 5 レイアウトにおける視線誘導
SECTION 6 タッチデバイス向けのレイアウト
SECTION 7 レスポンシブWebデザイン
実例デザイン シングルカラム・レイアウト
実例デザイン マルチカラム・レイアウト
実例デザイン コンテンツを敷きつめていくレイアウト
実例デザイン フルスクリーンレイアウト
実例デザイン 情報量が多いレイアウト
実例デザイン 余白を活かしたレイアウト
実例デザイン ECサイトによく使われるレイアウト
実例デザイン グリッドデザインを意識したレイアウト

CHAPTER 3 配色
SECTION 1 色とは
SECTION 2 色の三属性
SECTION 3 トーン
SECTION 4 補色・類似色・配色の調和
SECTION 5 色の印象
SECTION 6 カラーモード
SECTION 7 利用者の視点に立った配色
SECTION 8 Webサイトの目的にあった配色と比率
SECTION 9 リンクの色の扱い
実例デザイン 赤をベースにした配色
実例デザイン 黄をベースにした配色
実例デザイン 緑をベースにした配色
実例デザイン 青をベースにした配色
実例デザイン ピンクをベースにした配色
実例デザイン 黒をベースにした配色
実例デザイン 白をベースにした配色
実例デザイン カラフルな配色
実例デザイン 和を感じる配色
実例デザイン 高級感のある配色
実例デザイン 信頼感のある配色
実例デザイン 男性的でスタイリッシュな配色
実例デザイン 女性的で柔らかな配色

CHAPTER 4 写真と図版
SECTION 1 Webデザインにおける写真
SECTION 2 Webデザインにおける図版
SECTION 3 色調補正
SECTION 4 写真のトリミング
SECTION 5 解像度、ピクセルについて
SECTION 6 画像のファイル形式
実例デザイン 横幅100%でメインビジュアルに写真を配置
実例デザイン パララックスで写真を配置して流れを演出
実例デザイン 背景に写真を使う
実例デザイン 切り抜き写真をうまく使う
実例デザイン イラストで世界観を構築する
実例デザイン サムネイルの見せ方
実例デザイン インフォグラフィックで情報を整理

CHAPTER 5 タイポグラフィ
SECTION 1 書体とは
SECTION 2 欧文書体と和文書体
SECTION 3 書体ファミリー
SECTION 4 書体の選び方
SECTION 5 本文の組版
SECTION 6 文字コードとブラウザの表示
SECTION 7 最適なfont-family
SECTION 8 Webフォントについて
SECTION 9 Webフォントのサービスの紹介
SECTION 10 Webフォントの使い方
実例デザイン 明朝系のフォントを使い信頼感のあるデザイン
実例デザイン ゴシック系のフォントを使い力強いデザイン
実例デザイン 優しい・柔らかい印象のデザイン
実例デザイン 手描き・手作り感を演出するデザイン
実例デザイン 装飾された文字のデザイン
実例デザイン 縦書きのWebデザイン
実例デザイン 文字だけのWebデザイン

CHAPTER 6 HTML5とCSS3
SECTION 1 HTML5の基礎
SECTION 2 CSSの基礎
SECTION 3 CSSの作り方と管理
SECTION 4 CSSでレイアウトする
SECTION 5 メディアクエリーで作るレスポンシブWebデザイン

CHAPTER 7 インタラクション
SECTION 1 インタラクションデザインとは
SECTION 2 インタラクションデザインの基本
実例デザイン アコーディオン
実例デザイン モーダルウィンドウ
実例デザイン カルーセルパネル
実例デザイン パララックス
SECTION 3 マイクロインタラクションとは
実例デザイン マイクロインタラクション
SECTION 4 CSSを使ったインタラクション
SECTION 5 JavaScriptとは
SECTION 6 動きのあるサイトを作るときの注意点
SECTION 7 SVGやWebGLを使ったインタラクションデザイン
実例デザイン SVG
実例デザイン CanvasとWebGL

CHAPTER 8 運用とマーケティング
SECTION 1 テスト環境と本番環境
SECTION 2 公開前後のチェック作業
SECTION 3 Webマーケティングの全体像
SECTION 4 インターネット広告の種類
SECTION 5 リスティング広告
SECTION 6 ランディングページ最適化(LPO)
SECTION 7 検索エンジン最適化(SEO)
SECTION 8 ソーシャルメディアマーケティング
SECTION 9 Googleアナリティクス
SECTION 10 Google Search Consoleとタグマネージャ
SECTION 11 Webサイトの改善策

INDEX

COLUMN
KPIツリー
ヒアリングシートを使おう
トーン&マナーとは
オフキャンバスナビゲーション
レスンポンシブサイトの例
Webデザインにおけるレイアウトのトレンドや探し方
容量が大きなPNGファイルをどう扱うか
JPG,GIF,PNGのデータ容量と見え方の違い
Photoshopの解像度と再サンプル
仮想ボディと字面
ウェイト選びのコツ
OpenTypeフォントの機能を使う
AndroidのシステムフォントRoboto を使ってみよう!
カルーセルパネルのクリック率測定結果
フラットデザインとマテリアルデザイン
CMSを使ったWeb制作
保守・運用の大切さ

<掲載紙面例>