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

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

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

本のキャプチャ

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

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

本のキャプチャ

現場のプロが教える
Webデザイン&レイアウトの最新常識
[Amazonでみる]
[楽天でみる]

著:
佐々木 智也、佐藤 ねじ、貫井 伸隆、橋本 和宏、福岡 陽、森本 友理、山田 晃輔
監修:
面白法人 カヤック
出版社:
MdNコーポレーション
発売日:
2014/9/12

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

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

イベントでは面白法人カヤックの現役ディレクターをはじめとする著作陣一同が、、フラットスタイル、レスポンシブデザイン、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制作の現場で今求められているデザインやレイアウトで気になるテクニックは全て掲載されていると言ってよいでしょう。これこれ、やりたかったんだ!と何度も読み返したくなる本です。

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

本のキャプチャ

現場のプロが教える
Webデザイン&レイアウトの最新常識
[Amazonでみる]
[楽天でみる]

著:
佐々木 智也、佐藤 ねじ、貫井 伸隆、橋本 和宏、福岡 陽、森本 友理、山田 晃輔
監修:
面白法人 カヤック
出版社:
MdNコーポレーション
発売日:
2014/9/12

献本の御礼

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

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

top of page

©2017 coliss