連載
» 2013年06月12日 18時00分 公開

5分で分かる製作現場(8):5分で分かるフラットデザイン (3/5)

[菊池崇,Web Directions East]

3分−フラットデザインの実践方法 その1

 では、Webでフラットデザインを実現するにはどうすればいいか。実際にやってみよう。いくつかのポイントを押えて取り組めば、難しいことではない。

  1. vividな色を利用する
  2. アイコンを使わない
  3. グラデーションは使わない
  4. 影を付けない
  5. 背景画像を使う

vividな色を利用する

 色はフラットデザインにおける非常に重要な要素だ。フラットデザインは、vividな色を中心として構成されていることが多い。下記のギャラリーサイトを見ても分かるだろう。vividな色が利用パターンとして集められている。

白と黒で構成されることもある

 vividな色を利用するといったが、ギャラリーを眺めてみると意外に白と黒や地味な色でもフラットデザインを構築しているものもある。

Romain Briaux
 下記のサイトは、上記のような明るい色を使っていない。黒と白ベースだが、フラットデザインを実現している。

:hoverでの挙動は明度を変化させる

 :hoverでの挙動では、影をパーツに適用して実装することが多い。しかし、フラットデザインでは、パーツに影を適用することはできない。そこで、デザインパーツの色を少し暗く、もしくは明るくするなどして:hoverの状態を実装することが多い。立体感がない分、色を上手に利用してユーザーにインタラクションを伝える必要がある。

通常の状態
:hoverを適用した状態。わずかに青色が明るくなっているのに気付くだろう

Copyright © ITmedia, Inc. All Rights Reserved.

編集部からのお知らせ

8月8日10時30分〜16時30分の間、システムメンテナンスのため記事の一部表示や資料のダウンロードができなくなります。ご理解のほどよろしくお願いいたします。

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。