サイト移転しました → GLOSSY

  • 最終更新日:
  • 投稿者: @signpostme

WCAN 2013 Autumn 参加レポート 「フラットデザインと動き」 その1

昨日、名古屋国際会議場で開催された「WCAN 2013 Autumn」に参加してきましたので、そのレポートを投稿します。とりあえず、約1時間1コマということで合計4コマのセッションを聞いてきたので、分けて記事を投稿します。

このセッションでの発表者は株式会社アンティー・ファクトリーの木村 圭佑さん。
現在流行のデザイン手法である、フラットデザインに関してのお話でした。また、それと動きをどう組み入れるかのお話も聞けました。
flat-ui

フラットデザインについてのおさらい

フラットデザインは、デザインスタイルの一つです。
有名な採用例でいうと、Windows8のモダンUIや、Googleのアプリケーション、iOS7のテーマなどなど。
 
フラットデザインの特徴は、
 
・単色の塗りと明るい色使い
・エリアを面で区切る
・タイポグラフィとシンプルなビジュアル
 
となっています。
 
 
 

それぞれの特徴を詳しく解説

flat-00まず、単色の塗りと明るい色使いに関してですが、従来の「質感・リアルさ」を求めたデザインとはほぼ真逆のデザインです。
 
ボタンなどにはグラデーションを用いていましたが、フラットデザインの場合はグラデーションやシャドウのない、ビビットやパステル調の色合いのシンプルなデザインになります。
 
「エリアを面で区切る」に関してですが、余白や線などを用い見やすく操作しやすい配置にします。
タッチデバイスでの操作に特化させるという意味合いもあるようです。
 
最後の「タイポグラフィとシンプルなビジュアル」ですが、文字を読みやすく、大きめのリードと小さい文字をうまく使い分けて表現します。
また、メインビジュアルを使用せずに、文字を大きく載せてインパクトで見せる手法もあります。
そして、使用する画像はピクトグラムのような、アイコンに近い画像を使用します。
 
 
 

各企業もフラットデザインを採用したが、実はそれぞれ違った点がある

各有名企業もフラットデザインを採用しているわけですが、実はそれぞれちょっとずつ違ったフラットデザインでした。
 
 
・Apple のフラットデザイン
透明感や奥行きを重視したデザイン。そしてなめらかなグラデーションを掛けています。
 
・MicroSoft のフラットデザイン
シャドウが全くないグリッドなレイアウトで、角ばったアイコン、コントラストをはっきりさせたデザイン。
 
・Google のフラットデザイン
基本的に白を背景とし、軽いドロップシャドウとカラフルない配色に丸みを持たせています。ポップでフレンドリーな印象。
 
 
それぞれ企業イメージにのっとったデザインをしていますね。
 
Googleが提供している、フラットデザインのビジュアルガイドランを参照するとGoogle基準のフラットデザインに関しての情報を得ることができます。フラットデザインに興味を持った方は是非参照してみてください。
gviGoogle Visual Assets Guidelines
 
 
 

フラットデザインのメリットとは何か?

フラットデザインのメリットは以下の通り。
 
・美しい
・柔軟
・機能的
 
まず、「美しい」に関してです。
 
シンプルで広くとったマージンで画面をすっきり見せることができ、UIへの意識が下がることで面となるコンテンツを伝えやすくなります。
 
次に、「柔軟」に関して。
 
パーツがシンプルなので、様々なサイズに対応しやすいという点です。
また、画像の需要も少なくなるので画像が減り、読み込み時間の短縮につながります。
 
最後に「機能的」です。
 
シンプルに、そのモノに特化した表現がしやすくなります。
 
 
 

今なぜフラットデザインなのか?

ios7-130610-1それは、「タッチデバイスの増加」にありました。
 
今後タッチデバイスの普及率はどんどん増えていくと予想され、2015年の段階でタッチデバイスがPCの普及率を超えると予想されています。
そのため、読み込み速度を重視したサイトが増える必要があります。
 
さらに、様々なサイズのタッチデバイスが登場しています。
そのため、可変に対応しやすいデザインが要求されてきます。
 
このように、モバイルデバイスの増加と製作者側の都合により、フラットデザインはもっとも有効なデザインであると言えます。
 
 
 

フラットデザインを採用するときに気を付けるポイント

・フラットデザインには高いスキルが要求される
・情報量が低下するので、ユーザーが操作しづらくなる
 
大きく取り上げられる問題点が上記の二つです。
 
今までのデザインでは、リアルさや質感を追及していたので「これがボタンで押せる」とユーザー側に認識させることができましたが、フラットデザインの場合はべた塗りでシンプルなボタンになるので「これがボタンなのかわからない」となってしまうかもしれません。
 
また、ドロップシャドウやグラデーションを使用しないのでデザイン面での誤魔化しも出来ません。
 
なので、どうしてもリアルさの欠如と階層の不足が起こってしまうのです。
 
 
 

それらの問題を解消するにはどうすればいいのか?

ここで、動き(インタラクション)が登場します。
 
次の記事へ続きます。
 

新着記事を見る

TOP