立体的に見えるデザイン手法「パララックス」とは

 立体的に見えるデザイン手法「パララックス」とは

Webデザインにおけるパララックス(Parallax)とは、スクロールに合わせて複数の画像レイヤーを異なるスピードで動かすことにより、視差効果を利用して立体的に見せるテクニックのことです。パララックスサイトはインパクトが大きいため、サイト来訪者数をアップしたり、記憶に留めてもらいやすくなったりします。

今回は、視差効果を利用したパララックスサイトの作り方や作成時の注意点、パララックスサイトの効果についてご紹介します。

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

目次

パララックスサイトの作り方

パララックスサイトの作り方

パララックスサイトの作り方には、さまざまな方法があります。今回は、パララックスサイトの仕組みを理解するため、jQueryを使用した簡単なパララックスサイトの作り方をご紹介します。

パララックスサイトの基本的な考え方は、scrollTop()で取得したスクロール量に合わせて視覚要素を動かすことです。
以下のプログラムでは、実行すると黄色の星印が画面から遠ざかるような軌道を描きます。scrollTop()で取得したスクロール量に合わせて、角度angleと半径radiusを変化させています。

なお、jQueryを利用する場合は、Google Hosted Librariesのファイルを参照すると、ライブラリをダウンロードする手間が省け、便利です。

<!doctype html>
<head>
<meta charset="UTF-8">
<title>星の回転</title>
<style>
body {
 height: 10000px;
}
#star{
 font-size:300%;
 color:Yellow;
 position:fixed;
 left:50%;
 top:300px;
}
</style>
</head>
<body>
<p id="star">★</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
 var pos = $("#star").offset();
 $(window).scroll(function() {
 var st = $(this).scrollTop();
 var angle = st; angle %= 360;
 var radius = st / 20;
 var radian = angle*(Math.PI/180);
 $("#star").css("left", pos.left + radius*Math.cos(radian));
 $("#star").css("top", pos.top + radius*Math.sin(radian));
 });
});
</script>
</body>
</html>

【パララックスの利点】ユーザーエクスペリエンス向上

ユーザーエクスペリエンス向上

パララックスサイトのメリットは、単純な仕組みでありながらユーザーに好印象を与えられることです。 ワンクリックで自動的に流れる動画とは異なり、パララックスサイトのユーザーは自分のペースでスクロール操作を行ない、視差効果を楽しむことができます。自分のペースで楽しみながらスクロール操作をすることは、次の情報を閲覧するモチベーションにつながるでしょう。

1ページあたりの情報量が多くページの遷移による待ち時間がないため、ユーザーがサイトに意識を集中しやすいこともパララックスサイトのメリットです。ユーザーがWebサイトに留まる時間を長くさせたり、繰り返しコンテンツを閲覧させたりする効果があります。

またユーザーエクスペリエンスを高めることにより、商品やサービス内容がユーザーの記憶に残りやすくなります

【デザインの注意点】サイトが重くなり過ぎないように

サイトが重くなり過ぎないように

視差効果を利用したWebサイトは魅力的で、多くの情報や画像を取り入れることができますが、制作には注意点があります。パララックスサイトを制作する際は、なるべくサイトが重くならないように注意してください。スクロールでサイト内の要素を動かすため、ユーザーの利用するデバイスや環境によっては動作速度が低下したり利用できなかったりすることがあります。

また、情報を詰め込み過ぎることにより、本当に伝えたいメッセージが目立たなくなるケースもあります。各要素の必要性を考え、適切な情報量でコンテンツを組み立て、Webサイトの動きがユーザーに不快感を与えていないかチェックしてください。サイトの内容はもちろん、表現についても、クライアントやデザイナー、企画スタッフとの打ち合わせを密にすることが大切です。細かいニュアンスや動き、イメージの表現方法に関する認識を正確に共有することにより、スムーズに作業を進められます。

[PR] 「このまま仕事続けていていいのかな...」そんな不安をマンガで解決!『マンガでわかる! インターネット・アカデミー』

おわりに

今回はパララックスサイトの作り方についてご紹介しました。パララックスは単純な仕組みではありますが、Webサイトにストーリーと魅力を与えることができます。パララックスサイトを制作する際は、ユーザーに「最も伝えたいことは何か」を明確化し、商品やサービスの特徴を分かりやすく伝えられるように工夫することが重要です。ユーザーの利便性を考慮し、Webサイトに過度な負荷をかけていないか、という点に関しても注意してください。

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム