見えない線「グリッドシステム」

デザインを行うときには、実際には表示しない仮の線、ガイドラインを規則正しく引いていきます。このガイドラインに沿ってレイアウトをしていくことで「デザインに秩序が生まれる」のですね。

一見ものすごく自由なレイアウトであっても、よく見てみると緻密に計算されたガイドラインが見えてきたりします。

970px グリッドシステム（幅950px ＋ 左右マージン10px）

横幅 950px を 70px のカラムで 12分割して、各カラムのマージンを 10px 取るとちょうど 970px になります。

psd データをダウンロードする

960px グリッドシステム（幅940px ＋ 左右マージン10px）

940px を 60px のカラムで 12分割して、各カラムのマージンを 20px 取るとちょうど 960px になります。

psd データをダウンロードする

この2つの主な違いは、12分割されたカラムのマージンが 10px か 20px かです。個人的には後者の 960px グリッドの方が使い勝手がいいかなと思います。場合によっては 20px のマージンを 10px 2つに割ってしまって変則的なグリッドを作ることもできるので！

960px の CSS ライブラリや豊富なアプリに対応したテンプレートなどがある 960 Grid System はこちらです。
960 Grid System

「書き言葉」ではない「話ことば」

僕のまわりには、ひらがな使いのプロが何人かいます。プロといっても、DHって聞いて「ああ電博ね！」とかわかっちゃうギョーカイな人のことではないです。わかっちゃった困ったちゃんは「#好きな広告業界用語（Twitter）」でニヤッとしてきてください。

ネットをはじめ文字でのコミュニケーションは、ことばで伝えるよりも10℃は温度が下がるものです。SNS や友だち同士のメールなどでは、文字が整理された「書き言葉」である必要はありません。

日本語にはひらがなカタカナ漢字がありますが、それぞれに特徴がありますね。あ、あと数字もあった。

ひらがな

• まあるい
• やわらかい
• 画数がすくない

カタカナ

• 直線が多くてシュッとしてる
• 異国や異星のイメージがある
• 「そういえばカタカナちゃんは」のように名前にカタカナを使うと読点（、）がいらなくなったりします。
  ひらがなで「そういえばかたかなちゃんは」ではやっぱり読みにくいので「そういえば、かたかなちゃんは」と読点をうたなくちゃです。
  でもでも、名前にカタカナを使うとなんかいきなりシュッとした異星人のイメージになりません？

漢字

• 画数が多くて重いので、そこで目がとまる。それを利用して句読点のようなつかいかたもできる。

たとえば「下さい」はちょうだいという意味なので、お願いする場合は「ください」が正解です。「すいません」は話しことばなので、書き言葉では「すみません」が正解です。「ゆうたのに」は「言ったのに」が正しいです。

ですが、そんなことはわかっておるのです。文字のコミュニケーションでは「話ことば」を使ってみるのも手かもしれません。すべて漢字に変換すればいいっちゅーもんじゃないんです。話すときに抑揚をつけて遊ぶように、文字のときも言葉遊びできるんだよってことです。

ただ、ただですね…　あまりひらがなを多用しすぎるとホントにバカかと思われることがあるので気をつけたいところではあります（笑
いや、でもバカだと思われてるくらいが一番ですよね。

古民家に新たな命が吹き込まれたステキな美容室です。初めて来たのに、昔ここに住んでいたかのような温かさに包まれること限りなしです。

美容室のWebサイトはこちら
vi-dro［ビードロ］下北沢の古民家美容室とギャラリー

1階は美容室 、2階はギャラリースペースです。今は期間限定セレクトショップ lanugo［ラヌーゴ］が 6/12(日)まで入っていますので、ぜひ古民家のかほりを感じて来てください！

セレクトショップの情報はこちら
期間限定☆古民家セレクトショップ『lanugo』

先日行われたレセプションパーティーと、古民家の写真をサンドイッチしていこうと思います。

まずは、築60年は経っているらしいその外観です。

さぁ始めませう！

入口はこんな感じ。

からあげ、骨付き手羽元、手羽先からあげ、ケンタッキー、こんなにもチキン祭！

ゆったりとした店内。

こちらはシャンプー台がある方です。

新しい命が入り込む感じ。

赤さんです。

赤さんです。

赤さんです。

60アンペア！

20クリスピー！

住む人がいれば、必ずその残り香がありますね。なんかもう…

うおーって感じです！

2階のギャラリースペースは眩しいくらいに日当たり良好です。

眩しい男は「マブ男」って言います。

アンティークなアイテムは古民家との相性抜群です。

ふたりの相性も抜群です！

2階から1階へと降りる際は何かを試されますので、精神を集中してください。

階段から転げ落ちた訳ではありません。

柱とか梁を見てると、色んなストーリーがあって面白いです。

レセプションパーティー終了後も作業を続けるふたり。OPEN 2日前です。

ほら、色んなストーリーが。

深夜 0:00 を回ってますが、笑顔で作業してるふたり。

あ、そうそう vi-dro［ビードロ］の住所はここ。

深夜 0:00 を回ったので、シンデレラボーイはここで夢の世界へと沈みました。

おやすみなさい。良い夢を見てください。

美容室のWebサイトはこちら
vi-dro［ビードロ］下北沢の古民家美容室とギャラリー

【デザインの法則】Design rule index―デザイン、新・100の法則

「Design rule index―デザイン、新・100の法則 」を元に、要約メモしておきたいと思います。

01_80対20の法則

どんな大組織の中でも、全体の中の小さな部分が大きな影響をもつ。

02_アクセシビリティ

ものや環境は、変更を加えなくとも、できるだけ多くの人々が利用できるようデザインされているべきである。

03_先行オーガナイザー

既有知識に照らし合わせて、新しい知識を理解させる教授法。

04_美的・ユーザビリティ効果

デザインの美しいものは、デザインの美しくないものよりも使いやすいと認知される。

05_アフォーダンス

ものあるいは環境の物理的特徴がその機能に影響を与えるという属性。

06_アラインメント（配列）

共通の横の列や縦の行にそって端が並ぶように、あるいは共通の中心にそって真ん中が並ぶように、要素を配置すること。

07_元型

生来の心的傾向や気質に起因する、テーマや形態の普遍的なパターン。

08_魅力効果

魅力的でない人よりも、魅力的な人のほうが知的で、有能で、道義をわきまえ、社交的だと思う傾向。

09_ベビーフェース効果

ベビーフェースの人やもののほうが、大人顔の人やものよりも、無邪気で無力で正直だと考える傾向。

10_チャンキング

数多くの上方単位を連結させて、限定数のユニットあるいはかたまり（チャンク）にし、情報を処理しやすく、記憶しやすくする方法。

11_古典的条件付け

ある刺激を、無意識の肉体的あるいは精神的反応と結びつけるための手法。

12_閉合

個別の要素からなる一連の情報を、複数の個別の要素としてではなく、1個の認識可能なパターンとして知覚する傾向。

13_認知的不協和

態度、思考、信念において一貫性を求める傾向。

14_色彩

デザインにおいて色彩は、注意をひき、要素をグループ分けし、意味を表示し、美しさを高めるために用いられる。

15_共通運命

同じ方向に動いている複数の要素は、異なる方向に動いている要素や静止している要素同士よりも、互いに関連していると知覚される。

16_比較

2つかそれ以上のシステムの変数を、制御された方法で表示することにより、システム内の行為の関係やパターンを説明する方法。

17_確認

行為がなされる前に、行為の確認を要求することによって、意図しない行為がなされるのを防ぐ方法。

18_一貫性

同じ部分が同じ方法で表現される時、システムの有用性（ユーザビリティ）は向上する。

19_不変性

感覚器官の刺激を通じてもたらされた情報が変化しているにも関わらず、対象物を不変であると知覚する傾向。

20_制約

システムにおいて実行されうる行為を制御する方法。

21_制御

システムが提供する制御レベルは、システムを利用する人と技能と経験のレベルに関連付けられるべきである。

22_コンバージェンス（収斂）

複数のシステム内で、同じような特徴が個々に生成されていくプロセス。

23_費用便益分析

ある行為のもたらす便益が費用と同額か、費用を上回る場合にのみ、その行為は推進されるだろう。

24_守ることのできる空間

テリトリーを示す標識、監視の目、活動と所有権の明確な表示をもつスペース。

25_処理の深度

深く分析された情報のほうが、表面的に分析された情報よりも思い出しやすい、という記憶の現象。

26_開発サイクル

成功した製品は、概して創造の4段階——要請、デザイン、開発、テスト——を経ている。

27_エントリーポイント

デザインへの物理的入り口、もしくは注意をひく点。

28_エラー

意図しない結果をもたらす行為、あるいは行為の脱落。

29_期待効果

個人的に期待した結果、もしくは他人から期待された結果、認識や行動に変化が生じる現象。

30_露出効果

好きでも嫌いでもない対象の刺激を繰り返し受けると、その対象の好ましさは増す。

31_フェース率

人物画像における顔と体の比は、その人物の認識のされ方に影響する。

32_安全率

未知の変数の影響を相殺し、システムの故障を予防するために、必要と思われる以上の要素を使用すること。

33_フィードバック・ループ

ある事象の結果がインプットとしてシステムに還元され、将来的に事象を変化させるようなシステム内の変数間の関係。

34_フィボナッチの数列

各項が先行する2項の和となっている数列。

35_図と地の関係

要素は図（焦点を合わせる対象）あるいは地（その他の知覚域）のいずれかとして知覚される。

36_フィッツの法則

目標にたどり着くまでの時間は、目標の大きさと、目標までの距離によって決まる。

37_5つの帽子掛け

情報を組織化するには、カテゴリー、時間、位置、アルファベット、連続量をそれぞれ基準とする5つの方法がある。

38_フレキシビリティとユーザビリティの二律背反性

システムのフレキシビリティが向上するにつれ、システムユーザビリティは低下する。

39_寛容性

エラーを防止するよう、そして万一エラーが起こった場合には、エラーのネガティブな影響を最小限に抑えるよう、デザインされなければならない。

40_形態は機能に従う

デザインの美しさは、機能の純粋さに起因する。

41_フレーミング

情報の提示の仕方を操作することによって、意志決定や判断に影響を及ぼす手法。

42_ごみ入れごみ出し

システムのアウトプットの質は、システムのインプットの質によって決まる。

43_黄金比

約0.618の値をとる、高さと幅など、形態の要素間の比率。

44_よい連続

直線や滑らかな曲線に配置された要素は、まとまりとして知覚され、直線や曲線状に配されない要素よりも、要素間に関連性があると解釈される。

45_グーデンベルク・ダイヤグラム

均一に配置された同質の情報を見る時の、視線の流れの一般的なパターンを表した図式。

46_ヒックの法則

決断に要する時間は、選択肢が増えるほど長くなる。

47_階層

階層構造は、複雑なものを視覚化し理解するための最も簡潔な構造。

48_欲求階層説

デザインを成功させるためには、高次の欲求を満たそうとする前に、人々の基本的な欲求を満たさなければならない。

49_強調

本文や画像の一部分に注意を向けさせるための手法。

50_アイコン

標識や制御装置に対する認識と想起力を向上させるために画像を用いること。

51_没頭

極度の精神集中によって「現実」世界に対する意識が失われ、一般に歓喜や満足感がもたらされる精神の状態。

52_干渉効果

精神作用が、それと競合する他の精神作用の影響を受けて、遅くなったり不正確になったりする現象。

53_逆ピラミッド

重要性の高いものから低いものの順に表示する、情報提示の方法。

54_反復

特定の結果が得られるまで、一連の作業を繰り返すプロセス。

55_プレグナンツの法則

あいまいなイメージで、複雑でまとまりのない形ではなく、単純でまとまりのある形で解釈する傾向。

56_階層化

複雑な情報を扱いやすくし、その情報の中にある関係を明示するために、情報の内容を関係に応じてグループ分けすること。

57_見やすさ

使用する文字のサイズ、書体、コントラスト、文章表示法、行間などによって主に決まる、テキストの視覚的明瞭性。

58_ライフサイクル

全ての製品は、導入期、成長期、円熟期、衰退期の、4つの段階を経過する。

59_マッピング

コントロールと、それによる動きや効果の関係のこと。コントロールとその効果のマッピングがよいシステムは使いやすい。

60_メンタルモデル

人間は、経験によって培われた心的表象を元にして、システムや環境を理解したり、それに対処したりする。

61_擬態

なじみのある物体、生物、環境などの特徴をまねて、その特性がもたらす特定の効果を表現しようとすること。

62_記憶の補助手段

覚えやすいように、情報を再編成すること。

63_モジュール方式

大きなシステムを多数の独立した小さなシステムに分割することによって、複雑さに対処する方法。

64_もっとも平均的な顔の効果

目、鼻、唇、その他の特徴が集団の平均に近い顔が好まれる傾向のこと。

65_正規分布

ひとまとまりのデータが、グラフ上で対称的な釣鐘型の曲線をなす場合、そのデータは正規分布であるという。

66_オッカムの剃刀

機能的に同等なデザインの中では、もっとも単純なデザインを選ぶべきであるという原則。

67_オペランド条件付け

望ましい行動を強化し、望ましくない行動を無視または罰することによって、行動を修正する技法。

68_方向感受性

特定の方向の直線が、他の方向の直線よりも素早く簡単に処理され区別されるという、視覚処理の現象。

69_遂行の負担

仕事を成し遂げるのに必要な労力が大きいほど、その仕事をうまく成し遂げられる可能性は低い。

70_性能 VS 好み

人々が最適条件で仕事をするのを助けるデザインが、人々が最も好ましいと感じるデザインと一致しないことが多い。

71_画像の優位性

言葉よりも画像のほうがよく記憶に残る。

72_段階的開示

任意の時点において、必要な情報または要求された情報のみを表示することにより、情報の複雑さに対処する方法。

73_展望と退避

遮られない視界（展望）と、隠れたり難を逃れたりする場所（退避）を併せ持つ環境が好まれる。

74_プロトタイピング

あるデザインを単純化したモデル、あるいは部分的なモデルを使って、アイデアの研究、必要事項の練り上げ、スペックの改良、機能性のテストを行うこと。

75_近接効果

近くにある要素同士では、離れている要素同士よりも、より関係が深いと認識される。

76_読みやすさ

散文が、その単語や文の複雑さに応じて理解される程度。

77_再生記憶より再認記憶

提示されたものを認識することによって思い出すほうが、頭の中の記憶を直接再生するよりも容易である。

78_冗長性

1つまたは複数の機能不全に備えて、システムの性能を維持するために必要以上の要素を使用すること。

79_3分の1の法則

構図を決める際に、画面の上下左右を3等分して、デザインの重要な要素を美しく配置する手法。

80_そこそこ満足のゆく解決策

最善の解決策を追求するよりも、そこそこ満足のゆく解決策を受け入れるほうがよいことが多い。

81_サバンナの優位性

サバンナに似た環境が、その他の環境よりも好まれる傾向。

82_スケーリングの誤解

ある規模において機能するシステムは、拡大または縮小した規模においても同様に機能すると思い込む傾向のこと。

83_自己相似性

ある形状の部分部分が全体の形状と相似であるか、もしくは部分同士が相似であるという特性。

84_系列位置効果

一連の項目の中で、最初に提示されたものと最後に提示されたものが、間で提示されたものよりも再生されやすいという記憶の現象。

85_反応形成

目標とする行動の近似行動を強化し、その近似行動を次第に目標の行動に近づけることによって、目標の行動を習得させる手法。

86_SN比

ディスプレイ上の、意味のある情報と無意味な情報の比。デザインでは、SN比ができるかぎり高いことが望ましい。

87_類似性

類似性のある要素同士は、類似性のない要素同士よりも、関係が深いと認識される。

88_ストーリーテリング

語り手と聞き手の交流を通して、出来事のイメージ、感動、理解を生み出す手法。

89_構造型

荷重を支えるため、または何かを入れて保護するための部材の組み立て型には、マス構造、フレーム構造、貝殻構造の3つがある。

90_対称性

ある形状内の要素間に視覚的な同等性があること。

91_脅威の検出

脅威を示す刺激は、そうでない刺激よりも効率よく検出される。

92_三次元感覚

ある種の視覚的な特徴を備えた対象やパターンを、三次元で見る傾向。

93_上方照明の先入観

物体の暗い部分を、その物体の上方から照明によって生じた影であると解釈する傾向。

94_不確定性原理

システムにおいて、特定の不安定な変数を測定することによって変数自体が変化し、測定の精度が損なわれる場合があるという原理。

95_一定結合性

一定の視覚的要素（色など）によって結合された要素同士は、結合されていない要素同士よりも関係が深いと認識される。

96_わかりやすさ

システムの現状と使用方法がはっきりわかれば、システムの使いやすさ（ユーザビリティ）が向上する。

97_レストルフ現象

ありきたりのものよりも、見るからに変わったものの方が再生されやすいという記憶の現象。

98_ウエスト比・ヒップ比

ヒップに対するウエストの比率が特定の数値である男女が好まれる。

99_経路検索

空間的および環境的情報を使用して、目的地に進むプロセス。

100_もっとも脆弱な要素（ウィーケストリンク）

システム内の他の要素を破損から保護するために、弱い部分を犠牲にすること。

シットコムに学ぶフォーマット

• アーノルド坊やは人気者
• アルフ
• セックス・アンド・ザ・シティ
• やっぱり猫が好き

これらの共通点は、シチュエーション・コメディ（situation comedy）であることです。略してシットコム（sitcom）と呼ばれるようですね。

シットコムの特徴として、以下のようなものがあるようです。

• 連続ものだが原則として1話完結で、回をまたがる物語のつながりや進展は希薄である。
• 主要な登場人物はほぼ一定。メンバーがたまに変化したり、ゲストが登場したりすることはある。
• 主要な舞台が固定されている。

このような設定のもとで、毎回事件が起きるなどして生じるコミカルな状況が描かれる。

»シチュエーション・コメディ – Wikipedia

シットコムの定義をもう少し広げると、例えばドラえもんも含まれるんじゃないかと。あの登場人物と設定というフォーマットに従いさえすれば、ある程度面白いお話を作れてしまうものです。ドラえもんの道具とかも、あのトーンマナーに従えばある程度のものは作れると思います。

実はこういったフォーマット作りの部分が重要であり、簡単そうに見えて最も難しいというか、想像以上に練られた部分であることが多いです。なのでこのフォーマットを、一定のクオリティを保ったうえでのライセンス販売を行うということも可能になってくるのだと思います。

面白い質問があります。

「あなたは、マクドナルドより、美味しいハンバーガーを作れますか？」

多くの人がそうであるように、僕も「はい」と答えます。
しかし、次の質問はどうでしょうか。

「あなたは、マクドナルドよりも上手くマネジメントされた、ハンバーガー作りのシステムを作ることが出来ますか？」

僕は「いいえ」ですね。
このマネジメントというのは、つまり先に書いたようなフォーマットということになると思います。このフォーマットを作れれば、別にハンバーガーじゃなくても世界中にチェーン店を展開することができると思います。

フォーマットとテンプレートは違います。テンプレートは、フォーマットを元に詳細まできっちりと体系化されていて、「それを元にすれば誰にでも一定のクオリティのものを作成できるようになっている」ものだと思います。

もの作りをする人なら理解してもらえると思うのですが、強力なフォーマットを作ることが出来れば「スイッチが入りっぱなし」の状態となります。「開いている」という状態と言うのでしょうか。フォーマットが創作を呼び寄せるということもあり得ますよね。

【インターフェイスデザイン】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のアクション

利用場面

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