miMemo(ミメモ)

Web制作

[M]平面に奥行きが!?フラットデザイン+αなサイトまとめ

20130625

こんにちは!MIU(@miu0512)です!先日フラットデザインをご紹介しましたが、さらに一手間加えたサイトをご紹介します。

あんな所やこんな所が平面化。特にロゴやイラストが可愛いなと思います!

最近本当に増えましたね!フラットデザイン。今思えば、ピクトアイコンもフラットな感じが多かったなぁと。つまりブームの前触れは去年よりもっと前から来ていたのですね!

質感もなく、シャドウも使わず、フラットなまま奥行きを出すってスゴイ!

[browser-shot width=”600″ url=”http://www.evanshalshaw.com/bondcars/”]

http://www.evanshalshaw.com/bondcars/

最初のぐるぐるがまさに!私の中での「フラットデザイン」とは「質感なくペラっとした平面なデザイン」という感じで捉えています。ドロップシャドウやざらざら感がなく、所謂ベタ塗りな感じ。そんなデザインなのに奥行きを感じるサイトって面白いなと思いピックアップしました。※追記:007の車だったんですね!

ふわふわ感が可愛いかったのでついピックアップしちゃいました

[browser-shot width=”600″ url=”http://bikke-bikke.jp/”]

http://bikke-bikke.jp/

実際にスクロールしてみてください!可愛らしいパステルフラット(一部微妙にシャドウ有ります)な最初の画面でふわふわっと沢山のアイコンが登場して画面いっぱいに広がるのがとっても素敵!下にスクロールするのではなくその画面が切り替わっていくのは、今後是非やってみたい技法の一つです。

アニメーションな「カロリーメイト」のコラム

[browser-shot width=”600″ url=”http://www.otsuka.co.jp/cmt/index.php”]

http://www.otsuka.co.jp/cmt/index.php

カロリーメイトです!「コラム」のページに注目です。スクロールすると文字の穴埋めやアニメーションが可愛い。特にカロリーの部分がスキです!カロリーメイトカラーのフラットデザインなのでポップかとおもいきや、茶色に引き締められ、シンプルにまとまっていて素敵!

写真部分に奥行きを持たせたフラット×パララックスサイトデザイン

[browser-shot width=”600″ url=”http://www.whistle.com/”]

http://www.whistle.com/

ペットのライフログを記録できる製品サイトのようです。こちらはスクロールした際の写真の魅せ方が良いです。途中のスライドもさりげなくてスキですが、サイト全体がわかりやすく、シンプルにまとまっていて、英語がわからなくても理解できちゃいます!

こちらも写真に奥行きのあるフラット×パララックスサイトデザイン

[browser-shot width=”600″ url=”http://soworldwide.org/”]

http://soworldwide.org/

さりげない奥行きのパララックスのスライド。スクロールすると奥行きがわかり、さらに写真が強調される感じがします。このフラットなロゴは好きです。

さいごに・・・

平面ベタ塗りだけだとイマイチインパクトに欠けるという場合は、今回のサイトのようにアニメーションで動きを演出したり、写真に奥行きを持たせて上手くバランスを取っていくこともひとつの方法ですね!そろそろ私も新しいポートフォリオをフラットに作ってみようかなと思っています。

この記事が気に入ったら
いいね!しよう

About Me

みう

みう(@miu0512)

フリーランス
Webコーディネーター

フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

PAGETOP