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

2014.1.23

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


縞模様の歴史

関連記事

東京防災

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

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

片山正通的百科全書

ゴールデンウィークにいっておきたい 片山正通的百科全書

ゴールデンウィークお時間空いてしまった方は片山さんの展覧会などいかがでしょうか。

活版印刷

名刺 活版印刷

名刺でやってみたいと思いつつなかなか試す機会がなかったのが活版印刷で、近々の名刺作り案件で使えそうなので紙と刷り見本を取り寄せてみました。

D-BROS

かっこいいデザインのショップカード白地 11枚 vol.2

ショップカード続いてしまってます。他にも書いている事とかあったりするのですがとりあえず紹介したいので先にショップカードを紹介致します。

comme des garcons

かっこいいデザインのショップカード白地 11枚

以前動画でアップした白地のショップカードシリーズで画像をアップしてないものがある事に気がついたのでアップします。枚数多かったので2回に分けてアップです。

コルビュジエさんのつくりたかった美術館

国立西洋美術館 世界遺産認定へ コルビュジエの無限成長美術館 コルビュジエさんのつくりたかった美術館

世界遺産への登録が濃厚となった国立西洋美術館がどのように作られ、コルビュジエが目指していたことが非常によくまとめられている絵本仕立ての書籍、「コルビュジエさんのつくりたかった美術館」をご紹介します。

Bouteille

かっこいいショップカード9種 Pinterest

前までは、ショップカードとかコレクションしてなるべく貯めてから公開していたのですが、最近は少し貯まったら公開と頻度を早めています。

横浜トリエンナーレ

タイポグラフィーをメインビジュアルに使ったフライヤー

日々いたるところで目にするフライヤーですが、写真やイラストが極力使われていない文字の力でデザインされたものを集めてみました。

ANKER USBケーブル

ANKER ケーブル パッケージ&冊子

たまたま買ったANKERのUSBケーブルのパッケージがよく出来ていたのでご紹介。

TOMATO

THE TOMATO PROJECT 25TH ANNIVERSARY EXHIBITION “O”

3月12日から4月3日までパルコミュージアムとギャラリーXでデザイン集団TOMATOの結成25週年回顧展が開催されます。

Recent Book Design Post

Recent Typography Post

Favorite Tool

Recent Typography Post

Follow design_peeji's board Free paper, flyer like a news paper 新聞紙のようなデザインのフリーペーパー・フライヤー on Pinterest.