引用：https://themes.shopify.com/themes/parallax/styles/vienna
テーマ紹介の第3弾は「Parallax」です！
デザイン性が高く、その名の通り立体感や奥行きのあるUIが実現できる有料のテンプレートになります。
※パララックスとは：ユーザーのスクロール等の動作に応じて、複数のレイヤーにある要素をそれぞれ動かすことで視差を生み出し、立体感・奥行きを演出する手法
そんな「Parallax」の魅力はどのようなところか？おすすめの機能とは？について今回は触れていきたいと思います。
基本的なテンプレートの設定やまとめについては、【Shopifyテーマとは？】 Shopifyテーマについての記事投稿、はじめます！
をぜひ参考にしてくださいね！
この記事でわかること
- 「Parallax」ってどんなテーマ？
- 「Parallax」の特徴は？
- どんなカテゴリのストアにおすすめ？
「Parallax」ってどんなテーマ？
Parallaxの概要
上記のように、「Parallax」は有料テーマになります。有料テーマであることを踏まえ、このテーマを選択するか検討しましょう。
「Parallax」の特徴は？
ここからは、「Parallax」の特徴についてご紹介します。
「Parallax」には、大きく3つの特徴があります。
★パララックス効果を利用した表現
★一覧から商品をカートへ追加可能
★商品購入に必要な細かい機能が充実している
以下にそれぞれの特徴について書いてますので、検討材料としてチェックしてみてくださいね！
特徴①「パララックス効果を利用した表現」
デモサイトをスクロールしていくと、1番印象的に気が付くのがこの「パララックス効果」を使用したデザインと思います。
聞き馴染みのない言葉ではありますが、簡単にいうと『スクロールと同時に画像・テキストも動く』表現方法で、動きに奥行きがでるので、印象的なサイトとなります。
「Parallax」では、テンプレート名にもなっているように、この表現ができることが1番の魅力と言えるでしょう。
パララックスデザインにおけるメリットとして、
- 先進的でおしゃれなサイト表現ができる
- ストーリー立ててブランドアピールが可能
- ユーザーにスクロールしてもらいやすい
が挙げられます。
引用：https://themes.shopify.com/themes/parallax/styles/vienna/preview
動きがあるだけで、情報の強弱がつけられるので、画像やテキストをうまく利用し、ユーザーの興味を惹きつけましょう！
特徴②「一覧から商品をカートへ追加可能」
商品を一覧から閲覧しているとき、購入したい商品があった場合、その商品の詳細ページ→カートに追加、と商品詳細ページに遷移することが大半だと思います。
ただ、購入が決定している・何度も購入している商品に関しては、詳細ページの内容を見る必要がない場合もありますよね。
そんな時に、このクイックショップ機能があれば、スーパーで気になった商品を買い物かごにぽんぽんと入れる様な感覚でカートに追加が可能です。
一覧ページから遷移することがないので、ブラウザバック等で一覧に戻ることなく、商品をカートに追加することが出来ます。
※画像上：ポップアップにて商品紹介が表示画像下：右下の「＋」ボタンの押下でカートに追加
引用：https://themes.shopify.com/themes/parallax/styles/madrid/preview
引用：https://themes.shopify.com/themes/parallax/styles/aspen/preview
設定方法
①テーマ設定のクイックショップ部分を開いて、[クイックショップを有効にする]を有効にします。
②下記どちらかを選択
- アイコンスタイル
- ボタンスタイル
③ボタンスタイル（ポップアップ形式の場合）
テンプレートをカスタマイズすることが出来るので、クイックショップのモーダルウィンドウは、製品ページテンプレートのようにカスタマイズされています。ページセレクターを使用して[product（製品）]を開き、次にクイックショップを開き、設定しましょう。
引用：https://help.outofthesandbox.com/hc/en-us/articles/360050520194-Parallax-Quick-Shop-Template
上記画像は一例ですので、詳しくは下記ドキュメントを参照してみると、求めている機能が見つかるかもしれません。
https://help.outofthesandbox.com/hc/en-us/articles/360050520194-Parallax-Quick-Shop-Template
※英語サイトのため、翻訳して閲覧することをおすすめします。
特徴③「商品購入に必要な細かい機能が充実している」
利用できる機能に関してはテーマごとに異なるため、視覚的に理想のサイトを作ることと、ユーザーにとって使いやすい機能が揃っているかという観点でテーマの選定をしなければなりません。
「Parallax」には特徴①②で紹介したもの以外にもおすすめの機能があるので、下記参考にしてみてください。
理想のサイトを作るため、必要な機能があればぜひ「Parallax」を利用してみましょう。
おすすめ機能例
- 異なる雰囲気の4スタイルがある
- ヘッダーにドロップダウンメニューの設定が可能
- ポップアップでお知らせの表示が可能
- モバイル表示の場合でも必要部分のトリミングを防ぐことが出来る
参照：https://help.outofthesandbox.com/hc/en-us/articles/360050769054-Adjusting-the-Image-Focal-Point-in-Parallax
ポップアップイメージ
※画像：SP表示でのドロップダウンメニュー
どんなカテゴリのストアにおすすめ？
- 衣類とアクセサリー等アパレル
- インテリア用品
- 食品・飲料
先に述べてきたように、先進的なデザインと買い物のしやすさから、アパレルは勿論、日用品など1度に複数の商品が購入されるようなストアに向いていると言えます。それぞれのページでストーリー立ててブランドのイメージを表現し、ユーザーへのアピールをしていきましょう！
気になった方はぜひ、デモストアや参考ストアを覗いてみてください。
「Parallax」を使用している参考ストア
さいごに
「Parallax」を利用すれば、ユーザーにわくわく感を与えて、より買い物が楽しくなるような工夫をすることができます。ストア公開までは料金が発生しないので、まず「Parallax」を使用して、ストアのイメージを再現できるか試してみてください！
読者さまのストアの成功を祈って。
次のテーマ紹介も、ぜひ楽しみにしていてください！
Parallax テーマページへ
本記事でご紹介したShopifyテーマの性能やプラン料金などは記事公開時の情報となっております。本記事公開後、運営会社がアップデートや方針変更をした場合には本記事の情報の限りではございません。最新のアプリ情報は、各Shopifyアプリストアページをご参照ください。
Shopifyアプリの開発、承ります。
SlashApp運営チームは、アプリ開発も行っております。開発したいアプリの概要を教えていただければ、仕様設計から細かくサポートいたします。 ぜひお問い合わせください。
