【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

フラットデザインの参考にしたいツール3種と事例5つ

フラットデザインの参考にしたいツール3種と事例5つ

こんにちは、アルバイトの岡本です。

iOS7にも導入されることとなったフラットデザイン。

今まであったフラットデザインのWindows8とスキュアモーフィックデザインのiOSという構図が崩れましたね。

というわけで今回はフラットデザインのWEBサイトを企画する際に利用したい、配色ツールを3つと、5つの事例サイトをご紹介します。

0、スキュアモーフィックデザインってなに?

フラットデザインについてご紹介する前に、まずはスキュアモーフィックデザインのおさらいから。

スキュアモーフィックデザインとは、「skeuos(容器)」と「morph(フォーム)」というギリシャ語2つを組み合わせた造語で、「似たような人工物(工芸品や美術品など)からコピーされたデザイン」という意味があります。

iPhone標準アプリの「メモ帳」のように、「本物を使っているかのように見せるデザイン手法」を指す言葉として、使われてきました

1、定番UIカラーが見れる「Flat UI Colors」

[browser-shot width=”600″ url=”http://flatuicolors.com/”]

Flat Ui Colors

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/”]

Contrast-A

最後に紹介するのは、ブラウザーでの可読性をチェックするツールです。

背景色と文字色を選択するだけで、どれだけ文字が読みやすいかという評価を見ることができます。

わざと読みにくい文字色を選んでみると・・・

このように×を並べられます。

4、カラーサンプル

紹介するだけではあまり参考になりませんので、フラットデザインを採用しているスマートフォンサイトを5つご紹介します。

配色の割合も調べましたので、ぜひ参考にしてください。

一、NEXT A-Class|メルセデス・ベンツ日本公式サイト

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

Acer | explore beyond limits

最後はUltrabookなどを販売するAcerです。

フラットなデザインにjQueryでアニメーションをつけたサイトとなっています。

こちらもバランスの良い配色になっています。

オレンジの比率が高いのはおそらく人物写真の影響だと思われます。

おまけ、GoogleGlass

GoogleGlass

無駄を徹底的にそぎ落とした、「フラットデザインの極み」と言っても過言ではないと思います。

「色すら不要」という潔さは、ジョブズが惹かれた禅に通じるものがあるのかもしれません。

まとめ

いかがでしたでしょうか?

フラットデザインではカラフルな色を利用しますので、配色に悩むことが多いのではないかと思います。

そんなときには是非、この3つのツールを使ってみて見てください。

それでは、また。

photo credit: ollanani via photopin cc

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+