Web制作で必要な知識を基礎からしっかり理解し、ずっと役立つ応用力も身につくオススメの本 -Webデザインの新しい教科書

Web制作の知識を基礎から深く理解し、現在のWeb制作のワークフローを元に、現場で必要とされている技術的なテクニックを幅広く解説した一冊を紹介します。

これからWeb制作の仕事をしてみたい人にも、現役で仕事としてバリバリ従事している人にもオススメで、自分で考える力が養える良書です。

本書は「改訂新版」とある通り、2013年2月に発売された「Webデザインの新しい教科書」の改訂版です。この3年間で大きく変わったポイント、モバイルの普及、レスポンシブ、HTML5、CSS3 を中心に、今時のWeb制作の現場で必要とされている知識を基礎から幅広く身につけることができます。

Kindle版は、お値段がお得です。

• 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デザインの新しい教科書の目次

1. Webデザインの世界を知る

   インターネットとWWWの歴史

   WebページがWebブラウザに表示されるまでの仕組み

   多様化するWebブラウザのことを知ろう

   Webデザインって何をすること？

   実際のWebサイトができるまで

   Webサイト制作にはどんな人たちが関わるのか？

   Webサイト制作のために必要な技術

   Webサイト制作に必要なツール

   これからのWebデザイン

2. Webサイトを設計する

   Webサイトは何のためにあるのか？

   Webサイト全体の構成を見てみよう

   Webページの構造を分析してみよう

   Webページを一般的な文書に置き換えてみよう

   文書のアウトラインを考えてみよう

   情報を多様な環境で取得しやすくすることの大切さ

   情報の意味を伝えるために必要なHTML

   ワイヤーフレームを使って情報を視覚的に配置する

   HTMLをデザイン・レイアウトするCSS

   高度なインタラクションを追加するJavaScript

   これからのWebサイト設計

   レスポンシブWebデザインとは

3. HTMLの役割とできること

   HTMLとはどんなもの？

   テキスト情報に意味を与えるマークアップ

   HTMLファイルをWebブラウザで表示してみよう

   要素（タグ）と属性の違い

   HTMLの基本構造

   head要素とbody要素の違い

   head要素の中に入る要素

   body要素内の構造と要素の性質の違い

   見出しを表すh要素と段落を意味するp要素

   文字列の特定部分に意味を与える要素

   引用や出典を示す要素

   強制改行を意味するbr要素と水平罫線を表すhr要素

   情報の削除を示すdel要素と修正を意味するins要素

   画像を挿入するimg要素

   文書同士をつなげるa要素

   文書の制作者などを示す要素

   情報をグループ化するdiv要素とspan要素

   リストを表現する要素

   表組みを作るための要素

   フォームを作るための要素

   文章をマークアップしてみよう

   HTML5の特徴

   HTML5で新しく加わったWebページの構造を示す要素

   HTML5のフォームに関連するtype属性値と属性

4. CSSの役割とできること

   CSSとはどんなもの？

   CSSで情報をデザインする

   HTMLはWebブラウザにどう表示されている？

   HTMLにCSSを適用するには？

   セレクタとはどんなもの？

   よく使われるセレクタ

   覚えておきたいCSSのルール

   CSSを書いてWebブラウザで表示してみよう

   プロパティを性質の違いで大きく2 つに分類してみる

   文字や背景に色をつけてみよう

   背景に画像を表示する

   文字のサイズを設定する

   書体（フォント）を指定する

   文字の行間や開始位置を調整する

   リンクの色を変更する

   マウスの状態に応じてリンクのスタイルを変える

   疑似要素の使い方と効果

   CSSを書く前に覚えておきたいボックスモデル

   内容の幅と高さを指定する

   情報の含まれるブロックにボーダーを設定する

   パディングを調整する

   隣接するブロックとの間隔を調整する

   情報をブロック単位で並べる

   文書構造順に積み木感覚でブロックを配置

   floatプロパティによる回り込みの解除

   意図した場所にブロックを配置する

   CSSによるレイアウトの実践

   displayプロパティで要素の表示状態を切り替える

   リストを装飾する

   テーブルを装飾する

   フォームを装飾する

   CSSの最新バージョン「CSS3」について

5. Webサイトを構成する素材

   Webサイトで使う素材

   著作権とライセンス

   テキストと文字コード

   Webサイトの標準的な色空間

   画像を構成する単位「ピクセル」

   Webサイトで使う画像フォーマット

   ベクター形式の画像フォーマット「SVG」

   Webサイトで使う映像素材や音声素材

6. Webサイトを表現する色

   カラーモードの違い

   色の三属性

   色指定の方法

   代表的な配色技法

7. Webサイトを公開する

   ホスティングサービスの種類と選び方

   Webサイトの公開前に確認すること

   Webサイトの品質を確認する

   ローカル環境でWebサイトをチェックする

   サーバーとクライアントの関係

   制作したWebデータの送信に利用するFTP

   FTPクライアントでデータをアップロードする

   Webブラウザで表示を確認する

   Webサイトデータのバージョン管理

8. Webサイトを運用する

   ソーシャルメディアと連携する

   Googleにサイトを登録するには？

   アクセス解析でWebサイトの効果を測定する

   Webサイトの調査、改善を行うには？

   サーバーソフトウェアのアップデートとセキュリティ対策

9. Webサイトを制作する

   HTMLをコーディングする前の制作準備

   ページのHTMLファイルを制作する

   ベースとなるモバイル用のCSSを作る

   タブレットとPCサイズのスタイルを指定する

Web制作について、基礎からしっかり身につけたい人、広く深く学びたい人に特にオススメです。

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス