海外デザインブログDesignModoで公開された「Design Trend: Parallax With a Twist」より許可をもらい、日本語抄訳しています。

ウェブデザインのもっとも新しいトレンドは、パララックスエフェクトのようですが、パララックスとも違うスタイルです。デザイン要素を動かしたりしますが、アニメーションとも異なります。たくさんの配色やデザインを利用しますが、マテリアルデザインとも違います。

この背景イメージに関するWebトレンドは、他のトレンドと一緒に利用し、デザイン要素を動かすことでユーザーの注目を惹き、面白いスクロール操作を使い、ユーザーのサイト滞在時間を伸ばしてくれるでしょう。このヒネリを加えた新しいパララックスエフェクトは、最先端テクニッとしてウェブデザイナーを魅了しはじめています。

詳細は以下から。

新型パララックスエフェクトとは？

以下で紹介しているサンプル例を確認することで、どのような実装がされているのか、より動きを理解しやすいでしょう。

ヒネリを加えたパララックスエフェクトは、これまでの背景を動かすトレンドとは違い、よりシームレスな動きが特長です。パララックスエフェクトで見られる、スクロールによって背景が変化する点は共通しています。

もっとも異なる点は、スクリーン画面ごとにコンテンツなどが切り替わる点です。背景の色が変わったり、動きのあるアニメーション、そしてコンテンツがカーテン状に切り替わる、ダイナミックで連続性のある動きを、スクロールによって作成しています。

共通するポイントは?

このヒネリを加えたパララックスエフェクトでは、いくつかの共通する要素が含まれています。以下は、Webデザイン案件で活用したいポイントとなります。ただし、すべての要素を適用する必要はありません。

1 ワンページ・デザイン : このテクニックのインパクトを最大にするために、ウェブサイトは1ページ完結の、ワンページ・デザインが採用されています。ナビゲーションメニューを追加することで、長いスクロールのホームページをよりスタンダードな形式にまとめます。

2 太字フォント : ユニークで巨大な文字サイズが共通のポイント。またディスプレイ書体に太線を組み合わせることで、読みやすさをアップします。

3 鮮やかな配色 : フラットデザインやマテリアルデザインの配色をベースにしています。大胆なほどの色使いがポイントです。配色はとてもシンプルですが、背景が切り替わることで、異なる配色を使いやすくします。

4 コンテンツの切り替え :　コンテンツはスクロールによって切り替わります。まずヒーロー画像を表示し、コンテンツ本文、そして数枚のイメージ写真にお問い合わせフォームが続きます。スクロールで切り替わる背景との相性も良いでしょう。

5 続いていくストーリー性 : それぞれのコンテンツはデザインによって決まっており、ひとつのストーリーが他のデザイン要素とうまく結びついています。ビジュアルを利用したストーリーでは、共通のテーマが含まれている必要があり、特にユーザーが楽しめることが重要となります。

6 巨大なイメージ写真 : イラストや写真など、大きなサイズを利用することでインパクトを与えます。多くのサイトでは、ヒーロースタイルのヘッダーに、スクロール開始ボタンが実装されています。

7 シンプルな言葉 : この動きのある背景テクニックは複雑なので、文字テキストを含める、その他の要素はできるだけシンプルにするように心がけましょう。複雑さとシンプルさのコントラストが、ユーザーがサイトを理解しやすく、また楽しみやすくしてくれます。

デザインにあった動きを制作しよう。

このテクニックで重要になってくるのは、動き（英: Movement）です。デザイナーは、スクロール操作によって動く要素と、スクリーン上の他の動き、アニメーションのバランスをうまくとりましょう。あまり動きを加え過ぎるとやり過ぎとなってしまうので、こちらも注意が必要です。

スクロールに応じて、一つの要素だけを動かすようにするのがポイントです。そのためスクロールのとき、他の要素は停止させておきましょう。上記サンプルのページ右下に配置された、アニメーション付きアイコンを参考にすると良いでしょう。

ではスクロールをはじめましょう。少しスクロールして停止します。スクロールが適用されたときにすべての動きは停止します。動きはとてもシンプルで、ひとつのアクションで完結します。しかし、こうすることでユーザーは動きを完全にコントロールできるように感じ、アニメーション要素の使いすぎを避けることができるでしょう。

なぜこのトレンドは使える？

このヒネリを加えたパララックスエフェクトは、なぜ人気となりはじめているのでしょう。いくつかのデザイントレンドを組み合わせていたり、デザイナーはHTML5を利用することで、新しいものを作成することができます。またフラットデザインとの相性も良く、マテリアルデザインの基本原則も取り入れています。またミニマルなフレームワークを採用することもできるでしょう。可能性はアイデア次第で、無限にあると言えます。

これらの理由から、このパララックスエフェクトは今後より利用されていくでしょう。さまざまな使い方にあてはめることができることが、長く使えるデザイントレンドやテクニックではないでしょうか。

参照元リンク : Design Trend: Parallax With a Twist – DesignModo