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

2014.1.23

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


縞模様の歴史

関連記事

NO PROBLEM

「NO PROBLEM(問題なし!)」日本のものづくりと風通し

B品に焦点をあて、「NO PROBLEM(問題なし!)」と宣言する事で受け入れ、世の中のものづくりに対する風通しを良くしようという展示がスタートします。

えらべ未来

映画と展覧会のフライヤー 8種

高いクオリティで作られていることが多い展覧会と映画のフライヤーです。特に今回はイメージフォーラムでガサッと集めてしまいました。

やりたいことをやるビジネスモデル

やりたいことをやるビジネスモデル―PASS THE BATONの軌跡 遠山正道

やりたいことはあるけどビジネスの仕方がわからない人は読まなくても大丈夫、ビジネスをしたいけどやりたいことがわからない人に読んで欲しいという一文から始まる本書は、ビジネモデルという言葉が入る書籍タイトル

citron case

白いiphoneケースにつや消しスプレーを吹いたらシュガーコーティングケースに

iphoneケースが壊れてしまい新しいケースを探していたのですがなかなか見つからず、ふとした時に見つけたデコベース用と書かれたシンプルな白ケースを買ってみました。

ポールランドデザインの授業

デザインの良し悪しとはなにか。 ポール・ランド デザインの授業

デザインの善し悪しの秘密はデザイナーであれば誰でも知りたいと思うものです。 ポール・ランドの「デザインの授業」という本の中でランドはデザインの良し悪しをアプリオリを通じて説明しています。

SEASON & GREETINGS

ポストカードのデザイン 16種 タイポグラフィ、写真、イラスト

ちょっとだけポストカードがたまったのでご紹介です。

81

デザインのクリシェとアイデア スランプからの脱出

アイデアを出すのが苦手です。いろんなアイデアがポンポン出てくる人を見ると感心します。アプリなんか見ててもよく考えるなーと思うことが多いです。

銀座伊東屋リニューアル 竹尾

仕事でクラフト紙が必要になったので急遽銀座伊東屋に行ったらちょうどリニューアルしたばかりでした。

LOFT WINTER

フリーペーパーのデザイン 14種 新聞紙のような多め

仕事でついにフリーペーパーを作ることになりそうです。 と言っても僕の場合あまり今まで集めたデザインアーカイブなどを作る時に参照することはないのですが今まで見てきたものがじわじわと自分の作るものを作って

サヴィニャック

レイモン・サヴィニャック展 Bunkamura ギャラリー これも無料

フランス人ポスター画家サヴィニャックの展覧会まで無料です。

書籍デザインのポスト

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

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

デザイン理論のポスト