スイッチ | ブログ・サイト運営を応援するWebマガジン

事例から学ぶ、Webデザインの最新トレンド


Webデザインは、Web技術とともに日々進歩しています。効果的なWeb戦略を行っていくためにも、Webデザインのトレンドについてはしっかり把握しておきたいものです。Webデザインの参考になる、最新のトレンドについてまとめました。

Webデザインの最新トレンド

パララックスデザイン

ここ数年人気なのが、パララックス(視差効果)を活用したウェブサイトです。
最もよく使われるのが、背景とコンテンツをずらして遠近感を持たせるパターン。
背景にフルスクリーンで写真を配置したり、背景で動画を再生することもあります。後述するシングルページと組み合わせることも多く、スクロール量の多い縦長のサイトに合っているデザインです。

KIRIN ICHIBAN

KIRINの一番搾りのブランドサイトです。パララックスを上手に使っており、背景をずらすだけでなくさまざまなエフェクトも施されたおもしろいサイトに仕上がっています。

KIRIN ICHIBANのサイトはこちら

test,

こちらはファッションの分野から。セレクトショップのtest,のサイトは、縦ではなく水平方向にスクロールするタイプのデザインになっています。ちょっと間違えるとユーザビリティが大きく損なわれる可能性はあるのですが、test,のサイトはセンスもよく、うまくまとまっています。

test,のサイトはこちら

シングルページデザイン

ここ数年で一気に増えたのが、シングルページ(ワンページ)デザインのサイトです。ランディングページのように、全ページを一つのページにまとめてしまいます。トップページやサービス紹介、お問い合わせフォームなどのコンテンツが縦一列にレイアウトされます。
シングルページのメリットは、コスト(制作工数)の圧倒的な短縮にあります。デバイスごとのレイアウトもほぼ同一になるため、レスポンシブにも対応し易いデザインです。

早稲田大学

早稲田大学のサイトです。シックにまとまっている、シングルページのお手本のようなサイトですね。

早稲田大学のサイトはこちら

ぷるぷるSPARKLINGゼリー

背景や要素に製品をイメージさせるエフェクトを取り入れた、シングルページデザインのサイトです。

ぷるぷるSPARKLINGゼリーのサイトはこちら

フラットデザイン

AppleやGoogleのロゴにも採用されている、フラットデザイン。
ウェブデザインだけでなく、アプリやガジェットなどさまざまなシーンで利用されています。シンプルでスタイリッシュなフラットデザインは、今後しばらく注目を集めることでしょう。

Lorenzo Verzini

ページのあらゆる要素がフラットにまとめられている、Lorenzo Verziniのページ。ちょっとしたアニメーションも盛り込まれているなど、フラットデザインの取り入れ方がうまいですね。

Lorenzo Verziniのサイトはこちら

Microsoft

フラットデザインを採用しているマイクロソフト。製品だけでなく、ウェブページもフラットにまとまっています。

Microsoftのサイトはこちら

マテリアルデザイン

Googleにより提唱されたマテリアルデザイン。フラットデザインなどの最新のトレンドとテクノロジーを組み合わせて、リッチなユーザー体験(UX)を提供するための規格です。

Material design

マテリアルデザインを提唱したGoogleのサイトです。マテリアルデザインについて解説しているとともに、ページデザインもその規格に沿って制作されています。

Material designのサイトはこちら

Inbox

同じくGoogleによるブラウザ型メールクライアント、Inboxのサイトです。各要素のデザインやエフェクトなど、マテリアルデザインがふんだんに盛り込まれています。

Inboxのサイトはこちら

グリッドレイアウトデザイン

写真共有SNSのPinterestが世界的に人気となり、一躍注目を浴びたグリッドレイアウトデザイン。写真や記事などのコンテンツがタイル状に配置されるので、ページ内容が俯瞰して見られます。
Masonryなどのプラグインも知られており、リキッドレイアウトを使ってレスポンシブなサイトに導入するケースが多く見られます。

Pinterest

グリッドレイアウトが流行る契機となった、Pinterestのサービスサイトです。ページをボードと見立てて、コンテンツが並んでいます。

Pinterestのサイトはこちら

charary

キャラクターデザイン・ショップのchararyのサイトです。グリッドをマンガのコマのように表示している、おもしろい事例です。レスポンシブにも対応しています。

chararyのサイトはこちら

あとがき

最近では、ゴーストボタンやスライドメニュー、マイクロ・インタラクションなどもよく聞くようになりました。デザインの幅をひろげるためにも、最新のトレンドについてはしっかりとキャッチアップしていきましょう。


Sponsored Links

こちらの記事もおすすめです!

シェア頂けると励みになります!

ブログ更新情報はこちらから発信しています。

運営者情報

荒木 厚(株式会社コクリ 代表)

デザイン会社、WEB運営会社を経て、「株式会社コクリ」を設立。 Wordpressを使ったWebサイトやネットショップの企画・制作、SEO・リスティング広告を使った集客支援をしています。