パララックスとは？スクロール効果を取り入れるメリットとポイント
更新日 2024年2月19日（公開日 2015年11月27日）
パララックススクロールは、根強い人気のある Web デザイン手法の一つです。この技術を使うと、前景と背景が異なる速度で動くことにより、深みのある動的なデザインが生まれます。
では、パララックススクロールを導入するにはどうしたらよいのでしょうか。この記事では、パララックスの定義や効果的に使用するポイントを解説し、事例や、無料 HTML テンプレートを紹介します。パララックス効果が簡単に導入できる、ウェブデザインツールをつかって、さっそく導入してみましょう。
＼思い通りのデザインをノーコードで実現／
目次
パララックスとは？
パララックス・スクロールというと難しく聞こえますが、実はとてもシンプルで簡単な動きを指す言葉です。レイヤーになっている背景を別々の速度で動かし、後ろの画面を、前の画面よりゆっくり動いているように感じさせて、立体感を与えることで、サイトにダイナミックな印象を与えることが可能になります。Wix ではパララックス・スクロールをページの背景、もしくはストリップ(画面幅のボックス)に追加できます。
パララックスに向いているサイト
どんな Web サイトでもパララックスを使用できますが、抜群に相性がいいのは縦長にスクロールするページです。サイト訪問者の感覚を刺激し、スクロールという操作自体を楽しんでもらうことができるからです。また、縦長サイトでストーリー仕立てにすることも可能です。
おすすめ関連記事▶︎ Webデザインとは？初心者が抑えるべき基礎とコツを解説
パララックスを効果的に使うためのポイント
01. より強調したい箇所に絞って使用
甘いものを食べすぎると毒になるように、パララックスも使いすぎると何を伝えたいのかが曖昧になり、サイトを台無しにしてしまいます。パララックスはあなたの Web サイトでもっとも強調したい箇所にのみ使ってください。訴求ポイントを強調することで、訪問者を混乱させずに、ちょっとしたサプライズを提供できます。
例えば、ストリップにパララックスを入れると、ページの中で印象的な部分が際立ち、効果をより高めることができます。
02. サイトの訪問者にストーリーを語るような気持ちで
パララックスはページをめくるように自然にストーリーを語ることが可能で、訪問者の関心を徐々に惹きつけることができます。次に何が起こるのかと訪問者が期待すると、あなたの Web サイトをスクロールし続けてくれ、サイトへの滞在時間が自然に増えたり、コンテンツを繰り返しチェックしてもらうことへと繋がります。
訪問者をさらに魅了したい場合には、パララックスに加え、背景に動画を使用してもいいでしょう。
03. コンテンツを際立たせる
パララックスを施した背景の上に文字を加えれば、文字が浮かんでいるように見えることはご存知ですか？ もし Web サイトに情報をたくさん含めたい場合には、ストリップに一番強調したい文章を書いてください。このとき、読みやすい配色になっていることも確認してください。
上記のポイントを押さえた上で、あなたのサイトに最適なパララックスの使い方を見つけてください。
パララックスを活用しているWixサイト事例
以下に、Wix を使用して作成され、パララックスを駆使した Web サイトの例をいくつかご紹介します。ほかにも Wix ユーザーによって作成されたウェブデザインが見たい場合は、Web デザインの参考事例も参考にしてみてください。
01. Toru kn
日本を拠点として活動されているアーティスト、Toru kn のポートフォリオ・サイトです。モノクロデザインで、作品が映えるシンプルな Web サイト でありながら、パララックスエフェクトにより、ページをスクロールするごとに異なる作品が表示され、動きのある美しいポートフォリオサイトになっています。
02. Nolan Omura
ハワイ在住の写真家・映像作家、Nolan Omura の Web サイトでは、水中写真の魅力をさらに引き立てるためにパララックスを利用しています。ページをスクロールするごとに、生命感に溢れる海の生物の写真が次々と現れます。
03. Ampersand（アンパサンド）
壮大な自然のロケーションで撮るラスティックフォトのウェディングフォト・スタジオ、Ampersand（アンパサンド）の Web サイトです。クールでカッコいい、おしゃれなウェディング写真を掲載しています。ページをスクロールすると、芝生を歩く新郎新婦の写真がまるで動画のように見えます。
04. Ivy Chen
デザイナー兼イラストレーターの Ivy Chen が公開している Web サイトは、スクロールすると、イラストが実際の作品の写真へと変化していく、ユニークなデザインです。
05. Industrial Jewellery
Hila Rawet Karni のジュエリーサイトは、パララックススクロールを使ってユニークなビジュアルを生み出しています。画像とテキストを異なる速さで動かすことで、スクロールするたびに、新しいページが現れていくかのようです。
06. SUNPEDAL さんぺだる
ビーガンフード・クリエイターとして活動されている、SUNPEDAL の Web サイト です。背景には、ビビッドで色彩豊かな食事の写真が掲載され、スクロールすると背景透過のロゴがページ上部に流れていくといった、おしゃれで目を引くデザインになっています。
07. Karlie Kloss
洗練されていてすっきりしたデザインのこの Web サイトは、スーパーモデル、 Karlie Kloss のモデリングポートフォリオです。Web サイトは、白、グレー、黒というシンプルなテーマカラーによって、たっぷりとしたホワイトスペースと共に、上品で高級感のある印象です。
アクセントカラーとしてピンクが使用されており、良いコントラストを生んでいます。そしてパララックススクロールや動画を利用した動きのある Web デザインにすることで、印象的なポートフォリオサイトになっています。
Wix でパララックス・スクロールを追加する方法
Wix でパララックス・スクロールを追加するには、色、画像、またはビデオの背景を持つストリップを使用します。複数のストリップを組み合わせることで、リッチな効果を実現できます。
ストリップでパララックス・スクロールを追加する方法
エディターで、左のメニューから「追加」をクリックし、「ストリップ」を選択します。
「ストリップの背景を変更」をクリックします。ここで背景を、選択した色、画像、またはビデオに変更できます。
ストリップの背景設定で、「スクロール効果」の下から希望の効果（パララックス、リベール、ズームイン、またはフェードイン）を選択します。
プレビューモードで効果を確認し、必要に応じて修正します。
背景画像をパララックス・スクロールに設定する方法
エディターで、ページ背景を変更する「ページ背景を変更」をクリックします。
背景画像の設定を行うには、画像の上にある「設定」をクリックします。
「スクロール効果」の下で、「パララックス」を選択します。
Wix のパララックス・スクロールテンプレート
おすすめのパララックス・スクロールを搭載した、無料の HTML テンプレートを紹介します。デザインのインスピレーションとしてや、お好きなデザインをカスタマイズしユニークなホームページの作成にお役立てください。
この Eコマースサイトのテンプレートは、カクテルの販売だけでなく、ジュエリー販売やインテリアショップの EC サイトとしても応用できるでしょう。おしゃれでユニークなネットショップを作成したい方におすすめです。
この HTML テンプレートは、複数のレッスンを提供するスクーバダイビングビジネスに必要な機能が豊富に搭載されています。コースの予約機能や、Googleと連携されたビジネス所在地のマップ、そして質問のお問い合わせを受け付けることができるチャット bot など、サービスを提供するために活用したい機能をぜひお試しください。
人気のある、クレイモーフィズムを採用したこの Web サイトテンプレートは、ゲーム制作会社向けに開発されました。配信しているアプリのダウンロードリンクの掲載だけでなく、会社ホームページとして、採用情報や会社の概要、ニュースレター登録フォームなど、機能的なホームページとしてデザインされています。
よくある質問
パララックス・スクロールの最適な使用法は何ですか？
パララックス・スクロールは、適度にかつ戦略的に使用することが最も効果的です。特定のムードや雰囲気を作り上げたり、ページの特定の要素を強調する効果があります。パララックス・スクロールは Web サイトのすべてのページで使用しても効果がなく、サイトのナビゲートが困難になるような使い方は避けましょう。
パララックスを避けるべき理由とは？
パララックス・スクロールにはどのサイズの画像を使用すべきですか？
まとめ
パララックス・スクロールは、Web デザインに魅力と深みを与え、訪問者に魅力的なブラウジング体験を提供する便利な Web デザイン効果です。Web デザインの世界で新たな可能性を探求し、クリエイティブなプロジェクトに取り組む際は、パララックス・スクロールを活用してみてください。
＼全世界ユーザー数2億人以上／
Wix とは？
Wix は、ノーコードでフルカスタマイズが可能なウェブサイト作成プラットフォームです。サイトを構築し、ビジネスを成長させるための強力なツールを提供します。今すぐ無料で Wix のホームページ作成ツールをお試しください。
編集者： Miyuki Shimose
ブログ コンテンツマネージャー
