2016年1月20日、マネーフォワード Geek Night での資料。

1. モードレスな物理インターフェイスの実装
（オフィス編）
2016年1月20日 Gaji-Labo 山岸 ひとみ

2. システム プロセス ユーザー
設計／デザイン／実装
Gaji-Labo は「システムを考える」会社
2016年1月現在、得意としている仕事
• スタートアップ企業の開発支援
• ウェブサイト制作・実装（企画・設計含む）
• ワークショップ関連事業
Gaji おじさんも
大事なメンバー！

3. モード (mode) とは、
インターフェースにおける間違い、
混乱、不必要な制限、複雑さの
温床となる重要なものです。
cf: Jef Raskin『ヒューメイン・インターフェース』p41

4. アプリの世界のデザインは
モーダルなものが多い
• 手続き的である
• はじめと終わりが決まっている
• ユーザーが行なうタスクが定義されている

5. デザインプロセスの結果として
モーダルデザインにたどり着く
• ユーザーの行動を調査・分析
• ヒューマンエラー回避のための設計
• ユーザーにとって難しくないデザイン

6. モードがない状態。ユーザーインターフェースを
デザインする際に目指すべき状態。状況に依存し
た機能制限がなく、自由な手順でタスクを進行す
ることができ、かつ特定の操作がシステムによっ
て常に一定に解釈される状態。
cf: ソシオメディア ¦ モードレス https://www.sociomedia.co.jp/326
モードレス

7. 創造性を刺激する
モードレスな道具
「ホワイトボード」

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

9. オフィスの壁はインターフェイス
インターフェイス実装

10. オフィスの壁はインターフェイス
インターフェイス実装
フロントエンドエンジニアの出番

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

12. ホワイトボード実装プロジェクト
• オフィス移転の際に壁面のホワイトボード化
を本格的に検討
• マンションタイプのオフィスで内装工事など
はしない前提
• 予算は10万円以下

13. ver.1： プロトタイプ実装と運用
• スチレンボード（必要な面積分）
• ホワイトボードラベル（粘着性のもの）
• 配線用のモール（粘着シール付のもの）
• 補助用の粘着テープ（はがせるタイプ）
必要な材料

14. ver.1： プロトタイプ実装と運用
• ボードにホワイトボードラベルを貼る
• ボードからはみ出したシートをカットする
• 壁に補助用の粘着テープとモールを貼る
• ボードを壁に取り付ける
工程

15. ver.1： プロトタイプ実装と運用
• 900mm 5400mm の特大ラベルを採用
• ボードもラベルも1枚で作成
• 数ヶ月経つうち、スチレンボードとラベルの間に大
小の気泡が大量に発生しはじめた
• 表面のでこぼこが大きくなって歪んでいき、書く作
業が困難になってきた

16. ver.2： 改良版の実装と運用
• 900mm 2700mm のサイズを数枚組み合
わせて使用
• 紙貼タイプのボードを採用
• 小さいボード数枚を組み合わせて使用
変更点

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

22. 観察していて気付いた
小さいけど大事なこと
• 広い面は無意識に区切られる
• 行間と余白の取り方に個性が出る
• インクの乗りに気持ちが引きずられる

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

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