Webサイトの画面作りのお供に。読書メモ「ウェブデザインのつくり方、インターフェイスデザインの考え方」

2014/02/15

ウェブデザインのつくり方、インターフェイスデザインの考え方。

今更ながら、時間が出来たので「ウェブデザインのつくり方、インターフェイスデザインの考え方」を手にとって、復習のつもりで読んでみたのですが、面白かったです。
スマートフォンやタブレットPCの普及率が高まる中、Webサイトの画面をどのように作っていけばよいのか考える際に、間違いなくこの本はその助けになる1冊です。

目次

はじめに

Charpter01 デザインの考え方に関する講義
Lesson 01:UX[ユーザーに質の高い経験を与える]
Lesson 02:機能の分類[操作をスムーズにする]
Lesson 03:マジックナンバー[選択肢の数を決める]
Lesson 04:アイコン[直感的な識別を可能にする]
Lesson 05:ウェブのレイアウトパターン[型にならうことで使いやすく]
Lesson 06:スモールスクリーンのUI[ユースケースに合わせて画面を作る]
Lesson 07:ページのフォーマット[セクションごとにページの役割を決める]
Lesson 08:モジュール[情報を効率的にレイアウトする]
Lesson 09:仕様別レイアウトパターン[目的に応じたレイアウトの選び方]
Lesson 10:Media Queries[異なる環境に情報を届ける]
Lesson 11:モックアップ[完成型に近い形で仕上がりを想像する道具]

Charpter02 デザインに技法に関する講義
Lesson 12:タブインターフェイス[操作を単純にする]
Lesson 13:上下2分割レイアウト[情報が記憶に残りやすい画面を作る]
Lesson 14:プルダウンナビゲーション[数の多い選択肢を使いやすくまとめる]
Lesson 15:色によるグルーピング[実際より情報量を少なく見せる]
Lesson 16:かたちによるグルーピング[情報を把握しやすくする]
Lesson 17:整列[レイアウトの質を上げる]
Lesson 18:カルーセルUI[同じ高さ位置に複数の選択肢を並列する]
Lesson 19:アコーディオンUI[表示面積の消費を抑えて操作を提供する]
Lesson 20:画面完結型レイアウト[TVにレイアウトを最適化する]
Lesson 21:UIのカラーリング[機能性や訴求力を向上させる]
Lesson 22:ホワイトスペース[見やすく美しいページを作る]
Lesson 23:グリッドレイアウト[機能的で生前としたレイアウトのための手法]

Charpter 3 スタイリングの技法に関する講義
Lesson 24:コンポジション[バランスよくグラフィックを整える]
Lesson 25:コントラスト[見易さと使いやすさを決める]
Lesson 26:ジャンプ率[見出しを探しやすくする]
Lesson 27:罫線[画面を整理整頓する]
Lesson 28:トリミング[写真に表現力を与える]
Lesson 29:タイポグラフィ[メッセージを伝える]
Lesson 30:文字の間隔設定[閲覧中のユーザーの疲労を軽減する]
Lesson 31:Web Font[ウェブならではのフォント表現]
Lesson 32:有彩色と無彩色[特定の色を印象づける方法]
Lesson 33:補色[対比効果を理解して緊張感のある色彩を計画する]
Lesson 34:透明度[見た目の情報量をコントロールできる表現方法]
Lesson 35:彩度対比[画面の強弱をコントロールする]
Lesson 36:明度対比[メリハリをコントロールして見やすく整える]
Lesson 37:重さと色[重要度を明示して視線を迷わせない]
Lesson 38:ハーモニックカラー[調和の取れた色でまとまりを感じさせる]
Lesson 39:CSSによる文字の装飾[文章を読みやすくする]

この記事では、本書の読書メモを箇条書きでまとめました。

Charpter01 デザインの考え方に関する講義

Lesson 01:UX[ユーザーに質の高い経験を与える]

  • 何らかの反応、インタラクションを返さないインターフェイスは、ユーザーを漠然とした不安な気持ちにさせる。
  • 状況と一致していないインタラクションは、ユーザーを混乱させる。
  • インタラクションが適切なアプリケーションは、ユーザーに良い経験を与え、結果的にユーザーの行動を促進できる。
  • 質の良いインタラクション、システムを通じた対話を実現するさまざまな工夫こそUI。

Lesson 03:マジックナンバー[選択肢の数を決める]

  • ウェブページでは「3つのポイント」と「文章の3部構成」が有効。
  • 文章や情報の構成については3という数字がポピュラーだが、レイアウトは5ないし4、最大で7という数字が有効。
  • 5や4はグローバルナビゲーションに含まれる選択肢の数を決めるときに有効。
  • 直感性を突き詰める場合、最適な選択肢の数は最大でも4つ程度(ヒックの法則)。
  • 「手続きの少ないUI」がUIの理想型。

Lesson 04:アイコン[直感的な識別を可能にする]

  • アイコンは共通概念に沿ったかたちを持っていなければならない。

Lesson 05:ウェブのレイアウトパターン[型にならうことで使いやすく]

  • 基本1カラムパターン:バナーやサブメニューを常駐させるスペースがないため、同じジャンル、同じグループに整理されている情報を深堀りする前提の構成。
  • 基本2カラムパターン:異なるジャンルに属するおすすめのリンクをサブナビゲーション部分に配置しておくことでジャンルに関わらず広く浅く記事に目を通してもらえること。を期待する構造。
  • 基本3カラムパターン:1個の情報の粒度が細かいタイプのサイトに向いているパターン

Lesson 06:スモールスクリーンのUI[ユースケースに合わせて画面を作る]

  • スモールスクリーン向けウェブサイトは通常、縦に長いページになり、縦方向にドリルダウンする操作の繰り返しで情報を取得。
  • 縦の動きで、操作に流れを作り出す。その快適さを中断するような現象が起こると逆に大きなストレスになる。
  • スモールスクリーンのレイアウトの場合、紙の上でだけでなく実記そのものを使った使い心地のチェックは必須。

Lesson 06:スモールスクリーンのUI[ユースケースに合わせて画面を作る]

  • ウェブページは、ウェブサイト、という全体を構成する1つの部品であるため、それぞれのページに外見的な共通点やスタイル上の決まりごとを作っておく必要がある。
  • フォーマットの「中身」として規定する必要があるのは、主に文字サイズ。

Lesson 08:モジュール[情報を効率的にレイアウトする]

  • テキストと画像の位置関係、画像そのもののサイズ設定、サム寝入る画像のレイアウトなどは、1つのサイト内でそのスタイルを統一的に扱うのが原則
  • 小さい約束事の繰り返しが規則性を生み、心地よさを有無
  • モジュールの幅の設定は必ずモジュールの最小単位の幅を基準

Lesson 09:仕様別レイアウトパターン[目的に応じたレイアウトの選び方]

  • コンテンツ全体を内包するレイアウト:レイアウトをデザイン側でコントロールできるが、異なるディスプレイサイズに最適化できないので、ウィンドウサイズにマッチしない。
  • ユーザーがページを閲覧しようとすると、操作が煩雑になる。また、スマートフォンの場合、画面全体を見渡すのにズームアウトが必要。
  • リキッドレイアウト:コンテンツ全体を内包する最上位のdiv要素に相対幅を与えるレイアウト。ユーザーのディスプレイサイズにあわせてレイアウトが変えられるが、文字情報を入れるカラムの左端がそろいにくく、ゆるいデザインになる。きちんとしたデザインを実装するには不向き。
  • ハイブリッドレイアウト:任意の部品の幅を固定することで、理想の概観を保つことができるので、スマートフォンやタブレットにも最適なレイアウトが作れる反面、最適化したレイアウトを個別に考える必要があるので、作業工数が増える。

Lesson 11:モックアップ[完成型に近い形で仕上がりを想像する道具]

  • モックアップは、仕事の発注を検討している相手にとっては、製作会社のレベルや提案内容を具体的に把握するために必要な資料。
  • さまざまな意見やアイディアを取り入れ、反映するための材料として、手書きかあるいは線画に勝るものはない。

Charpter02 デザインに技法に関する講義

Lesson 12:タブインターフェイス[操作を単純にする]

  • ページのカテゴリが4つ程度と少なく、差異と構造が2階層くらいの浅いサイトで最も効果を発揮する。
  • ある部分の表示だけを切り替えるというUIの機能を使って、伝えたいメッセージや情報をわかりやすく届けるためにも有効なスタイル。

Lesson 13:上下2分割レイアウト[情報が記憶に残りやすい画面を作る]

  • 訴求ポイントを強調して伝えたい情報を大きくフィーチャーする用途に向いている。
  • スペースの役割分担が単純であることから、使いやすくシンプルなページになる。
  • 写真をできるだけファーストビューの上野位置に、しかも製品の特徴が伝わるようにできるだけ大きく掲載する。

Lesson 14:プルダウンナビゲーション[数の多い選択肢を使いやすくまとめる]

  • 1方向に働きかける形で操作できる。ページ間をすばやく移動できるサイトになる。
  • ナビゲーションに含まれるラベルの一覧性は確保できないので、要注意。
  • サイトを訪問した目的がすでに決まっていて、できるだけ早く目的のページを探したいユーザー向けのナビゲーション。
  • ラベルは短い言葉で具体性があって、できるだけたくさんの人々に内容が把握しやすい状態を心がける。

Lesson 17:整列[レイアウトの質を上げる]

  • ユーザーはウェブページをじっくり読むというよりは、頭の中で自分なりの考えをまとめながら、文字だらけの画面の中で情報の気になる部分を探しつつ、必要な内容を拾っているもの。
  • ウェブでは全体のバランスよりも、情報の流れが一定かどうかが重要。

Lesson 18:カルーセルUI[同じ高さ位置に複数の選択肢を並列する]

  • 横方向にスライドするサムネイルを実現するUIのこと。
  • スモールスクリーンは情報が階層化すると、下階層の情報が見落とされがちになる。
  • 構造上では深い回想にある情報に直接リンクさせる目的で使う。

Lesson 21:UIのカラーリング[機能性や訴求力を向上させる]

  • グループが負う機能や目的を整理し、領域別に色分けすると、どこに何があるのか、どこを見れば操作ができるのか、が直感的に判断しやすい画面になる。

Lesson 22:ホワイトスペース[見やすく美しいページを作る]

  • 意図的に挿入したり、配置する部分のこと。余白には、視線を集中させるという機能がある。

Lesson 23:グリッドレイアウト[機能的で生前としたレイアウトのための手法]

  • たくさんの文字と図版を紙面の上で上手く並べるために出来たレイアウト

Charpter 03 スタイリングの技法に関する講義

Lesson 24:コンポジション[バランスよくグラフィックを整える]

  • コンポジション(構図)を考える手続きの第一歩は、主役になるオブジェクトを定めること。
  • 構図は常に、ポイントとなるオブジェクトを恬として、これらを線で結んだときに出来る多角形として考える。

Lesson 25:コントラスト[見易さと使いやすさを決める]

  • 読みやすさイコールコントラストの差。
  • デジタルデザインにおいて色そのものの違いは何らかの「種類の違い」を表明する手段であって、強調を表明する手段としては使わない。
  • ウェブページはテーマカラーを持つが、一般的なUI同様ブランドや種類の違いを表明する手段に過ぎない。

Lesson 26:ジャンプ率[見出しを探しやすくする]

  • 文字の大きさを決める作業は、まず部品の役目を考えることから始めます。

Lesson 27:罫線[画面を整理整頓する]

  • 面を用いて画面を整理整頓すると、範囲が分かりやすいが、1画面、および1つの囲みの中に入る情報量が少なくなる。
  • 線を用いて画面を整理整頓すると、面よりも細かい部分を分ける目的に使いやすく、区分けした領域の間に余白が余り必要ない。

Lesson 29:タイポグラフィ[メッセージを伝える]

  • ゴシックはディスプレイ表示全般、UIの文字表記に適している。
  • 明朝は読む部分向けのフォントとして確立されているので読み込む部分、長い文章には最適。

Lesson 30:文字の間隔設定[閲覧中のユーザーの疲労を軽減する]

  • 文字は原則的に、表示する文字サイズが小さく、文字数が多いほど、行の間隔は広いほうが読みやすい。
  • 見出しやキャプションは文字の一塊ができるだけ一度に目に入ったほうが読みやすい。

Lesson 33:補色[対比効果を理解して緊張感のある色彩を計画する]

  • 補色の特色として、混ぜ合わせると灰色になる。

Lesson 35:彩度対比[画面の強弱をコントロールする]

  • 派手な背景は前景色を殺すから、写真やグラフィックデザインのように目立たせる必要のある部品の背後には使えない。
  • 色彩を持った鮮やかな色は、背景が白の環境では非常に目立つので、「確実に目立たせたい部分」として積極的に使う。

おすすめ商品

この記事を読んで、興味を持った方はこちら

ユーザーエクスピリエンスに関連する書籍としては、以下2冊も気になります。