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

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

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

本の表紙

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

本の表紙

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

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

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制作について、基礎からしっかり身につけたい人、広く深く学びたい人に特にオススメです。

本の表紙

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

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

献本の御礼

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

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

top of page

©2016 coliss
o