パララックスデザインの作り方は？HTML/CSSによる作成方法と3つの効果

監修者

最終更新日：2023年08月22日

この記事で解決できるお悩み

パララックスデザインとはどういうもの？
パララックスデザインの効果は？
パララックスデザインのHTML／CSSによる作成方法って？

「パララックスデザインの作り方を知りたい」とお悩みの方、必見です。パララックスデザインとはWebサイトを華やかにするための演出で、Webサイトを訪れたユーザーに印象づけの役割を果たします。

この記事では、Webデザインに携わる方へ向けて、パララックスデザインの作り方を解説します。この記事を読み終わった頃には、HTML／CSSによるパララックスデザインの作成方法がわかり、自社サイトに取り入れる準備ができるでしょう。

Webデザインギャラリーサイト22選！Webサイト作りのコツも解説

ホームページ制作にお困りではありませんか？

もしも今現在、

どの制作会社に依頼したらいいかわからない
実績豊富な会社に依頼したい
名刺代わりにホームページがほしい

上記のようなお困りがありましたら、比較ビズへお気軽にご相談ください。比較ビズでは、複数のWeb制作会社に一括で見積もりができ、相場感や各社の特色を把握したうえで業者を選定できます。見積もりしたからといって、必ずしも契約する必要はありません。まずはお気軽にご利用ください。

【無料で利用可】複数業者から見積もりを貰う

ホームページ制作・デザインに対応できる業者を一覧から探す

パララックスデザインとは？

参照元：https://thewordpressninja.com/parallax-web-styling/

パララックスデザインとは、Webサイトを華やかにするための演出の1つです。ブラウザをスクロールすると手前と背景とで変化するスピードが変わることで奥行き感を持たせられ、見ている人の関心を引き付けられます。ここでは、パララックスデザインのメリットやデメリットをご紹介しましょう。

パララックスデザインの効果やメリットは？

ここでは、パララックスデザインの効果やメリットをご紹介します。一言で言うと、Webサイトの閲覧者の目を引けるのがメリットですが、その詳細について解説しましょう。

効果(1) 先進的なイメージを与えられる

パララックスデザインのメリットの1つは、閲覧者に先進的なイメージを与えられる点です。立体感のあり奥行きのあるデザインを表現できるため、Webページが先進的なイメージになります。

その結果、企業のWebサイトであればその企業が先進的で、洗練されている印象を与えられるでしょう。企業のWebサイトは、必要な情報が記載されているのはもちろんですが、印象やデザインの良さも求められます。

閲覧者に対して先進的な印象を与えられる点は、パララックスデザインのメリットの1つです。

効果(2) 重要な情報を印象付けられる

パララックスデザインを利用することで閲覧者に、

「重要なメッセージ」
「訴求したいポイント」

などを印象付けられる点がメリットです。文字だけでなくデザインや画像、フォントなどを組み合わせ視差効果を出すことで、閲覧者に強い印象を残せます。

例えば「企業のイメージ画像」や「重点商品の画像」などをパララックスデザインにすると、閲覧者に印象付けられるでしょう。

特に、デザイン会社やホームページ制作会社など、デザイン技術やホームページ作成技術をサービスとして提供している企業に向いています。パララックスデザインを活用してアピールしたい情報を表示することで、閲覧者に良い印象を与えましょう。

効果(3) ページへの滞在時間を長くできる

パララックスデザインを活用することで、閲覧者が視差を利用した変わった動きに興味を持つことで、Webページへの滞在時間を長くできます。閲覧者はパララックスデザインをスクロールすることで、

「次はどのように動くのか」
「次は何が表示されるのか」

などの興味を持つことが期待できるでしょう。むやみにパララックスデザインを乱用しては逆効果ですが、印象付けたい部分でパララックスデザインを効果的に活用することで、ページの滞在時間を長くできます。

パララックスデザインの注意点やデメリットは？

効果やメリットのあるパララックスデザインですが、注意点やデメリットもあります。ここでは、パララックスデザインを実装する前に知っておくべき注意点を2つご紹介しましょう。

注意点(1) Webサイトの表示が遅くなる

パララックスデザインをWebページに実装した場合、そのWebページの表示が遅くなる可能性があるのです。パララックスデザインをWebページに実装するには、JavaScriptというプログラミング言語を使用します。

閲覧者がWebページのパララックスデザインを表示させる際に、JavaScriptの処理に時間がかかるため、Webページの表示が遅くなる場合があるのです。

ページの表示速度が遅いと、閲覧者がWebページから離脱してしまうだけでなく、SEOとしてもデメリットがありますので、パララックスデザインは特に訴求したい部分だけに利用するなど、多用しないことがポイントとなります。

注意点(2) 実装に時間やコストがかかる

パララックスデザインを実装する場合は、そうでない場合に比べて複雑なコーディングを必要とします。自前で作成する場合は、その分手間と時間がかかります。外注する場合でも、制作されたい要件によっては時間とコストが追加で発生するでしょう。

パララックスデザインを導入するには、基本的にPCとスマホの両方のデザインを作る必要があるため、その分の時間やコストがかかります。

一般的なWebページであれば、レスポンシブデザインを使うことで、PCとスマホで同じHTMLやCSSで表現が可能です。パララックスデザインの場合は、基本的にPCとスマホそれぞれでコーディングする必要があるでしょう。

パララックスデザインの作り方について解説

パララックスデザインは一般的にJavaScriptというプログラミング言語を使用すると説明しましたが、HTMLとCSSで簡単に実装できるパララックスデザインも存在します。 JavaScript、jQueryを使った実装を考えている方も、HTMLとCSSでどのように見せることが可能か、その基本的な仕組みがわかるとより理解が深まることと思います。

そこで、HTMLとCSSだけで作れるパララックスデザインの作り方をご紹介します。

最低限のHTMLの作り方

まずは、HTML側の作り方をご紹介します。最低限のパララックスデザインを使えるようにするHTMLコードは以下のとおりとなります。

HTML側のコード

＜body＞
＜div＞画像A＜/div＞
＜div class="parallax"＞＜/div＞
＜div＞画像B＜/div＞
＜/body＞

パララックスデザインで表示させるのは1つの画像(class="parallax")で、その前後を「画像A」と「画像B」で挟み込むイメージです。

ブラウザで下にスクロールした際に、画像(class="parallax")だけは動かないように固定して表示されます。

最低限のCSSの作り方

次に、CSS側の作り方をご紹介します。パララックスデザインにおいて画像を固定するだけであれば、これだけのCSSで実現できます。

CSS側のコード

body,
html {
height: 100%;
}
div {
box-sizing: border-box;
height: 100%;
}
.parallax {
background-image: url('固定したい画像のURL');
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

ブラウザでスクロールしても固定したい画像が動かないように指定しましょう。ポイントは上記の「background-attachment」というプロパティです。このプロパティはスクロールした時に画像をどのように動かすかを設定できます。

デフォルトでは「scroll」になっており、ブラウザをスクロールすると、画像も一緒にスクロールされるでしょう。しかし値を「fixed」に設定することで、ブラウザをスクロールしても画像は動かないように固定できます。

CSS設定の補足

CSSで設定している他の3つのプロパティに関して説明します。

「background-size: cover;」
画像が画面いっぱいに広がるように設定していますが、pxや%でサイズを指定することも可能です。
「background-position: center;」
画像が中央に表示されるように設定していますが、左右上下に設定することもできます。
「background-repeat: no-repeat;」
画像を1つだけ表示し、並ばないように設定していますが、横や縦に画像を並べることも可能です。

上記のプロパティ値を適宜変更することで、パララックスデザインの画像部分を柔軟に変更できるでしょう。

ブラウザ別の動作

主要なブラウザであるChrome、Edge、Safari、Firefox、Operaでは、パララックスデザインは問題なく表示できます。

ただし、使用するパララックスデザインのプラグインによっては、PCのブラウザでは問題なく動作するが、スマホのブラウザでは動作しないなどの問題が発生する可能性があるでしょう。

パララックスデザインをWebページで実装した際は、PCのブラウザだけで表示を確認するのでなく、スマホのブラウザでも表示を確認すべきです。

まとめ

最近のWebサイトでは、パララックスデザインを導入しているページが増えていますが、最低限のコードの書き方さえマスターしておけば、自分自身でも十分に作成できます。

コードのテンプレートもインターネット上にたくさん存在しますし、WordPressでもパララックスデザインが使えるテンプレートもあります。それらを活用することで、簡単なパララックスデザインであればご自身でも作成できるでしょう。

しかし、高度なパララックスデザインを表現したい場合は、思うように実装できない場合もあると思います。

知り合いにHTMLやCSSに詳しい専門家がいなければ、比較ビズを活用するのがおすすめです。各方面の専門家がいて、パララックスデザインに詳しい人材に巡り合える可能性が高いでしょう。

監修者のコメント

株式会社セルリア

代表取締役佐藤靖将

大学卒業後、Webコンサルティング企業で2年ほどセールス兼コンサルタントに従事。その後フリーランスに転身し総合広告代理店、Webシステム開発会社、クリエイティブエージェンシーなどの企業で主にプロジェクトマネージャーとして顧客のデジタル関連プロジェクトを支援する。それらの経験から、総合的かつ一気通貫のデジタルソリューションを提供したいと考え株式会社セルリアを設立。以降、クライアントの課題解決に邁進する日々を送る。

詳しく見る

パララックスデザインとは、画面スクロールに合わせて各要素の動きが変わるデザイン表現です。パララックスデザインの登場はスマートフォンを使うユーザーの「フリック」の動きに対応するところから発生しており、スマートフォンの普及とともに利用が広まっています。パララックスデザインという言葉自体に馴染みがない方でも、そういったサイトは利用されている方がほとんどではないかと思います。

立体的な要素配置や、スクロールに合わせた動き、スピード感など、様々な要素を設計しデザインすることから、表現の自由度が非常に高いのが特徴です。パララックスというデザインカテゴリとして一言に語られるものの、実際に仕上げるデザインは千差万別と言えるでしょう。

このような特性から、特にオリジナリティを重視する場合や、見る人にインパクトを与えたい、メッセージや世界観を印象付けたいといった場合に使用が検討されます。

単に要素を並べるだけでなく、スクロールに合わせた動きをプログラムする必要性から、通常のサイトに比べると実装にかかる時間は長くなるのが一般的です。動きや要素配置など、平面的なデザインに比べると事前に設計すべき事柄が多いため、実装前にどのようなイメージに仕上がるかを入念に検討しておくとよいでしょう。