これを読めばフラットデザインの全てが分かる![デザイン] | おむすび

これを読めばフラットデザインの全てが分かる![デザイン] | おむすび

これを読めばフラットデザインの全てが分かる!

デザイン

2013.14年代あたりから
WEBデザインの主流はフラットデザインになり始めたと言われています。

かつては、いかにぷっくりした立体的なボタンを作るかが腕の見せ所だったなんてことも聞いたことありますが、

今となってはぷっくりボタン、だせーwwwって思うことも多くなったのでは…


私がwebデザインを始めたのがちょうどその13.14年くらいからで、
あまり理由などを考えずフラットデザインの流れにのっていた、というのが正直なところです。

その頃は、今っぽい!とかおしゃれwwとかしか思っていませんでしたが…

めっちゃ今更ながらフラットデザインについてまとめてみました。

まず、フラットデザインの流行には2つのポイントがあります

 

1・工業デザインの考え方を落し込み
2・WEBサイトでの重要視されるポイントの変化
 
 
 
1・工業デザインの考え方を落し込み
 
フラットデザインの起源は
工業デザインのマテリアル・オネスティ(Material Honesty)という
考え方から来ていると言われています。
 
「素材に忠実であるべきで、虚構により加工されたものは一時の価値しか提供しない」
という意味です。
 
マテリアル・オネスティを採用し、成功したデザインには
「流行に左右されず、万人に愛され、長い間使われていく。高い価値を保持出来る。」
という共通点があるそうです。
 
これは「Simple is Best」に近いものがあるのかなーと思ったり。
 
そして、そのマテリアル・オネスティがWEBデザインにも落とし込まれるように!
WEBデザインも、もっと崇高で長く愛されるものになりたいということなんでしょうか。
 
グラデーションや影などを使い、奥行きや立体的に見せる事は、虚構であり加工されたもの。
本来のコンピューターが持っているマテリアルを使用し、作られるものこそがマテリアル・オネスティだ!ということですね。
 
 
本来コンピューターが持っているマテリアルというのが
 

・モニターのバックライト

・文字を表現するフォント

・背景やコンソール(昔でいうとUNIXのターミナルなど)

・そして円や四角などコンピュータで単純に計算して描画できる図形

 
など…
 
 
それでフラットデザインに行き着いたということなんでしょう。
 
 
 
 
 
2 WEBサイトでの重要視されるポイントの変化
 
初めの方にも書きましたが、
昔は、いかに立体的に見せられるかなどの技術がすごいとされていました。
 
しかし、現代のWEBサイトの傾向は
 
・コンテンツが大事!
・スマートフォン重視!
 
と言われています
 
 
「コンテンツが大事」というのは、
WEBサイトがどんどん増えて行く情報過多な現代で
ユーザーが知りたい情報を早く、より的確に、正確に表示させなければ!
という考えからきていると思います。
 
そして異常なくらいのスマートフォンの普及により
パソコンがベースだったサイトの作り方が、「スマートフォン重視」に変わってきました。
 
 
パソコンに比べて、画面が小さいスマートフォンやタブレットで
ユーザーに早く、的確に情報を提供するためにはどうすればいいのか…
 
ということで現れたのがフラットデザインです。
 
フラットデザインになると、
細かい装飾がなくなり(スマホサイトであまり細かいデザインをしても見えない)
シンプルになることで、コンテンツの可読性が高くなる!
 
 
というのが一般的によく言われているフラットデザインが普及した理由のようです。
 
 

 
 
いち制作者として私が考えていた普及した理由もありまして、
しょうもないですが書いておきます。
 
・コーディングする際の画像切り出しがラク!
・デザインの作業時間が少し早くなった気がする
・単純なカタチが多くなったので、レイアウトが組みやすい
 
 
フラットデザインではぼや〜としたシャドーがほとんどなくなりました。
このぼや〜っとシャドーを切り出すのが結構面倒くさかったんですよね。
シャドーがどこまで有るのか見極めるに時間がかかる…!笑
 
フラットデザインが主流になってからは、だいぶ早くなった気がします。
 

しかし、ユーザビリティがいまいち…と言われているフラットデザインは

いつまで流行り続けるんでしょうか。

 

ユーザーが使い慣れてくるのが早いか、
その前に新たなブームが来るのか…笑
 
Googleは「マテリアルデザイン」という
アニメーションがあるものの導入を始めていますね。
 
Facebookやtwitterのインターフェースのような「カード型デザイン」が来るという話も聞きます。
 
スマートフォンの普及はこのまま上がり続けるだろうし、
よりスマートフォンユーザーが使いやすいものへ…となっていくんでしょうね〜
 
 
以上フラットデザインについてまとめてみました。


3年半ほど制作会社で働いたのち、おむすびを始めました。デザインやマーケティングなどを担当しております。人見知りですが、めちゃくちゃアウトドア派です。おもしろい、役に立つ、使い易い、そんな感じのサービスを山盛り作っていきたいと思っております。 おむすび!


更新日:2015-08-13

コメントを投稿する
投稿名
コメント内容
画像認証 CAPTCHA Image
[ 認証画像を変える ]

関連記事

夏っぽいデザインを作る為に押さえておくべきポイント2つ
夏っぽい色のバナーデザイン
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
ピクトグラムは本当にユーザビリティに優れているのか
ボツになったロゴ案を公開!
こんな仕事してみたい!すごいポスター見つけた!

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
CSSの背景画像でスライドショーを実装【jQuery】
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました!
雨の野外フェスで用意しておきたいもの



ブログ

これを読めばフラットデザインの全てが分かる!

デザイン

2013.14年代あたりから
WEBデザインの主流はフラットデザインになり始めたと言われています。

かつては、いかにぷっくりした立体的なボタンを作るかが腕の見せ所だったなんてことも聞いたことありますが、

今となってはぷっくりボタン、だせーwwwって思うことも多くなったのでは…


私がwebデザインを始めたのがちょうどその13.14年くらいからで、
あまり理由などを考えずフラットデザインの流れにのっていた、というのが正直なところです。

その頃は、今っぽい!とかおしゃれwwとかしか思っていませんでしたが…

めっちゃ今更ながらフラットデザインについてまとめてみました。

まず、フラットデザインの流行には2つのポイントがあります

 

1・工業デザインの考え方を落し込み
2・WEBサイトでの重要視されるポイントの変化
 
 
 
1・工業デザインの考え方を落し込み
 
フラットデザインの起源は
工業デザインのマテリアル・オネスティ(Material Honesty)という
考え方から来ていると言われています。
 
「素材に忠実であるべきで、虚構により加工されたものは一時の価値しか提供しない」
という意味です。
 
マテリアル・オネスティを採用し、成功したデザインには
「流行に左右されず、万人に愛され、長い間使われていく。高い価値を保持出来る。」
という共通点があるそうです。
 
これは「Simple is Best」に近いものがあるのかなーと思ったり。
 
そして、そのマテリアル・オネスティがWEBデザインにも落とし込まれるように!
WEBデザインも、もっと崇高で長く愛されるものになりたいということなんでしょうか。
 
グラデーションや影などを使い、奥行きや立体的に見せる事は、虚構であり加工されたもの。
本来のコンピューターが持っているマテリアルを使用し、作られるものこそがマテリアル・オネスティだ!ということですね。
 
 
本来コンピューターが持っているマテリアルというのが
 

・モニターのバックライト

・文字を表現するフォント

・背景やコンソール(昔でいうとUNIXのターミナルなど)

・そして円や四角などコンピュータで単純に計算して描画できる図形

 
など…
 
 
それでフラットデザインに行き着いたということなんでしょう。
 
 
 
 
 
2 WEBサイトでの重要視されるポイントの変化
 
初めの方にも書きましたが、
昔は、いかに立体的に見せられるかなどの技術がすごいとされていました。
 
しかし、現代のWEBサイトの傾向は
 
・コンテンツが大事!
・スマートフォン重視!
 
と言われています
 
 
「コンテンツが大事」というのは、
WEBサイトがどんどん増えて行く情報過多な現代で
ユーザーが知りたい情報を早く、より的確に、正確に表示させなければ!
という考えからきていると思います。
 
そして異常なくらいのスマートフォンの普及により
パソコンがベースだったサイトの作り方が、「スマートフォン重視」に変わってきました。
 
 
パソコンに比べて、画面が小さいスマートフォンやタブレットで
ユーザーに早く、的確に情報を提供するためにはどうすればいいのか…
 
ということで現れたのがフラットデザインです。
 
フラットデザインになると、
細かい装飾がなくなり(スマホサイトであまり細かいデザインをしても見えない)
シンプルになることで、コンテンツの可読性が高くなる!
 
 
というのが一般的によく言われているフラットデザインが普及した理由のようです。
 
 

 
 
いち制作者として私が考えていた普及した理由もありまして、
しょうもないですが書いておきます。
 
・コーディングする際の画像切り出しがラク!
・デザインの作業時間が少し早くなった気がする
・単純なカタチが多くなったので、レイアウトが組みやすい
 
 
フラットデザインではぼや〜としたシャドーがほとんどなくなりました。
このぼや〜っとシャドーを切り出すのが結構面倒くさかったんですよね。
シャドーがどこまで有るのか見極めるに時間がかかる…!笑
 
フラットデザインが主流になってからは、だいぶ早くなった気がします。
 

しかし、ユーザビリティがいまいち…と言われているフラットデザインは

いつまで流行り続けるんでしょうか。

 

ユーザーが使い慣れてくるのが早いか、
その前に新たなブームが来るのか…笑
 
Googleは「マテリアルデザイン」という
アニメーションがあるものの導入を始めていますね。
 
Facebookやtwitterのインターフェースのような「カード型デザイン」が来るという話も聞きます。
 
スマートフォンの普及はこのまま上がり続けるだろうし、
よりスマートフォンユーザーが使いやすいものへ…となっていくんでしょうね〜
 
 
以上フラットデザインについてまとめてみました。


3年半ほど制作会社で働いたのち、おむすびを始めました。デザインやマーケティングなどを担当しております。人見知りですが、めちゃくちゃアウトドア派です。おもしろい、役に立つ、使い易い、そんな感じのサービスを山盛り作っていきたいと思っております。 おむすび!


更新日:2015-08-13
コメントを投稿する
投稿名
コメント
内容
画像認証 CAPTCHA Image

[ 認証画像を変える ]


関連記事

ピクトグラムは本当にユーザビリティに優れているのか
夏っぽいデザインを作る為に押さえておくべきポイント2つ
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
こんな仕事してみたい!すごいポスター見つけた!
夏っぽい色のバナーデザイン
ボツになったロゴ案を公開!

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
CSSの背景画像でスライドショーを実装【jQuery】
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました!
雨の野外フェスで用意しておきたいもの

ブログ