お問合せ株式会社ジェイコス
TEL 03-5428-8733

Webコンサルティング会社、首都圏(東京)を中心に戦略的なホームページの制作、Webマーケティングをご提供

Webコンサルティング.jp HOME > Blog Top > 今さら聞けないWebデザイン。パララックスって、なに?

Profile

通称:株式会社ジェイコス
誕生日:2005年4月1日
出身地:三軒茶屋
現住所:麹町
職業:Webコンサルタント

2013年5月29日

今さら聞けないWebデザイン。パララックスって、なに?

【読了2分】
20130529d.JPG


「パララックススクロールするサイトを作りたい」とか、「サイトをパララックスにしましょう!」

なんて会話をクリエイターとした時に

「へ、へえ、いいですね!パララックスにしましょう!(なんだパララックスって、あとでggr・・・・)」

って思っている方がまだいらっしゃるかもしれません。


なので、今回は今さら聞けない!って人のために簡単にパララックスを説明します



■パララックスを直訳してみると

「視差」です。

視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることにより、奥行き感を演出する効果を意味します。

との事です。


まぁ、「奥行きを表現する」ってイメージを持ってもらえればよいと思います。



■どうやって作っているのか

・jQueryをつかってます


どういうことかというと、「スクロール値を取得」「Position値を変更」とか「CSSだけで動かしてみる」とか、まぁいわゆるプログラムを組まないといけません。

プラグインとかもあるのですが、端的にいうと「ちゃんとした技術」が必要です。

簡単に作っているわけではない、ってことです。



■結局どんなサイトか見てみないとわからないからサイト紹介する



20130529a.JPG

高さを表現したいスカイツリーにとってこのパララックス効果はすごく相性の良い見せ方ですね。




20130529b.JPG

日本のサイトではありませんが、おなじみ任天堂のマリオカートのサイトです。
横スクロールになっていますが、マリオカートを表現していてこちらも相性が良い使い方ですね。


α CLOCK

20130529c.JPG


SONYの隠れたWebサイト。
世界各地の写真を使い、音楽も流しています。




"簡単にまとめ"

・パララックスは技術が必要
・スクロールしたら背景も動くやつ
・相性の良い使い方をしましょう

と、すごく簡単にまとめるとこんな感じでしょうか。
クリエイターとよく相談して使いましょう。






最後に、この記事の最初の日本代表ってなに?って思われた方もいるかもしれません。

答えはこのサイトもパララックス使ってますヨ、ということです




Webコンサルタント 佐藤司 →facebookアカウント別ウインドウリンク




trackbacks

trackbackURL:

Recent Entries

  1. 【あなたにピッタリのサービスがわかる】スマホでお得にエンタメ動画を楽しもう~全ての動画配信サービスを視聴してみた!~
  2. 個人の居酒屋もカフェもレストランもクレジットが安価に簡単に導入できる~ビジネスチャンスが広がる"モバイルクレカ"比較まとめ~
  3. 驚異の6秒動画プロモーション「Vineを活用した8つのキャンペーン事例」をご紹介!
  4. "スモールビジネス"LINE@活用法~PR戦略成功事例をご紹介!~
  5. 企業の存続危機に発展するかも!?Twitter炎上事例からわかるリスクの実態とその対策
  6. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~6/6
  7. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~5/6
  8. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~4/6
  9. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~3/6
  10. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~2/6