ページのトップへ

ニュース・ブログ
IT & WEB" TREND WATCH

日進月歩のIT&WEB業界における旬のニュース・トレンドを素早くキャッチ。
その現象・製品のもたらす価値や今後の展望などを、わかりやすく解説していきます。

「IT TREND WATCH」第1回 「パララックス効果」っ〜

2012年12月19日
カテゴリー:IT TREND WATCH

このコーナーでは、IT業界にまつわる用語や事例、現象などをわかりやすく解説しながらレポートしていきます。旬の話題もどんどん取り上げていこうと思いますので、毎回チェックよろしくお願いします!

さて、第1回は「パララックス効果」についてです。ちょっと耳慣れない横文字ですが、なんとなく聞いたことのある方もいらっしゃるかもしれません。

というのもここ1〜2年、WEB業界で急速に流行した、多くはユーザーに強い印象を与えたいキャンペーンサイトなどに用いられる手法・効果の一つだからです。アパレル関連サイトやキャンペーンページなどによく使われています。

厳密には、パララックスとは「視差」のことを言います。

「視差(しさ)は、二地点での観測地点の位置の違いにより、対象点が見える方向が異なること、または、その角度差。」(Wikipediaより引用)

例えばコンパクトカメラで撮影した時に、ファインダーを覗き込んで決めた構図と、実際に撮影された写真の構図とに差が生じることもこの「視差」による効果、すなわち「パララックス効果」のせいなんです。

古くは横スクロールのゲームなどでも使われていたこの「視差」を利用した技法をWeb制作に応用することで、動きがあって奥行きのあるサイトの見せ方が可能となりました。

いくつかのレイヤーをそれぞれ異なった速度でスクロール(奥のレイヤーは遅く〜手前のレイヤーは速く)させる事で、視差効果を与えて奥行きがあるように見せるのです。

そのため、WEB業界では「パララックス効果」のことを「多重スクロール」と呼ぶ場合もあります。

百聞は一見にしかず、ということで、是非下記のサイトを一度見てみて下さい。

・MORISU MAKI:http://morisumaki.com/

・adidas×JFA:http://adidas.jp/JFA/

・YouTube:http://www.onehourpersecond.com/

・MINI:http://www.mini.jp/event_campaign/big-point/

・伊勢丹:http://www.isetan.co.jp/icm2/jsp/store/shinjuku/event/1207tsm/

どうですか?

動きがダイナミックで色々な仕掛けが出てくるので、見ていて飽きないですよね。

12/12にリニューアルしたばかりの弊社WEBサイトにもこのパララックス効果の要素を取り入れています。日本の企業案内サイトではあまり使われないパララックス効果ですが、皆様の印象に少しでも残ればと使用しました。

http://creativeunity.jp

是非一度、ご覧下さいませ。

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

名前 *
メールアドレス *
ウェブサイト

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

このカテゴリーの最近の記事

カテゴリー別リンク

ブックマーク&SNS

はてブ

はてブ

このエントリーをはてなブックマークに追加
pocketブックマーク

Pocket

Feedly

Feedly

follow us in feedly
RSS

RSS

twitter

twitter

facebook

facebook

line

line

Facebook

CREATIVE UNITY LINKS

株式会社クリエイティブ・ユニティのホームページ ブランディング見直しパッケージ にぎわいの街プロジェクトのパッケージは商店街に人を集めます SPツールおまかせパッケージ ユーピック:U-pick