読者です 読者をやめる 読者になる 読者になる

WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

セミフラットデザインについて

こんにちは。2年の佐々木です。

フラットデザインを意識してサイトのデザインしていましたが、最近になってセミフラットデザインというものを知りました。
今回はそのセミフラットデザインについてご紹介します。

そもそもフラットデザインとは?

フラットデザインとは、装飾を減らした平面的で凹凸がないデザインのことです。
フラットデザインにすると

  • シンプルな装飾で、コンテンツ自体の魅力を伝えやすい
  • CSSで生成できるオブジェクトが多いため、サイトの表示スピードが軽くなる
  • グリッドレイアウトが使われるため、レスポンシブにも対応しやすい

などのメリットがあります。
逆に、

  • 見出しや本文、ボタンなどの区別やメリハリがつけにくい
  • クリックできるかどうかを見分けるのが難しい

などのデメリットがあります。

セミフラットデザインとは

セミフラットデザインとは、完全なフラットにするのではなく、ささやかにシャドウやテクスチャなどを使って、メリハリや区別をつけたり、見て機能がわかるように設計してデザインすることです。
フラットデザインのデメリットを改善させるための考え方で、フラットデザイン2.0とも呼ばれています。

例えば:シャドウを効果的に使う

  • へこんでいるように見える要素→入力できる
  • 浮き出ているように見える要素→クリックできる

のように、ぱっと見ることで機能がすぐに把握できるように設計できます。

平面的なフラットデザインの中だからこそ、ささやかなアクセントで見た目とユーザビリティとのバランスをとることができます。

普段は色を変えたり、余白を多くとったり、ということしかしていなかったので、シャドウやテクスチャなどで少し立体感をだす工夫をうまく使えるようになりたいなと思いました。

 

フラットデザイン: 起源、問題、フラットデザイン2.0のほうがユーザーに望ましい理由 – U-Site

フラットデザイン、セミフラットデザインについての記事です。

 

ズルいデザインテクニック2013 + セミフラット version // Speaker Deck

参考になったスライドです。具体的な手法がわかりやすく解説されています。