記事内に商品プロモーションが含まれる場合があります
今回はフラットデザインの基礎知識と作成する際に知っておきたい考え方をまとめていきます。
1. フラットデザインとは？
ものすごくざっくりというと「立体感のないシンプルで平面的なデザイン」のことです。その名の通りflat（平ら）なデザインというわけですね。
1-1. いつから流行りだした？
2012年頃〜フラットデザインが世界的にトレンドとなってきました。iOS7〜iPhoneにもフラットデザインを採用されたことで、一気にメジャーになったというイメージですね。というわけで今回の解説はやや今更感があることは否めません。
1-2. 対義語はリッチデザイン
フラットデザインの対義語は「リッチデザイン」と呼ばれます。色々な装飾やエフェクトがついていてリッチな（≒充実している）感じというわけです。
1-3. 実例
いくつか例を見てみましょう。
iPhoneの例
ご存知の通りiPhoneはもともとリッチデザインだったのですが、2013年にリリースされたiOS7〜フラットデザインとなりました。
アイコンを見ると立体感や影が無くなり、シンプルで平面的なデザインに変わったことが分かりますね。
Windowsの例
Windowsの例も有名ですね。2012年にリリースされたWindows8では、UI（ユーザーインターフェース）が大幅に刷新され、典型的なフラットデザインとなりました。
Instagramの例
Instagramのデザインも元々はリッチデザインでしたが、現在は立体感のないフラットデザインとなっています。
2. フラットデザインを採用するメリット
ではフラットデザインにすることにはどんなメリットがあるのでしょうか。
2-1. シンプルでコンテンツに目がいきやすい
余計な装飾がないため、写真や文字などのコンテンツ自体に目がいきやすくなります。
2-2. 小さな画面でもスッキリする
小さな画面内のあらゆるボタンや文字などに立体感がつけられていると、どうしてもゴチャっとしてしまいがちです。フラットデザインなら小さな画面でもスッキリと洗練された印象を出すことができます。
2-3. さまざまな大きさの端末に対応しやすい
フラットデザインは表現がシンプルであるため、異なるサイズの端末に対しても簡単に対応させることができます。レスポンシブデザインを作りやすいというわけですね。
2-4. トレンドで受け入れられやすい
今ではほとんどの人がフラットデザインを見慣れています。そのため受け入れられやすいデザインと言えるでしょう。また、iPhoneの操作画面がフラットなら、表示されるウェブサイトやアプリもフラットな方が馴染みます。というわけで、ウェブサイトやアプリをフラットデザインにしておくことにはメリットがあるわけですね。
3. フラットデザインの作り方
ここからは作り方をいくつかのポイントに分けて解説していきます。「必ずこうしないといけない」というルールは無いので、あくまでも一例として頭に入れておいて頂くのが良いかと思います。
3-1. タイルを並べていくようなレイアウト
フラットデザインのレイアウトを決めるときには、タイルを並べるように考えると分かりやすいかと思います。細長いヘッダーのタイル、文章の入る正方形のタイル、画像の入るタイル…、これらを白紙の上にのせていくというようなイメージですね。
3-2. 背景はシンプルな単色にする
タイルの背景は基本的に白もしくは1色で塗りつぶすようにしましょう。背景にグラデーションをかけたり、布や紙などのテクスチャを使うと平面感が出ません。
3-3. タイルを規則正しく並べる
タイルを規則正しく整列させることでスッキリと美しい見た目になります。一般的なのはグリッド状（格子状）に並べるレイアウトです。
タイルの大きさやレイアウトは自由です。重要なのは、一定の規則で整列させることです。
といっても、いきなりきれいなレイアウトを考えるのは大変です。まずは他のおしゃれなウェブサイトをたくさん見て「こういうレイアウトの仕方があるんだな」とインプットしていくと良いでしょう。 フラットデザイン|縦長のwebデザインギャラリー
3-4. タイルどうしの境界を明確にする
複数のタイルが並んだとき、それらが別のタイルだと分かるように以下の2通りの表現をするのがおすすすめです。
タイルの間にスキマを作る
タイルとタイルの間にスキマを作れば、それらが別のタイルであることが分かります。そのためタイルと背景には色の差を作るようにしましょう。また、スキマを広めにするとフラットらしさが出ます。
色の差をつける
もしくはタイル同士の色に差をつけることで境界をはっきりさせることがでいます。色相や彩度を変えたりなどですね。
線を使ってタイルとタイルの間を区切るのも1つの手ですが、その場合は線が目立ちすぎないようにしましょう。また、線に影をつけるのはフラットデザインには向いていません。
3-5. 文字はシンプルなゴシック体に
明朝体よりもゴシック体がよく合います。また細字とフラットデザインは相性◎です。うまく使えばスタイリッシュに見せることができます。
文字に影をつけない
文字に影をつけると平面感が失われてしまいます。
3-6. アイコンを使う
文字だけで作られたフラットデザインは質素でつまらないものに見えてしまいます。シンプルなアイコンを使って、全体の雰囲気を保ったまま華やかに見せましょう。
どんなアイコンを使うべき？
シンプルなアイコンがおすすめです。細い線で構成されるアイコンは特に使いやすいのではないかと思います。
また平面的な構成をしたフラットデザインのアイコンも存在します。使いどころは選びますが…。
ちなみにこのアイコンに入っているようなぼかしの無い影は「ロングシャドウエフェクト」と呼ばれます。
商用利用可＆ライセンス明記不要のアイコンについてはこちらの記事でまとめています。
3-7. タイルの背景色にこだわる
フラットデザインでは、タイルを単色で塗りつぶすような表現をよくします。そのぶん色が塗られる面積が広くなります。フラットデザインではある程度向いている色が決まっています。真っ赤や真っ青などは向いていません。明るすぎると見る人が疲れてしまうのです。
このような中間色が向いています。彩度をおさえめになんとなく透明感の弱い色を選ぶとフラットらしくなります。
3-8. 白文字や、同系統の色をうまく使う
カラフルな背景の上の文字を白にすると、きれいに見せることができます。
また、1つのタイルの上でたくさんの種類の色を使うと、境界が曖昧になりゴチャゴチャしてしまいます。タイル内では、同系統の色（同じ色相の色）でパーツを塗り分けるのがおすすめです。
例えば彩度を変えてみたり、明るさを変えてみたりなどですね。似た色を使うことでカラーバランスが崩れるのを防ぐことができるのです。
また、どの色にも合う黒やグレイなどを使うのも良いでしょう。
4. まとめ
最後にフラットデザインをオシャレにするための4つのポイントをまとめておきます。
- レイアウト：タイルを美しく並べる
- フォント：シンプルなゴシック体を使う
- 写真：高品質な写真を使う
- アイコン：シンプルなアイコンや、フラットなアイコンを使う
この4点により美しさ・見やすさが大きく左右されます。中でもレイアウトは最も重要なポイントです。最適なレイアウトを十分に検討したうえで制作に取り掛かるようにしましょう。
