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

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

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

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

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

本書はまずデザインの考え方や理論を学び、実際にそれをどのように使用するかが解説されています。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サイトの色の指定方法

   色が与える印象

   計画的な配色をしよう

   メインカラー、ベースカラー、アクセントカラーを決める

   ボタン、テキストリンク、テキストの配色

   アクセシビリティに配慮した配色

   フォントが与える印象を考える

   文字のジャンプ率でメリハリをつける

   情報量が多くても見やすくする工夫をする

   余白（マージン）をデザインする

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

献本の御礼

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

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

• お問い合わせ｜コリス