Loading...
  • 0k
  • 0
Wix でウェブデザインしよう \ 2015年11月27日

パララックス・スクロールで記憶に残るかっこいいサイトを作ろう

この週末、かっこいいホームページを作りたいと思っている方!パララックス効果を使ったホームページを作ってみましょう。パララックス効果という言葉を初めて聞くという方もいらっしゃると思いますが、そんな方でも知らずにパララックスなどのスクロールエフェクトを使っているホームページを見ている可能性はかなり高いと思います。

Wixの新エディタでは、3Dのような奥行きや遠近感を与えることができるパララックス効果をホームページに簡単に追加できるようになりました。まだ使ったことがない方や、効果的な使用法が分からないという方のために、今回はパララックスの魅力や使い方のポイントをご紹介したいと思います。

パララックス・スクロールとは?

パララックス・スクロールというと、難しく聞こえますが、実はとてもシンプルで簡単な動きを表した言葉です。レイヤーとなった背景を別々の速度で動かし、後ろの画面を、前の画面よりゆっくり動いているように感じさせて、立体感を与えることで、サイトにダイナミックな印象を与えることができます。Wixではパララックス・スクロールをページの背景、もしくは、ストリップ(画面幅のボックス)に追加することができます。

パララックス・スクロールに向いているサイト

どんなホームページでもパララックス効果を使うことはできますが、抜群に相性がいいのは、縦長にスクロールするページです。サイト来訪者の感覚を刺激し、スクロールという操作自体を楽しんでもらうことができるからです。また、縦長サイトでストーリー仕立てにすることも可能です。

では、実際にパララックス・スクロールを使ったサイトを見てみましょう。

La Totalite>>

東京スカイツリー>>

Kuppa Coffee

使い方のコツ

より強調したい箇所に絞って使用

甘いものをあまり食べすぎると毒になるように、パララックス効果も使いすぎると何を伝えたいのかが見えにくくなり、サイトを台無しにしてしまいます。パララックス効果はあなたのホームページでもっとも強調したい箇所にのみ使ってください。訴求ポイントを強調することで、訪問者を混乱させずに、ちょっとしたサプライズを与えることができます。

例えば、ストリップにパララックス効果を入れれば、ページの中で印象的な部分が際立ち、効果をより高めることができます。

サイトの訪問者にストーリーを語るような気持ちで

パララックス効果はページをめくるように自然にストーリーを語ることができるので、訪問者の関心を徐々に惹きつけることができます。訪問者に次に何が起こるのかと期待を持たせることで、あなたのホームページをスクロールし続けてくれ、自然にサイトへの滞在時間が増えたり、繰り返しコンテンツをチェックしてもらうことができます。

さらに訪問者を魅了させたい場合には、パララックスに加え、動画背景を使ってみてください。

コンテンツを際立たせる

パララックス効果を施した背景の上に文字を加えれば、文字が浮かんでいるように見えることはご存知ですか?もし情報をたくさんホームページに含めたい場合には、ストリップに一番強調したい文章を書いてください。きちんと読みやすい配色になっていることも確認してください。

上記のポイントを押さえた上で、ご自身で色々試して頂き、あなたのサイトにあったパララックス効果の使い方を見つけてください。

Wixサイトにパララックス・スクロールを取り入れる方法:

1. エディタ左の背景をクリック。
2. ページ背景プレビュー上の設定をクリック。
3. スクロールエフェクトの下にあるパララックス(視差効果)ボタンをクリック。

パララックス・スクロールWixの新しいテンプレートを使い、早速パララックス・スクロールをサイトに取り入れましょう!

パーソナルトレーナー>>

パーソナルトレーナー

フィットネススタジオ>>

Fitness Studio

ピザレストラン>>

ピザレストラン

タトゥーショップ>>

タトゥーショップ


今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

Wixブログを購読 \  

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい