TIPS

2015.02.02
vol.17

WEB

ユーザーを魅了するパララックスサイト

vol.17 ユーザーを魅了するパララックスサイト

こんにちは。デザイナーの寺田です。
今回は、パララックスサイトについて
お話しします。
パララックスがWebデザイントレンドの1つになってから2〜3年経ち、パララックスサイトは
一般的なものとなってきました。
アイデア次第でユーザーの感覚を刺激する魅力的なサイトデザイン、パララックスの利点と
注意点をお伝えします。

1. パララックス(視差効果)とは

パララックスとは

直訳すると「視差」

スクロールの動作に応じて、複数のレイヤー(層)を異なるスピードで動かします。
それにより視差効果をつくり、擬似的に奥行きや動きなどを作り演出する手法です。

2. パララックスの利点

パララックスの利点

心地よい動きはユーザーの
「見たい」を作り出す。

パララックスWebサイトは、ユーザー(閲覧者)の積極的な操作、ユーザーそれぞれの
可読スピードでサイトを見ることができます。
加えて、1ページに見せたい情報をすべて掲載することにより、サイトコンテンツが訴求する
世界観の統一ができ、リッチな視覚表現を演出できます。
ユーザーは心地よい動きと連続するページの展開に感覚を刺激され、その刺激が次のアクションへと
繋げることが期待できます。
そのため、より多くの情報を読み取り、一定時間サイトに滞在したりと記憶に残りやすい
サイトになります。

3. BOELのパララックスWeb事例

JUSANDI 1st Anniversary
Projetti

JUSANDI 1st Anniversary

BOEL Inc.がブランディングのお手伝いをしている「JUSANDI」の特設サイト「JUSANDI 1st Anniversary」では、パララックスレイアウトを採用しています。
ファーストビューで動画を実装し、より視覚的にアプローチしたサイトにしています。

「JUSANDI 1st Anniversary」
http://www.jusandi.jp/1st_anniversary/

「Projetti」
Art Direction Projettiのパララックスサイトです。
http://projetti.jp/

4. パララックスサイトの注意点

パララックスサイトを作るときの注意点。

確認を入念に!

サイトコンテンツの仕様はクライアント、
制作サイドにできるだけ細かく伝えましょう。
動きが複雑になるため、ラフだけを見せてもクライアントとの間で認識のずれが生じてしまいます。
参考サイトを用意し、具体的な動きを説明するとより提案がスムーズに進みます。
デザイナーとコーダーの間でも同様です。
お互いが共通認識を持つことでストレスなく作業が進められます。

「ブラウザチェック」
通常のWebサイトよりも動きが複雑なためブラウザチェックは入念に!
動きが悪い、もしくは鈍いパララックスサイトはユーザーに心地よさを与えるどころか、
ストレスを与えてしまうため気をつけましょう。

「スマホ、タブレットチェック」
タッチパネル形式のデバイスの場合、PCとは違って思い通りには動きません。
スマホやタブレット用に別ページを用意しユーザーエクスペリエンス(UX)を
考慮した設計を忘れずに!

まとめ

まとめ

何を伝えたいかが重要。

パララックス(視差効果)はいかがでしたか?
パララックスWebサイトは一貫した訴求があり、ストーリー性のある演出が求められる場合など
実装の選択肢として望ましいと思います。
しかし最も重要なことはそのサイトで「何を伝えたいか。」です。
パララックスの効果を使うことにより、伝えたいことを魅力的に表せたら一番ですね。

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。