まったりフラットデザイン講座

IGGG Meetup
2015-Spring
まったり
フラットデザイン講座

所属
IGGG / 情報工学科B4
加藤研究室(パターン認識)
IGGGでの活動
SECCON CTF / ETロボコン
C++勉強会
やりたいこと
python / java
javascript
持病
ネタを挟まないと死んじゃう病
何とか自重します
プロなので

あなたは『スマートフォン』を
使ったことがありますか？

あなたは『windows 8』を
使ったことがありますか？

今回はそれらを使ったことある人なら
一度は見たことがある
“みため”のお話

まったり
フラットデザイン講座

本発表は、
・今はやりの“みため=UI”である
フラットデザインを知ってもらう
・本の紹介という新しく、
ライトな発表スタイルの投げかけ
・にわか仕立てのフラットデザイン風スライド
を目標にお送りします

- 発表の大筋にした本 -
フラットデザインの基本ルール
Webクリエイティブ&アプリの新しい考え方
著者 : 佐藤好彦
出版社 : インプレス

“フラットデザイン”って
なんだろう？
？

近年はやっている、
UI(ユーザーインタフェース)の
デザインの一つ
凹凸の無い平面的なデザインが特徴
!

Windows 8のデザインとして一躍有名になり、
スマートフォンのアプリのUIなどにも
採用され始めている

平面的に見せるための特徴
立体感を持たせない
影や凹凸表現などを用いない
抽象的な表現
現実世界をリアルに表現しない
素材感を持たせない
グラデーションや
テスクチャを用いず、
反射や光沢を表現しない
余白を活用する
罫線や枠線や囲みをあまり用いない

実際に見てみましょう!!

flatrich
iPhone - ボイスメモ

フラットデザインが使われるようになった
大きな理由は
“スマートフォン”の普及とその発展である

リッチデザイン
デザインを見てその使い方や受け取り方を
イメージできるようなデザイン
⇒電話であるスマホで、
録音もできるよ！！を示すのに適していた

スキューモーフィズム
コンピュータの機能に対して現実世界の物事を
イメージさせる表現方法
以前はこの表現方法にのっとって、
デザインにより機能を暗示していた
iPhone - AirVinyl for iPhone"

しかし、スマートフォンの
出来ることの広さゆえ、
問題が起こってしまった…

カメラ」で「写真を撮る」という体験と、
「スマホ」で「写真を撮る」という体験にズレが出てきた
⇒スマホでの「写真をとる」行為は、
簡単なメモだったり、誰かと手軽に共有する手段だったりした

＜
「写真を撮る」行為が「スマートフォン」の方が身近になった
⇒リッチデザインの考えと逆転してしまう
『写真を撮る＝スマホ』なのに、
そのアイコンは『別のもの(カメラ)』？

なんでもできるスマートフォン
物の形から機能を考えるのが難しくなってきた…
⇒ものの形に頼ったデザインでは、
機能が伝わりにくくなってきている

フラットデザイン
コンテンツに関する情報を重視し、
色を効果的に使って
ディスプレイ上の機能であることを打ち出している
画面から機能を読み取れるかという問題の
解決策になるのでは？

勿論スキューモフィズムなども、
美しく、いいデザインではある
しかし『なんでも』できるスマートフォンの登場で
デザインと機能の表し方が
変わってくる時代になったのも間違いない
iPhone -気象ライブ 1.6

現実世界において、
“色”というものを結構重視してみている
地下鉄とかでも色を見て改札を探したりするはず

凹凸が“ない”、素材感が“ない”
現実世界をリアルに表現し“ない”
“ないない”ずくしのネガティブなとらえ方ではなく
“色”を目立たせるための
ポジティブな意味のフラットデザインと考えれば
一層デザインを楽しめるようになれる!

おまけ
windows 8 風アイコンの作りかた

Recommended