ホーム > スクラップ >

イームズなどにも通じる素材を生かしたデザイン。Webに当てはめるとフラットデザインというコンセプトになった！？

マテリアル・オネスティ（Material Honesty）とは工業製品は、素材に忠実であるべきあり、上塗りした虚構により加工されたものは一時の価値しか提供しないという考え方だそうです。イームズやイタリアン家具、アップルのノートパソコンなどは気の木目やステンレスの質感をそのまま出したデザインになっていますね。こうした製品は長きに渡って愛用される傾向にあり高い価値を保持することができるそうです。いかにマテリアル・デザインについて参考としてさせていただいた記事を挙げておきます。

• Material Honesty on the web
• 日本語翻訳サイト「マテリアル・オネスティー」
• 5分で分かるフラットデザイン(解説サイト）

では、Webやコンピューターのインターフェースに関して素材に忠実とはどういうことでしょうか？上記2つの記事を見ると奥深い内容が書かれていますのでここではポイントだけ要約し紹介します。

マテリアルオネスティとは高い価値を保持できる考え方である。

ステンレス製の電子レンジを例に説明されいますが、ステンレス素材をむき出しにした外見から素材がはっきりわかりシンプルで洗練されたイメージを作り出すことができるという事のようです。よくよく思い出してみると、イギリスのジャガーマークⅡやメルセデスのw124などを思い出すと本物の木がそのまま使われていいたり、なんともいえない手作り感と高級感を感じることができるのはわかる人はわかるのでしょうね。

ジャガーマークⅡ

「最善か無か？」の時代のw124ウッドパネルと内装。このころのウッドパネルは本物の木を何層にも重ねて作っていたので日焼けするとひびが入ったりしたものです。それから皮シートももこのころは皮の香りがきちんとしていたように思います。

ちょっとずれるかもしれませんが、フランク・ロイド・ライトなどの自然や建築材の素材をそのまま出す建築などにもそういった価値があるように思います。

フランク・ロイド・ライトの落水荘

こうした工業製品や建築物は何じゅん年たっても色あせず価値を有するものだと改めて思い出させていただきました。

ではマテリアル・オネスティ（素材の本質を尊重する）をコンピュータやWebに持ち込むとどうなるか？

英文と解説記事では光源だのなんなので回りくどい説明でわかりにくかったので私なりの解釈を簡潔にまとめてみます。
グラデーションや影など作為的に用いたステンレスっぽく見せるボタンとか、テクスチャーなどを多用して擬似的な質感をよそおったオブジェクトは偽者なのでNG。本来コンピュータ上でのマテリアルといえるものとして

• モニターのバックライト
• 文字を表現するフォント
• 背景やコンソール（昔でいうとUNIXのターミナルなど）
• そして円や四角などコンピュータで単純に計算して描画できる図形

とう感じでしょうか？色もRGBで合成される淡色が素材っぽい感じですね。これらを総合すると、フラットなデザインになるのだそうです。当然ですが、CPUを意味なくつかうようなグラデーションや影やテクスチャーなどの質感はみせかけのメッキということになりますよね。

コンピューターのUIとしてのマテリアル・オネスティとは、プログラムやコードで表現できる素朴なモノを洗練すること!?

これまでコンピューティングUIが目指してきたスキューモーフィズムが現実世界のなじみのあるものに例えるデザインとすると、コンピュータにおけるマテリアルデザインとは本来のコンピューティング（例えばWebではCSSやHTML、フォント、色、写真）といった基本要素に忠実にシンピルなアトリビュートのみ活用したデザインであると翻訳できるようです。

たまに、LinuxなどのコンソールやktermのようなIFを使ってみると、コンピューター計算機をつかっているというなんともいえない価値を感じることがありますが、こういう感じを今風に使いやすく練りこんだデザインがWin8やiOS7のフラットデザインということのようです。

まとめ：フラットデザインをするための５つのポイント

5分で分かるフラットデザイン(解説サイト）より要素を引用させていただき、フラットデザイン足らしめるポイントをまとめてみました。私自身単なる流行ぐらいにしか考えていませんで他が、奥が深いことに考え方など非常に参考になりました。

１．VIVIDな色を利用する。白・黒のみのシンプル構成も

２．アイコンは使わない

３．グラデーションは使わない

フラットデザインではグラデーションを使わずできる限りソリッドな色を使う

４．影をつけない

基本的には影は使わないが、CSSによるtxt-shadowやbox-shadowといった効果は使ってもOK

５．背景画像を使う

フラットデザインでは、素材画像や写真をそのまま背景として使うことで、そのオブジェクトがぐぐっと引き立つことを狙っているようです。アイコンやコントロールパネルといった人工物は極力シンプルに、背景写真などで嘘のない質感を演出するということなのですね。この点はフランク・ロイド・ライトの落水荘に通じるところを感じてしまいますね。絵の額縁にこるのでなく額縁は主張せずに中身の絵画や写真に物語を語らせるということなのでしょう。うーん深いですぇ。そういう意味では千利休の茶道にも通じるところがあるのでしょうね。

記事の解説にもありますが、フラットデザインをさいようすることで、ビデオ画像の世界観を上手にアピールできているとの事。

最後に、Apple社の製品の多くのデザインを手がけているジョナサンアイブ氏について

イギリスロンドン出身で父親はデザインを教える先生だったそうです。インダストリアルデザインを学ぶべくノーザンブリッジ大学へ入学し、卒業後はロンドンのバスルーム設備を開発する企業へ就職したそうです。1992年に米国に移住し、トイレ設備の納入の県でカリフォルニアApple本社への出張に同行することに。その際、経営陣の1人にデザインセンスを認められてアップルに転籍することになったそうです。その後の活躍は皆さん知るとおりですね。

（出展：Wikipedia／photo：＠IT5分で分かるフラットデザインより）

iOS7新らしさの演出のためにスキューモーフィズムから脱却目指す!?

新しさだけでない、恒久的な質感と価値を持つことができるテリアルオネスティを追求したのがフラットデザインだった!?

前ページに戻る

---

かわら版 , スクラップ 　タグ: アップル , ジョナサンアイブ , スティーブジョブズ

---

おすすめ記事

　

『アップル』の関連記事

　

『ジョナサンアイブ』の関連記事

　

『スティーブジョブズ』の関連記事

その他の関連記事