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

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

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

本のキャプチャ

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

本のキャプチャ

プロとして恥ずかしくない
新Webデザインの大原則
[Amazonでみる]
[楽天でみる]

監修:
こもり まさあき
出版社:
MdNコーポレーション
発売日:
2014/12/24

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

本のキャプチャ

プロとして恥ずかしくない
新Webデザインの大原則
[Amazonでみる]
[楽天でみる]

監修:
こもり まさあき
出版社:
MdNコーポレーション
発売日:
2014/12/24

献本の御礼

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

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

top of page

©2017 coliss