【Shopifyテーマ紹介 #3】「Parallax -パララックス」編

Parallax 引用:https://themes.shopify.com/themes/parallax/styles/vienna

 

テーマ紹介の第3弾は「Parallax」です!

デザイン性が高く、その名の通り立体感や奥行きのあるUIが実現できる有料のテンプレートになります。

※パララックスとは:ユーザーのスクロール等の動作に応じて、複数のレイヤーにある要素をそれぞれ動かすことで視差を生み出し、立体感・奥行きを演出する手法

そんな「Parallax」の魅力はどのようなところか?おすすめの機能とは?について今回は触れていきたいと思います。

基本的なテンプレートの設定やまとめについては、【Shopifyテーマとは?】 Shopifyテーマについての記事投稿、はじめます!

をぜひ参考にしてくださいね!

この記事でわかること

  • 「Parallax」ってどんなテーマ?
  • 「Parallax」の特徴は?
  • どんなカテゴリのストアにおすすめ?

「Parallax」ってどんなテーマ?

Parallaxの概要

  • 価格:$220
  • 特徴:印象的な視差スクロール効果でブランドのスタイルを表現するテーマ
  • スタイル:Aspen/Madrid/Vienna/Los Angeles
  • サンプルサイト

上記のように、「Parallax」は有料テーマになります。有料テーマであることを踏まえ、このテーマを選択するか検討しましょう。

「Parallax」の特徴は?

ここからは、「Parallax」の特徴についてご紹介します。

「Parallax」には、大きく3つの特徴があります。

★パララックス効果を利用した表現
★一覧から商品をカートへ追加可能

商品購入に必要な細かい機能が充実している


以下にそれぞれの特徴について書いてますので、検討材料としてチェックしてみてくださいね!

特徴①「パララックス効果を利用した表現

 デモサイトをスクロールしていくと、1番印象的に気が付くのがこの「パララックス効果」を使用したデザインと思います。

聞き馴染みのない言葉ではありますが、簡単にいうと『スクロールと同時に画像・テキストも動く』表現方法で、動きに奥行きがでるので、印象的なサイトとなります。

Parallax」では、テンプレート名にもなっているように、この表現ができることが1番の魅力と言えるでしょう。

パララックスデザインにおけるメリットとして、

  • 先進的でおしゃれなサイト表現ができる
  • ストーリー立ててブランドアピールが可能
  • ユーザーにスクロールしてもらいやすい

が挙げられます。

パララックスデザイン

引用:https://themes.shopify.com/themes/parallax/styles/vienna/preview

動きがあるだけで、情報の強弱がつけられるので、画像やテキストをうまく利用し、ユーザーの興味を惹きつけましょう!

特徴②「一覧から商品をカートへ追加可能

商品を一覧から閲覧しているとき、購入したい商品があった場合、その商品の詳細ページ→カートに追加、と商品詳細ページに遷移することが大半だと思います。

ただ、購入が決定している・何度も購入している商品に関しては、詳細ページの内容を見る必要がない場合もありますよね。

そんな時に、このクイックショップ機能があれば、スーパーで気になった商品を買い物かごにぽんぽんと入れる様な感覚でカートに追加が可能です。

一覧ページから遷移することがないので、ブラウザバック等で一覧に戻ることなく、商品をカートに追加することが出来ます。

※画像上:ポップアップにて商品紹介が表示
 画像下:右下の「+」ボタンの押下でカートに追加

Parallax_popup

引用:https://themes.shopify.com/themes/parallax/styles/madrid/preview

Parallax_button

引用:https://themes.shopify.com/themes/parallax/styles/aspen/preview

設定方法

テーマ設定のクイックショップ部分を開いて、[クイックショップを有効にする]を有効にします。

②下記どちらかを選択

  • アイコンスタイル
  • ボタンスタイル

③ボタンスタイル(ポップアップ形式の場合)

テンプレートをカスタマイズすることが出来るので、クイックショップのモーダルウィンドウは、製品ページテンプレートのようにカスタマイズされています。ページセレクターを使用して[product(製品)]を開き、次にクイックショップを開き、設定しましょう。

Parallax_quickshop_Customize

引用: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スタイルがある
  • ヘッダーにドロップダウンメニューの設定が可能
  • ポップアップでお知らせの表示が可能
  • モバイル表示の場合でも必要部分のトリミングを防ぐことが出来る
 ※画像の焦点設定は、cssの編集により、SP表示等で画像サイズのトリミングが行われる場合、写真の中心を維持するために使用します。画像メイン部分が自動でトリミングされないように、画像のメインとなる位置を指定することが出来ます
参照:https://help.outofthesandbox.com/hc/en-us/articles/360050769054-Adjusting-the-Image-Focal-Point-in-Parallax

 

ポップアップイメージ

Parallax_popup

※画像:SP表示でのドロップダウンメニュー

Parallax_dropdown1
Parallax_dropdown2
引用:https://themes.shopify.com/themes/parallax/styles/los-angeles/preview

どんなカテゴリのストアにおすすめ?

  • 衣類とアクセサリー等アパレル
  • インテリア用品
  • 食品・飲料
上記がおすすめのストアカテゴリです。

 

先に述べてきたように、先進的なデザインと買い物のしやすさから、アパレルは勿論、日用品など1度に複数の商品が購入されるようなストアに向いていると言えます。それぞれのページでストーリー立ててブランドのイメージを表現し、ユーザーへのアピールをしていきましょう!

気になった方はぜひ、デモストアや参考ストアを覗いてみてください。

「Parallax」を使用している参考ストア

さいごに

「Parallax」を利用すれば、ユーザーにわくわく感を与えて、より買い物が楽しくなるような工夫をすることができます。ストア公開までは料金が発生しないので、まず「Parallax」を使用して、ストアのイメージを再現できるか試してみてください!

読者さまのストアの成功を祈って。

次のテーマ紹介も、ぜひ楽しみにしていてください!

creating

 

Parallax テーマページへ
ご覧いただいてる皆様へ

本記事でご紹介したShopifyテーマの性能やプラン料金などは記事公開時の情報となっております。本記事公開後、運営会社がアップデートや方針変更をした場合には本記事の情報の限りではございません。最新のアプリ情報は、各Shopifyアプリストアページをご参照ください。

みやうち

著者

みやうちのどか

Shopifyアプリ・ストア制作パートナー企業勤務のZ世代会社員。

Shopifyテーマについて、月3-4アップしています!ぜひ見てみてください!

Shopify アプリ開発 承ります。

ネットイヤーグループでは今まで培ってきたUI/UX・システム開発のノウハウをもとに Shopify アプリの開発を行っています。 開発するアプリの概要を教えていただければ、仕様設計からサポートいたします。 Shopifyアプリの開発を依頼したい場合は、ぜひネットイヤーグループにお問い合わせください。