自分のデザインに自信が持てるようになる!Webデザインをその考え方から詳しく解説されたオススメの本

デザインを学ぶのには、さまざまな方法があります。
学校に行ってみたり、独学で学んでみたり、また多くのデザインを見ることも勉強になります。中でもデザインの基礎となる考え方を身につけ、デザインの法則を理解し、それらをどのように使うかが大切です。

効果的なカラーの選び方、情報に適したレイアウト、ユーザー視点にもとづいた理論でデザインできるようになるオススメの本を紹介します。

本のキャプチャ

本書はデザインの基礎力を磨きたいデザイナーをはじめ、デザインを理解したいコーダーやスタッフにもお勧めです。Webに携わる上で、デザインの必要な考え方や理論を身につけることができます。

本のキャプチャ

ノンデザイナーでもわかる UX+理論で作るWebデザイン
[Amazonでみる]
[楽天でみる]

著:
川合 俊輔、大本 あかね
監修:
菊池 崇
出版社:
マイナビ出版
発売日:
2017/9/26

そんな紙面をキャプチャで少しだけ紹介します。

誌面のキャプチャ

本書はまずデザインの考え方や理論を学び、実際にそれをどのように使用するかが解説されています。1-3章は理論が主体で、4章以降では具体的な事例が豊富となっています。

誌面のキャプチャ

1章はデザイン思考、2,3章ではユーザー視点にたったUXについて学びます。これら3つの章はコンパクトで、非常に分かりやすくまとめられており、一貫性のある考え方をもってデザインする時の強力な武器になります。

誌面のキャプチャ

4章からはUXの設計パートです。サイトを構成するナビゲーションやレイアウトなど、さまざまなUIパターンの役割と特徴を学びます。

誌面のキャプチャ

それぞれのUIパターンの役割を知ることを大切です。どのような目的を達成するために、どんな機能があるのか、ユーザーが利用しやすいポイントが詳しく解説されています。

誌面のキャプチャ

最近のWebサイトやスマホアプリで見かけるUIパータンも数多く掲載されています。

誌面のキャプチャ

5章では情報を届けるために、使いやすい、分かりやすい、について学びます。グループ化やリスト化、アイテム数を絞ったり、キャッチコピーを使用して魅力的に見せたりなど、実践的な内容です。

誌面のキャプチャ

6章は導線設計。ユーザーが目的を達成するために、どのように見て、どんな操作をするのかを明確にして、デザインに落とし込みます。

誌面のキャプチャ

7章では画面設計のデザインとして、人の知覚や認知にもとづいたデザイン理論をベースにデザインしていきます。例えば、コントラストとは色の話だけではありません。書体や形や余白などの視覚的要素を使い、ページ内の情報に強弱をつけることができます。

誌面のキャプチャ

情報をより分かりやすくするために、色を使うのは非常に効果的です。逆に色が気ままに使用されていると、ユーザーは混乱してしまい、情報を得ることが難しくなります。

誌面のキャプチャ

8章ではモバイルデザインが解説されています。デスクトップとは異なる操作、限られたスペース、独自の機能を理解し、スマホのUIをデザインします。
文字多めのページを掲載していますが、デザイン事例も数多く掲載されています。

ノンデザイナーでもわかる UX+理論で作るWebデザインの目次

  1. デザイン思考とWebデザイン
    デザイン思考とは
    Webサービスと操作性の重要度
    WebサイトにおけるUIとコンテンツの重要性
    サイトの種類によって制作スタイルは異なる
    サイト制作現場でよくある問題
  2. WebデザインとUX
    Webの特徴を理解して制作する
    Web制作の標準規格を理解する
    Webサイトの目標を立てる
    WebデザインはPDCAで成長させる
    UXのデザインサイクル
    データを理解してWebデザインに活かす
    プロジェクトをより良く進めよう
  3. ビジネスモデルのデザイン
    UX設計とは
    サイトの顧客像を設定する
    ユーザーの行動を可視化する
    UX設計ができているか確認する
    ビジネスモデルをデザインする
    マーケティングとUXを理解する
  4. サイト構成のデザイン
    サイトストラクチャとは
    サイトストラクチャのパターン
    ナビゲーション、ページレイアウト、UIのパターン
    グローバルナビゲーション
    ローカルナビゲーション
    パンくずリスト
    ステップナビゲーション
    関連ナビゲーション
    レイアウトパターン トップページ
    レイアウトパターン 一覧ページ
    レイアウトパターン 詳細ページ
    レイアウトパターン アクセスページ
    レイアウトパターン 入力フォーム/問い合わせページ
    レイアウトパターン ウォークスルーページ/コーチマーク
    レイアウトパターン 空のページ
    UIパターン タブ
    UIパターン カルーセル
    UIパターン アコーディオン
    UIパターン プッシュ通知
    UIパターン モーダル
  5. 情報のデザイン
    情報設計の概要
    ユーザーの理解に基づく情報設計
    ユーザーの理解に基づく情報設計の流れ
    シナリオから情報設計要素を抽出
    ストーリーボードからコンテンツ要素を抽出
    カードソーティングで情報を整理する
    情報を5つの分類方法で表現する
    情報をわかりやすく表現する
    キャッチコピーで魅力を伝える
    ユーザー心理を考慮する
    ユーザーが検討しやすいUIを考える
    最適な分類方法を考える
    ECサイトの情報設計を考える
  6. ユーザー導線のデザイン
    ユーザー導線を設計しよう
    ユーザー導線のパターンの設計
    ワイヤーフレームの描き方
    プロトタイピングとWeb開発
    プロトタイプをユーザビリティテストする
  7. 画面設計のデザイン
    UI設計に役立つ原理・原則を知る
    デザインの基本原則 近接
    デザインの基本原則 整列
    デザインの基本原則 反復
    デザインの基本原則 コントラスト
    ミラーの法則
    ヒックの法則
    フィッツの法則
    アイコンの役割
    効果的なアイコンを作成しよう
    情報の見つけやすさ
    視線の流れからUIを考える
    三分割法を活用した写真の構図
    ユーザーに情報を的確に伝える配色を考える
  8. ユーザー操作とモバイルのデザイン
    ヒューマンコンピューターインタラクションとは
    マウス操作とインターフェース
    フォームのデザインを考える
    ラジオボタン、チェックボックス、ドロップダウンを使い分ける
    スマートフォンのUXとUIからデザインする
    限られた領域でデザインする
    スマートフォンのUIを上手に設計する
    スマートフォン独自のユーザー操作を理解する
    UIは少しずつ進化させる
  9. ユーザーの感性に訴えるデザイン
    色が人に与える影響
    色の基礎知識
    Webサイトの色の指定方法
    色が与える印象
    計画的な配色をしよう
    メインカラー、ベースカラー、アクセントカラーを決める
    ボタン、テキストリンク、テキストの配色
    アクセシビリティに配慮した配色
    フォントが与える印象を考える
    文字のジャンプ率でメリハリをつける
    情報量が多くても見やすくする工夫をする
    余白(マージン)をデザインする

デザインの役割や目的がしっかり理解でき、自分のデザインに自信が持てるようになる一冊です。また、プレゼンなどでデザインを説明する時の理論武装にも役立つと思います。

本のキャプチャ

ノンデザイナーでもわかる UX+理論で作るWebデザイン
[Amazonでみる]
[楽天でみる]

著:
川合 俊輔、大本 あかね
監修:
菊池 崇
出版社:
マイナビ出版
発売日:
2017/9/26

献本の御礼

最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。

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

top of page

©2017 coliss