MdNCORPORATION

現場のワークフローで覚える Webサイト制作教室

現場のワークフローで覚える Webサイト制作教室

高橋のり 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2012-04-20
仕様 B5変型判/320pP
ISBN 978-4-8443-6260-9
デザインのやりなおしが頻繁に起こる。モックアップづくりにすごく時間がかかる。CSSでボックスとボックスを離したいのに、なぜかいつもくっついてしまう。──Webデザインのプロセスとコーディングのしくみをきちんと理解していないと、いろいろなところでつまずいてしまうことがよくあります。 本書はこのような悩みをもつ方のために、「Webデザインってなに?」というそもそもの基本から、手戻りの起こりにくい設計図のつくり方、Photoshopを利用したモックアップ作成、HTML+CSSによるコーディングと、制作ワークフローに沿ってつまずきやすいポイントとスムーズな仕事の進め方を紹介しています。さらにHTML5、CSS3、jQuery、TwitterやFacebook等のWebサービスとの連携、スマートフォン対応、WordPress導入法など、いま現場で必要とされる技術を初学者の方にもわかりやすく解説。「HTML+CSSの文法は知っているけれど……」「一歩進んだ技術を修得したい!」という方にぴったりの内容になっています。 サンプルデータもダウンロードできるので、手もとで動作を確認しながら解説を読み進められます。超人気ブログ『Webデザインレシピ』の著者による必修のWebデザインレッスン、本日開講です!

→サンプルデータのダウンロードはこちら

→サンプルページの閲覧

→著者のブログ『Webデザインレシピ』



■ページ見本










目次

【現場のワークフローで覚える Webサイト制作教室】

INTRODUCTION Webデザインってなに?

LESSON001 Webデザインをするなら忘れちゃいけない3つのこと
ユーザビリティ・ターゲット・ゴールを明確に意識する

LESSON002 Webデザインにあたって注意しておきたいこと
ユーザビリティ(1)|見やすさ・読みやすさを犠牲にしない
ユーザビリティ(2)|ユーザーを不安にさせない
ユーザビリティ(3)|表示を軽くする
ターゲットへの訴求を考慮する
ゴールを明確に意識する

LESSON003 ユーザーの閲覧環境とWebデザインの関係
モニタ解像度とWebサイトのサイズ
Webサイトのサイズの決め方
ブラウザと使用できる技術の関係
ターゲットブラウザ・制作ポリシーの決め方
スマートフォン環境での閲覧

[COLUMN]
デザインのヒントはWeb以外にも

────────────────
CHAPTER ONE サイトの設計図をつくる

LESSON001 まず、Webサイト公開の目的とターゲットを明確に
目的とターゲットを決める
設計図にどのような影響があるか

LESSON002 コンテンツにあわせたWebサイトのレイアウト
版面率と図版率
文字のジャンプ率

LESSON003 コンテンツを整理してサイトマップを作成
サイトマップ
必要な機能とCMSの導入の検討

LESSON004 最終的な設計図となるワイヤーフレームづくり
ワイヤーフレームをつくる
ワイヤーフレームに書き込むこと
ページレイアウトのワイヤーフレーム
ラフデザインをつくろう

[COLUMN]
ワイヤーフレームづくりに使うツール

────────────────
CHAPTER TWO デザインモックアップをつくる

LESSON001 Webを制作するときのPhotoshopの設定
Photoshopの環境設定
Photoshopのカラー設定

LESSON002 モックアップづくりに便利なPhotoshopの機能
ガイド・グリッドを使う
スマートガイドを使う

LESSON003 大枠のレイアウトをつくってみよう
シェイプで描いていく
レイヤースタイルで装飾する
ショートカットの活用
シェイプにない形はマスクでつくる
複数のレイヤーを複製する
スマートオブジェクトでパーツづくりを効率的に

LESSON004 操作が伝わるUIエレメントをつくる
UIエレメントの考え方
立体感のあるボタンをつくる
そのほかのUIエレメントを作成する

LESSON005 モックアップから画像を切り出す
画像の切り出しの考え方
スライスの作業
画像を最適化する
残った画像の処理

LESSON006 CSS3による表現と画像による表現の違い
ドロップシャドウのついた角丸ボックス
グラデーションのついたボタン

[COLUMN]
アフォーダンスとUI
レイヤースタイルを2重に適用する
画像の最適化サービス

────────────────
CHAPTER THREE HTMLのマークアップで気をつけたいこと

LESSON001 HTMLは文書構造をマークアップする言語
レイアウトと文書構造の違い
意味が通るようにコーディングするのが大事

LESSON002 アウトライン構造をつくる(1) (X)HTMLのアウトライン
アウトライン構造はhx要素でつくる
アウトライン構造を保つために注意したいこと

LESSON003 アウトライン構造をつくる(2) HTML5のアウトライン
HTML5のアウトライン構造
セクショニング・コンテンツとヘッディング・コンテンツ

LESSON004 HTML5で変わった要素の分類と文法
HTML5の要素の分類

コンテンツモデル

LESSON005 HTML5での追加要素と意味が変わった要素
よりセマンティックになったHTML5
テキストレベルでの新要素
変更になった要素・廃止になった要素

LESSON006 HTML5でのマークアップの実際
シンプルになったHTML5の記述
Internet Explorer対策

[COLUMN]
HTMLの文法の正しさと文書構造の正しさは別のもの
セクショニング・ルート
アウトラインを確認するための便利ツール

────────────────
CHAPTER FOUR CSSで装飾する

LESSON001 ボックスモデルと視覚整形モデルのしくみ
ボックスモデル
視覚整形モデル
包含ブロック内でつくられるボックスの種類

LESSON002 displayプロパティとインライン/ブロックの関係
ブロックボックス
インラインボックス

LESSON003 ボックスの配置(1) 通常フローのしくみ
通常フロー
マージンの相殺

LESSON004 ボックスの配置(2) フロートのしくみ
フロートとは
clearプロパティ
clearを指定した要素に対するマージン
フロートをもっと理解しよう
実際にレイアウトをつくってみよう
横並びのナビゲーションメニューをつくってみよう

LESSON005 ポジションプロパティを使った配置
相対配置──position:relative
絶対配置──position:absolute
固定配置──position:fixed

LESSON006 z-indexで要素の重なり順を変更する
z-indexプロパティのしくみ
複数のスタック文脈が存在するケース

LESSON007 CSS3を使ったさまざまな表現
ボックスシャドウ──box-shadow
角丸──border-radius
テキストシャドウ──text-shadow
グラデーション──gradient

LESSON008 Webフォントを使ってみよう
WEBフォントとは

[COLUMN]
匿名ボックスとは
インラインボックスで上下の間隔を調整するには
br要素へのclearプロパティの指定
z-indexとクリッカブルエリア
角の丸みに楕円を指定する
IEのフィルター機能
CSSのフレームワークを使ってみよう

────────────────
CHAPTER FIVE jQueryでインタラクション

LESSON001 CSSがわかればjQueryは簡単
そもそもjQueryとは?
CSSに似ているjQueryの書き方
jQueryのよく使うメソッド
jQueryの実行のタイミング

LESSON002 jQueryでつくるドロップダウンメニュー
HTML+CSSの準備
jQueryでコーディング
孫メニューをつくってみる

LESSON003 プラグインを利用したコンテンツスライダー
jQueryのプラグイン
コンテンツスライダーの作成
コントロールボタンを設置
Easingプラグインを併用する

LESSON004 フォームの入力項目をチェックする
フォームのバリデーション
チェックのしくみ
パスワードのチェック
選択項目を必須にする
ツールチップの表示オプション

LESSON005 フォームエレメントのデザインを変える
チェックボックス/ラジオボタンを変更する
チェックボックスの変更
ラジオボタンの変更
UI.Elementsを使う(1)|チェックボックス
UI.Elementsを使う(2)|ラジオボタン
UI.Elementsを使う(3)|セレクトボックス

LESSON006 jQuery UIでつくるアコーディオンパネル
jQuery UIとは
jQuery UIでアコーディオンパネルを作成
jQuery UIでタブを作成

LESSON007 jQueryを使ったレイアウトテクニック
高さの違うボックスを揃える
ボックスを敷きつめるMasonry.js
ウィンドウいっぱいの背景画像
開閉するブロック
スクロールで出現するエレメント

LESSON008 jQueryで文字サイズ変更
Font Sizerを使う

[COLUMN]
CSSメソッドの書き方
$()はjQuery()のエイリアス
エラーメッセージの設定

────────────────
CHAPTER SIX ソーシャルサービスと連携する

LESSON001 Twitterのボタンを設置する
ツイートボタンの設置の基本
オリジナルデザインのツイートボタン

LESSON002 Facebookのプラグインを埋め込む
いいね!ボタンを設置する
投稿ボタンをオリジナルのデザインにする

LESSON003 ソーシャルブックマークのボタンの設置
Google+1ボタンの設置
はてなブックマークの登録ボタンの設置
そのほかのソーシャルブックマークボタン

LESSON004 Googleマップをカスタマイズ
通常のGoogleマップの埋め込み
jQueryプラグイン+Google Maps API

LESSON005 Googleを利用したサイト内検索
Googleカスタム検索を利用する
検索結果を別ページで表示する

LESSON006 YouTubeの動画を埋め込む
YouTubeの動画の埋め込み
プレイヤーをCSSでカスタマイズ

[COLUMN]
最新ツイートの表示
Ustream動画の埋め込み

────────────────
CHAPTER SEVEN スマートフォン対応サイト

LESSON001 スマートフォンサイトとPCサイトの違い
スマートフォンサイトはPCサイトと同じ?
使用環境の違い

LESSON002 デバイスにあわせてHTMLやCSSを切り替える
スマートフォン対応の方針を決める
ユーザーエージェントを利用した振り分け
Media Queries(1)|スクリーンサイズに応じた切り替え
Media Queries(2)|解像度に応じた切り替え

LESSON003 スマートフォンサイトコーディングのポイント
Viewportを利用する
そのほかのスマートフォンならではの機能

LESSON004 Media QueriesでレスポンシブWebデザイン
レスポンシブWebデザインとは
レスポンシブWebデザインのメリット/デメリット

LESSON005 jQuery Mobileを使ってみよう!
jQuery Mobileとは
data属性を利用したマークアップ
ページ全体のマークアップ
jQuery Mobileのリンク
UIエレメントのマークアップ
フォームのUIエレメント

────────────────
CHAPTER EIGHT WordPressでサイト構築

LESSON001 WordPressでサイトを構築しよう
WordPressとは
WordPressについての予備知識
開発環境を整える
WordPressのインストール
Webサイトの表示

LESSON002 WordPressサイトのファイル構造
テーマフォルダの中を覗いてみる
部品化されたテンプレートファイル
テンプレートファイルとテンプレート階層
style.cssとfunctions.php
style.css
functions.php

LESSON003 テンプレートタグと記述のルール
テンプレートタグとは?
WordPressループとは?
実際にテーマを作成するには

LESSON004 固定ページ機能で小規模サイトを作成
WordPressの固定ページ機能
お知らせページの作成
トップページの作成
グローバルナビゲーションの作成

LESSON005 カスタム投稿タイプで更新型コンテンツを表示
カスタム投稿タイプを使う
カスタム投稿タイプの作成
カスタム分類を使う

[COLUMN]
WordPressのプラグイン

INDEX

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊