Memo

可愛いフラットデザインを考える(6/24追記)

最近のデザインの主流である、フラットデザイン。
ビビッドカラーの配色、グリッドレイアウト、ノングラデーション、シンプル。
私の大好きなレースやリボンをこのフラットデザインと組み合わせていくには?可愛いフラットデザインを作るにはどうしたらいいのか?考えてみました。

色々やってみた結果を先に書いておきます。
・色がパステルカラー、マカロンカラーになるだけでだいぶ可愛い
・レースをつかってボックスやグリッドをつくると可愛い
・背景にレースやリボン、ドットやストライプを使うと可愛い
・線デザインを取り入れてみるのと可愛い

以下から実際に作ってみたものや、実際に使われてるサイトなどを紹介しています。

パステルカラー/マカロンカラーの配色

マカロンカラーとは?

フランスのお菓子マカロンの色からきているカラー。
ネイルやお菓子の世界ではわりと知られていますね。
フランスのお菓子マカロンの色見本「マカロンカラー」| 誕生色大辞典」というのもあります。

マカロンカラーでグリッドな感じにすると、こんな感じに。
テキストの色はグレーが合わせやすいですね。
cute_flat_design1

洋菓子の店・ラデュレのサイトが、いい感じにマカロンカラーのフラットデザインですね。
Ladurée | ラデュレ
cute_flat_design-ss

レースを使ってボックス/グリッドをつくる

フラットデザインはUI/UXを突き詰めた結果のデザイン。
そこを損なわない程度の装飾ならいいんじゃないかなーと考えてみました。

cute_flat_design2

左から、
・boxそのものをレース風に
・boxをレースで囲む
・背景にレーシーなテキスタイル
・上下のみ左右のみにレースや模様を主張しすぎない色味で配置

また、コンテンツの区切りにもレースをつかっています。

背景にストライプやドットなどを使う

ストライプやドットは可愛いさの定番ですね。
他にもリボンの柄、レースでストライプ柄とかも可愛いんじゃないかなーと思います。
気をつけたいのが、柄と地のコントラスト。なるべくコントラストは抑えめにすると柔らかい印象になる気がします。
なるべく淡い感じ、パステルのイメージがいいかなー。

cute_flat_design3

線デザインを取り入れる

べた塗りで使いがちなレースを敢えて線で描いているような感じで使ってみるのも面白いかな、と思いました。
また、線を使ったデザインで可愛いもの、と言えば星座!
最近はアパレルの方で流行ってるのか、宇宙柄とか星座柄とか、よく見かけますね。

cute_flat_design4

また、手描きのリボン枠や、ラベル調の枠とも相性がいいですね。

まとめ

いかがでしたでしょうか?
今回可愛いフラットデザインを考えながら色々と作ってみたんですが、結局、シンプルさをつきつめて出来上がったデザインでもあるので、色や文字の選び方しだいで可愛く作れるものなんだな、というのが分かりました。
デコればいいってもんじゃないんですね。…でも盛りたい。

今回のサンプルを一枚画像にしてみました。クリックでJAYPEGのページに飛びます。

flat-lace_thumb

可愛いものを作りたい人の、なにかヒントになれば幸いです。

参考)
5分で分かる製作現場(8):5分で分かるフラットデザイン (1/5) – @IT
UXガイドラインから読み解く:フラットデザイン実装における3つの重要なポイントとは (1/2) – @IT
今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG
2014年大流行間違いなし!線デザインがアート心を刺激するサイト20選 | 株式会社LIG

/* — 06/24 追記 — */

Twitterなどで「フラットデザインの定義を超えている」とご指摘をいただきました。ありがとうございます。
きっちりとした定義にあてはめると、確かに「フラットデザイン」とは言えないと思います。
あくまで、自分なりに考えて作ってみたものになります。
結果的に定義を超えてしまいましたが、可愛いものが出来た自信はあるので、可愛いものの参考にしていただければと思います。

否定に反省を。賛辞に感謝を。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください