モードレスな物理インターフェイスの実装

（オフィス編）

2016年1月20日 Gaji-Labo 山岸 ひとみ

システム プロセス ユーザー

設計／デザイン／実装

Gaji-Labo は「システムを考える」会社

2016年1月現在、得意としている仕事

• スタートアップ企業の開発支援• ウェブサイト制作・実装（企画・設計含む）• ワークショップ関連事業

Gaji おじさんも大事なメンバー！

モード (mode) とは、インターフェースにおける間違い、混乱、不必要な制限、複雑さの温床となる重要なものです。

cf: Jef Raskin『ヒューメイン・インターフェース』p41

“

”

アプリの世界のデザインはモーダルなものが多い

• 手続き的である• はじめと終わりが決まっている• ユーザーが行なうタスクが定義されている

デザインプロセスの結果としてモーダルデザインにたどり着く

• ユーザーの行動を調査・分析• ヒューマンエラー回避のための設計• ユーザーにとって難しくないデザイン

モードがない状態。ユーザーインターフェースをデザインする際に目指すべき状態。状況に依存した機能制限がなく、自由な手順でタスクを進行することができ、かつ特定の操作がシステムによって常に一定に解釈される状態。

cf: ソシオメディア| モードレスhttps://www.sociomedia.co.jp/326

“

”

モードレス

創造性を刺激するモードレスな道具

「ホワイトボード」

オフィスの壁はインターフェイス

オフィスの壁はインターフェイス

インターフェイス実装

オフィスの壁はインターフェイス

インターフェイス実装

フロントエンドエンジニアの出番

ホワイトボード実装プロジェクト

ホワイトボード実装プロジェクト

• オフィス移転の際に壁面のホワイトボード化を本格的に検討

• マンションタイプのオフィスで内装工事などはしない前提

• 予算は10万円以下

ver.1：プロトタイプ実装と運用

• スチレンボード（必要な面積分）• ホワイトボードラベル（粘着性のもの）• 配線用のモール（粘着シール付のもの）• 補助用の粘着テープ（はがせるタイプ）

必要な材料

ver.1：プロトタイプ実装と運用

• ボードにホワイトボードラベルを貼る• ボードからはみ出したシートをカットする• 壁に補助用の粘着テープとモールを貼る• ボードを壁に取り付ける

工程

ver.1：プロトタイプ実装と運用

• 900mm×5400mm の特大ラベルを採用• ボードもラベルも1枚で作成

• 数ヶ月経つうち、スチレンボードとラベルの間に大小の気泡が大量に発生しはじめた

• 表面のでこぼこが大きくなって歪んでいき、書く作業が困難になってきた

ver.2：改良版の実装と運用

• 900mm×2700mm のサイズを数枚組み合わせて使用

• 紙貼タイプのボードを採用• 小さいボード数枚を組み合わせて使用

変更点

現在のところ大きな問題なし！

観察していて気付いた小さいけど大事なこと

• 広い面は無意識に区切られる• 行間と余白の取り方に個性が出る• インクの乗りに気持ちが引きずられる

モードレスな世界での癖はアプリ設計のヒントにもなる

ホワイトボードの実装もできるGaji-Laboをよろしくお願いします♡