Advertisement

creativity_for_the_web_03

 

フラットデザインという言葉が登場してからある程度経過し、CSSアニメーションを加えたり、SVGファイルを活用したりと、デザインスタイルも少しずつ変化しているようです。今回は最新のフラットスタイルを見ていきましょう。

 

 

海外デザインブログGraphic Design Junctionで、フラットスタイルを採用した最近のWebサイトデザインをまとめたエントリー「32 New Examples Flat Websites Designs」が公開されていたので、今回はこちらをベースに、その他にチェックしておきたいサイトデザインをまとめてご紹介します。

 

 

 

詳細は以下から。

 

 

 

配色が素敵!フラットスタイル採用のWebデザイン24個まとめ

 

Gonzalo Perez

使われている色はどれもカラフルで、余白スペースをたっぷり採用したミニマルスタイル。太字フォントとの相性もよい、配色の参考にしたいサイトデザイン。

web_crea_sept_08

 

 

 

Locomotive

画面いっぱいに表示されたイメージスライダーがインパクトたっぷりで、スクロールするとグリッドごとにコンテンツをすっきりレイアウトされています。

creativity_for_the_web_08

 

 

 

Adventure

旅をテーマにしたメディアサイトで、イメージ写真とフォントをうまく組み合わせた好サンプルとして。

web_crea_sept_01

 

 

 

The Best of Greenpoint

ニューヨーク、ブルックリンにあるレストランで、太字タイポグラフィーとイメージ写真の組み合わせが、シンプルでコンテンツに注目できます。

creativity_weekly_04

 

 

 

Lees Ferry

アリゾナ州にあるマーブル・キャニオン国立公園の公式ウェブサイト。自然をテーマにした、アース色の配色が素敵です。

web_crea_sept_03

 

 

 

Whole & Simply

flat+websites.6

 

 

 

New JUMO Concept

スクロールすることで、折りたたまれた照明ランプが立ち上がりコンテンツが開始される、アニメーション豊かな楽しいコンテンツ。

flat+websites.4

 

 

 

Heck House

トップ部分に味わいのある写真を用い、コンテンツをレンガ状に並べた、思わずクリックしたくなる仕掛けが満載です。

flat+websites.22

 

 

 

Working Not Working

ベクターイラストレーションが素敵なヘッダーデザインに、iPadをうまく利用した特設ページでの魅せ方は参考メモとして。

flat+websites.17

 

 

 

HARBR

イメージ写真に半透明カラーフィルムを重ねたようなエフェクトは、よりスローガンやヘッドライン用テキストを強調します。

flat+websites.11

 

 

 

PRPL

ビデオ動画コンテンツをサイトに導入するときに参考にしたいサイト。左固定ナビゲーションにすることで、スムーズにコンテンツを移動できました。

flat+websites.01

 

 

 

Bell Brothers

スクロールすると二人の人物がスルスルと出現するユニークな仕掛けが、。兄弟でウェブデザイン制作会社をされているそうです、それにしても似ています。

flat+websites.1

 

 

 

Adobe Muse

アニメーション作成を得意としたMuseアプリの良さを最大限に生かした、ダイナミックなコンテンツ展開を楽しむサイト。

flat+websites.02

 

 

 

Martin Watier

淡いパステル系の青色で全体を統一することで、初めて訪れたユーザーにもフレンドリーな雰囲気を演出しています。

flat+websites.05

 

 

GLCO

カリフォルニアを拠点にしたアイグラス・ウェアのオフィシャルサイト。オレンジ色をアクセントに、すっきりとしたグリッドレイアウトが展開されます。

creativity_for_the_web2_04

 

 

 

R+Co

使用されているカラーリングがどれもビビッドで、素敵なヘアサロンのWebサイトデザイン。極太フォントがうまくマッチしています。

flat+websites.21

 

 

 

COSO Wineresturant

イタリア、ローマにあるワイン・レストランで、ゴールドと黒で描かれた手書きスケッチが、全体のブランドイメージ、雰囲気を引き立てています。

flat+websites.7

 

 

 

Australian Catholic Univerty

オーストラリアにある大学のホームページで、Off-Canvasレイアウトでアニメーション表示される登録フォームはユニークですね。

flat+websites.25

 

 

 

Melanie F.

子供向け手作り靴の販売を行っているサイトで、制作風景を撮影したビデオ動画がトップページに使われ、よりブランドに親近感を与えてくれます。

flat+websites.20

 

 

 

Better CMS

ユニークで落ち着いた配色が素敵なサイトで、コンテンツごとに背景色を変更することで、よりユーザーの注目を集めることもできます。

flat+websites.10

 

 

 

P&Co

アパレルブランド向けサイト制作の参考にしたい、タイポグラフィーとイメージ写真を中心とした、ミニマルなレイアウトが魅力的。

flat+websites.24

 

 

 

Lovelies

カスタムジュエリーの販売を行っている、レスポンシブ対応サイト。アニメーションを活用したメッセージ&スローガン表示は、ブランドイメージをばっちり表現しています。

flat+websites.26

 

 

サムネイル@ : ekr8 – Kennispunt voor duuzaam energieverbruik

参照元リンク : Flat Websites Design – 32 New Examples | Web Design | Graphic Design Junction