Webデザインで今必要されているテクニックの考え方や使い方が分かる解説書 -Webデザイン&レイアウトの最新常識

ページのレイアウトだと最近はマルチカラムからシングルカラムへ、そしてフルスクリーン表示も増えてきました。また、マルチカラムを使用する場合は列ではなく、行の構成が重要視されています。
なんとなくこれらのレイアウトを採用するのではなく、それぞれの役割、利点と欠点が分かると今まで以上により効果的に使えるようになります。

レイアウトやカラー、UIやUX、グラフィックやタイポグラフィ、エフェクトやリッチメディアなど、Webデザインで今必要されているテクニックの考え方や使い方が分かるオススメ本を紹介します。

本書はWebデザインに関する最新のトレンド、考え方、使い方をまとめた解説書で、制作の現場ですぐに利用できるよう便利なツール類や実際の事例も多く掲載されています。

デザインやレイアウトの気になるテクニックを見つけたら、チェックをして、実際に使ってみましょう！

Kindle版 Webデザイン&レイアウトの最新常識（9/29発売）は値段が少しお安めです。

発売を記念して10/6に、執筆陣によるイベント（有料）があります！
詳しくは下記ページをご覧ください。

• 『現場のプロが教える Webデザイン&レイアウトの最新常識』刊行記念イベント

イベントでは面白法人カヤックの現役ディレクターをはじめとする著作陣一同が、、フラットスタイル、レスポンシブデザイン、Webフォントといった注目すべき動向を中心にWebデザインの現在と未来について意見を交わす座談会形式だそうです。

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

本書はWebデザイン制作の現場で知っておきたいこと、役立つノウハウが満載です。各トピックスはテキストの解説が充実しており、豊富な実例で実際にどのように効果的に使うのかも分かると思います。

重要な箇所はハイライトされているので、見逃すこともないでしょう。

チェックリストは既に制作したものやこれから制作するプロジェクトに役立ちます。

本書は4部構成、第1章は「レイアウトと配色」。

最近の流れとしてはクリックするページ単位の考え方からスクロールを基準としたレイアウトに切り替わりつつあります。なんとなく知ってはいるけどということも、どのような考えでどのように実装するのかをしっかりと理解し、自分のものにしておきたいですね。

最近のトレンドも今の自分には必要なくても、自身のスキルアップや次のプロジェクトに必ず役立つポイントです。

第2章は「UIとUX」。

スマホの普及にも伴い、UIデザインが広く注目をされるようになりました。UIの専門家だけでなく、Web制作に携わる人全てデザイナーにもコーダーにも重要なスキルと言えるでしょう。

シャドウを効果的に使う方法、光・面・動きの利用方法、遷移と現在位置を意識させる方法、統一感のある配色方法、余白の重要性など、どのようなアプローチをし、どこを意識してデザインするべきか具体的な事例を元に学んでいきます。

UI/UXはビジュアル面だけのことではありません。コンテンツや仕様にも大きな影響を与えます。

第3章は、「グラフィックとタイポグラフィ」。
この章はビジュアル面を中心にしたお話です。

最近の主流はフラットデザイン、そこからベクター、幾何学、クォータービュー、ローポリ、とさまざまなグラフィック手法が取り入れられるようになっています。

背景も一昔前とは変わってきましたね。単色のフラットなカラーだけでなく、ラインやドット、幾何学パターンなど、またグラデーションは同じ色相で明度差が異なる2色を使うなど。既存の質感系のテクスチャも使い方が変わってきました。

文字やフォントの扱いも大きな変化をむかえています。最近では、画像化された文字を使うのではなく、Webフォントを使っているサイトが増えてきました。

Webフォントは技術自体は昔からありましたが、近年さまざまな技術が生まれ、導入の敷居が下がり、便利になってきました。来年も目が離せない分野でしょう。

最後の第4章は、「エフェクトとリッチメディア」。

Webデザインの印象は静止した状態だけで決まるものではなく、スクロールやホバーといったユーザインタラクションが与える影響も大きく変わってきました。これらのエフェクトをむやみに取り入れるのではなく、コンテンツに合わせて採用することで初めて効果がでます。

完成度の高いビジュアルを作るためには、写真画像を効果的に使いたいものです。素材として与えられた画像を使うだけでなく、よりクオリティの高い世界観を作り込めるよう積極的に手を加えるべきエレメントです。また、SVGやGIFアニメーションなどを使って、動きを加えたビジュアルも注目が集まっています。

付録には面白法人カヤックのアートディレクター：佐藤氏によるコラム。デザインの引き出しの「集め方」「整理法」「活かし方」の事例が多数紹介されており、デザイナーやWeb制作者の情報収集の参考になります。

各章のトピックスは、こんな感じ。

第1章：レイアウトと配色

第2章：UXとUI

第3章：グラフィックとタイポグラフィ

第4章：エフェクトとリッチメディア

現場のプロが教える Webデザイン&レイアウトの最新常識の目次

1. レイアウト & 配色

   最近のWebサイトのレイアウトパターン

   レスポンシブレイアウトのポイント

   モバイルファーストのレイアウトアプローチ

   最近のカラムレイアウトの考え方

   近年よく見られるカードレイアウトのバリエーション

   プロモーション系サイトのレイアウト

   CMSへの展開に適した情報の見せ方

   ナビゲーションデザインのトレンド

   サイトの目的に応じた情報設計のトレンド

   配色のトレンドと便利なツール

   Webデザインに役立つツール

   レイアウトの参考になるサイト・書籍

2. UX & UI

   最近のUIの考え方

   Google Designに見る今後のUIトレンド

   インターフェイスデザインに最適なSketch

   プロトタイピングの手法と実践

   インタラクションの実例とデザイン手法

   ユーザビリティの高いフォームを作る

   デザインガイドラインの種類と潮流

   使いやすく、使い込めるUIを開発する「ゲームニクス理論」とは

   UXが意味するもの

   UXのチェックポイントと活かし方

   UI/UXの参考になるサイト・書籍

3. グラフィック&タイポグラフィ

   これだけは押さえておきたい流行のグラフィック手法

   フラットデザインのグラフィック制作

   アイコングラフィックの最近の傾向

   インフォグラフィックのアイデア

   パターングラフィックのトレンド

   画像を軽量化する手法とツール

   OGPへ対応させる際の注意点

   ロゴデザインのトレンド

   Webサイト特有のタイポグラフィ表現

   Webフォントを利用するメリット

   Webフォントを導入する方法

   実践で使えるWebデザイナーのための文字テクニック

   近年生まれたフォントの新しい技術

   おさえておきたい最近流行の欧文フォント

   フォント・書体・タイポグラフィを知るためのサイト・書籍

4. エフェクト & リッチメディア

   流行のエフェクトの手法

   動画の組み込み方の潮流

   写真を使ったビジュアルの制作

   GIFアニメーションの最新手法

   ニッチなWebインターフェイス演出

   世界観を表現する方法

   楽しく情報を伝えるさまざまなスクロール演出

   Panasonic「Cut Out the Darkness」ができるまで

   面白法人カヤック「年賀状2014.psd」ができるまで

   アニメーションのイメージをチームで共有する

   アニメーションの参考になるサイト・書籍

• 付録

  よいデザインをつくるための「デザインの引き出し」づくり

Web制作の現場で今求められているデザインやレイアウトで気になるテクニックは全て掲載されていると言ってよいでしょう。これこれ、やりたかったんだ！と何度も読み返したくなる本です。

書店に行った際には手にとってページをめくってみてください。刺さるテクニックや情報が目に止まると思います。

献本の御礼

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

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

• お問い合わせ｜コリス