UI設計ビジュアライズノート集

本

usagimaruのTwitter / Xで不定期に投稿してきたUI設計のビジュアライズノート（デザインパターン解説）を収録しています。新しい投稿も随時追加していきます。

コンテンツが増えていくと価格も少しずつ上がっていきます。ご興味があるなら早い方がお得かもしれません。

¥800

運営しているクリエイター: usagimaru

固定された記事

ツリー構造 vs. セミラティス構造

UIの構造設計を行う際には、ツリー構造とセミラティス構造の違いを意識すると、それぞれの特徴を活かした形を作りやすくなります。ツリー構造ツリー構造 (tree structure) とは、ある要素から見た親要素の数が必ず一つで、子要素が0もしくは複数個の階層型をしています。ただし、ルートとなる要素には親要素が存在しません。ちょうどフォルダとファイルのような関係のものです。ツリー構造はさまざまなところで目にすることができます。コンピュータのファイルシステムのほか、政府や企

ピラミッド型ナビゲーション／ビルディング型ナビゲーション

ピラミッド型ナビゲーションまたはビルディング型ナビゲーションは、概要レベルのナビゲーションと詳細レベルのナビゲーションを組み合わせたようなパターンです。いずれの階層でも並列に並ぶ兄弟コンテンツ間の横移動を実現しますが、階層間の粒度変化を起こす縦移動のナビゲーションも併せ持ちます。概要レベルの一覧と詳細レベルの一覧はコンテンツの並びを一致させておく必要があります。縦方向のナビゲーションを中心に見た時に、同じ階層の兄弟コンテンツ間の移動ではわざわざ親階層のレベルに戻ることなく

アクションの提供手段：フローティングツールバー

フローティングツールバー（Floating Toolbar）パターンは、選択した要素に対して実行可能なアクションの一覧を提供するために、その近傍に都度ポップアップで現れることができるツールバーの一種です。画面上の任意の場所に恒久的に浮遊表示させられるパターンのものもあります。モバイルのテキストエディタやWebベースのツール系ソフトウェアに採用例が多く、主に選択したコンテンツの属性を編集するためのアクションメニューやツールバーを提供する目的で使われることが多いようです。従来

UIの余計なお世話: 固有番号の接頭辞・接尾辞を入力済み状態にしない

何かの固有番号（シリアル番号、ID等）を表す文字列に固定の接頭辞・接尾辞が付いている場合に、入力を受け付けるテキストフィールド（フォーム）で接頭辞・接尾辞を切り離して受け付ける仕様であると、ユーザー側でいちいち接頭辞・接尾辞部分を除去する手間が生じます。例えば“NMBR0123456789”というような固有番号を扱う際、テキストフィールド側で「“NMBR”を除く残り10桁部分を入力してください」という見え方になっていると、NMBRを取り除くためのテキスト編集作業がユーザー

UIの余計なお世話: テキスト全体を選択してあげなくても良い

テキストフィールド（フォーム）でたまにある余計なお世話としては、単クリックでその内容を選択状態にしてくれる振る舞いがあります。しかしテキスト全体を選択状態にされると、ユーザーが任意の範囲を選択する自由を制限しかねないため、このような振る舞いをわざわざ実装しなくても良いでしょう。基本的にはOS標準の振る舞いを尊重し、その仕組みを邪魔しない機能を提供することが大切です。例えばデスクトップOSではトリプルクリックによって段落全体を選択できる機能が備わっていることがあります。

ナビゲーション設計の基本／ボトムアップ型設計とトップダウン型設計

ナビゲーションの基本パターンとその設計一覧－詳細（List-Detail） UIのナビゲーション設計では、「一覧 → 詳細」を基本とする構造で組み立てることで、整ったナビゲーションを表現しやすくなります。一覧とは、ビュー表現でいうリスト、カラム、カルーセル、メニューなどのコレクション表現全般です。詳細とは、コレクションに羅列される個々の単体オブジェクトの表現です。ナビゲーション設計に先立ち、情報の塊をコンテンツと見立てて概念定義に着手しておくと効果的です。不要なら

フローティングビューとモードの設計

このアーティクルでは、いわゆる「モーダル（ビュー）」と呼ばれるUI表現パターンと、実際のモード設計の区別の仕方を簡単に解説します。まず結論として、モーダル、モードレス問わず、画面の中で手前にポップアップしてくるようなビュー表現全般を「フローティングビュー（Floating view）」と呼ぶこととします。ポップアップしてくるビュー表現には、通常のウインドウ、モーダルダイアログ、ポップオーバー、バナー、トーストなどさまざまなものがありますが、これらを総じてフローティングビューと

モバイルアプリケーションは富士山型のナビゲーションで設計する

基本は富士山型ナビゲーション富士山型のナビゲーションは、動線とその起点が複数あり、最終的に一つの「目標／目的／核となる機能」に収束する構造をしています。特にモバイルアプリケーションでは複雑なUI構造を表現するにはユーザビリティ上の限界があるので、使い勝手を良くするためにもその構造をなるべくシンプルに保つ必要があります。そのアプリケーションで“できること”や目標（頂上）をただ一つに定め、麓からもその様子を眺めることができるようにします。アプリケーションを使い始めた時から唯一の目

フィッツの法則（Fitts’ law）

主要なGUIシステムでは、プルダウン／ポップアップメニューでのサブメニューの展開の際にフィッツの法則を応用して「ななめ移動」の許容を行なっています。これにより、ユーザが厳密なポインタ操作をすることなく、素早く目的のメニュー項目にポインティングすることを可能にしています。ななめ移動の際には、ポインタの点からサブメニューの縦幅を底辺とする線で成り立つ三角形の仮想領域を展開し、この仮想領域にポインタが一定時間滞在する間はサブメニューの開閉を一時的に待機するという工夫です。このお

マウスポインタの作用点

マウスポインタは矢印や手などのアイコンで表示されますが、いずれかの1dotの点が実際のマウスポインタとして振る舞い、残りの部分は人間が理解しやすいようにするための飾りです。この1dotを作用点と呼ぶとすると、マウスポインタの表現として先端もしくは中心点となるようなところを作用点に割り当てるのが妥当と言えます。ユーザーのメンタルモデルを考えた時に、どこに作用点があれば自然と感じられるかを吟味します。例えば矢印なら鏃の先端、人差し指なら人差し指の先端、虫眼鏡（ズーム）なら

テキストの編集方式

直接操作方式テキストが常に編集可能である場合や、直接的に編集を行いたい場合には、直接操作方式を採用すると良い。テキスト内容は常に変更される可能性が高いため（不安定）、そのような性質のテキストコンテンツに向いている。編集モードで包んでいない場合には、書き換えられたテキスト内容は即時にデータベースに反映する（モードレスを保つ）。間接操作方式編集内容の保存や破棄といった編集モードを提供したい場合には、間接操作方式にする。例えばプロフィール編集画面など。そのほか、ツール

アプリケーション中心設計 vs. ドキュメント中心設計

アプリケーション設計の（UIとしての）アーキテクチャには、主にアプリケーション中心設計（Application-Centric Design）とドキュメント中心設計（Document-Centric Design）の二つの型があります。アプリケーションの初期設計の段階においては、これらの特徴の違いを意識して構造設計に反映することが大切です。