うえのブログ

試行錯誤をしながらまともなブログを書けるようになるブログ

うえのブログ

フラットデザインについてちょっとかじってみた

スポンサーリンク

f:id:uenoyou111:20171103171441p:plain

 

上野です、こんばんは。

 

今日はデザインと言えばコレ!ぐらい聞かれるフラットデザインについて調べておりました。

 

一言で現しますと、分からん単語のオンパレードですかね。

 

やはり素人がデザインについて学ぶのは無理があったのか……というぐらい、横文字の単語が並びます。

 

まず、分かる範囲でなおかつ自分が納得したものからまとめていこうと思います。

 

 

 

 

フラットデザインとは

 

平面的で、立体感の無いシンプルなデザインです。

 

flat-icon-design.com

 

こちらのページではフラットデザインを無料ダウンロード出来るので、ダウンロードをしなくてもどんなデザインなのか確認できると思います。

 

色々な効果をつける要素が削られているため、読み込みが早いのと解像度に左右されない見やすさが魅力的ですね。

 

あ、この記事のアイキャッチ画像もフラットデザインです。

 

逆に立体的なデザインをスキューモーフィズムといいます。

 

 

スキューモーフィズムとは

 

最初調べてる時に、、フラットデザインはスキューモーフィズムを排し、とかあちこちに出てきてなにこれ?(^ν^)ってなりました。

 

スキューモーフィズム(skeuomorphism)とは、他の物質に似せるために行うデザインや装飾のことで、たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあてはまる

スキューモーフィズム - Wikipedia

 

多分、ちょっと前のスマートフォンはこのスキューモーフィズムを使ってたと思うんですよ。

 

一番印象に残ってるのは、懐中電灯アプリのスイッチがまるで本物?みたいなリアルさを追求してたことですかね。(当時はまだスマホを持てない学生でした)

 

いつからかiOSがアップデートされた時に、店頭で見て「うわ、なんだこの簡素なデザインは」と思ったのを覚えてます。

 

分かりやすい比較画像があったので引用します。

 

 ①フラットデザイン(iOS7)

f:id:uenoyou111:20171103172037j:plain

2014年Webデザイナーに問われる資質 - MikeTOKYO Developers

 

徐々にフラットデザインに移行されたのは、使いやすさを追求していった形でしょうね。理由はフラットデザインの魅力として、次項で書き出していきます。

 

 

フラットデザインの魅力

読み込みが早い

 

スキューモーフィズムはリアル感があって上質さもあるのですが、データ量が多くて重い。読み込みが遅くなる。フラットデザインはシンプルなので素早く表示されます。

 

解像度に左右されない

 

リアルな質感を追求するには目の細かいキャンパスが必要になります。でもフラットデザインは、目が細かくても荒くても、シンプルな色合いとデザインなので画像が潰れて見えたりしません。

 

直感的に分かりやすい

 

無駄なものを排したシンプルなデザインなので、一目で伝わりやすいです。スキューモーフィズムと比べ、スマートフォンのような小さな画面ではフラットデザインの方が相性が良いですね。

 

 

まとめ

 

ちなみに当ブログはフラットデザインとはまた違った、マテリアルデザインを利用しております。(マテリアルデザイン風でした)

 

よく分からず、でもあまり崩さないように使っています( •̀ㅁ•́;)

 

まぁ、風なので厳密に言えば違いますけどね…マテリアルデザインっぽいフラットデザインになっちゃうのかな?

 

まぁ、マテリアルデザインに関してもいずれまとめていこうかなと思った次第です。

 

なかなかデザインは奥深いので、一度の記事じゃまとめきらないし勉強も全然追いつきません。

 

でもすぐに使えるノウハウとかも学べるので、知ると楽しみが見い出せそうですね。

 

 

 

 

ではでは(`・ω・´)ゞ