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

2014.1.23

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


縞模様の歴史

関連記事

100本のスプーン ランチ

100本のスプーン ランチメニュー ディナーメニュー

二子玉川ライズにスープストックトーキョーの100本のスプーンが出来ていました。

iPod

アップルが本を作る Designed by Apple in California

あのアップルが本をつくったそうです。

日本デザインコミッティーメンバー

松屋デザインギャラリー 1953企画展 読んで欲しいデザインの本

銀座松屋にこんなデザインギャラリーがあったなんて知りませんでした。

DADA

グッドデザインフリーペーパー 17種 DADA最高

いつの間にかフリーペーパーが集まっているのでご紹介です。

Peeji名刺

ロゴを作りました、ついでに名刺も。

たいしたトピックじゃないのですが、ちょっと前からロゴを変えてみました。

東海道五十三次 蒲原宿 歌川広重

水玉の歴史 古代ギリシアから東海道五十三次まで

ボーダーと並ぶパターンと言えばドット柄です、ボーダーとは異なりドットに関しては体系的にまとめられた書籍が見つかりませんでしたが今回3冊の書籍とWebを参考にまとめてみました。

VISION

新聞紙のようなフリーペーパー フライヤー 5種類

ブログで画像を公開するため最初はiphone、途中からデジタル一眼レフを使っていたのですが、利便性、pinterestでの見え方の統一感を考えるとやはりiphoneの方がいいなと思い再度iphoneへ

TOKYO PAPER

新聞紙の様なフリーペーパー フライヤー 27点

百貨店やショップなどのPR紙としてすっかり一般的になったフリーペーパーですが、デザインで新聞紙の様な見た目を持つものが多いです。

WASARA

WASARA 紙の食器たち

紙の食器というと安っぽくパーティなどの取り皿で仕方なく使うというイメージがありますが、WASARAの紙皿とバンブーのカトラリーたちは、陶器とも違うやわらかい曲線と手触りをもつ新しい食器の世界を打ち出し

セントジェームス

ボーダー柄とはなにか「縞模様の歴史」

よくデザインで使われる模様でボーダー柄があります。 デザインのモチーフにボーダーを使おうと思った時に、ボーダー柄自体に何か意味があるのかなと思い調べてみました。参考にしたのは「縞模様の歴史 ミシェル

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.