畑を耕すようにデザインの事を考えるデザイナーのためのマガジンPeeji(ペエジ)。

2014.1.23

フラットデザインとスキュアモーフィズム


ios7最近ipadアプリのUIをデザインしています。複雑なアプリではないのですがただ平面で考えるのではなく立体的に考えてデザインしなければいけないので面白いです。

最初に見た目のデザインの方向性を決める時いわゆるフラットデザインなのかスキュアモーフィズムなのかを大雑把に検討することから始めました。

印刷物とウェブ、アプリ
僕はもともとスキュアモーフィズムというかデザインの「あしらい」で何かを擬似的に表現することがあまり好きではありません。

例えばハンバーガー屋さんのDMがハンバーガーの形になっていたりとか、アンティークショップのチラシが加工された紙にさらに紙のテクスチャを引いて古い紙を表現したり、特殊印刷が一般的になっていくにしたがいあたかも●●みたいなデザインの印刷物って増えて来ているし、ニーズもある気がしますが、個人的にはあまりにもそのままのようなして気がひけてしまうのです。

ウェブだとさらにその傾向が強まります、もともとそれ自体に実態がないものなので何かを擬似的に表現する事でしかウェブのインターフェイスを理解させる事が難しかったからだと思いますが、つい最近までのウェブデザインはほとんどがスキュアモーフィズムを多用しています。

アプリはウェブに近い特性があるので当然ながらスキュアモーフィズムがデザインの一般的なベースになっていましたが、ios7の発表を機にようやくというかいわゆるフラットデザインと呼ばれる脱スキュアモーフィズム的なデザインが増えてきました。

なんでフラットデザイン?
個人的にはこの傾向はとてもうれしいのですが、しかしながらなぜ今更フラットデザインという傾向が強まってきたのかと引っかかるものがあります。

少し調べてもこれだと言う結論にたどり着いている腑に落ちる結論はなかったのですが、ひとつはFlipboardやGunosyなどひとつのソースをウェブページだけでなく複数のアプリ等で見たりするのが当たり前になった事で画像をあまり使わないテキストベースで構成されている方がソースのリユースに便利な事が挙げられそうです。

余計な画像がないためページのロードに時間がかからないというのもありましたが、常に日々高速化しているPCとブロードバンドの状況を考えるとそれが強い理由ではない気がします。

他にios7がフラットデザインを採用した理由にウェブやアプリの利用者の成長を挙げているのがappleのジョナサン・アイヴです。たしかに20年前ウェブが出始めた頃ハイパーリンクの存在すら認知されていなかった時代と生まれた頃からインターネットに触れている世代ではウェブのインターフェイスに対する理解は全く違うでしょう。後の世代はグラデーションと影で表現されたこってりしたボタンなどなくてもそれが関連する記事のページへのボタンなのか、広告なのか瞬時に判断出来るはずです。

フラットデザインは通過点
だからといってわざわざ分かりにくいボタンを採用する理由があるのかと考えてしまうところですが、おそらくフラットデザインはまだ通過過程の一段階にしか過ぎず今後5年、もしくは10年かけてウェブやアプリだけで表現できるインターフェイスの表現方法を見出して行くのだろうと思います。

例えばカメラのアイコンは大概レンズのついた一眼レフやコンパクトカメラを模した形になっていますが、レンズ以外はカメラとして存在していない携帯カメラが一般的になった今、カメラとして存在しているのは圧倒的に携帯カメラが多いのに数が少ない一眼レフなどの形をカメラのメタファーとして採用するパラドックスに陥っています。

フラットデザインの次のデザインはウェブやアプリのデザインというよりこれまで人が培ってきた慣習や経験が生み出した、インターフェイス上のパラドックスを超える事に意義を見出していく事になり、それを乗り越えた時紙媒体で作られたデザインロジックやスキュアモーフィズムにとらわれないデザインが産まれるのかもしれないなどとアプリを作りながら考えていました。

フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。


縞模様の歴史

関連記事

FONTPLUS DAY

FONTPLUS DAYセミナー Vol. 4[グラフィックデザインから見るWebデザイン]

前回、前々回と藤田重信さん、片岡朗さん、副田高行さんと錚々たる面々が揃いいつも楽しませていただいているFONTPLUS DAYが早くもVol.4を開催されるようです。

NO LONGER HUMAN 2

NOLONGER HUMAN NAKAJIMA NOBUYUKI

作曲家でピアニストの中島ノブユキさんのインタビューをまとめたフリーペーパー「NO LONGER HUMAN」のVol.1 2を手に入れたのでご紹介。

MdN

絶対フォント感 MdN

絶対音感ならぬ絶対フォント感、アートディレクター必須のスキルです。

東京防災

東京防災 グラフィックデザインのちから

先日我が家に初めてみる黄色い箱が届きました。「東京防災」と書かれた箱に入ったマニュアルとマップは災害時にどう身を守ったら良いかを非常に簡潔にかつ美しくまとめてありました。

PP_graphic_trial_2013

グラフィックトライアル 2014 印刷博物館P&Pギャラリー

凸版印刷のプリンティングディレクター(PD)と協力し、印刷グラフィック表現の可能性を探るこの展示、今回は浅葉克己さん、水野 学さん、長嶋りかこさん、南雲暁彦さんが参加されるそうです。

デザインあ

「デザインあ」の書体 ヒラギノUD

「デザインあ」というEテレの番組があって、昨年はデザインサイトで展覧会をやったりするぐらい人気なのですが、番組内で使われている書体がとても見やすいので気になって調べてみました。

万物資性

良デザインのフリーペーパー 9選

良デザインのフリーペーパーを集めました。最近集めたものではなく数年にわたってちょこちょこ集めていたものなのでかなり時間にばらつきがあります。

文字詰め

欧文文字詰め 超入門編 ツメツメとアキアキ

デザイン=文字を組むというのが仕事の9割を占めています、文字詰めもただ詰めれば良いのではなく使いたい場所にあった文字詰めをしなければいけません、自分がデザインをする時どのようなプロセスで文字詰めをして

建築模型展

Tokyo Design Week 2016

Tokyo Design Weekが今年もスタートしました。

her

her Spike Jonze Geoff Mcfetridge 色々な色

amazonで買い物をした際レンタルクーポンがついてきたので、前から気になっていたスパイクジョーンズのherをレンタルしてみました。

書籍デザインのポスト

タイポグラフィーのポスト

お気に入りアイテムのポスト

デザイン理論のポスト