フラットデザイン（Windows 8, iOS 7）の将来を、バウハウスを絡めて解説します。

1. バウハウスと
フラットデザイン
増田 智明（@moonmile）
.NET ラボ Micorosft MVP C#
Moonmile Solutions

2. バウハウスとは
 1919年から1933年にドイツで開かれたデザイン学校の始祖
 主に建築が中心だが、演劇、師弟制度など「デザイン思想」一般に広がっている。
 時代的に、アールデコ、アールヌーボーの後のモダニズムの時代にあたる。
 現在のドイツの四角い建造物の
弊害と批判されることもある。
 スティーブ・ジョブズが
注目していた？

3. フラットデザインとは
 最近のWEBデザインに代表される、奥行きを持たないデザイン
 「WEBデザイナの復権」ともいわれる
 Windows 8 のユーザーインターフェース
 iOS 7 の基本的なデザイン
 Github, google など
 スーパーフラットとの連動は不明

4. Windows 8 のデザイン
 Windows XP, Vista, 7 などで使われていたデザインを一新
 「Windows ストアアプリ」の主デザイン
 欧米では「modern design」で通じる。
 日本では「モダン」のイメージが「ちょっと古め」に聞こえるので使われない。
 MVP の mailing list では modern design で通じる
 元はメトロデザイン
 8月中にRTMになる8.1も同路線

5. iOS 7 のデザイン
 6月のWWDCで発表されたiOS 7の新デザイン
 iOS 6以前や OS X のインターフェースとは違い、奥行きのない
フラットデザインを採用する
 結果、Windows 8 と似た路線となる
 薄い影はつける模様
 基本コンポーネント（Buttonなど）が
フラットデザイン化する

6. アールデコ、アールヌーヴォー、そして
モダニズム
 アールデコ
 19世紀に流行った「装飾過剰」なデザイン。
 最終的に、ミュシャの絵のような装飾に落ち着く
 アールヌーヴォー
 20世紀初頭の幾何学的なデザイン
 アールデコの反動から直線的な機能美を主張する
 モダニズム
 20世紀以降の芸術を示す。
 ポップアート、前衛芸術など

7. 職工のための製品デザイン
 バウハウスは、モダニズムの時代にあたる。
 それ以前は、職人の腕による工芸品の時代であった。
 産業革命があり、大量生産、大量消費の時代になる。
 職人による製品の質（主にデザイン）が、ばらばらである、
という問題があがる。
 平均的な職人が、平均的な製品を作れる
 職人が職人を育てる環境を整える

8. 大量生産を前提としたデザイン
 産業革命直後の、粗悪な工場であっても、それなりの製品ができる
製品のデザインが必要となる。
 無駄の出ない製品デザイン（削りかすや、無駄布など）
 曲線よりも直線を使って切り分ける
 粗悪なインク、粗悪な紙でも読みやすいフォント
 誰にも拒否されない、平均的なデザイン
 製品を作りやすいデザイン
 これらの、職工のためのデザインが「バウハウス」の基礎となる

9. 流線型から人間工学のデザインへ
 アールデコが「流線型」や「幾何学的模様」を美的感覚の元に
したのと違い、あらためて、人にとっての使いやすさを追求する工学が
「人間工学」である。
 椅子の形
 ペンのくぼみ、ペンの長さ
 ノートパソコンの重さのバランス
 指の大きさに合わせたボタン
 加えて、安全工学の視点も含まれる
 ミスをしにくいボタンの配置
 緊急時の押しボタン

10. 技術的な限界ゆえの製品デザイン
 工業デザイン（プロダクトデザイン）を行う場合には、以下の視点が必要
 大量生産が可能か？
 材質や材料の調達は、一定量可能か？
 設計による伝達は可能か？
 製品を作るまでの時間はどのくらいか？

11. パーソナライズ、エモーショナル
 ソフトウェアの製品デザインは、大量生産（複製）が極めて簡単である。
 Photoshop などによる画像加工技術
 Visual Studio などの UI デザイナの充実。
 Windows, iOS などの基本 UI デザインの提供
 3D 技術、光源、テクスチャなどなど
 ゲームデザインを中心として、ソフトウェアのUIデザインが行われている
 画面の美しさの追及
 面白さの追求
 登場人物のリアルさの追求

12. もう一度、バウハウスの思考を
 バウハウスの潮流からの「フラットデザイン」を考えると、
 ソフトウェア開発者、WEBデザイナの「技量」に関係ない UI デザイン
 多種多様のソフトウェアを、「大量生産」可能な UI デザイン
 多種ではあるが、流用可能な UI デザイン
 ソフトウェアを「デザイン」するときに、「デザインしやすさ」を優先する
 設計しやすい、UI デザイン
 設計の伝達をしやすい、UI デザイン
 そして、そこそこ利用者の利便性
 アプリケーション間で統一的な UI デザイン

13. カスタマイズという思考停止性
 ソフトウェアを「カスタマイズ」可能にすることにより、かえって、利用者の
利便性が損なわれる。
 大量な機能の羅列
 大量すぎるオプションの羅列
 開発者が「取捨選択できていない」
 カスタマイズ不要のアプリ
 単機能アプリ
 Unix コマンド
 自作ツール
 自作スクリプト

14. 「標準的なデザイン」という欺瞞
 Windows 3.1 のデザインガイド
 Windows 95 のデザインガイド
 Windows 8 のデザインガイド
 Windows 8.1 のデザインガイド
 以下、続く。
 標準アプリのデザイン変更
 デザインガイドライン違反などなど

15. 作業効率化、業務支援、製品寿命
 ガイドライン違反はさておき
 ソフトウェアの UI デザインは、
 作業効率化、ゲーム性の面白さ、に分けられる
 業務支援的なキーワード
 タブキーによる移動、入力支援
 入力ミスのしにくい配置
 入力が効率化しやすいフロー（階層を浅くするなど）
 製品寿命
 ゲームの場合は１年程度
 業務アプリの場合は10年単位
 WEBサイトは即時作成（話題性）が大切など

16. 手間を見せる 匠、マイスター
 経験のあるソフトウェア開発者ができることは？
 例えば
 過去事例、ドメイン領域（特化した知識）
 過去の経験による作業見積もり（UI デザインの時間も含む）
 安全工学を取り入れた、エラーリカバリ UI
 高齢者用、子供用≒希少利用者に配慮した UI
 ユニバーサルデザインとは異なり、ソフトウェア UI は、高齢者に特化して UI をフルカス
タマイズするとが可能という利点がある。

17. 本来のフラットデザインへ
 コンテンツを侵害しない UI デザインの提供
 装飾過多（影付き、3D）であっても、適切なタイミングで表示される。
 適切なタイミングで表示できる。
 無理矢理な、記号化はしない（表意文字の違い）
 色彩学を利用した、色の統一感、あるいは、不統一による警告色
 コンテンツの閲覧モードと、コンテンツの作成モードを区別する
 WEBサイトの流し読み、ビデオで暇つぶし
 WEBサイトで調べもの、見つけた商品を安値で買う
 WEBサイトで調査して、レポートの作成を短時間で

18. 本来のユーザーインターフェースへ
 フラットデザイン自体が、幾何学模様を主体にした「流行」と同じく
本来のユーザインターフェースは、流行とは異なる次元にある。
 しっかりと、人間工学を意識する
 しっかりと、安全工学を意識する
 エモーショナル（人間の感情）を導き出すデザイン
 ゲームならば楽しさを、業務ならば効率を、WEBサイトならば購買意欲を
などなど「目的」を忘れずに

19. 参考文献
 「バウハウス」マグダレーナ・ドロステ著（TASCHEN）
 「美の構造学」三井秀樹著（中公新書）
 「バウハウス その建築造形理念」杉本俊多著（鹿島出版会）
 「色彩論」ヨハネス・イッテン著（美術出版社）
 「美しい欧文フォントの教科書」デザインミュージアム著（エクスナレッジ）
 「誰のためのデザイン？」D.A.ノーマン著（新曜社）
 「ソフトウェア職人気質」ピート・マクブーリン著（ピアソンエデュケーショ
ン）
 「ピープルウェア」トム・デマルコ著（日経BP）
 「Windows 95 デザインガイド」