ホームページ制作/SEO対策なら株式会社サイバーブレーンへ

 03-5961-5681 平日10:00~19:00

 2016-12-01

2016年の流行ウェブデザインを振り返る

パララックス(視差効果)

{$block_img_1_alt}

2012年頃から現れたパララックスデザインは、2016年も主流になったデザインだったと言えるのではないでしょうか。 パララックスデザインについては、サイバーブレーンのウェブサイトでも紹介しています。
“サイトを下にスクロールすると、それに合わせて画面もスクロールされるのは当然の事ですが、この動作に視差効果 (パララックス)を加え、ページにインパクトを与えることができるのがパララックスサイトです。上下のスクロール 動作によって、画像や文章などのコンテンツに上下左右、フェードインフェードアウトのような効果を加えることに よって、サイトに面白みを加えることができます。”

引用元:パララックスサイト

視覚的に面白いだけではなく、直帰率やコンバージョンアップにも有効なパララックスデザイン。 2017年にはさらにパワーアップしたパララックスサイトが現れることでしょう。

ストーリーテーリング

上記で紹介したパララックスデザインは、このストーリーテーリングとも合わせて使われることが多かったデザインです。 ストーリーテーリングとは、サイトそのものが一つの物語のようになっているサイトです。 ストーリー仕立てになっていることで、内容を分かりやすく説明し、ユーザーを引き込むことができます。そうすることでユーザーの直帰率を減らし、ウェブサイトを長く見てもらうこともできます。 お話を作るように、ユーザーがサイトを見てからお問合せに至るまでのストーリーを想像し、写真や文章・動画・アニメーションを使って魅力的なデザインを作り出すことができます。 そういった魅力的かつわかりやすいサイトはじっくり見てみたくなりますね。

マテリアルデザイン

{$block_img_1_alt}

2014年にGoogleから公開されたマテリアルデザイン。 直訳すると「物質的なデザイン」という意味です。 平面の中に空間的な概念を持たせることで、要素の重なりや階層を表現することができます。 細かなルールがありますが、ユーザーにもエンジニアにもデザイナーにとっても非常にわかりやすいデザインです。 Googleからマテリアルデザインのガイドラインが公開されているので、ウェブデザイナーやエンジニアの方は必見ですよ!日本語のガイドラインもあります。
“Google では、時代を超えて共通する優れたデザインの原則と、科学技術の革新性と可能性とを融合させ た視覚言語を作り出すことに取り組んできました。こうしてできたのが、マテリアル デザインです。 Google がマテリアル デザインの理念や特徴を発展させ続ける限り、この仕様は生きたドキュメントとし てこれからも更新されていきます。”

引用元:マテリアル デザインのガイドライン(日本語版)

ちょっとしたアニメーション

今や、アニメーション要素のあるウェブサイトが多くなっています。 マウスオーバーで変化するボタンや、スクロールすることで現れる文字や画像。 もちろん視覚的に面白いということもありますが、ちょっとしたアニメーションを加えることで、ユーザーにその要素がどういった役割を持つのか直感的に理解してもらいやすいのです。 装飾的な意味で使われることが多かったアニメーションは、今は機能的な意味合いで使われることが多くなりました。 動きでその要素に何が起こっているのか分かるので、文章で説明するよりもすんなりユーザーの頭に入っていきますから、サイトを見る中でのストレスが軽減されます。 ユーザビリティの高いウェブサイトを作る上で欠かせない要素ですね。

2017年に流行するウェブデザインは…?

ここで紹介したウェブデザインや手法が組み合わさったものが2017年にも使われていくのではないでしょうか。 これに加え、日本ではあまり広まっていませんが、スプリットスクリーンと呼ばれるデザインを活用したサイトに私は注目したいですね。 魅力的なデザインのウェブサイトを作るためには、こういったトレンドも押さえつつUI・UXにも配慮して行くことが必要です。 それがサイトの回遊率を上げることにも繋がっていきます。 2017年にどのような面白いウェブサイトが生まれるのか今から楽しみですね! もちろんサイバーブレーンでも、魅力的なウェブサイトを作成していきます。

~この記事の著者~

サイト制作に関するご相談はこちら

 03-5961-5681 平日10:00~19:00

メールフォーム

あなたが
サイトに
求める要素
あなたがサイトに求める0要素