5分で分かるフラットデザイン：5分で分かる製作現場（8）（5/5 ページ）
iOS 7やWindows 8も採用した「フラットデザイン」。実際にフラットデザインを実現するにはどうすればいいのだろうか。
5分−フラットデザインは味気ないのか
フラットデザインの紹介をすると、デザイナーを含め多くの人から「味気がない」「特徴を出しづらい」といわれる。
おそらく、この場合の特徴というのはエモーショナルデザインといわれる「きれい」「かっこいい」「ポップ」などのことだろう。この点については、サンプルを紹介することで“フラットデザインだからといって、エモーショナルなデザインを作れないわけではない”ことを説明しよう。
これは、Webの世界では新しい技術が登場する度に、しばしば起きる拒否反応（CSSやレスポンシブWebデザインでも起きた）のようなものだろうと筆者は考えている。
Material Honestyの記事中でも、
Typekitのクリエーターたちは、初めてウェブに真のタイポグラフィを持ち込んだ時、イーサン・マルコッテが最初にレスポンシブウェブデザインの原則を明確にした時、それを感じたに違いない。
と記載があるように、Webでタイポグラフィを表現する際に、画像でなくテキスト（フォント）を利用することができるTypekitはマテリアルオネスティである。HTMLとCSSの振り分けではない、レスポンシブウェブデザインも同様に、Webの本来の姿でありマテリアルオネスティであると述べている。
フラットデザインは、テクニック的にはそれほど難しくはないが、正しくデザインされないと間違ってしまう可能性が高い。実は非常に難しいデザインの1つであるといえる。
最初はフラットデザインをうまく表現ができないかもしれないが、試行錯誤を重ねれば、コツをつかむことができるだろう。皆さんもフラットデザインをただの流行ととらえる前に、まずはフラットデザインについて取り組んでみてはどうか。ここでは説明できていないメリットにも気が付くかもしれない。
Courtney & Andrew
このWebサイトはウェディング関連のWebサイトで、色使いや文字のアラインにも気を使っている。
そして、2人の写真はよく見るとハート型になるように撮影されているのが分かる。色使いと写真の構成だけで派手なイラストや装飾がなくてもウェディング関係のサイトだと分かるだろう。
Lowdi – Bluetooth Speaker
スピーカーメーカーのWebサイトで、色でレトロな感じを出している。そして、角丸を商品と同じディテールにして、うまく利用しているのが特徴的だ。
ジョナサン・アイブをご存じだろうか？
最後に、iOS 7を作ったジョナサン・アイブ氏を紹介しよう。iOS 7のデザインは、アップルの上級副社長であるジョナサン・アイブ氏のリードによるものだ。銀細工職人を父に持ち、彼自身も子どものころはクリスマスに父親と一緒に何かを作るのが得意だったという。この辺りから、プロダクトデザインの世界に興味を持ったのかもしれない。
当初はアップルのコンサルタントだったアイブ氏は、後に同社の正社員として、MacBook Pro、iMac、MacBook Air、iPod、iPod touch、iPhone、iPad、iPad miniなど数多くのプロダクト開発に携わっている。
このような優れたデザイナーがフラットデザインを採用した理由を少しでもご理解いただけたならばと思う。
目次
1分−フラットデザインとは何なのか
2分−マテリアルオネスティとは何なのか
3分−フラットデザインの実践方法 その1
4分−フラットデザインの実践方法 その2
5分−フラットデザインは味気ないのか
菊池 崇
Web Directions East CEO／allWebクリエイター塾 講師
ウェブテクニカルストラテジスト、ウェブコンサルタント、ウェブテクニカルライター。米国にてマーケティング専攻。日米貿易会社経営を経て、オーストラリア発祥、米国、カナダ、イギリスなど世界各所で開催されている世界的に有名なカンファレンスWeb Directionsの日本版Web Directions East LLCの発起人＆CEOを務める。allWebクリエイター塾では、HTML5+CSS講座、CSS3講座、スマートフォンサイト制作講座などの講師を担当。Webメデイアを始め経済雑誌などでも執筆や多講演を行う。allWebクリエイター塾では、フラットデザインにも必須の「グリットシステムで構築するCSSレイアウト講座」を6月23日(日)に開催する。
Copyright © ITmedia, Inc. All Rights Reserved.