バウハウスとフラットデザイン

増田智明（@moonmile）

.NETラボ Micorosft MVP C#

Moonmile Solutions

バウハウスとは

1919年から1933年にドイツで開かれたデザイン学校の始祖

主に建築が中心だが、演劇、師弟制度など「デザイン思想」一般に広がっている。

時代的に、アールデコ、アールヌーボーの後のモダニズムの時代にあたる。

現在のドイツの四角い建造物の弊害と批判されることもある。

スティーブ・ジョブズが注目していた？

フラットデザインとは

最近のWEBデザインに代表される、奥行きを持たないデザイン

「WEBデザイナの復権」ともいわれる

Windows 8 のユーザーインターフェース

iOS 7 の基本的なデザイン

Github, google など

スーパーフラットとの連動は不明

Windows 8 のデザイン

Windows XP, Vista, 7 などで使われていたデザインを一新

「Windows ストアアプリ」の主デザイン

欧米では「modern design」で通じる。

日本では「モダン」のイメージが「ちょっと古め」に聞こえるので使われない。

MVP の mailing list では modern design で通じる

元はメトロデザイン

8月中にRTMになる8.1も同路線

iOS 7 のデザイン

6月のWWDCで発表されたiOS 7の新デザイン

iOS 6以前や OS Xのインターフェースとは違い、奥行きのないフラットデザインを採用する

結果、Windows 8 と似た路線となる

薄い影はつける模様

基本コンポーネント（Buttonなど）がフラットデザイン化する

アールデコ、アールヌーヴォー、そしてモダニズム

アールデコ

19世紀に流行った「装飾過剰」なデザイン。

最終的に、ミュシャの絵のような装飾に落ち着く

アールヌーヴォー

20世紀初頭の幾何学的なデザイン

アールデコの反動から直線的な機能美を主張する

モダニズム

20世紀以降の芸術を示す。

ポップアート、前衛芸術など

職工のための製品デザイン

バウハウスは、モダニズムの時代にあたる。

それ以前は、職人の腕による工芸品の時代であった。

産業革命があり、大量生産、大量消費の時代になる。

職人による製品の質（主にデザイン）が、ばらばらである、という問題があがる。

平均的な職人が、平均的な製品を作れる

職人が職人を育てる環境を整える

大量生産を前提としたデザイン

産業革命直後の、粗悪な工場であっても、それなりの製品ができる製品のデザインが必要となる。

無駄の出ない製品デザイン（削りかすや、無駄布など）

曲線よりも直線を使って切り分ける

粗悪なインク、粗悪な紙でも読みやすいフォント

誰にも拒否されない、平均的なデザイン

製品を作りやすいデザイン

これらの、職工のためのデザインが「バウハウス」の基礎となる

流線型から人間工学のデザインへ

アールデコが「流線型」や「幾何学的模様」を美的感覚の元にしたのと違い、あらためて、人にとっての使いやすさを追求する工学が「人間工学」である。

椅子の形

ペンのくぼみ、ペンの長さ

ノートパソコンの重さのバランス

指の大きさに合わせたボタン

加えて、安全工学の視点も含まれる

ミスをしにくいボタンの配置

緊急時の押しボタン

技術的な限界ゆえの製品デザイン

工業デザイン（プロダクトデザイン）を行う場合には、以下の視点が必要

大量生産が可能か？

材質や材料の調達は、一定量可能か？

設計による伝達は可能か？

製品を作るまでの時間はどのくらいか？

パーソナライズ、エモーショナル

ソフトウェアの製品デザインは、大量生産（複製）が極めて簡単である。

Photoshop などによる画像加工技術

Visual Studio などの UI デザイナの充実。

Windows, iOS などの基本 UI デザインの提供

3D 技術、光源、テクスチャなどなど

ゲームデザインを中心として、ソフトウェアのUIデザインが行われている

画面の美しさの追及

面白さの追求

登場人物のリアルさの追求

もう一度、バウハウスの思考を

バウハウスの潮流からの「フラットデザイン」を考えると、

ソフトウェア開発者、WEBデザイナの「技量」に関係ない UI デザイン

多種多様のソフトウェアを、「大量生産」可能な UI デザイン

多種ではあるが、流用可能な UI デザイン

ソフトウェアを「デザイン」するときに、「デザインしやすさ」を優先する

設計しやすい、UI デザイン

設計の伝達をしやすい、UI デザイン

そして、そこそこ利用者の利便性

アプリケーション間で統一的な UI デザイン

カスタマイズという思考停止性

ソフトウェアを「カスタマイズ」可能にすることにより、かえって、利用者の利便性が損なわれる。

大量な機能の羅列

大量すぎるオプションの羅列

開発者が「取捨選択できていない」

カスタマイズ不要のアプリ

単機能アプリ

Unix コマンド

自作ツール

自作スクリプト

「標準的なデザイン」という欺瞞

Windows 3.1 のデザインガイド

Windows 95 のデザインガイド

Windows 8 のデザインガイド

Windows 8.1 のデザインガイド

以下、続く。

標準アプリのデザイン変更

デザインガイドライン違反などなど

作業効率化、業務支援、製品寿命

ガイドライン違反はさておき

ソフトウェアの UI デザインは、

作業効率化、ゲーム性の面白さ、に分けられる

業務支援的なキーワード

タブキーによる移動、入力支援

入力ミスのしにくい配置

入力が効率化しやすいフロー（階層を浅くするなど）

製品寿命

ゲームの場合は１年程度

業務アプリの場合は10年単位

WEBサイトは即時作成（話題性）が大切など

手間を見せる 匠、マイスター

経験のあるソフトウェア開発者ができることは？

例えば

過去事例、ドメイン領域（特化した知識）

過去の経験による作業見積もり（UI デザインの時間も含む）

安全工学を取り入れた、エラーリカバリ UI

高齢者用、子供用≒希少利用者に配慮した UI

ユニバーサルデザインとは異なり、ソフトウェア UI は、高齢者に特化して UI をフルカスタマイズするとが可能という利点がある。

本来のフラットデザインへ

コンテンツを侵害しない UI デザインの提供

装飾過多（影付き、3D）であっても、適切なタイミングで表示される。

適切なタイミングで表示できる。

無理矢理な、記号化はしない（表意文字の違い）

色彩学を利用した、色の統一感、あるいは、不統一による警告色

コンテンツの閲覧モードと、コンテンツの作成モードを区別する

WEBサイトの流し読み、ビデオで暇つぶし

WEBサイトで調べもの、見つけた商品を安値で買う

WEBサイトで調査して、レポートの作成を短時間で

本来のユーザーインターフェースへ

フラットデザイン自体が、幾何学模様を主体にした「流行」と同じく本来のユーザインターフェースは、流行とは異なる次元にある。

しっかりと、人間工学を意識する

しっかりと、安全工学を意識する

エモーショナル（人間の感情）を導き出すデザイン

ゲームならば楽しさを、業務ならば効率を、WEBサイトならば購買意欲をなどなど「目的」を忘れずに

参考文献

「バウハウス」マグダレーナ・ドロステ著（TASCHEN）

「美の構造学」三井秀樹著（中公新書）

「バウハウスその建築造形理念」杉本俊多著（鹿島出版会）

「色彩論」ヨハネス・イッテン著（美術出版社）

「美しい欧文フォントの教科書」デザインミュージアム著（エクスナレッジ）

「誰のためのデザイン？」D.A.ノーマン著（新曜社）

「ソフトウェア職人気質」ピート・マクブーリン著（ピアソンエデュケーション）

「ピープルウェア」トム・デマルコ著（日経BP）

「Windows 95 デザインガイド」