MdNCORPORATION

だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる

だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる

香西 睦 著
定価 2,420円
(本体 2,200円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2016-04-22
仕様 B5変形判/192P
ISBN 978-4-8443-6582-2
本書は「ユーザー視点」に立った使いやすいWebサイトを作るための、ユーザーインターフェース設計(UI設計)や情報デザイン(情報構造の設計)などについての考え方を、レイアウトやコンテンツ、ユーザビリティ、Webマーケティングなどの観点から解説したものです。見開き2ページの構成になっており、記事テーマに即した良い例・悪い例のサンプル(Webページ)を使って○×形式で比較することで、難しいテーマをできるだけ具体的にわかりやすく説明しています。また、良い例・悪い例で述べた事柄をさらに深く理解していただくため、各テーマを詳細に掘り下げた解説記事も加えました。 Webサイトの目的は「見てもらうこと」だけではなく「使ってもらうこと」であり、ひいてはユーザーに何かしらの「価値」を提供するためのものです。本書では、そうした考えにもとづき、使う側の視点に立った「本当に使いやすい」Webサイトのあり方・考え方を実践的に伝えています。「使いやすさ」「わかりやすさ」の重要性が増す現在のWebサイト制作に携わる、すべての方に読んでいただきたい書籍です。

■ページ見本










目次

----------------------------------------
■CHAPTER 1 レイアウト・インターフェース
----------------------------------------
01 ファーストビューを意識しすぎて視認性が悪いすし詰めデザイン
02 デザインばかりを優先して視線移動を無視した情報配置
03 操作の直前に切り替わってしまうローテーションバナー
04 表示されるまで内容がわからないローテーションバナー
05 大量に設置してもクリックされないバナーリンク
06 コーポレートカラーを多用しすぎて重要情報が埋もれている
もっとよくする・深く知る 視認性を格段にアップする“間”とコントラスト
もっとよくする・深く知る ユーザーの興味を誘って視線移動をコントロールする
もっとよくする・深く知る トップページバナーのダイエットがわかりやすさへの近道
07 トップページでは使いにくいヘッダーにあるグローバルナビ
08 新規ユーザーには操作しにくいトップページのグローバルナビ
09 内容が想像できず直感的にわかりにくいグローバルナビ
10 コンテンツ量が多くて探しにくいドロップダウンメニュー
11 コンテンツを詰め込んだだけのメガドロップメニュー
12 直接商品ページを選択できない一覧性がないグローバルナビ
もっとよくする・深く知る サイト構造の変化によって、グローバルナビも変わる
もっとよくする・深く知る 新規ユーザーにもやさしい使えるグローバルナビ
13 目的ページへダイレクトに進めないトップページメニュー
14 リンク先の内容が想像できないリンクボタン
15 見たい情報へのリンクがなくページ順にしか進めないボタン
16 ユーザーへの配慮が足りない不親切な登録完了画面
17 ページの内容が直感的につかめずスクロールしないとわからない
18 スクロール動作に気づきにくいインタラクティブ表現
もっとよくする・深く知る 導線と動線の違いを意識するのが、使いやすさの基本
もっとよくする・深く知る ユーザーの行動や感覚に逆らわない誘導戦略

----------------------------------------
■CHAPTER 2 コンテンツ編集・設計
----------------------------------------
01 リピートユーザーにとって使い勝手が悪いメニュー構成
02 表現にこだわり過ぎてわかりにくい一覧メニュー
03 説明文の存在に気づきにくいロールオーバー表現
04 用途や性能の違いを判断できない一覧メニュー
05 内容に興味がわきにくい項目名そのままの一覧メニュー
06 内容の違いやおもしろさが伝わりにくい一覧メニュー
07 クリックする気にならないどれも同じに見えるメニュー
08 記事の要旨や全体ボリュームが把握できない一覧メニュー
もっとよくする・深く知る 紙媒体の誌面構成とは違うWebの特性を理解しよう
もっとよくする・深く知る クリックした先に何があるかを明示することが大切
09 本文全体を読むことを強要するようなタイトル
10 本文を隅々まで読まなければ詳細がわからない記事構成
11 知りたい情報の有無を判断できるキーワードがない情報表示
12 視線の移動距離が長く使いにくいローカルナビ
もっとよくする・深く知る ユーザーが想像できるような検索キーワードがカギになる

----------------------------------------
■CHAPTER 3 ユーザビリティ
----------------------------------------
01 初心者が元のページに戻りにくい新規ウィンドウ表示
02 機能を最大限に利用しきれないグルーバルナビ
03 重要な情報が閲覧しにくく見落とされやすいPDF表示
04 必要性や重要性を意識してもらえない注意書き
もっとよくする・深く知る わかりやすさや使いやすさをカタチにする仕掛け
05 閲覧性・操作性が最適化されていないレスポンシブ対応サイト
06 全体構造や現在地がわかりにくいハンバーガーメニュー
07 小さくて読みにくい画像や図表のデザイン
08 ボタンなどの機能性が伝わらないフラットデザイン
09 指先操作がしにくいスマートフォンのボタン表現
もっとよくする・深く知る ユーザー目線で迷いにくい、スマートフォン最適化
10 当たり前の項目ばかり並んだ「よくありすぎる」質問
11 重要事項がFAQだけに載っていてコンテンツには存在しない
12 解決策にたどり着けない「よくある質問」リスト
13 膨大な量の中から検索しないと見つからない「よくある質問」
もっとよくする・深く知る 「よくある質問」のあるべき姿と機能的役割
14 検索窓を駆使しないと探し出せない検索機能
15 適切な数量の検索結果に絞り込めない検索機能
16 始める前にステップ数がわからない登録フォーム
17 ユーザーにストレスを与える案内不足の入力フォーム
18 操作性がかえって低下するドロップダウンリスト
19 不親切でストレスが溜まる機械的な入力エラー表示
もっとよくする・深く知る 利便性を高める機能が逆にユーザビリティを損なう
20 ユーザーにメリットや特典が伝わらない登録案内ページ
21 ユーザーが登録する意欲を失う会員登録ページ
22 必須入力やステップが多すぎる登録フォーム
23 ユーザーのモチベーションを低下させる入力フォーム
24 質問の内容を把握しにくい問い合わせフォーム
もっとよくする・深く知る 入力フォームの性能向上はロイヤリティをアップする

----------------------------------------
■CHAPTER 4 サイト設計・マーケティング戦略
----------------------------------------
01 知りたい要素が直感的に見つけにくい表組み
02 要点が伝わりにくくユーザーを疲れさせる記事構成
03 画面全体に注意が向かない人にはわかりにくい情報表示
04 知りたい情報が表示されない商品サイトのおすすめ情報
もっとよくする・深く知る 情報の捉え方に異なる傾向があることを理解しよう!
もっとよくする・深く知る ユーザーはページ内を「意図的に」見ていない
05 Webサイトのコンテンツとして最適化されていないページ構成
06 初心者向けなのに内容が難しすぎるコンテンツ
07 高齢者には操作しにくいWebサイト
08 利用タイミングを考慮していない不親切なメニュー構造
もっとよくする・深く知る ユーザーが利用する価値を提供してこそのWebサイト
もっとよくする・深く知る ユーザーとの接点が生まれて、初めてWebサイトは機能する
もっとよくする・深く知る Webサイトはビジネスに貢献するなくてはならない存在

用語索引

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊