デジタルマーケティングやデザイン・開発に関する情報やセルリアに関するトピックを更新。
運営メディアのピックアップコンテンツ、外部サイトへの寄稿記事なども公開しています。

ビジネスを成功へと導くWeb制作・インターネット広告・コンサルティング

Search

サイト内検索

実務でそのまま使えるパララックスの作り方(サンプルコード付き)

更新:2023年09月14日 カテゴリ: デザイン・開発

みなさんこんにちは!エンジニアの高澤です! 今回はリッチなスクロールの動きを実現するパララックスを実装する方法について解説したいと思います。

パララックスとは

パララックスとはウェブデザイン手法の一つで、ページを下や横にスクロールしたときに特定の要素や一部分を異なる異なる速度で動かす表現手法のことをいいます。

一般的な要素やテキストが固定されたぺたっした印象のページより立体感を演出することができ、リッチな表現を実現できます。

例えば具体的に下記のようなものがパララックスといえます。

背景とページ上の要素をそれぞれ独立して動かすことで奥行きを感じさせる表現を作り出すことができます。 これにより、閲覧しているユーザーの興味深く引き込まれるようなものになります。

パララックスののメリットとは

パララックスはさまざまなメリットが考えられます。

パララックス自体非常にリッチでインパクトのある表現技法なので、

視覚的なインパクトを表現できる

パララックス効果はウェブページにインパクトのある視覚的要素を実装することができます。

背景と前景の要素がそれぞれ違う速度でスクロールすることで、奥行き感や立体感を演出することでき、ユーザーへ注意を惹きつけることができます。

人間は動くものに無意識に注目してしまう習性があるため、その習性を利用してパララックスをうまく使うことで非常にインパクトのあるウェブページに仕上げることができます。

コンバージョン(CV)率の向上

滞在時間が伸びる可能性があります。 それと同時にお問い合わせ導線などまでユーザーの目線を惹きつけてクリックしてもらうことで、コンバージョン率が向上する可能性が高まります。

ページにストーリー(物語)のような構成を実装できる

パララックスによって下にスクロールすることによって紙芝居やパラパラ漫画のような視覚的効果を実装できるため、例えばブランドサイトや幼児向けの絵本やアニメのPRサイトなどに応用して実装することができます。

ブランドアイデンティティの強化に繋がる

パララックス効果によってサイトのページに独自性が生まれ、ブランド価値をより伝えやすくすることができます。

パララックス:パターン1

まず最初にパララックスとして基本的なレイアウトのものをご紹介いたします。

背景に固定で一枚の画像を配置させてスクロール時の間にコンテンツを挟んでおります。

CSS自体はbackground-imageプロパティでdivタグに背景画像を設定し、background-attachment: fixed;でスクロール時に固定されるようにしております。

実務でお使いいただく場合は下記コードを一旦すべてペーストしていただき、画像のURLやHTMLのテキストや構造、不要な記述の削除などお好きな形でカスタマイズしてください。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

パララックス:パターン2

こちらはパターン1の応用として、HTMLにあるコンテンツ部分と背景画像が反転したものになります。

基本的なHTMLやCSSの記述にさほど差はありませんので、パターン1と同じ感覚でお使いください。

実務でお使いいただく場合は下記コードを一旦すべてペーストしていただき、画像のURLやHTMLのテキストや構造、不要な記述の削除などお好きな形でカスタマイズしてください。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

パララックス:パターン3

パターン3では下にスクロールするたびに背景画像が切り替わる動きを実装しております。

CSSではbackground-imageプロパティで5つ背景画像を設定し、それぞれの間にテキストコンテンツを配置しております。

実務でお使いいただく場合は下記コードを一旦すべてペーストしていただき、画像のURLやHTMLのテキストや構造、不要な記述の削除などお好きな形でカスタマイズしてください。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

パララックス:パターン4

パターン4では、下にスクロール時に何枚もの画像が途切れなく表示される実装をしております。

それぞれ画像が変わるようになっており、全幅の画像が次々に表示されるためインパクトのある表現が可能です。

実務でお使いいただく場合は下記コードを一旦すべてペーストしていただき、画像のURLやHTMLのテキストや構造、不要な記述の削除などお好きな形でカスタマイズしてください。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

まとめ

パララックスの作り方の解説は以上になります。

今回はパララックスとは?からパララックスのメリットなどの解説を含めサンプルコードを掲載いたしました。 実務でパララックスの実装を検討しているウェブ制作のプレースホルダーの方のために参考になるように構成いたしました。

当記事ではHTMLとCSSでパララックスの動きを実装したサンプルコードを掲載いたしましたが、いずれも実務などにそのままお使いいただける形となっておりますので、よろしければ繰り返しお使いいただけましたら幸いです。

更新:2023年09月14日 カテゴリ: デザイン・開発

現状のデジタルマーケティングに課題をお感じですか?

デジタルマーケティング施策やWebサイトの機能・デザイン等を見直される際は、ぜひお声がけください。 貴社のご状況やご要望に合わせ、アクセス解析から数値的な根拠を持って課題点の抽出と改善に向けての施策を無料にてご提案させていただきます。

お問い合わせ

CONTACT

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティングの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。
そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。
助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけではない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。
Web制作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。
だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではないでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。
私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。
運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティン[続きを表示する]グの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけでない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。Web制[続きを表示する]作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではな[続きを表示する]いでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

サイト情報

SITE INFO