変化を続けるウェブデザインは、すこし前まで人気だったフラットスタイルから少しずつ、新しいスタイルへと移ってきているようです。コンテンツレイアウトなどのデザイン面だけでなく、アニメーションを利用し、インタラクティブな動きを取り入れた新スタイル採用のウェブサイトを、今回はまとめて確認してみましょう。
詳細は以下から。
ワンランク上の仕上がりを目指そう！参考にしたい新作ウェブデザインまとめ
オランダにあるデザイン事務所のポートフォリオサイトで、見た目だけでなく読みやすさにもこだわった、ユニークな個性がキラリと光る仕掛けがたくさん。
斜めに切り込みを入れたコンテンツを繊細なアニメーション付きで表示することで、サイト全体を魅力的に仕上げてくれます。
世界中のどこかで行われているバーベキューをテーマに、選ぶ項目によってストーリーが変わってくる映画のようなエフェクトが楽しい、インタラクティブなウェブサイト。
イメージスライダーとコンテンツを並べたレイアウトは、商品紹介ページから購入までをスムーズに行うことが可能。
木のぬくもりを感じるプロダクト家具を紹介、販売しているウェブサイト。余白スペースをたっぷり利用したレイアウトは、フラットスタイルを意識したミニマルな印象。
ページを表示することで、立体的なブランドロゴを採用したスプラッシュページが用意された、アニメーションをたっぷり利用したサイト。
30種類の動物や昆虫をポリゴンスタイルで表現し、モーフィング・アニメーションで展開するコンテンツが面白い作品。
ヘッダーに配置したかわいいフラットスタイルのイラストは、トグルを使って変化させるユニークな仕掛けが素敵なサイト。
音楽イベント用ランディングページで、ユニークな動きをつけたヘッダーデザインに、コンセプトを統一した配色、フォントの使い方など参考に。
画面中央に置かれたコーヒー豆が、スクロールしていくことで美味しそうなコーヒーへと変化していく様子を、アニメーションたっぷりに表現しています。
並べられた文字リンクにカーソルを合わせることで、無数のサークルが暴れるようにユニークなアニメーションで表現されます。
スクロールすることで時代によってすこしずつ変わってきた、車体モデルを確認できるエフェクトが素敵。
商品の特長を1つずつプレゼンテーション形式で並べることで、自然とスクロールを促すカスタム自転車販売用のランディングページ。
空中に放り投げることで、操作不要で自動的に飛行を開始する、新しいタイプのドローン。スクロールすることでドローン本体がアニメーション付きで変化していきます。
色あせたマットな質感が特長で、ページを移動するときの滑らかなトランジションが素敵なサイト。
より使いやすいスコップを開発し、Kickstarterで出資を募っているアイテム。ブランドイメージに合った、アース色の配色が美しいウェブサイト。
作業風景を撮影した動画をヘッダーに採用し、太字テキストとポップな配色が素敵なフラットスタイルのウェブサイト。
スクロールを開始するとページが真ん中半分で切り替わる、ユニークなスライダーや動きに魅了される、ゴージャスな雰囲気を演出しています。
フルスクリーン画面に並べられた人物モデルにカーソルを合わせることで、シネマグラフのような効果を楽しむことができ、高級感のある雰囲気を演出しています。
コーヒーの栽培から販売まで行う会社のイメージを損なわない、迫力のあるイメージ写真やタイポグラフィ、配色など参考になります。
並べられた商品カーソルを動かすことで、ふわりとした気持ちのよいアニメーションが実装されたショッピングサイト。
アイコンを利用した縦型の固定ナビメニューを採用した、フラットスタイルのウェブデザイン。ピクセル状に並べられたコンテンツが、スクロールすることでアニメーション付きで展開していきます。
アニメーションエフェクトを駆使した、動きにこだわりを魅せたギャラリー向けポートフォリオサイト。
ブランドイメージとぴったりなイラストに、フルスクリーンの中央揃えでデザイン要素を並べたシンプルで、読みやすいランディングページを表現しています。
サムネイル@ : nclud – A Provocative Creative Agency
参照元リンク : Flat Websites Design – 26 New Examples | Web Design | Graphic Design Junction
