webデザインにはさまざまなテイストや種類が存在し、中でも視差効果(2点の観測地点の位置の違いにより対象点が見える方向が異なること)を利用することで、より個性的な印象に仕上げることができます。そこで今回は、視差効果を有効利用したクリエイティブなwebサイト集「21 Examples of Parallax Scrolling in Web Design」を紹介したいと思います。
視差効果というカテゴリの中でも、一つの決められたパターンではなく、さまざまなアイデアや工夫によってデザインに動きが生かされたサイトの数々が紹介されています。気になったものをいくつか選定いたしましたので、以下よりご覧ください。
詳しくは以下
■Nike Better World
背景の写真と正面のテキストのスクロール速度が異なることで、独特な動きを演出したwebサイト。写真のクリエイティブ性にも注目したいですね。
■cultural solutions uk I Lincolnshire based cultural consultancy I research, planning & events management services
ポイントを動かすと、メイングラフィックになっているドット柄が動きます。シンプルなデザインのサイトですが、動きをプラスすることでより印象的に仕上げています。
■Head2Heart
背景と、手前の雲のイラストのスクロール速度に差を付けることで遠近感が生まれ、平面のイラストに立体的なビジュアル表現が生まれています。
デザイン的にはシンプルでも、視差効果といった表現を加えるだけでサイトの印象をガラリを変えることができそうです。動きのアイデアの参考として是非活用してみたいですね。今回紹介したサイトの他にもたくさん紹介されていますので、気になる方は下記リンクよりどうぞ。
21 Examples of Parallax Scrolling in Web Design | Inspiration