皆さんはパララックスと言う、Web制作の現場で使われる演出方法について詳しく知っていますか？
パララックスはWebサイトにインパクトを持たせてユーザーの目を引くことができるので、キャンペーンサイトやプロダクトサイトなどでよく使われる手法です。
パララックスは随分前に流行ったWebの演出方法なので、「時代遅れなのでは？」「ユーザーを混乱させるのでは？」と思ってしまう方もいるかもしれませんが、最近ではサイト全体をパララックス仕様にするのではなく、ワンポイントでパララックスを採用することが主流になってきています。
今ではモバイル対応のWeb制作が当たり前になっているため、スマホユーザーにも配慮した演出と操作性のバランスが取れた実装が必要になっています。
そこで今回はパララックスを活用しているサイト事例と、パララックスの作り方について詳しく解説していきたいと思います。
パララックスとは何か
パララックス (Parallax) とは日本語に直訳すると「視差」と言う意味があり、Web制作をする場では「視差効果」と言う意味合いで使われます。
パララックスの主な使われ方としては、コンテンツをレイヤーのように切り分けて背景と手前とで、スクロールに合わせて別々の動きをさせるような場合に使われます。
言葉で説明しても分かりにいかと思いますので、以下の動画をご覧ください。
ビジュアルとコンテンツでレイヤーが切り分けられて、視差効果が生まれていることが分かるかと思います。
パララックスのメリット・デメリット
パララックスを使うことによって得られるメリットは、サイトに掲載する商品を視差効果を付けることによって立体的に見せたり、サイト全体にストーリ性を持たせることができるようになる点ですが、一方ではパララックスをすることによって文章が読まれずらくなったり、サイトの動きが重くなってしまったりなど、いくつかのデメリットも抱えています。
ですが、適切に使用する箇所を限定することができれば、むしろサイトのコンバージョンを上げることにも繋がるので実装ができるデザインの場合は積極的に盛り込んでいくと良いでしょう。
パララックスを活用したサイト事例
ここではパララックスを活用しているサイトの事例について紹介していくのですが、同時にパララックスのデメリットの部分にも触れてみたいと思います。
実際にパララックスが使われているサイトの事例を見ることによって、本当にプロジェクトに導入すべきかの判断が取りやすくなると思いますので、是非参考にしてみてください。
また、ここで紹介している事例以外にもパララックスが使われているサイトを簡単に検索できるサービスがありますので、気になる方は、そちらもご覧ください。
事例確認サービス
buddies (バディーズ)
buddiesのサイトではパララックスの演出表現がページ全体に使われており、売りの商品であるオンラインフィットネスのサービスを、より魅力的に見せることができているように感じます。
ただし、パララックス表現を多用しているため、お使いの環境によってはスクロール時にアニメーションの遅延などが発生するため、ユーザーが早々に離脱してしまう可能性が考えられます。
このように、パララックスは場合によってはユーザー体験を下げてしまう原因にもなりますので、ユーザーの利用デバイスも想定した開発が必要になるのです。
Swissdent
Swissdentは商品である、歯ブラシの画像を縦長にして、パララックスで見せることによって先進的でスリムなデザインを表現できているように感じます。
ただし、スクロールに対してのイージングが少しクセがあるため、ユーザーに不快感を与える場合があるので、パララックス実装をする時はイージングにも注意する必要があるでしょう。
また、スクロールした時にラップトップ環境だと商品画像が上半分や下半分だけ見える状態になってしまうので、大きめの画像をパララックスで動かす場合は、デバイスの解像度に合うように、しっかりとトリミングを行うと良いでしょう。
株式会社ユートピアアグリカルチャー
株式会社ユートピアアグリカルチャーのサイトでは、トップページのヘッダー部分にのみパララックス表現が使われており、イラストと合わせて奥行き感を出すことで、下部のコンテンツに繋がるストーリーや、ついついスクロールしたくなる雰囲気を作り出しているようです。
こちらのサイトでは、ECやブログのシステムも併設されており、トップページから訪れたユーザーがコンテンツを見てみたくなるように誘導して、購買へと繋げる自然な流れを作れているように感じます。
パララックス表現としては、少し物足りないと感じる方もいるかもしれませんが、ワンポイントで使うだけでもページの訴求力を上げることができることが分かります。
パララックスの作り方
ここからは、HTML・CSSのみでパララックスを作る方法について詳しく、解説していきます。
パララックスと聞くと、ライブラリの書き方を覚えたり、JavaScriptを沢山書いたりしないと実現できないと思う人もいるかもしれませんが、HTML・CSSだけでもかなり幅広い表現が可能です。
冒頭の動画でも少し紹介しましたが、あのような基本的なパララックスの作り方は特に簡単ですので、初心者の方は実装の参考にしてみてください。
実装結果を先に確認しておきたい方は、下のボタンを押してサンプルページをご覧ください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=960, initial-scale=1.0">
<meta name=”robots” content=”noindex,nofollow”>
<title>【パララックスとは】活用事例と作り方について解説｜デモンストレーション</title>
<!-- CSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<header>
<div class="mv_wrap parallax_wrap">
<div class="mv parallax_bg">
<div class="parallax_bg_content">
<h1>メインビジュアル</h1>
</div>
</div>
</div>
</header>
<main class="parallax_wrap">
<div class="section_wrap">
<section id="section_01">1つ目のセクション</section>
</div>
<div class="section_wrap">
<section id="section_02">2つ目のセクション</section>
</div>
<div class="section_wrap parallax_bg">
<section id="section_03" class="parallax_bg_content">3つ目のセクション</section>
</div>
<div class="section_wrap">
<section id="section_04">4つ目のセクション</section>
</div>
<div class="section_wrap">
<section id="section_05">5つ目のセクション</section>
</div>
<div class="section_wrap parallax_bg">
<section id="section_06" class="parallax_bg_content">6つ目のセクション</section>
</div>
<div class="section_wrap">
<section id="section_07">7つ目のセクション</section>
</div>
<div class="section_wrap">
<section id="section_08">8つ目のセクション</section>
</div>
</main>
<footer>
<p class="copyright"><small>Copyright© WordPressサイトで稼ぐ技術</small></p>
</footer>
</div>
</body>
</html>
CSS
/* start reset */
* {
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
ul,
li {
list-style: none;
}
/* end reset */
/* start common */
.container {
width: 100%;
height: auto;
}
.parallax_wrap {
position: relative;
top: 0px;
left: 0px;
}
.parallax_bg {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.parallax_bg:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.25);
}
.parallax_bg_content {
z-index: 1;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
/* end common */
/* start header */
header {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: auto;
}
header
.mv_wrap {
width: 100%;
height: 600px;
}
header
.mv_wrap
.mv {
background-image: url("./parallax_bg_01.jpg");
}
header
.mv_wrap
h1 {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
font-size: 45px;
text-shadow: 1px 1px 3px #000;
transform: translate(-50%, -50%);
}
/* end header */
/* start main */
main {
position: relative;
top: 0px;
left: 0px;
padding: 80px 0px 100px 0px;
width: 100%;
height: auto;
background-color: #fff;
}
main
.section_wrap {
width: 100%;
height: auto;
}
main
.section_wrap:nth-of-type(3) {
background-image: url("./parallax_bg_02.jpg");
}
main
.section_wrap:nth-of-type(3)
section {
background: none;
}
main
.section_wrap:nth-of-type(6) {
background-image: url("./parallax_bg_03.jpg");
}
.section_wrap:nth-of-type(6)
section {
background: none;
}
main
.section_wrap:not(:last-child) {
margin-bottom: 80px;
}
main
.section_wrap
section {
margin: 0px auto;
width: 960px;
height: 600px;
line-height: 600px;
text-align: center;
color: #fff;
background-color: #202020;
}
main
.section_wrap
section:not(:last-child) {
margin-bottom: 40px;
}
/* end main */
/* start footer */
footer {
width: 100%;
height: 40px;
background-color: #3da9f4;
}
footer
.copyright {
line-height: 40px;
text-align: center;
color: #fff;
}
/* end footer */
作り方のポイント
ずらずらとコードを全文載せてしまいましたが、重要なポイントはHTMLにparallaxクラスを書く点と、数行のCSSを書くところだけです。
詳しく説明すると、「parallax_wrap」「parallax_bg」「parallax_bg_content」の3つのクラスを用意して、parallax_wrapクラスにはCSSで、「position: relative;」をかけて、parallax_bgクラスには「background-attachment: fixed;」で背景画像を固定して、parallax_bg_contentクラスでは文字が背景よりも手前に来るようにしているので、サンプルのようなパララックスを作れるようになります。
まとめ
今回は、初心者でも簡単に作れるパララックスの実装方法について解説してきましたが、いかがでしたか？
一見実装が難しそうに感じられるかもしれませんが、HTML・CSSだけで簡単に作れることが分かれば、プロジェクトに導入する敷居も下がったのではないでしょうか？
まずは、基本的な作り方を抑えた上で、オリジナルの工夫を施してみたり、JavaScriptでユーザーの操作に応じた高度な表現を加えてみても良いかもしれません。
それでは、皆さん良いWeb制作ライフを！
