ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

ユーザーの視覚と心に訴えかける、パララックスを効果的に使う事例とポイント

  • WEBデザイン

ページスクロールに合わせて様々な視覚要素を表現する「パララックス」の手法を取り入れたサイトが増えてきました。一時のブームを越え、ひとつの制作手法として定着しつつある感じがします。もしかしたら、そろそろうちのホームページでもどこかで使ってみたいなあ…などと、考え中の方もいらっしゃるのではないでしょうか?

そこで今回は、あらためてパララックスを使うことのメリットや注意点をまとめておきたいと思います。まだパララックスについてよく知らない……という方にもわかりやすいよう、最初に事例もご紹介しますので、ぜひ参考にしてください。

 

まずはパララックスの事例から

まず最初に、印象的なパララックスを取り入れたWEBサイトをいくつか見て行きましょう。

東京スカイツリー

東京スカイツリー

言わずと知れた東京の新名所・スカイツリーのWEBサイトは、パララックスの効果的な活用事例として有名です。ファーストビューだけを見ればオーソドックスなホームページのように見えますが、少しスクロールすると東京スカイツリーのタワーが表れ、そこから独特の世界観が始まります。

キャラクターの移動に合わせて、各階の案内情報が飛び出るようになっており、スクロールに伴って、スカイツリーの全貌を知ることができます。タワーそのものが存在感を持って迫ってくるような効果があり、タワーという構造物の特性とパララックスの手法が大変良く合う組み合わせです。国内のパララックスの優良な事例と言えるでしょう。

東京スカイツリー
http://www.tokyo-skytree.jp/

 

みほ幼稚園

みほ幼稚園

可愛らしいキャラクターが印象的な幼稚園のホームページです。ここでも、ちょっとしたパララックスが取り入れられています。スクロールすると、男の子の歩みに合わせて幼稚園を紹介するためのコンテンツが流れていきます。

また、これはパララックスではないのですが、向かって左側にあるメニュー選択も画面の切り替わりと共に変わっていくようになっており、従来ではあまり考慮されなかった、ちょっとした工夫が親切な設計になっています。

みほ幼稚園
http://miho-youchien.com/

 

Nikon 1 AW1

Nikon 1 AW1

カメラ・レンズメーカー、ニコンのダイレクト直販サイト「Nikon Direct」内の「Nikon 1 AW1」の製品紹介ページです。サイト限定のプレゼントキャンペーンのランディングページとして作成されています。

スクロール毎に画面が切り替わっていくというパララックスとしては王道的な手法で、製品の特徴を説明。効果的に機能紹介を行いながら、商品のブランドイメージを強く、スタイリッシュに訴求することに成功しています。

Nikon 1 AW1
http://shop.nikon-image.com/nikon1/nikon1aw1/

 

株式会社 菱健

株式会社 菱健

京都の京染呉服製造卸業の会社です。和を扱う業種でこういったモダンなデザイン手法が取り入れられているのは、新鮮です。情報の切り替わりが、画面上で襖を開けていくような表現で行われるようになっているのが、印象に残ります。

株式会社 菱健
http://www.hishiken.co.jp/

 

オロナイン

オロナイン

ロングセラー商品「オロナイン」のブランドサイトにも、パララックスが取り入れられています。スクロールしていくと、製品パッケージがくるりと回って解説が表示されていく構成で、実際の商品を手にしているかのような感覚の動きになっています。

また、メニューをクリックするとすぐ横に説明が表示されるようになっており、詳細情報もすっきりとまとまっています。

オロナイン
http://www.otsuka.co.jp/ohn/

 

パララックスのメリットと注意点

いくつか事例をご覧いただきましたが、これらを踏まえて、パララックスを使うことのメリットや注意点について考えてみましょう。

パララックスを取り入れるメリット

スクロールに合わせて、特徴的な演出が可能になるパララックス。その最大のメリットは、見る人が自然にスクロールしてくれるということです。WEBページは基本的には縦長になっており、せっかく情報を掲載しても途中で離脱されてしまうことも少なくありません。パララックスを上手く取り入れることができれば、ページをできるだけ下まで見てもらえるように促すことが期待できます。

また、表現の面白さでユーザーの気持ちを高めることができるのもパララックスの利点だと言えます。ブランドサイトでのブランディングや商品紹介ページでのユニークな訴求、キャンペーンページでの話題づくりなどにパララックスを上手く取り入れていけば、大きな効果が期待できます。

事例に挙げたスカイツリーのサイトがいい例で、もしもパララックスを使わなかったら、ただ縦長の退屈なサイトになっていたはず。動きを付けることで情報を効果的に伝え、楽しさを演出して、見る人の「行ってみたい」という気持ちを高めることに成功しています。

 

パララックスを使う上で考慮すべき点

メリットも多い一方で、パララックスについては批判的な意見もあることを書き添えておきたいと思います。そのひとつは、多くの情報が一つのページに集約されるために、読み込みが遅くなってしまいがちだということです。そこがネックになってしまうと、パララックスを使っての気持ちの高揚どころか、マイナス評価になってしまいかねません。重くならないように工夫する必要があります。

スマートフォンへの考慮も大切です。依然としてパソコンサイトを中心に考えてしまいがちですが、既にスマホでの閲覧の方が多いサイトも珍しくなくなってきています。スクロールというシンプルな操作ですべての要素を動かすパララックスでは、利用環境によって操作性が悪くなったり、利用できなくなったりする場合もあります。その確認や対策についても、あらかじめ考えておくことが大切です。

また、当たり前のことのようですが使いどころを考えることが重要。ただ、動きを付けたり面白くすること自体を目的にしてしまったのでは意味がありません。あくまでもユーザーのためのサイトであるという原点を忘れず、伝えたい内容に合わせて、効果的な使いどころを考えるようにしていきましょう。

 

今回のまとめ

  1. パララックスには、スクロールを促しページを下まで見てもらえる効果がある。
  2. 表現の面白さでユーザーの気持ちを高める効果が期待できる。
  3. パララックスを使う時にはデメリットも考慮し、スマホなどの閲覧環境への配慮も必要。

パララックスを使ったWEBサイトは増えてきましたが、残念ながら、目的がよくわからないものも見うけられます。パララックスを使ったサイトづくりは楽しいため、そのムードに流されてユーザーのニーズや使い勝手などの点が忘れられてしまいがちです。しかし、ユーザーの視点で考えるのがホームページ制作の基本。パララックスを使う時にもそのことを忘れず、効果的な使い方をしていきたいですね。

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」