「フラットデザイン」について調べたことの備忘録。

極力シンプルなデザインが好みな管理人です。いえこれはホントにシンプルなのが好きなのですが、強いて付け加えるとするなら「お洒落で立体的で”THEデザイン”というようなサイトを制作する技術力がないので結果的にシンプルなデザインになってしまってた」とも言えます。

そんなこんなで、2013年のトレンドと言われている「フラットデザイン」について、個人的に調べてみたことを備忘録としてまとめてみました。

 

目次

フラットデザインとは?

明確に「これがフラットデザイン」という定義はないようですが、いろいろなサイトで書かれてることをまとめてみるとこんな感じになります。

 

・立体感を極力なくしたデザイン

・余分なエフェクトを使われていないデザイン

・アイコンやUI要素がくっきりしているデザイン

・グリッドを意識したレイアウト

・シンプルなタイポグラフィーを使ったデザイン 

・ドロップシャドウ、ベベル、エンボス、グラデーションなどを使わない

・ミニマルなデザイン

 

例えばこんな感じ

f:id:lord_cashew:20130319063216p:plain

昨年(だったと思いますが)リニューアルしたMicrosoftの公式サイトは、まさに「フラットデザイン」になっています。しかも、ブラウザや画面のサイズや端末によってレイアウトが変わる「レスポンシブウェブデザイン」で制作されています。

 

フラットデザインの参考ブログ記事

フラットデザイン初心者としては、まず下記4つのブログ記事をチェックしておけば「フラットデザイン」についての最低限のことはわかると思います。

 

「2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめ」

フラットデザインの参考、具体的サンプルWebサイト20個まとめ

トレンドを意識した、フラットデザインの無料UIデザインキットSquare UI

新トレンド・フラットデザインをまとめたサイト「Flat UI Design | A showcase of flat UI design」

 

よかったらシェアしてね!

この記事を書いた人

ストーンウェブ代表のFujimoriです。Twitter界隈では「Fujimori@元経営者のマッチョマーケター」として活動しています。
私がWebに関するブログを書き始めたのは2013年1月で、おしブロ(おしい県でWebに携わって働く人のブログ)というブログをはてなブログに開設したのが始まりです。それ以前にも経営してた会社/店舗の代表ブログを書いていましたが「Web」というジャンルに限定するとそんな感じです。
このブログは、2021年10月におしブロの記事を丸々移行してスタートしましたので、2021年10月以前の記事はおしブロで書いたものになります。

目次
閉じる