これからのWeb制作に必要な知識や気になるテクニックがよく分かるオススメの本 -新Webデザインの大原則

マルチデバイス時代の使いやすい、分かりやすいWeb制作にどのように取り組むべきか、いま求められているWeb制作の知識や気になるテクニックが網羅されたオススメの本を紹介します。

ディレクター・デザイナー・コーダーをはじめ、Web制作に携わる人はこういった本を一冊はもっておいて損はないでしょう。

「新Webデザインの大原則」は、「Webデザインの大原則」から8年ぶりのリニューアル！
前書から内容はがらっと変わってます。

Kindle版は先週リリースされ、お値段が少しお得です。

• 新Webデザインの大原則（Kindle版）

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

本書はスマホやタブレットなど、マルチデバイスの普及により多様化されたユーザーがストレスなく情報を取得できる、使いやすい、分かりやすいWeb制作にどのように取り組むべきかを解説したもので、現在のWeb制作の動向を再確認しつつ、これからの新しいテクニックを理解する流れになっています。

扱っている情報はデザインからコーディング、設計、運用と多岐に渡り、これ一冊でWeb制作に必要な知識が一通り網羅されていると言ってもよいです。

例えば、レイアウトの基本パターンだと、IA的な面からのアプローチ、そしてデザイナー、コーダーにとって必要な情報がしっかりと書かれています。

なぜそのレイアウトを採用するのか、どんなメリットがあり、注意点はどこかなど、実務にすぐに役立つと思います。

Webデザインにおいて配色は非常に大切です。サイトのトーン&マナーだけでなく、ユーザビリティやアクセシビリティにも配慮し、情報を整理する機能的な役割も担っています。
アクセントカラーの設計方法、グラデーションの効果や効果的な使い方、文章を読みやすくするカラーの使い方、デバイスを考慮したカラーの選び方、またカラーのサンプルも実際のサイトを例にした配色の作り方も詳しく書かれています。

近年大きく変わったのはユーザーの閲覧環境だけではありません。制作のフローも進化しています。
要件定義からはじまり、設計・実装・検証と一つ流れで各フェーズを管理するウォーターフォール型のフローのリスクを軽減するアジャイル型のフローが注目されています。これは設計・実装・検証を小さいサイクルで繰り返して進めるもので、手戻りを最小限に抑えることができます。

デザイナーに求められているテクニックも変化しています。マルチデバイスを考慮した画像の作成、そして画像の軽量化、またベクターベースの画像の需要も高まっています。

コーディングは過去のIEへの対応が減少したのもあり、本来割くべき作業に時間をとれるようになってきました。検索エンジンを考慮した構造化データ、マルチデバイス用のカラムレイアウトなどに今まで以上に取り組むのもよいでしょう。

IE8などの古い環境を基準にするのではなく、モダンブラウザの水準にあわせてサイトを制作し、古いブラウザでは一定の水準で表現を提供する「グレースフル・グラデーション」という考え方が最近は浸透してきています。

実務で役立つツール類も数多く紹介されているのは、嬉しいですね。

YouTube, Googleマップ, Twitter, FacebookといったWebサービスとの連携も最近では必須と言えるでしょう。

サイトは作って終わりではなく、作ってからが始まりです。運用・管理の面で必要な最近の動向もチェックしておきましょう。

新Webデザインの大原則の目次

1. レイアウト

   Webサイトとは

   Webサイトの各部名称と機能

   Webレイアウトの基本6パターン

   シングルカラム型レイアウト

   マルチカラム型レイアウト

   カード型レイアウト

   1ページアプリケーション型レイアウト

   フルスクリーン型レイアウト

   グリッドを利用したレイアウト手法

   レスポンシブなレイアウトパターン

   (コラム)レイアウトの役割

2. 配色

   Webデザインにおける配色の基本

   高級感を表現する配色

   季節を感じさせる配色

   和を感じさせる配色

   にぎやかさを感じさせる配色

   モノトーンで洗練された配色

   信頼感を表現する配色

   食べ物をおいしく見せる配色

   男性向けの配色

   女性向けの配色

   子ども向けの配色

   (コラム)色指定の方法の種類について

3. サイト設計&プロトタイピング

   Webサイト制作のワークフロー

   閲覧環境の変化

   表示パフォーマンス

   制作作業に入る前の設計段階で決めておくこと

   アクセシビリティの確保

   ユーザビリティの重要性

   IAサイトマップ

   ワイヤーフレーム制作

   モックアップ制作

   レスポンシブWebデザイン

   ワイヤーフレームを使った実装

   (コラム)フレームワークの紹介

4. デザイン&パーツ制作

   Webのグラフィックの種類

   Webフォントの利用

   画像軽量化の技術

   マルチデバイスを考慮した画像作成

   (コラム)制作ツールの今後

5. HTML+CSSコーディング

   HTML+CSSとは

   デバイスとブラウザによるレンダリングの違い

   HTMLの基本

   検索エンジンと構造化データの関わり

   CSSの基本

   CSSレイアウトの基本

   カラムレイアウトの手法

   メディアクエリによるレスポンシブデザイン

   CSSスタイリングの基本

   CSSプリプロセッサとは

   Sassの基本機能

   Sass以外のCSSプリプロセッサ

   CSSプリプロセッサをサポートするライブラリ

   CSSポストプロセッサとは

   HTML/CSSの今後の動向

   コーディングに役立つツール

   (コラム)Gruntとgulpを比較する

6. リッチコンテンツ&Webアプリケーション

   JavaScript/jQueryの役割

   jQueryの基本的な使い方

   jQueryのプラグインを組み込む

   HTML5のAPI

   Webサービスとの連携

   サーバサイドが必要になる技術

   サーバ環境の基礎知識

   Node.jsを使ったサイト制作

   (コラム)どんどん変わるWebの世界

7. 運用・分析・集客・リニューアル

   テスト公開とチェック

   Webサイトの運用

   効果検証・アクセス解析の基本的指標

   SEO

   SEOの危険な施策とペナルティ

   Webサイトリニューアルのポイント

こういったWeb制作全般に渡る情報が網羅されている本が手元にあると非常に便利ですよね。
気になる情報を見つけたらより深く調べてみたり、パラパラ眺めて気になったものを次のプロジェクトに使ってみたり。

献本の御礼

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

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

• お問い合わせ｜コリス