• JOIN US ON SNS
  • 株式会社monomode
    私たちは札幌・東京を拠点に活動するシステム開発、WEB制作、ホームページ制作会社です。WEB制作やネットショップ制作を主軸にウェブ上のプロモーション展開をサポートしています。

この効果は面白い!今でも楽しいパララックスサイト

この効果は面白い!今でも楽しいパララックスサイト

雪が降ると犬と一緒に庭を駆け回る、どうも僕です。毎年この時期になると雪に反射した太陽で目がチカチカしますよね。その症状「雪目」っていうらしいです。みなさん!これテストに出ますよ!

さて、今回は使いすぎると目がチカチカして逆効果になるけれど、上手く使えば興味を惹くことができるパララックス効果を使ったサイトを紹介します!

 

パララックスとは。

パララックス(視差効果)とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。

 

うん、言葉で説明されただけじゃちょっと分かんないっす。耳で聞くより目で見た方が早いよね!っていうことで早速実際のサイトを見ていきましょう!

 

 

京都大学

 

探険!京都大学
URL: http://www.kyoto-u.ac.jp/explore/

 

スクロールしていくとパカパカ開いていくアニメーションは面白いですよね。中に何があるのかわくわくしてスクロールする人は多そうです。このサイトは京大先生図鑑というページのアニメーションもとても面白いので是非見てみてください。

 

 

 

共同通信デジタル

 

共同通信デジタル
URL: http://corp.kyodo-d.jp/

 

写真とコメントにパララックスの手法を用いて奥行を感じさせるデザインになっています。フラットに配置されているデザインも好きですが、こういった奥行を感じさせるデザインは個人的にとても好みです。平面に立体感を与える、これがパララックスの醍醐味ですよね。

 

 

 

color magic | ITOKIN MUSEE

 

color magic | ITOKIN MUSEE
URL: http://www.itokin.com/musee/colormagic/

 

ファーストビューを見て「これがパララックスか~」と感心してはいけません。スクロールしていくことでコンテンツの切り替えや商品の見せ方など、随所に面白い工夫がされています。長いページですが、気が付くと最下部までスクロールしていた・・・なんて人もいそうですね。ちなみに私はモデルさんを後ろ歩きさせて遊びました。

 

 

 

株式会社キュー

 

Q
URL: http://www.q-co.jp/

 

おや、このサイトはペンしかないのか・・・と思いきや!いやぁ楽しいですね!記事を書くためにサイト訪問しましたが、ついつい落書きに時間を費やしてしまいましたよ。こういった遊び心って大事だと思うんです。ただし、私のパソコンでは非常に動作が重かったのでみなさん気を付けてください。

 

 

 

森山直太朗公式サイト

 

森山直太朗オフィシャルサイト
URL: http://naotaro.com/

 

はい!みなさんご存知森山直太朗さんの公式サイトです!いやぁ随所に遊びがあって面白い!私はこの業界に飛び込む前から森山直太朗さんのサイトを見ていました。定期的に絵柄が変更されるのでブックマーク必須ですよ!

 

 

数年前に流行ったパララックスですが、今はもう下火になりつつありますね。ただし、効果的に使うことによってサイトにメリハリがつくので、全く見なくなることはなさそうです。「過ぎたるは猶及ばざるが如し」のことわざ通り、何事も程ほどに!

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
いせき

いせき

おすすめいせきの記事一覧
フロントエンジニアの井関です。 最近一人暮らしを始めて、自炊が楽しくなってきています。 家具も統一したいな〜と仕事の合間にカタログを見て癒されています。

関連記事

  • RSS rss
  • feedly FEEDLY Feedlyで追加する
mautic is open source marketing automation
ページトップへ戻る