デザインの理由や意味がよく分かる良書！WebサイトのUI設計や情報デザインについての考え方が見直せる -だから、そのデザインはダメなんだ。

単に見た目だけがよいデザインではなく、どうしてこのレイアウトなのか、なぜこの情報構造なのか、WebサイトのUI設計や情報デザインについての考え方をレイアウト・コンテンツ・ユーザビリティの視点から解説したオススメの本を紹介します。

ユーザビリティやIAを中心にした本はデザイン面が弱いですが、本書はそれらとデザインがうまい具合に共存しており、デザイナーにもコーダーにも、そしてディレクターにもオススメの一冊です。

Kindle版は2016/5/13現在、20%ポイント還元でかなりお得です。

• だから、そのデザインはダメなんだ。（Kindle版）

本書はオールカラーで、UI設計や情報デザインについて具体的に悪い例と良い例を比較しながらしっかりと学ぶことができます。
版元様から誌面をご提供いただきました。

左の「X」が悪い例、右の「O」が良い例で、どちらも一見ありがちなデザインですが、実際に使ってみるとその違いは明らかです。

「もっとよくする・深く知る」ではそれらのテクニックだけでなく、更に深い知識や考え方を学ぶことができます。

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。
今まで気がつかなかったことや新しい考え方に目からウロコです。

本書は4章構成でレイアウト、コンテンツ、ユーザビリティ、マーケティングの視点からWebサイトのUI設計や情報デザインを学ぶことができます。
1章は、レイアウト・インターフェイス編。

悪い例・良い例はありがちな事例が多く、どこに問題があり、どのように改善すると解決するのかがよく分かります。

解決するための例を知るだけでなく、その考え方もしっかり学ぶことができるので、いろいろ応用することもできます。

特にナビゲーションはサイト構造を把握している制作視点ではなく、ユーザー視点で設計したいですね。

例えば、「製品情報」「企業情報」を行き来するユーザーはほとんどいないでしょう。サイトの構造によってナビゲーションの在り方も異なります。

ナビゲーションだけでなく、ページ内のボタンも重要な遷移要素です。ちょっと手を加えるだけで、その使い勝手が大きく変わります。

Webサイトで重要な導線と動線は、ボタンなどを使ってユーザーを導く遷移導線とユーザーが直感的にサイト内を移動する行動動線です。単に目立たせるだけではなく、動線を意識して導線をデザインすることが重要です。

2章はコンテンツ編。
内容を分かりやすく伝えるのにもデザインやライティングなど、さまざまなテクニックがあります。人気が高いカード型コンテンツも似たようなサムネイルと見出しでは、ユーザーはどれをクリックすべきか迷ってしまいます。

3章はユーザビリティ編。
1章のレイアウトとここが特に充実しています。

分かりやすくする、使いやすくするというのは理解していても、それを形にするのは難しいものです。さまざまな具体例とともに考え方をしっかり学べます。

レスポンシブ対応も単にサイズを変えるだけでは意味がありません。画面サイズにあった情報量、デバイスに合わせたナビゲーションなど、閲覧性と操作性も最適化する必要があります。

フォームは中でもユーザビリティに配慮する必要があるコンテンツです。美しくデザインされたフォームが、イコール使いやすいフォームではありません。

最後の4章はサイト設計・マーケティング戦略編。
必要な要素を単に置くだけでなく、使いやすさ・分かりやすさを意識して配置するとコンテンツはより魅力的に見えます。

例えばボタン、目立たせるために上に配置するより、ユーザーの動線の先に配置することでより使いやすくなります。

初心者向けや高齢者向けのデザインが苦手な人は要チェックです。

だから、そのデザインはダメなんだ。の目次

1. レイアウト・インターフェース

   01. ファーストビューを意識しすぎて視認性が悪いすし詰めデザイン

   02. デザインばかりを優先して視線移動を無視した情報配置

   03. 操作の直前に切り替わってしまうローテーションバナー

   04. 表示されるまで内容がわからないローテーションバナー

   05. 大量に設置してもクリックされないバナーリンク

   06. コーポレートカラーを多用しすぎて重要情報が埋もれている

   もっとよくする・深く知る: 視認性を格段にアップする「間」とコントラスト

   もっとよくする・深く知る: ユーザーの興味を誘って視線移動をコントロールする

   もっとよくする・深く知る: トップページバナーのダイエットがわかりやすさへの近道

   07. トップページでは使いにくいヘッダーにあるグローバルナビ

   08. 新規ユーザーには操作しにくいトップページのグローバルナビ

   09. 内容が想像できず直感的にわかりにくいグローバルナビ

   10. コンテンツ量が多くて探しにくいドロップダウンメニュー

   11. コンテンツを詰め込んだだけのメガドロップメニュー

   12. 直接商品ページを選択できない一覧性がないグローバルナビ

   もっとよくする・深く知る: サイト構造の変化によって、グローバルナビも変わる

   もっとよくする・深く知る: 新規ユーザーにもやさしい使えるグローバルナビ

   13. 目的ページへダイレクトに進めないトップページメニュー

   14. リンク先の内容が想像できないリンクボタン

   15. 見たい情報へのリンクがなくページ順にしか進めないボタン

   16. ユーザーへの配慮が足りない不親切な登録完了画面

   17. ページの内容が直感的につかめずスクロールしないとわからない

   18. スクロール動作に気づきにくいインタラクティブ表現

   もっとよくする・深く知る: 導線と動線の違いを意識するのが、使いやすさの基本

   もっとよくする・深く知る: ユーザーの行動や感覚に逆らわない誘導戦略

2. コンテンツ編集・設計

   01. リピートユーザーにとって使い勝手が悪いメニュー構成

   02. 表現にこだわり過ぎてわかりにくい一覧メニュー

   03. 説明文の存在に気づきにくいロールオーバー表現

   04. 用途や性能の違いを判断できない一覧メニュー

   05. 内容に興味がわきにくい項目名そのままの一覧メニュー

   06. 内容の違いやおもしろさが伝わりにくい一覧メニュー

   07. クリックする気にならないどれも同じに見えるメニュー

   08. 記事の要旨や全体ボリュームが把握できない一覧メニュー

   もっとよくする・深く知る: 紙媒体の誌面構成とは違うWebの特性を理解しよう

   もっとよくする・深く知る: クリックした先に何があるかを明示することが大切

   09. 本文全体を読むことを強要するようなタイトル

   10. 本文を隅々まで読まなければ詳細がわからない記事構成

   11. 知りたい情報の有無を判断できるキーワードがない情報表示

   12. 視線の移動距離が長く使いにくいローカルナビ

   もっとよくする・深く知る: ユーザーが想像できるような検索キーワードがカギになる

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. 質問の内容を把握しにくい問い合わせフォーム

   もっとよくする・深く知る: 入力フォームの性能向上はロイヤリティをアップする

4. サイト設計・マーケティング戦略

   01. 知りたい要素が直感的に見つけにくい表組み

   02. 要点が伝わりにくくユーザーを疲れさせる記事構成

   03. 画面全体に注意が向かない人にはわかりにくい情報表示

   04. 知りたい情報が表示されない商品サイトのおすすめ情報

   もっとよくする・深く知る: 情報の捉え方に異なる傾向があることを理解しよう！

   もっとよくする・深く知る: ユーザーはページ内を「意図的に」見ていない

   05. Webサイトのコンテンツとして最適化されていないページ構成

   06. 初心者向けなのに内容が難しすぎるコンテンツ

   07. 高齢者には操作しにくいWebサイト

   08. 利用タイミングを考慮していない不親切なメニュー構造

   もっとよくする・深く知る: ユーザーが利用する価値を提供してこそのWebサイト

   もっとよくする・深く知る: ユーザーとの接点が生まれて、初めてWebサイトは機能する

   もっとよくする・深く知る: Webサイトはビジネスに貢献するなくてはならない存在

制作者が見落としがちな、使う側のユーザーから見たWebサイトの見え方や使い方を通じて、見直すべき点は見直し、新しい考え方はその意味を理解して取り入れることができます。
次のプロジェクトに必ず役立つ良書です。

献本の御礼

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

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

• お問い合わせ｜コリス