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

著者 : 香西睦

• エムディエヌコーポレーション (2016年4月22日発売)

作品紹介・あらすじ

作り手や運営側の「作りたい」サイトをユーザーに押しつけてはいませんか?本書では、情報デザイン設計の第一線で活躍する著者が、ユーザー視点に立った「本当に使いやすい」Webサイトを、○×形式でわかりやすく解説しています。

感想・レビュー・書評

[亞綺羅さんの感想 · 2021年4月2日]

借りたもの。
見開きでNGデザインとOKデザインを見せるのは他の書籍も同様だが、その論拠となるユーザーインターフェイス(UI)設計の理論から解説。

デザイントレンドの新旧ではないことがミソ。
一見すると、そこまで時代遅れ感を感じさせないデザイン……しかしどこか分かりづらい。使いづらい。
デザインありきではなく、ユーザーの視点に立つことの重要性。
業界によって扱う情報量、重要なことは異なる。
それらをよくヒアリングしてデザインに落とし込むことが求められる……
それらは長く手探り状態だった。
この本はビジュアル面からもそれらをレクチャーしてくれる。

サイト全体に関わるレイアウト・インターフェース、サイト内容のコンテンツ編集・設計について、ユーザビリティの視点からよりよい設計にする方法、マーケティング戦略に則った表現方法。

人間のWebページを見る視点はZ型と言われたが、今はF型なのね……
下の方に行くほど読まれない。

最後に、Webサイトは企業のブランド価値を高めるものであること、ユーザーの役に立っていること――すなわちユーザーとの接点であること――を指摘。
BtoBマーケティングについても言及していた。

[Gishu Azamiさんの感想 · 2020年8月30日]

UI/UXについて、様々な解説とそれに対応するOKとNGのデザイン例と紹介。
結構な情報量と文字数の力作。
ただし、ちょっと情報過多で読みづらく学習しづらいか。
また、作例のOKとNGの差が、ビジュアル的にもっと明白であればよかったか。

[能戸淳（じゅんじゅん）さんの感想 · 2019年4月7日]

WEBデザインっていうか、今風に言えばUIの本。
ビジュアルが豊富で、どの点がダメなのかという理由がしっかりのっているので納得感がある。
ただ、CHAPTER２「コンテンツ編集・設計」の文章表現の良し悪しについて触れる箇所は若干あれっと思うところも。
でも総じてとってもいい本だったね！

[yutaokuさんの感想 · 2018年4月1日]

近年のユーザー動向を意識したWebサイトのレイアウト設計を良い・悪いで比べて読み進めることができる良本。かゆいところにとどく解説文と実践に生かせる設計イメージが載っているので、デザイナーだけでなく社内Web担当の手元にも置いておきたい一冊。

[takehiko102982さんの感想 · 2018年3月22日]

Webデザインの紹介本。左右見開きで左がダメパターン、右が改善パターンとなっていてわかりやすい。それぞれにポイントを押さえつつ、ポイントポイントでコラムもあり、まぁまぁ。

視線移動は、上から下左から右、と思っていたけど、色のコントラストや密度比、面積比などの差に惹かれて移動するらしい。あまりキツキツに詰め込むと見辛いのは、このせいみたい。ウェブサイトの場合、ZではなくFで視線移動するらしい。これを意識して、左側の縦方向に一気に見てもわかるように文頭を大きくしたり、見出しを並べたりする。右上は意外と見ているので、見せたいバナーとかを置くのは良い。

コーポレートカラーを使いすぎると、見辛いし、注目すべき点がわかりづらい。うまくポイントで使うのも大事なよう。グレーとかはやっぱり無難っぽい。

空白や間の作り方は黄金比に則るといいらしい。5:8らしく、文字フォントが8なら、その上下の空白は5にするらしい。これはやってみたい。
また、人は集中すると視野が狭くなるが、画面上でいうと、半径数十ピクセル程度らしい。そんなに狭いのか！

情報を詰め込みすぎるとやっぱりわかりづらくなる。リピーターはなんとかできてしまうので、不慣れな人を中心に必要な情報をわかりやすい場所に置くべき、と。

やはりテキストだけだと目を引きづらいので、アイコンや写真など目を引くように。また、リンクボタンで内容が想像できないと押してもらえないので、周りに補足を入れたりして、フックを作ると良い。

スクロールが必要な場合は、遷移する動線を一つ以上作って置く。リテラシーの高い人用と低い人用、両方加味する。

サイトに来てもらい、目的を達成した後、どう出て行ってもらうか、出口戦略も考えるべき。そして、出口に到達したときには目的は達成されており、ここまできて初めて、目的外の情報を見てくれる。

パンくずリストは、実は上に置くよりも下に置くほうがよい。なぜならユーザーは下まで見たあとで別ページに遷移するから。

一覧メニューを作るときには、メニューの先の内容をユーザーが知らないことを前提に組み立てる。サマリーをつけたり、見出しをつけたり、更新日時をつけたり。見出しはできるだけ、ユーザーが自分ごと、として捉えられるようなものにする。例えば、早起きの仕方、ではなく、朝起きられないあなたに！早起きするための3つのコツ。など。如何に、ユーザーにボタンを押させるか、興味を引けるか。

Webページのタイトルはseo対策になる。重要なキーワードは前の方、10文字くらい、までに入れて置く。

人によって知りたい度が違う。なんとなく調べる人や細かいことまできっちり知りたい人などなど。いろんな人にどこまで対応するか。コンテンツの配置もそれを踏まえて考える。初心者向けメニューは左側上側におき、リピーター向けは右や下に。
また、左から右に視線が動くので、左側が過去、右が未来、という暗黙のルールがある。

注意事項は、あちらこちらに書くのではなく、一箇所にまとめる。ユーザーはどんどん先に進んで情報を得ようとするので、下の方に書くほうが良い。

スマホ画面を作る場合は、レイアウトだけではなくて、情報量にも注意。パソコンと同じ量は無理。図も縦横を変えるなどの工夫を。ボタンも縦に狭いとタップしづらい。

FAQは必要な時にだけ見れればよく、本来は必要なくなるようにコンテンツの書き方を変えるべき。また、FAQをいっぱい揃えて検索窓をつけるのは、ユーザビリティが悪くオススメしない。よく聞かれる質問やカテゴリ分けなどをして、わかりやすく。

ドロップダウンリストは項目が多いと、見つけづらい。場合によってはスクロールしないと全量見えない場合も…
また、チェックボックスなども横一列に並べるとみづらい。段組をして縦に並べた方が見やすい。

ユーザーアンケートは仮説を立て、必要最低限の質問にしないと答えてくれない。

グローバルナビを横長にすると押しづらいのはとても同意。端にマウスを移動させてる時に閉じちゃったりする…

初めての人とリピーターでは欲しい情報も違えばリテラシーも違う.それぞれ用のページを作るのも一つの手。

[asiantamtamさんの感想 · 2017年5月18日]

クライアントファーストではなく、ユーザーファーストでサイトは作られなければならない。良い例、悪い例が載っているのでわかりやすい。

[chieさんの感想 · 2017年4月20日]

ちょっとださいけど、B2Bサイト直すならこれぐらいがちょうどいいのかもしれないと思うようになってきた。
エンタープライズ系は遠く及ばないけれど。そういうタイトルにしたほうが満足度上がると思う。

[chanchihiroさんの感想 · 2017年1月30日]

言いたいことはわかるけど

[x4444xさんの感想 · 2017年1月11日]

レイアウト・インターフェース、コンテンツ編集・設計、ユーザビリティ、サイト設計・マーケティング戦略の４つのチャプターで構成。
見開きでデザイン良し悪しを説明、合間にコラムが掲載されている。

同じサイトで良し悪しのデザイン例が掲載されているため、改善方法が分かりやすい。

メニューの作り方、新規ユーザーに見てもらうための工夫、FAQやフォームの作り方なども分かる。ディレクター、デザイナーは一読しておきたい本。

[へ〜たさんの感想 · 2016年11月26日]

UI 設計と情報アーキテクチャとマーケティングがまとめて一冊になったような本。のわりにページあたりの情報量が異常に少なく、イラストと合わせて薄っぺらい印象。UI/UX 業界では時代の流れや技術の変化によって個々のテクニック(ローテーション・バナーとか、フラット・デザインとか、レスポンシブ・デザインとか、ハンバーガー・メニューとか)の毀誉褒貶が激しいので、個々のテクニックについて是非を論じる本は賞味期限が短そうだ。