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

Post on:2016年2月12日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

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

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

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

Webデザインの新しい教科書改訂新版
基礎から覚える、深く理解できる。
[Amazonでみる]
[楽天でみる]

著：: こもりまさあき、赤間公太郎
出版社：: MdNコーポレーション
発売日：: 2016/2/2

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

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サイズのスタイルを指定する