こんにちは、アルバイトの岡本です。
iOS7にも導入されることとなったフラットデザイン。
今まであったフラットデザインのWindows8とスキュアモーフィックデザインのiOSという構図が崩れましたね。
というわけで今回はフラットデザインのWEBサイトを企画する際に利用したい、配色ツールを3つと、5つの事例サイトをご紹介します。
- 1. 0、スキュアモーフィックデザインってなに?
- 2. 1、定番UIカラーが見れる「Flat UI Colors」
- 3. 2、マウスで感覚的に操作できる「COLOURCODE」
- 4. 3、その配色は読みやすい?「Contrast-A」
- 5. 4、カラーサンプル
- 6. 一、NEXT A-Class|メルセデス・ベンツ日本公式サイト
- 7. 二、Skinny Ties | Nothing but skinny ties.
- 8. 三、ポカリスエット公式サイト|大塚製薬
- 9. 四、Parco Theater 40th Anniversary
- 10. 五、Acer | explore beyond limits
- 11. おまけ、GoogleGlass
- 12. まとめ
0、スキュアモーフィックデザインってなに?
フラットデザインについてご紹介する前に、まずはスキュアモーフィックデザインのおさらいから。
スキュアモーフィックデザインとは、「skeuos(容器)」と「morph(フォーム)」というギリシャ語2つを組み合わせた造語で、「似たような人工物(工芸品や美術品など)からコピーされたデザイン」という意味があります。
iPhone標準アプリの「メモ帳」のように、「本物を使っているかのように見せるデザイン手法」を指す言葉として、使われてきました
1、定番UIカラーが見れる「Flat UI Colors」
[browser-shot width=”600″ url=”http://flatuicolors.com/”]
windows8のモダンUIなどで利用されている20色を紹介しているページです。
レスポンシブかつHEXからRGBAまで対応しているため、気軽に扱えるサイトです。
2、マウスで感覚的に操作できる「COLOURCODE」
[browser-shot width=”600″ url=”http://colourco.de/”]
COLOURCODE
こちらは5色のカラースキームを生成するツールです。
マウス位置を取得してカラーを変更する仕様のため、より直感的にカラーを探すことができます。
また「monochromatic」「analogic」「triad」のようなスキームが8種類あり、生成したスキームをlessファイルでダウンロードできる点もオススメポイントです。
3、その配色は読みやすい?「Contrast-A」
[browser-shot width=”600″ url=”http://www.dasplankton.de/ContrastA/”]
最後に紹介するのは、ブラウザーでの可読性をチェックするツールです。
背景色と文字色を選択するだけで、どれだけ文字が読みやすいかという評価を見ることができます。
わざと読みにくい文字色を選んでみると・・・
このように×を並べられます。
4、カラーサンプル
紹介するだけではあまり参考になりませんので、フラットデザインを採用しているスマートフォンサイトを5つご紹介します。
配色の割合も調べましたので、ぜひ参考にしてください。
一、NEXT A-Class|メルセデス・ベンツ日本公式サイト
メルセデスベンツのキャンペーンサイトです。
黒の背景に、青色を多用した「近未来風デザイン」にまとめられています。
赤色はキャラクターの髪の色だと思われますが、アクセントしても効果的です。
二、Skinny Ties | Nothing but skinny ties.
Skinny Ties | Nothing but skinny ties.
こちらは海外のネクタイ通販サイトです。
このサイトについては、過去に記事として取り上げられていますので、そちらもご覧いただければと思います。
レスポンシブWebデザインで構築されたECサイト「SKINNY TIES」
青色のネクタイのインパクトがかなり大きい、という印象です。
配色としてはグレーが40%近くを占めています。
三、ポカリスエット公式サイト|大塚製薬
ポカリスエットの公式サイトです。
白背景に商品カラーの青が映えるデザインです
割合を見てもほぼ青色ですね。
ポカリスエットのカラーは「#005DB2」で再現できる、というのはトリビアになるような気もします。
四、Parco Theater 40th Anniversary
Parco Theater 40th Anniversary
こちらはパルコの記念サイトです。
今までのサイトとはうってかわってかなりパステル調なデザインとなっています。
いろんな色がふんだんに使われているように見えますが、意外とバランス良く色が使われているのがわかります。
五、Acer | explore beyond limits
最後はUltrabookなどを販売するAcerです。
フラットなデザインにjQueryでアニメーションをつけたサイトとなっています。
こちらもバランスの良い配色になっています。
オレンジの比率が高いのはおそらく人物写真の影響だと思われます。
おまけ、GoogleGlass
無駄を徹底的にそぎ落とした、「フラットデザインの極み」と言っても過言ではないと思います。
「色すら不要」という潔さは、ジョブズが惹かれた禅に通じるものがあるのかもしれません。
まとめ
いかがでしたでしょうか?
フラットデザインではカラフルな色を利用しますので、配色に悩むことが多いのではないかと思います。
そんなときには是非、この3つのツールを使ってみて見てください。
それでは、また。