パララックスサイト構築

パララックス効果はサイトを深く印象づける

パララックスはかつてJavaScriptやJ Queryの実装など手間がかかるものでしたが、Bootstrap4 対応Mobiriseを使えば誰でも簡単にこのようなパララックスエフェクトを取り入れることが出来ます。

パララックスサイトのメリット

パララックス/Parallaxとは英語で視差効果をさします。手前の画像と奥側の背景画像に奥行きのある構造を見せることで、遠近差を演出し、訪問者の記憶に残る印象を与えることが出来ます。
スクロールに合わせて、背景画像だけ速度を変更することで奥行きのある立体的な空間を演出することができます。パララックス効果は一時的なブームではなく、Webデザインのスタンダートにもなってきています。

パララックスの導入でサイトに先進的な印象を与えることができるのはもちろんのこと、アニメやタイポグラフィーも併用してアイデア次第で遊びごごろにあふれたサイトを構築することが出来ます。
パララックスサイトのメリットは多数挙げられますが、主に以下のようなメリットを享受できます。

印象に残る

LP一枚ページの構成であれば非常に単調な印象となります。パララックスを導入するとユーザ体験が広がり、印象に残るサイトになります。

先進的なイメージ

最新のWebデザインを印象づけることが出来ます。新商品や製品、サービスのPRにはうってつけの効果、エフェクトになります。

ストーリー性を持つ

パララックスは、商品紹介に最適なエフェクトです。順序立てて製品の特徴を紹介したり工程を見せたりするのに大変効果的です。

スクロールにつながる

何よりスクロールにつながります。ボタンクリックやスクロールの楽しさがあるので、訪問者は能動的にページ内を回遊してくれます。

ラウンド画像効果

画像をカーブさせたラウンド処理を入れることで、通常は見逃しがちな画像にも注目してもらうことが出来ます。スマートフォン閲覧では画像はスキップして処理されます。

その他のパララックス効果

テキストエリア、画像、背景画像の３つを組み合わせたパターンも簡単に作成可能です。モバイル端末でもデスクトップ同様に処理されるパララックス効果です。

フォーム付きパララックス

フォーム付きパララックスでは、訪問者アクションを促しやすくなります。

製品を効果的にPR

mobiriseを使えば背景画像をゆっくりと動かすエフェクトで製品を引き立てることが可能です。モバイル端末で見るとより効果の面白さがわかります。

ダウンロードアクション

ダウンロードアクションもパララックスで。
単調になりがちなアクションボタン設置も、資料のイメージ等を一部を動的に見せることで訪問者のアクション誘発につなげます。

印象的なフル画面パララックス

スタンダードかつインパクト抜群のフル画面パララックス。
ヘッダーやイントロ部分で効果を発揮します。

チーム紹介にもパララックスを

単調になりがちなスタッフ紹介もパララックスで処理すると、格段に印象的になります。

クライアント紹介も動的なエフェクトで

クライアントロゴの背景で波立つようなエフェクトはより訪問者の印象に残るコンテンツとなります。

テキストを読みやすくする透過処理

モビライズならオーバーレイ、透過処理もかんたんに

画像によっては背景色のコントラストにより、どのテキスト色を選択してもテキストが読みづらくなる場合があります。
この場合設定からOverlay（オーバーレイ）をONにし、お好みの色を重ね合わせ処理することでテキスト読みやすくなります。

一般的には黒を敷きOpacity（透明度）を調整してテキストの視認性を確認します。重ね合わせる色によっては画像の印象が大きく変わり、変化を楽しむこともできます。
パララックス効果のさらなるエフェクトとしてオーバーレイにトライしてみましょう。