Twitter が「Bootstrap, from Twitter」を公開しましたね！ この CSS を読み込めば、Twitter みたいな UI のサイトができるよっていうものです。

どうでもいいけど Internet Explorer がサポートブラウザから外されているのは、もう誰も気にしないよね。
【追記】いま見たら追加されてました。サポートブラウザの並び順がそのまま優先度の高さと解釈することにします。

h1, p, blockquote, ul, li などのタグや、.container, .btn のようによく使いがちなクラス名がセレクタとなっているので、既存のサイトにこの CSS を読み込ませるのはやめましょう。正しくマークアップされているサイトほど、デザインが Twitter そのものになると思います（笑

ボタンのパーツなどは参考にしたいところですね。

こんなボタンが作れます こんなのとかも

このボタンのCSSはこんな感じです

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

.btn {
  display: inline-block;
  background-color: #e6e6e6;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(#ffffff, color-stop(0.25, #ffffff), #e6e6e6);
  background-image: -moz-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);
  background-image: -ms-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);
  background-image: -o-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);
  background-image: linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);
  padding: 4px 14px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #333333;
  font-size: 13px;
  line-height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.25);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-transition: 0.1s linear all;
  -moz-transition: 0.1s linear all;
  transition: 0.1s linear all;
}
.btn:hover {
  background-position: 0 -15px;
  color: #333333;
  text-decoration: none;
}
.btn.primary {
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(#049cdb, #0064cd);
  background-image: -ms-linear-gradient(#049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(#049cdb, #0064cd);
  background-image: -o-linear-gradient(#049cdb, #0064cd);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  background-image: linear-gradient(#049cdb, #0064cd);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn.primary:hover {
  color: #fff;
}

【インターフェイスデザイン】09_よい見た目にする

「デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

88_深みのある背景（deep background）

画像またはグラデーションカラーを、前面にある要素より奥まって見えるページ背景として配置する。例）Mac OS X の、デフォルトのデスクトップピクチャ

利用場面

そのページをくっきりと魅力的に見せたい場合。ページの背景として、単調な白やグレイよりも面白みのある要素を利用したい場合。

89_少色相・多明度（few hues, many values）

インターフェース上で用いる色相として、1つか2つ、多くても3つを選び出す。それらの少数の色相の中からさまざまな値（明度）の組み合わせを選んで、カラーパレットを作成する。例）デザインがうるさく煩雑ではないインターフェース

利用場面

アプリケーションまたはサイト向けのカラースキームを決定する場合。見た目がけばけばしく極彩色になるのは避けたいものの、インターフェースに何らかの特色を持たせたい場合。

90_コーナー処理（corner treatments）

インターフェース上のボックスのコーナーを普通の直角にする代わりに、斜線、曲線、切り抜きなどを用いる。このようなコーナー処理を、インターフェース全体で一貫して行う。例）角丸のコーナー

利用場面

インターフェース上で、ボックス、ボタン、タブなどの矩形の要素を用いる場合。

91_フォントを反映したボーダー（borders that echo fonts）

ボーダーやその他の線を描く際に、その線の色、太さ、曲がり具合を、デザイン内で主に用いるフォントのいずれかと同じにする。例）写真の周りの罫線と、写真内のフォントの太さが同じ

利用場面

デザイン内に、見出し、タイトル、ロゴタイプに使われるフォントなど、視覚的効果を考えて選び抜かれたフォントが含まれている場合。

92_ヘアライン（hairlines）

1ピクセル幅の線を、ボーダー、水平線、テクスチャとして利用する。例）1ピクセルのテクスチャ

利用場面

インターフェースの概観を、洗練された格調のあるものにしたい場合。

93_フォントウェイトのコントラスト（contrasting font weights）

対照的な2種類のフォント（一方は薄くて軽く、もう一方は濃くて重い）を用いて、レベルが異なる情報を区別し、見た目に味わいを増す。例）太さのコントラストを利用したタイポグラフィ

利用場面

テキストがそのページ内で重要な要素となっており、ひと目見ればそのページの構成がはっきりと分かるようにしたい場合。そのページを印象的に見せたい場合。

94_スキン（skins）

アプリケーションが採用しているルックアンドフィールのアーキテクチャを公開し、ユーザが独自のグラフィックやスタイルをデザインできるようにする。例）スキンを変更できるアプリケーション

利用場面

ユーザ層の大部分が、そのインターフェースをよく理解している人々で占められている場合。必ずしもすべての要素を標準的に見せなくてよい場合。さらには、そのようなユーザがインターフェースをいじり回すのを好む場合。スタイルを重視し、ソフトウェアの設定を自分好みに調整したがる場合。

【インターフェイスデザイン】08_制作ツールと編集ツール

「デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

79_その場での編集（edit-in-place）

小さく動的に表示されるテキスト編集ツールを用いて、ユーザがその場でテキストを変更できるようにする。すなわちその編集ツールを、別のパネルやダイアログボックスを用いずに、元のテキストの真上に重ねて表示する。例）Dreamweaverのデザインビュー

利用場面

制作ツールのUIの中に、ユーザがしばしば変更しなくなるようなテキストがある場合。

80_スマート選択（smart selection）

一貫性を持った項目の集合をユーザに自分で選択させるのではなく、すべて自動的に選択できるくらい、そのソフトウェアを賢いものにする。例）Photoshopの自動選択ツール

利用場面

ユーザがあらゆる種類の選択可能なオブジェクトを扱う場合。テキスト、ピクセル、地理的オブジェクト、ツリー構造やテーブル内のセルなど。

81_合成要素の選択（composite selection）

異なるジェスチャを用いるか、あるいは合成要素の境界をクリックした場合とその中身をクリックした場合のように、異なる画面領域でクリックすることによって、合成要素そのものを選択するか、それが含むオブジェクトが選択されるようにするのかを決める。例）Dreamweaverのデザインビューでの要素選択

利用場面

デザインするGUI系の編集ツールが、合成要素のオブジェクト、つまり移動その他の操作が可能だが、時には他のオブジェクトを含むこともあるオブジェクトを扱う場合。

82_1回限りのモード（one-off mode）

モードがオンの時に、1回だけ処理を実行する。その後、自動的にデフォルトのモードまたは直前のモードに切り替える。例）Excelでの、1回限りのシェイプ作成

利用場面

編集ツールで、オブジェクトの新規作成といった一定の操作について、ユーザが通常は繰り返して実行しない場合。

83_バネ式のモード（spring-loaded mode）

キーまたはマウスボタンを押し続けることで、ユーザがあるモードに入れるようにする。ユーザがそれを放したら、そのモードから抜けて直前のモードに戻る。例）キーボードのShiftキー

利用場面

ユーザがただ一時的に別のモードに入りたくなる、つまり何かをさっと済ませたら、すぐに直前のモードに引き返す必要がある場合。

84_制約的リサイズ（constrained resize）

特別な状況での利用者に向けて、縦横比の保持など、通常とは異なる動作をするリサイズモードを提供する。例）縦横比を固定したリサイズボックス

利用場面

コーナーのドラッグなどの操作でオブジェクトをインタラクティブにリサイズできるGUI系の編集ツールを作るのだが、場合によっては特定のプロパティを保持したいと考える場合。

85_吸着（magnetism）

ユーザがあるオブジェクトを他のオブジェクトを基準にして配置する際に、それらが磁気を帯びたように見せる。つまり、基準となるオブジェクトのいずれかにごく近い場所までオブジェクトをドラッグしたら、それらがくっつくようにする。例）スナップされるツールバー

利用場面

他のオブジェクトやガイドに沿ってオブジェクトを並べるなど、ユーザがとても正確にオブジェクトを配置する必要がある場合。

86_ガイド（guides）

ユーザがオブジェクトを整列しやすいように、水平と垂直の基準線を提供する。例）Illustratorのスマートガイド

利用場面

ユーザが複数のオブジェクトを配置する際に、オブジェクト同士をぴったり揃えたり、ページのマージンに沿って並ぶようにする必要がある場合。

87_ペーストのバリエーション（paste variations）

標準のペースト処理に加えて、特殊なペースト機能を提供する。例）特殊なペースト

利用場面

そのタスクごとに若干異なるペースト処理が必要となる場合。

【インターフェイスデザイン】07_ユーザからの入力を受け取る

「デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

68_寛容な入力形式（forgiving format）

ユーザがテキストをさまざまな形式や構文で入力することを認め、それをアプリケーション側で理知的に解釈する。例）郵便番号や電話番号を入力すると住所を検索できる

利用場面

ユーザがスペースやハイフン、省略形、大文字表記など想定外の組み合わせて入力する可能性があるデータを、UIが要求する場合。

69_構造化された入力形式（strustured format）

単一のテキストフィールドではなく、要求されるデータの構造を反映したテキストフィールドの集合を用いる。例）Photoshopのシリアル入力画面

利用場面

一定の形式に形成された特定の種類のテキスト入力をユーザの要求する場合。クレジットカード情報、電話番号、シリアルナンバーなど。

70_穴埋め（fill-in-the-blanks）

1つまたは複数のフィールドを散文またはフレーズの形式を成すように並べ、各フィールドはユーザが埋める空白としておく。例）Amazonの検索フィールド

利用場面

通常ならテキスト1行か数値1つ、またはドロップダウンリストの選択肢1つを、ユーザに入力してもらう必要がある場合。

71_入力ヒント（input hints）

空白のテキストフィールドの近くに、必要な入力内容を説明する文章や入力例を配置する。例）お問い合わせフォームの入力例

利用場面

テキストフィールドを表示するが、必要とされる入力の種類が誰にでもひと目で分かるという訳ではない場合。

72_入力プロンプト（input prompt）

どんな操作をすればよいか、または何を入力すればよいかをユーザに知らせるプロンプト（手がかり）を、テキストフィールドまたはドロップダウンに予備入力しておく。例）お問い合わせフォームの入力欄に「あなたのお名前は？」などと入っている

利用場面

UIが必要とする情報を求めるために、テキストフィールド、ドロップダウン、コンボボックスを表示する場合。通常ならよいデフォルト値を用いるところだが、それが無理な場合。

73_オートコンプリート（autocompletion）

ユーザがテキストフィールドへの入力を行う際に、想定される答えを予測し、入力内容を必要に応じて自動的に補完する。例）ブラウザのURL入力欄のオートコンプリート

利用場面

氏名や住所、今日の日付、ファイル名のように、予測可能なデータをユーザが入力する場合。入力しようとする内容について妥当な予測ができる場合。そのユーザが過去に入力したデータの履歴が保存されている場合など。

74_ドロップダウン式の選択（dropdown chooser）

複雑な値選択のためのUIを含むドロップダウンまたはポップアップパネルを用いることにより、メニューの概念を拡張する。例）Wordのフォント色選択ツール

利用場面

一群の選択肢から1つを選ぶ場合。メインページ上でスペースを消費したくない場合。

75_画像による選択肢（illustrated choices）

言葉の代わりに（または言葉に加えて）画像を用いて、用意されている選択肢を示す。例）Mac OS X のシステム環境設定

利用場面

インターフェース上で、画像、色、フォントの種類、オブジェクトの整列方法など、視覚的に異なる選択肢の集合を表示する場合。

76_リストビルダー（list builder）

選択元と選択先の両方のリストを同じページ上に表示し、ユーザがそれらの間で項目を移動できるようにする。例）ブラウザのツールバーのカスタマイズ画面

利用場面

選びたい項目のリストを、別のリストからの項目選択によってユーザに作成してもらう場合。

77_よいデフォルト値（good defaults)

フォーム上の適当なフィールドすべてに、ユーザが望む値としてもっともふさわしいと推測される値を予備入力しておく。例）お問い合わせフォーム欄のデフォルト値

利用場面

フォームなどの入力の際に、ユーザが行わなければならない作業量を減らしたい場合。

78_同一ページでのエラーメッセージ（same-page error messages）

フォームのエラーメッセージを、フォーム自体があるページ上に直接配置する。ページの上部にエラーメッセージを表示して目立たせ、可能ならばエラーの原因となったコントロールの横にも目印を付ける。例）お問い合わせフォームの入力欄のすぐ側に、入力中にエラーメッセージを表示する

利用場面

ユーザに再入力をうながすと共に、問題となる前に入力ミスを指摘し、困ったユーザが何を求めているか理解できるようにしたい場合。

【インターフェイスデザイン】06_複合的なデータを表示する

「デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

54_既観と詳細（overview plus detail）

グラフィックの概観を、ズームされた「詳細ビュー」の脇に配置する。ユーザが概観の中でビューポートをドラッグしたら、詳細ビューでそれに対応する領域のグラフィックを表示する。例）地図の脇にミニ地図があり、それで操作できる

利用場面

全体像の中でユーザが自分の現在地を常に把握できるようにしたいが、ズームインすれば細かい詳細情報も見られるようにしたい場合。

55_データティップ（datatips）

グラフィック上で関心地点にマウスポインタが重なったら、その地点のデータ値をツールティップその他のフローティングウィンドウの中に表示する。例）Webページの用語解説

利用場面

ほぼ形式を問わず、データ集合の概観を示す場合。そのグラフィック上の特定の地点の奥に、さらに多くの隠しデータがある場合。

56_動的なクエリ（dynamic queries）

データ集合を瞬時に、かつインタラクティブにフィルタリングする手段を提供する。スライダやチェックボックスのように使いやすい標準的なコントロールを用いて、データ集合内のどの部分を表示するかを決めることができる。ユーザがそれらのコントロールを調整したらすぐに、データ表示領域に結果が現れる。例）スライダによって表示結果を変えられるWebページ

利用場面

大規模な多変量データ集合をユーザに示す場合。

57_データのブラッシング（data brushing）

一方のビューでユーザにデータ項目を選択させる。それと同時に、もう一方のビューで同じデータを選択済の状態で表示する。例）グラフの一部分を囲ったら、それとは異なる視点のグラフがもう一方の画面に拡大表示される

利用場面

複数のインフォメーショングラフィックスを一度に表示する場合。

58_部分的なズーム表示（local zooming）

データ項目の縮尺を小さくして、密度の高い単一ページ内にすべてのデータを表示する。マウスの動きに従ってページを歪曲し、それらのデータ項目を拡大して読み取りやすくする。例）Webページのテーブルの一部分が拡大する

利用場面

大きなデータ集合を、何らかの組織化の形式（グラフ、マップ、ネットワーク、テーブル）を用いて表示する場合。ユーザがマウスポインタかタッチスクリーンで関心のある場所をポイントできる場合。

59_行のストライプ配色（row striping）

2種類の似たような塗りつぶし色を用いて、テーブル内の行の背景色を1行おきに変える。例）iTunes

利用場面

テーブルを用いるが、そのテーブル内の各行が視覚的に見分けにくい場合。特に、列の数が多い場合（または行の中でデータの折り返しが生じる場合）。

60_ソート可能なテーブル（sortable table）

データをテーブル内に表示し、各列の値に従ってユーザがテーブルをソートできるようにする。例）Explorer や Finder のリスト表示

利用場面

インターフェース上に多変量型の情報を表示する場合。ただ1つの項目を求めて探索や並べ替え、カスタマイズ、検索などを行いたい場合。

61_項目へのジャンプ（jump to item）

ユーザが項目名を入力したら、その項目に直接ジャンプしてそれらを選択する。例）リスト表示で「d、a」と入力すると「data」フォルダが選択される

利用場面

スクロール可能なリスト、テーブル、ドロップダウン、コンボボックス、ツリー表を用いて、インターフェース上に多数の項目の集まりを表現する場合。

62_新規項目の入力行（new-item row）

テーブル内の最後の行を用いて、その場で新規項目を作成できるようにする。例）テーブルの一番最後の欄に、新規入力欄がある

利用場面

インターフェースの中に、テーブル、リスト、ツリー表示など、垂直型に表現された項目の集合が含まれている場合。ユーザがそこに新規項目を追加する必要が生じることがある場合。

63_カスケーディングリスト（cascading lists）

各階層で選択可能な項目リストを表示することによって、階層構造を表現する。いずれかの項目を選択するち、次の階層のリストでその項目の子に相当する項目を表示する。例）Finderのカラム表示

利用場面

扱うデータがツリー状である場合。すべての項目を見るには多くのスクロール操作が必要となり、その階層構造で上位にある項目の概観を把握するのが難しくなりそうな場合。

64_ツリー表示テーブル（tree table）

階層的なデータを、テーブルのように複数の列を用いて表示するが、先頭の列でインデント処理したアウトライン構造を用いて、そのツリー構造を示す。例）アウトライン表示

利用場面

項目が主に階層構造として組織されているため、それらを表示するツリーもほぼ常に見せておきたい場合。

65_複数Y軸のグラフ（multi-y graph）

複数のグラフを、1つのパネルの中で上下に積み重ねる。それらがすべて1つのX軸を共有するようにする。例）同じX軸を共有した棒グラフと折れ線グラフ

利用場面

1つのX軸を共有しないと、別々のものを示す状態になってしまう場合。そこに示されている複数のデータ集合の「縦の関係（相関性、類似性、思いがけない差異）」を見出しやすいようにしたい場合。

66_小さな複合データ郡（small multiples）

2つか3つのデータ次元を用いた、多数の小さなデータ画像を作成する。さらに1つか2つの補助的なデータ次元に従って、それらをページ上でタイトル表示する。例）連続したサーモグラフィのグラフ

利用場面

ユーザが1つずつグラフを見ていかねばならず、それらの違いを知るには何度も表示を切り替えなくてはならないような場合。主に、大型のスクリーンや印刷された紙の上で目にする。

67_ツリーマップ（treemap）

多次元的または階層的、あるいはその両方であるデータを、さまざまな大きさの四角形として表現する。それらの四角形を入れ子にして階層関係を示したり、色やラベルを用いて追加的な変数を示すこともできる。例）入れ子になったタグクラウド

利用場面

各項目が、大きさやカテゴリのようにそれを基準にして項目をグループ化できるような複数の属性を持っている場合。ユーザが数百数千の多数のデータポイントの概観を見たいと思っており、かなり大きな表示にも対応できるくらいの大型画面を使っている場合。

【インターフェイスデザイン】05_事を行う

「デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

44_ボタンのグループ（button groups）

関連のあるアクションを、縦か横に整列した小さなボタンの集まりとして表現する。3つか4つより多いアクションがある場合には、その集まりを複数作る。例）アプリケーションの設定ダイアログボックスの、右の「上に移動」「下に移動」「削除」、右下の「OK」「キャンセル」

利用場面

「OK」「キャンセル」「適用」「閉じる」などのボタンがグループ化されているのと同様に、「上に移動」「下に移動」「削除」などを扱うボタンもグループ化すべき。

45_アクションパネル（action panel）

メニューを用いる代わりに、リッチな構成で常時表示させるUIパネルの中に、関連するアクションを含む大きなグループを表示する。例）Office の右側にあるアクションパネル

利用場面

46_目立つ「完了」ボタン（prominent “done” button）

視覚的な流れの終了地点に、処理を完了するためのボタンを配置する。ボタンは大きく、分かりやすいラベルの付いたものにする。例）パネルの右下の「完了」ボタン

利用場面

インターフェースに「完了」「送信」「OK」などのボタンを置く必要がある際には必ずこのパターンを利用する。

47_動的なメニュー項目（smart menu items）

あるメニュー項目を呼び出すと何が起こるのかを正確に示すため、メニューのラベルを動的に変更する。例）ファイルのメニュー項目の、「取り消し」「カット」「コピー」「ペースト」など

利用場面

何をすることになるのかを正確に示すメニュー項目は、UIを説明不要なものにする。

48_プレビュー（preview）

あるアクションを実行したら何が起こるかについて、プレビュー画面または概要をユーザに示す。例）印刷プレビュー画面

利用場面

大きなファイルを開いたり、10ページ分の文書を印刷したり、ユーザがヘビー級のアクションを実行しようとしている場合。もし操作を誤ると、時間の浪費や損失が大きくなってしまう場合。

49_プログレス表示（progress indicator）

時間を要する処理について、どれくらい進行したかをユーザに示す。例）アプリケーションの実行中に表示されるプログレスバー

利用場面

時間を要する処理が、約2秒以上UIに割り込んだり、バックグラウンドで実行されたりする場合。

50_キャンセル機能（cancelability)

時間を要する処理を、副作用を起こすことなく即座にキャンセルする方法を用意する。例）「読み込みを中止します」などのボタン

利用場面

システムとの他のやりとりをほとんど遮断するような作業にユーザが従事している場合。

51_マルチレベルのアンドゥ（multi-level undo）

ユーザが実行した一連のアクションを、逆の順序で簡単に元に戻せる方法を用意する。例）Photoshopのヒストリ

利用場面

簡単なナビゲーションやフォーム入力よりも複雑な、インタラクティブ性の高いUIをデザインしている場合。

52_操作の履歴（command history）

ユーザがアクションを実行するのに従い、何が実行されたのか、何に対していつ操作が行われたのかを視覚的に記録しておく。例）コマンドログの表示

利用場面

ユーザがGUIまたはコマンドラインを用いて、長く複雑な一連のアクションを実行する場合。

53_マクロ（macros）

マクロは、より小さな別々のアクションで構成された、単一のアクションである。ユーザは、連続するアクションをまとめることによってマクロを作成できる。例）Photoshopのアクション

利用場面

ユーザが長く連続するアクションやコマンドの実行を繰り返したいと考えている場合。

【インターフェイスデザイン】04_ページを構成する

「デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモモしておきたいと思います。

32_視覚的なフレームワーク（visual framework）

どのページでも同じ基本レイアウト、色、スタイル的な要素を用いるが、多様なページのコンテンツを扱えるだけの柔軟性も備えたデザインを行う。例）ヘッダとサイドバーが共通なWebサイト

利用場面

複数ページから成るWebサイトを作っている場合。そのサイトが慎重にデザインされた一体感のあるものにしたい場合。

33_中央ステージ（center stage）

UI上のもっとも重要な部分を、ページやウィンドウ内で一番大きなサブセクションとして配置する。その周囲にそれより小さなパネルを用意し、その中に副次的なツールやコンテンツをまとめる。例）Photoshop

利用場面

文書の編集や、特定のタスクを実行できるようにするる場合。ほとんどのアプリケーションで中央ステージを利用できる。

34_タイトルつきセクション（titled sections）

コンテンツの各セクションに視覚的に強調されたタイトルを付けることで個々のセクションを規定し、ページ内でそれらのセクションをまとめて配置する。例）AdobeのWebサイト

利用場面

ページ内に多くのコンテンツがあっても、ページ全体を見渡しやすく理解しやすいようにしたい場合。コンテンツをグループ化できる場合
。

35_カードのスタック（card stack）

コンテンツの各セクションを別々のパネルまたはカード（タブ）に配置し、一度に1枚だけ見えるように積み重ねる。タブやその他の仕掛けを用いて、ユーザがそれらにアクセスできるようにする。例）アプリケーションの設定画面のタブ

利用場面

ページ内に配置する素材が多すぎる場合。ユーザが一度に複数のセクションを見る必要がない場合。

36_開閉可能パネル（closable panels）

コンテンツの各セクションを別々のパネルに配置し、ユーザがそれぞれ別々に開閉できるようにする。例）Dreamweaverのパネル

利用場面

ページ上に表現すべきものが多すぎるけど、どれも互いにワンクリックで行き来できるようにしたい場合。ユーザが一度に複数のセクションをみたいと考える可能性がある場合。

37_移動可能パネル（movable panels）

異なるツールやコンテンツセクションを別々のパネルに配置し、ユーザがそれらを自由に移動してカスタマイズできるようにする。例）illustrator

利用場面

必ずしも唯一のやり方でレイアウトしなくてもいいような、密接するインターフェースの断片がページ内に複数ある場合。それらがページ内のどこにあってもユーザにはその意味が一目瞭然である場合。カスタマイズして使って欲しい場合。

38_右揃えと左揃え（right/left alignment）

2カラムのフォームやテーブルをデザインする際に、左側のラベルは右揃えとし、右側の項目は左揃えとする。例）フォーム、ダイアログボックス

利用場面

フォームの先頭にテキストラベルがある場合。

39_対角線バランス（diagonal balance）

ページ内要素の左右対称な見せ方で配置するが、左上と右下の両方の隅に視覚的なウェイトをおくことでバランスを保つ。例）ダイアログボックスの、左上のタイトルと右下のボタン

利用場面

タイトルやヘッダが一番上にあり、ボタンが一番下にあるページやダイアログボックスをレイアウトする場合。そのページがスクロールなしで1画面に収まるくらい短い場合。

40_プロパティシート（property sheet）

2カラムまたはフォーム形式のレイアウトを用いて、このページでオブジェクトのプロパティを編集できることをユーザに示す。例）DreamweaverのCSSタブのプロパティシート

利用場面

そのインターフェースが、編集可能なオブジェクトをユーザに提示する場合。

41_反応的な追加表示（responsive disclosure）

ごく最小のUIから始めて、ユーザが各ステップを完了するごとに追加のUIを表示しながら、ユーザが一連のステップを実行できるように導く。例）都道府県を選択すると、それに応じた市区町村が表示されるフォーム

利用場面

ユーザが複雑なタスクをステップバイステップで実行できるようにする必要がある場合。ただし、各ステップごとに1ページづつ進ませるよりは、インターフェース全体を1ページに収めておきたい場合。

42_反応的なイネーブル化（responsive enabling）

大部分がディスエーブル化（コントロールを操作不可の状態にすること。一般的に通常よりも薄く半透明化した表現になる。グレーアウトともいう）されているUIから始めて、各ステップを完了するごとにより多くのUIをイネーブル化しながら、ユーザが一連のステップを実行できるようにする。例）アプリケーションの設定画面のチェックボックス

利用場面

反応的な追加表示のように各ステップで動的にページを再編成するよりも、インターフェースの安定性を優先したい場合。

43_リキッドレイアウト（liquid layout）

ユーザがウィンドウをリサイズしたら、それに合わせてページの内容もリサイズし、常にページが「満たさせている」状態を保つ。例）Webサイトの、左右いっぱいのリキッドレイアウト

利用場面

ページの内容を表示するために、ユーザがより多くの（またはより少しの）スペースを必要とする可能性がある場合。

【インターフェイスデザイン】03_動き回る

「デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

21_明快な入り口（clear entry points）

インターフェースへの入り口を数カ所だけ示す。タスク別に入り口を分け、説明を添えて示す。例）Googleのトップページ

利用場面

初めてのユーザや、頻繁には利用しないユーザが使うことが多いアプリケーションをデザインする場合。

22_グローバルナビゲーション（global navigation）

全ページ共通の小さなエリアに、サイトやアプリケーション内の主要なセクションへユーザを導く。定常的なリンクやボタンの集まりを表示する。例）Webサイトのナビゲーション

利用場面

大規模なWebサイトや、複数に分かれたセクションを含むアプリケーションを作る場合。ユーザが、あるセクションから別のセクションへと直接移動したがることが多い場合。

23_ハブとスポーク（hub and spoke）

アプリケーションの各セクションをミニアプリケーションとして分離し、メインページからの入り口とメインページへ戻る出口を1つづつ用意する。例）iPhoneのインターフェース

利用場面

UIの中に、多種多様なタスクやアプリケーションが含まれる場合。

24_ピラミッド（pyramid）

一連のページを、「戻る/進む」のリンクでつなげる。この連続的な表現を、各ページから相互リンクされているメインページと組み合わせる。例）フォトギャラリーサイト

利用場面

そのサイトやアプリケーションが、通常は順番に見ていくような連続するページ郡を含む場合。

25_モーダルなパネル（modal panels）

ユーザがその場の課題を解決するまで、ナビゲーションの選択肢を省いた1ページだけを表示する。例）保存しますか？「はい/いいえ」などのダイアログボックス

利用場面

アプリケーションが、ユーザの応答なしには先には進めない状態にある場合。

26_シーケンス表示（sequence map）

連続している各ページに、「現在はここ」の表示を含んだ全ページの順序を示すマップを表示する。例）入力フォームの「1.個人情報」「2.お届け先」「3.お支払い方法」

利用場面

ユーザの経路が主に一本道である場合。

27_パンくず（breadcrumbs）

【利用場面】
階層構造に含まれる各ページに、メインページに至るまでのすべての親ページを含むマップを表示する。例）Webサイトのパンくずリスト

利用場面

アプリケーションやサイトが単純なツリー構造となっており、ツリー内の各要素にはあまり関連性がない場合。パンくずはシーケンス表示の代わりになる。

28_注釈付きスクロールバー（annotated scrollbar）

スクロールバーに、コンテンツのマップまたは「現在地はここ」の表示という、2種類の役割を持たせる。例）スクロールバーに表示されるTIPS

利用場面

スクロールが必要となる大きな仮想空間を扱う対象をデザインする場合。

29_色分けしたセクション（color-coded sections）

あるページがアプリケーションやサイトの中でどのセクションに属しているかを、色で選別できるようにする。例）カテゴリ毎に色が違うWebサイト

利用場面

複数のセクションに組織化できる場合。異なる目的や、ターゲットユーザを持っている場合。

30_アニメーションによる転換（animated transition）

ユーザを驚かせたり迷子にさせたりしそうな転換を行う際に、それを自然に感じさせるようなアニメーションを用いて、スムーズに見せる。例）Mac OS X の ジニーエフェクト

利用場面

広い仮想空間の中をユーザが動き回る場合。

31_避難口（escape hatch）

ナビゲーションの選択肢が限られている各ページに、ユーザを明示的にそのページから脱出させて既知の場所へ戻すためのボタンやリンクを配置する。例）ダイアログボックスの「キャンセル」ボタン

利用場面

ウィザードのように、ある種の連続的なプロセスを成す複数のページを扱う場合や、ハブとスポークやモーダルなパネルのようにユーザを閉じこめるようなページを扱う場合。

【インターフェイスデザイン】02_コンテンツを整理する

「デザイニング・インターフェース—-パターンによる実践的インタラクションデザイン」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

13_2パネルのセレクタ（two-panel selector）

インターフェース上に2つのパネルを並べて配置する。1番目のパネルにはユーザが自由に選択できる項目一覧を表示し、2番目のパネルには選択された項目の内容を表示する。例）メールソフト

利用場面

ユーザが一覧全体の構造を概観でき、各自のペースで次々に項目を見ていくこともできるようにしたい場合。

14_カンバスとパレット（canvas and palette）

空白のカンバスの隣に、アイコンを用いたパレットを配置する。ユーザはパレット上の各ボタンをクリックして、カンバス上にオブジェクトを作成する。例）Photoshop

利用場面

グラフィック編集ツール全般をデザインする場合。

15_1ウィンドウでのドリルダウン（one-window drilldown）

単一ウィンドウ内でアプリケーションの各ページを表示する。ユーザがメニュー項目を選択してドリルダウンしていき、項目の詳細に入っていく場合には、ウィンドウ内のコンテンツ全体を入れ替えて新しいページを表示する。例）iPod

利用場面

携帯端末など画面サイズに厳しい制約があるデバイス向けにデザインする場合。

16_代替表示（alternative views）

見た目にも構造的にも、デフォルトの表示とは異なる代替表示を用意し、ユーザが選べるようにする。例）閲覧用フォーマット、印刷用フォーマット

利用場面

Webページなど、何らかのフォーマット化されたコンテンツを表示するものをデザインしている場合。それが色々な条件下で利用される場合。

17_ウィザード（wizard）

あらかじめ決められた順序でタスクを実行しながら、インターフェースを通じてユーザをステップバイステップで導く。例）お問い合わせフォーム

利用場面

長く複雑なタスクを実行するUIをデザインする場合。それがユーザにとってなじみのないタスクである場合。

18_オンデマンド追加項目（extras on demand）

もっとも重要なコンテンツのみをまず表示し、それ以外は隠しておく。隠れた項目は、1回のみの単純な作業で表示できるようにする。例）Wordのテキストカラー選択画面

利用場面

かなり多くのものをページ内に表示しなければならないが、中にはあまり重要でないものも含まれる場合。

19_魅力的な分岐（intriguing branches）

ユーザの興味を引くコンテンツへのリンクを意外な場所に配置し、好奇心旺盛なユーザを誘導するようなラベルを付ける。例）ニュース本文の中にある関連キーワードへのリンク

利用場面

テキスト主体のページなど、ユーザが一本道に沿って移動する場合。そのようなコンテンツでも、主な目的から外れた付加的情報を見せたい場合。

20_マルチレベルのヘルプ（multi-level help）

多様なニーズを持ったユーザをサポートできるように、軽めのヘルプと重めのヘルプを組み合わせる技法を用いる。例）Excelのツールティップ、通常のヘルプメニュー、ヘルプ検索機能、オンライン関連情報

利用場面

複雑なアプリケーションの場合。対象ユーザが中級者から上級者である場合。初心者がエキスパートになるのを手助けしたい場合。

【インターフェイスデザイン】01_ユーザの行動

インターフェースデザインの世界の格言
「汝のユーザを知れ—-彼らはあなたとは別人なのだ」

という訳で、「デザイニング・インターフェース—-パターンによる実践的インタラクションデザイ」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。インターフェースデザインをパターン化して体系化、モジュール化、そしてそれらをリファレンス化といった意味で、とてもステキな本ですね。

インターフェースデザインは見た目から始めるのではなくて、まずはユーザを理解することから。どんな人で、なぜそのソフトウェアを使うのか、どう操作するのか、ユーザを深く知って共感を抱くこと。その作業自体は手段なので、目的はオンラインショッピングや手続きなど。こういう機能やソリューションが欲しいの裏側にある、こんなニーズや課題を抱えているというのをハッキリとさせること。

まずはインターフェイス要素ではなく、人の行動パターンを12個ほどサクッと。

01_安全な探検（safe exploration）

「迷ったりトラブルに巻き込まれたりせずに、探索できますように」

02_即座の喜び（instant gratification）

「後でじゃなく、今すぐこれを済ませたいんだ」

03_最低限での充足（satisficing）

「これで十分満足だよ。これ以上時間をかけて、もっとうまくできる方法を覚える気はないんだ」

04_途中での方針変更（changes in midstream）

「途中までやってみたけど、気が変わっちゃったよ」

05_回答の先送り（deferred choices）

「今はそれに答えたくないんだ。とりあえず最後まで進めさせてよ」

06_少しずつの組み立て（incremental construction）

「ここを変えてみよう。まだしっくりこないから、もう一度変えてみよう。このほうがいいな」

07_習慣化（habituation）

「このやり方は他の場所ではいつもうまくいくのに、どうしてここではダメなんだ？」

08_空間的な記憶（spatial memory）

「1分前まであのボタンは間違いなくここにあったのに。どこへいったんだ？」

09_展望的な記憶（prospective memory）

「これは後回しにするから、忘れないようにここに置いたままにしよう」

10_繰り返しの効率化（streamlined repetition）

「この操作、いったい何回繰り返せばいいのだろう？」

11_キーボードのみ（keyboard only）

「お願いだから、マウスなしでも操作できるようにしてよ」

12_他者のアドバイス（other people’s advice）

「これについて、他のみんなはどう考えているのだろう？」