Loading...
  • 0k
  • 0
トレンド \ 2013年8月7日

今が熱い!フラットデザインの5つのポイント

ホームページを作成する上でウェブデザインのトレンドを知っておくことは非常に大事。2013年、一番話題となっているトレンドといえば「フラットデザイン(Flat Design)」ではないでしょうか。フラットデザインを採用したMicrosoftのWindows 8やGoogleの新しいデザインはすでに見たことがある方も多いのでは?

数年前までは、細部にまでこだわった立体的で3Dのようなデザインがトレンドでした。対照的に、フラットデザインはいかにシンプルに、そして2次元的なデザインするかがポイントです。ドロップシャドウやグラデーション、質感などは用いずに、クリーンでミニマルなデザインがフラットデザインです。 しかし、そのフラットなデザインのため、サイト上の情報が見つけにくくなる場合があり、ミニマルなデザインを保ちつつ、いかに明確なウェブデザインを実現するかが課題の一つです。

そこで今回は、上手にフラットデザインを取り入れるポイントを5つご紹介したいと思います。

MicrosoftのWindows 8でもフラットデザインを採用している

Web 2.0のその先は?

 

ウェブデザインは常に進化し続けていきます。つまり、少し前まではスタンダードだった立体的なボタンやグラデーション、光沢感のあるデザインエフェクトは、見ている人に時代遅れな印象を与えてしまいます。Web 2.0時代のウェブデザインは、2次元の画面でいかに立体的にリアルに見せるかがポイントでした。実際の生活で私たちが美しいと感じるものをオンラインで再現するために、水のしずくや、ツルツルとしたプラスチックまたはグラスの表面などを立体的に見せるエフェクトが人気を呼びました。

一方で「フラットデザイン」の場合は、その名の通りすべてが「フラット=平ら」なデザイン。実写的、いかにもクリックできそうな立体的なデザインではなく、ボックスなどの図形や画像フレーム、ボタンやナビゲーションツールなど全てのパーツが、使いやすさを重視したシンプルで平たいユーザーインターフェースにデザインされています。図形も正方形や長方形などのシンプルなものが用いられることが多い傾向にあります。Web 3.0の座はまだ獲得していないようですが、フラットデザインを採用したホームページはどんどん増加しています。

Float Design>>

フラットデザインを採用しWixで作成されたFloat Designのホームページ

タイポグラフィとの関係

 

フラットデザインにおいて、タイポグラフィは重要な役割を果たします。言葉はブランドメッセージを伝え、サイト訪問者がサイト上で何をすべきかを伝えるナビゲーションのような存在です。印象的なキャッチコピーやテキストを上手に使えば、画像を使わなくても必要最低限の文章だけで、シンプルかつ直感的なデザインを実現します。多くの場合、スタイリッシュなタイポグラフィは、ホームページの中でも最も注目度の高い部分です。もちろん、フラットデザインはシンプルでミニマリスティックなデザインが多いので、タイポグラフィがより引き立つデザインだともいえるでしょう。

Coderwall>>

フラットデザインがタイポグラフィを引き立てているFutureal BundleのWixサイト

色使い

 

フラットデザインなホームページは、よりカラフルな傾向にあります。同系色でまとめたり、カラフルで明るい印象の色使いが人気です。今まで常識だったカラーパレットのルールを信じ続けずに、パステル系もしくはビビットな配色をするとモダンな雰囲気になります。少しくすんだ感じの中間色だとなおよし◎

Minimal Monkey>>

フラットデザインではカラフルな配色がトレンド

パーツと余白は大きく

 

シンプルなデザインを基本とし、その中でもパーツや余白を大胆に使うのがフラットデザインのもう一つの特徴です。ごちゃごちゃとしたデザインは避け、なるべくクリーンなデザインを心がけましょう。こうすることで、重要な部分に上手くフォーカスされ、結果として直感的でユーザビリティの高いホームページデザインが出来上がります。フラットデザインにおいて、飾り的なパーツは不要とみなされ、機能的な役割を果たさないパーツはどんどん切り捨てよう。

Beard Design>>

余白を上手く使ったシンプルなフラットデザインのホームページ

フラットなアイコン&イラスト使い

 

アイコンとイラストは二次元なデザインの代表格です。アイコンは、シンプルでフラットな見た目で、機能などを誰にでも一目でわかりやすく表現してくれます。凝ったディテールやシャドウ、質感が取り除かれても、アイコンはその意味を明示し続けてくれます。光沢や立体感のないシンプルなイラストは、ホームページにモダンな印象を加えてくれます。

We Are Pandr イラストやアイコンはフラットデザインとの相性ばつぐん

フラットデザインなホームページを作りたいですか?以下のWixのテンプレートを使ってみよう:

WixのHTML5 ホームページ テンプレート 2

WixのHTML5 ホームページ テンプレート 3

WixのHTML5 ホームページ テンプレート 4

Wixユーザーによって作成されたフラットなホームページ例:

 

Identity

Wixユーザーが作成したフラットデザインのホームページ 作成例 1

83 Design Collective

Wixユーザーが作成したフラットデザインのホームページ作成例2

Frunatic

Wixユーザーが作成したフラットデザインのホームページ作成例 3

The Umbrella Group

Wixユーザーが作成したフラットデザイン ホームページ 作成例 4


今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

Wixブログを購読 \  

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい