Web制作で必要な知識を基礎からしっかり理解し、ずっと役立つ応用力も身につくオススメの本 -Webデザインの新しい教科書
Post on:2016年2月12日
Web制作の知識を基礎から深く理解し、現在のWeb制作のワークフローを元に、現場で必要とされている技術的なテクニックを幅広く解説した一冊を紹介します。
これからWeb制作の仕事をしてみたい人にも、現役で仕事としてバリバリ従事している人にもオススメで、自分で考える力が養える良書です。

本書は「改訂新版」とある通り、2013年2月に発売された「Webデザインの新しい教科書」の改訂版です。この3年間で大きく変わったポイント、モバイルの普及、レスポンシブ、HTML5、CSS3 を中心に、今時のWeb制作の現場で必要とされている知識を基礎から幅広く身につけることができます。
Kindle版は、お値段がお得です。
一つのトピックは見開き2-4ページでまとめられており、レイアウトもすっきりしていて、非常に見やすいです。

テキストだけだと理解しにくいかもしれませんが、イラストやコードが豊富で、デモの一部はサンプルファイルがダウンロードできます。

些細なことですが、本書は見開き状態をどのページでも保つことができます。ページを開きながら、キーボードやマウスの操作をしたい人には嬉しいですね。

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。

本書は9章構成で、Webデザイン・サイトの概要をはじめ、HTMLやCSSのテクニック、素材の取り扱い方、サイトの公開・運用まで、幅広く現状のスタイルを学ぶことができます。

これからの方向性的なことにも触れられているので、現在の立ち位置からどの方向に向かうべきかの参考にもなるでしょう。

制作系のトピックは2章から。
サイトの設計から学んでいきます。

サイト制作には、必ず複数の人が存在します。最小単位は制作者とクライアントで、それぞれにメンバーが加わり、フェーズごとに10人が動くかもしれません。
そういう時に大切なのが、認識の一致。「ワイヤーフレーム」「ハイレベルサイトマップ」など、それがどういう目的でどういうものなのか、認識が一致しているとプロジェクトもスムーズに進みます。

3章はHTML5を中心としたマークアップ関連。

リファレンス系の情報が多いですが、テクニック系の情報もあり、見逃せません。

4章はCSSで、最もページ数があります。

CSSでは実践的なテクニックが非常に充実しています。

レイアウトの確認はborderではなく、outlineを使うといいよとか、

floatを使ったレイアウト手法とか、すぐに使える実用度の高いものばかりです。

5章は素材について。
素材を扱うためのアプリ、SVGや動画・音声素材の使い方など。

6章は色の話。
この章だけデザイン寄りに感じますが、実はそうでもなく、環境によって違うカラーの見え方、カラーモード、PhotoshopにおけるHSVの利用方法など、Webデザインで使うカラーや配色の知識です。

7, 8章はサイトの公開・運用。
この「品質」というのが制作する上で、一番大切なポイントです。リスクマネジメントができる人材は会社でも重宝されるでしょう。

Gitは制作物のバージョンを管理できるだけでなく、サイトそのものの更新も可能です。

本格的なユーザーテストとなると予算や時間の都合で難しいことがあります。そんな時は、社内のプロジェクト外のスタッフや家族や友人などに協力してもらうのも手です。制作者ではない目線で見ると、意外な発見があるかもしれません。

最後の9章は、実践編。
本書で学んだ知識や考え方を活かして、レスポンシブ対応のサイトをつくっていきます。

レスポンシブ対応のデザインカンプを元に、レイアウトを確認し、画像を書き出し、HTMLファイルを作成します。

スタイルシートはモバイルファーストで、スマホ用のCSSから実装していきます。normalize.cssの導入から、スマホ用のレイアウト・装飾を行います。

スマホ用が完成したら、あとはタブレットとデスクトップです。ブレイクポイントの設定、各デバイスのスタイルを追加していきます。
このサンプルデータは、専用サイトからダウンロードできます。
Webデザインの新しい教科書の目次
-
- Webデザインの世界を知る
- インターネットとWWWの歴史
- WebページがWebブラウザに表示されるまでの仕組み
- 多様化するWebブラウザのことを知ろう
- Webデザインって何をすること?
- 実際のWebサイトができるまで
- Webサイト制作にはどんな人たちが関わるのか?
- Webサイト制作のために必要な技術
- Webサイト制作に必要なツール
- これからのWebデザイン
-
- Webサイトを設計する
- Webサイトは何のためにあるのか?
- Webサイト全体の構成を見てみよう
- Webページの構造を分析してみよう
- Webページを一般的な文書に置き換えてみよう
- 文書のアウトラインを考えてみよう
- 情報を多様な環境で取得しやすくすることの大切さ
- 情報の意味を伝えるために必要なHTML
- ワイヤーフレームを使って情報を視覚的に配置する
- HTMLをデザイン・レイアウトするCSS
- 高度なインタラクションを追加するJavaScript
- これからのWebサイト設計
- レスポンシブWebデザインとは
-
- HTMLの役割とできること
- HTMLとはどんなもの?
- テキスト情報に意味を与えるマークアップ
- HTMLファイルをWebブラウザで表示してみよう
- 要素(タグ)と属性の違い
- HTMLの基本構造
- head要素とbody要素の違い
- head要素の中に入る要素
- body要素内の構造と要素の性質の違い
- 見出しを表すh要素と段落を意味するp要素
- 文字列の特定部分に意味を与える要素
- 引用や出典を示す要素
- 強制改行を意味するbr要素と水平罫線を表すhr要素
- 情報の削除を示すdel要素と修正を意味するins要素
- 画像を挿入するimg要素
- 文書同士をつなげるa要素
- 文書の制作者などを示す要素
- 情報をグループ化するdiv要素とspan要素
- リストを表現する要素
- 表組みを作るための要素
- フォームを作るための要素
- 文章をマークアップしてみよう
- HTML5の特徴
- HTML5で新しく加わったWebページの構造を示す要素
- HTML5のフォームに関連するtype属性値と属性
-
- CSSの役割とできること
- CSSとはどんなもの?
- CSSで情報をデザインする
- HTMLはWebブラウザにどう表示されている?
- HTMLにCSSを適用するには?
- セレクタとはどんなもの?
- よく使われるセレクタ
- 覚えておきたいCSSのルール
- CSSを書いてWebブラウザで表示してみよう
- プロパティを性質の違いで大きく2 つに分類してみる
- 文字や背景に色をつけてみよう
- 背景に画像を表示する
- 文字のサイズを設定する
- 書体(フォント)を指定する
- 文字の行間や開始位置を調整する
- リンクの色を変更する
- マウスの状態に応じてリンクのスタイルを変える
- 疑似要素の使い方と効果
- CSSを書く前に覚えておきたいボックスモデル
- 内容の幅と高さを指定する
- 情報の含まれるブロックにボーダーを設定する
- パディングを調整する
- 隣接するブロックとの間隔を調整する
- 情報をブロック単位で並べる
- 文書構造順に積み木感覚でブロックを配置
- floatプロパティによる回り込みの解除
- 意図した場所にブロックを配置する
- CSSによるレイアウトの実践
- displayプロパティで要素の表示状態を切り替える
- リストを装飾する
- テーブルを装飾する
- フォームを装飾する
- CSSの最新バージョン「CSS3」について
-
- Webサイトを構成する素材
- Webサイトで使う素材
- 著作権とライセンス
- テキストと文字コード
- Webサイトの標準的な色空間
- 画像を構成する単位「ピクセル」
- Webサイトで使う画像フォーマット
- ベクター形式の画像フォーマット「SVG」
- Webサイトで使う映像素材や音声素材
-
- Webサイトを表現する色
- カラーモードの違い
- 色の三属性
- 色指定の方法
- 代表的な配色技法
-
- Webサイトを公開する
- ホスティングサービスの種類と選び方
- Webサイトの公開前に確認すること
- Webサイトの品質を確認する
- ローカル環境でWebサイトをチェックする
- サーバーとクライアントの関係
- 制作したWebデータの送信に利用するFTP
- FTPクライアントでデータをアップロードする
- Webブラウザで表示を確認する
- Webサイトデータのバージョン管理
-
- Webサイトを運用する
- ソーシャルメディアと連携する
- Googleにサイトを登録するには?
- アクセス解析でWebサイトの効果を測定する
- Webサイトの調査、改善を行うには?
- サーバーソフトウェアのアップデートとセキュリティ対策
-
- Webサイトを制作する
- HTMLをコーディングする前の制作準備
- ページのHTMLファイルを制作する
- ベースとなるモバイル用のCSSを作る
- タブレットとPCサイズのスタイルを指定する
Web制作について、基礎からしっかり身につけたい人、広く深く学びたい人に特にオススメです。
献本の御礼
最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors