Shopifyの有料テーマAtlanticを実際に使ってみた感想

shopify atlantic

shopify(ショッピファイ)でネットショップを作ろうと思っている。有料テーマのAtlantic(アトランティック)はどんな特徴があるのか知りたい。

ネットで「おすすめテーマ○選!」とかの記事はあるけど、実際に使った感想が載っておらず、参考にならなくて困っている。

こんなことを考えている方へ。

この記事のポイントは以下です。

実際に使ってみて分かったAtlantic(アトランティック)の良い点、いまいちな点、このテーマを使うのにおすすめの人

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。

shopifyの有料テーマAtlanticを実際に使ってみた感想

shopify atlantic

Atlantic(アトランティック)は$180の有料テーマです。

超オーソドックスで安定感のあるTHE・ネットショップというレイアウトを作成できます。Atlantic(アトランティック)は食品系のECで使用しました。

良い点

Atlantic(アトランティック)の良い点は以下。

・シンプルなデザイン、そして動きが洗練されている
・オーソドックスで安定感のあるECレイアウトを構築できる
・webフォント「Gill Sans」が使える
・パララックスを設定できる
・コレクション一覧ページがおしゃれ
・パンくずリストも標準装備
・アコーディオンで開くFAQページを設定できる
・テーマ開発元のマニュアルが充実している

やはり有料テーマだけあって、色々と洗練されています。無料とは違いますね。

では順番に解説していきます。

まず、有料テーマだけあってデザインや開閉メニューの動きが洗練されています。最初にノーコードで構築した時は、

これでもう完成でいいのでは?

と思ったほどです。

また、カスタマイズ(ノーコード)によって、日本のユーザーにとって馴染みのあるECレイアウトに近づける事ができます。

デモサイトの商品詳細ページは、商品画像が縦スクロールという癖があるレイアウトなのですが、管理画面から変更できます。

変更前のデザインは以下。

shopify atlantic

変更した後のデザインは以下です。

shopify atlantic

左カラムにメイン画像とその下にサムネイル。右側に商品名、価格、カートボタンetc。日本人に馴染みのある商品詳細レイアウトに変更できます。もちろんノーコード。

あと、無料で使えるwebフォントの中に「Gill Sans」があります。ちょうど「Gill Sans」を導入する予定のサイトだったので、ラッキーでした。

shopify atlantic

なお、shopifyにはwebフォントを自由に導入できます。なので、この点はそこまでのアドバンテージではないです。

Atlantic(アトランティック)はトップページのセクションに簡単にパララックスを設定できます。コーディングでやろうとしたら結構めんどくさいのですが、管理画面から一発です。

shopify atlantic

コレクション一覧ページ(カテゴリ一覧ページ)は、テーマ専用のおしゃれなレイアウトを利用できます。カスタマイズのコーディングでもできますが、ノーコードで構築できるので楽です。2カラム+4カラムでコレクションページを表現できます。

shopify atlantic

また、標準でパンくずリストもついています。テーマdebut(デビュー)のときは、liquidコードをカスタマイズして作成しましたが、こちらは標準搭載。ノーコードで設定できるので大変楽です。

shopify atlantic

オリジナルのFAQテンプレートが用意されているのも特徴です。最大で12コ設定できる「Q」と「A」を作成できます。管理画面からノーコードで構築できるので楽です。

shopify atlantic

Atlantic(アトランティック)は、PIXEL UNION(ピクセルユニオン)という会社が開発したテーマです。開発元のPIXEL UNIONが独自にAtlanticの設定マニュアルを用意してくれています。

先ほど紹介したお洒落なコレクションページの作成方法や、FAQページの作成方法などもマニュアル化されています。もちろん言語は英語。Chromeのページ翻訳を活用して読みましょう。

shopify atlantic

イマイチな点

Atlantic(アトランティック)のイマイチな点は以下。

・商品詳細のメイン画像にスライダーがない
・もともとのコードにミスがある

順番に解説します。

Atlantic(アトランティック)には商品詳細に画像スライダーの機能がついていません。正確にいえば、メイン画像をクリックして表示されるモーダルの中にはスライダー機能があります。

つまり、以下のページにスライド機能はありませんが、

shopify atlantic

商品画像クリック後に表示されるモーダル画面内では、左右のフリックで画像を切り替えることができます。

shopify atlantic

別にこれでもいいのですが、商品詳細ページの画像自体にスライダーを導入したい場合は、カスタマイズが必要になります。

あと、結構重要なのですが、もともとのコードに不具合があります。私が確認できたのは2ヶ所です。

・トップページの2カラムパララックス部分、ブレイクポイントのミスで700pxのときだけレイアウトが崩れる

shopify atlantic

たぶんブレイクポイントの設定ミスで、700pxのときだけスタイルが当たっていない状態です。右半分に謎の空白ができています。ただ、shopifyはcss触れるので修正しました。

・コンタクトページでクイックカート開くとボタンサイズがおかしい

shopify atlantic

Atlantic(アトランティック)は、自分がいまカートに入れている商品をモーダルウィンドウで確認できる機能があります(カートがモーダルで開く)。

他のページでは問題がないのですが、コンタクトページでモーダルのカートを開くと、View Cart(カートを見る)のボタンだけがなぜか大きくなっています。

原因はコンタクトページにのみ当たっているcssです。これがボタンサイズをおかしくしています。正確にはpaddingの値がおかしいです。これも修正が必要です。

Atlantic(アトランティック)がオススメな人

shopifyの有料テーマAtlantic(アトランティック)がおすすめなのは以下の人です。

・シンプルで安定感のあるECデザインのサイトを構築したい
・ノーコードで完結させたい

Atlantic(アトランティック)は管理画面からの編集で、ザ・ECといったオーソドックスなレイアウトを実現できます。UI的には安心のデザインですので、堅実にいきたい方にはおすすめです。

パララックスの設定や、コレクション一覧のオリジナルデザイン、FAQのアコーディオンなど、ノーコードで多くの機能を実装できます。

使えるフォントやボタンデザインも洗練されているので、正直ノーコードで十分すぎるデザインです。

どのくらいカスタマイズしたか?

Atlantic(アトランティック)は食品系のECで使用しました。

そこまでカスタマイズはしませんでした。ノーコードで一通り設定をして、そのあとデザイナーさんと一緒にレイアウトの微調整という流れです。主にフォントサイズやカラー、余白感を調整しました。

完全オリジナルのページは1ページだけでした。ここは100%コーディングで構築しました。企業のコンセプト的なページだったので、ここはしっかり作ろう、という話になりました。

アプリはいくつか入れました。不具合や運用負荷を考えると極力入れたくないという考えなので、公式アプリを中心に必要最小限に留めました。

たとえば、商品レビューのアプリやインスタフィード表示のアプリを導入しました。

Shopifyでのサイト構築を学ぶのにオススメな参考書

shopify logo

2020年12月16日に発売された「商品売るならShopify 世界標準かつ最先端のECサイト構築入門」はおすすめです。

shopifyは日本語のレファレンスが少なく、独学しようとすると大変です。ただ、少しずつですが日本語の関連書籍も増えてきました。

ネットで調べたり、shopifyサポートに直接質問したりして学ぶこともできますが、知識にムラが出たり、そもそも正しい情報でなかったり、というリスクもあります。

なので、手元に一冊、shopifyのガイドを置いておくと安心です。その点で「商品売るならShopify 世界標準かつ最先端のECサイト構築入門」はおすすめ。

私も買いましたが「shopifyとは?」という導入から、実際のストア構築方法に至るまで網羅的に情報が掲載されています。

shopifyが他のECカートと違う点や国内の成功事例、運用上のあるあるトラブル、技術的なサポート情報まで掲載されています。

これからshopifyに関わってみたい!

shopify一通り分かっているけれど、抜けてる部分がないか確認したい!

という方におすすめです。

Shopifyで14日間の無料体験をはじめる

・登録にあたってはクレジットカードは不要
・必要なのはメールアドレスだけ
・14日間を過ぎたらサイトは凍結。自動で請求は発生しない
・無料体験中に構築したサイトは本契約後もそのまま使用可能
・無料体験期間中に正式契約しても、無料体験期間が終了するまで月額料金が請求されることはない

まとめ

この記事のポイントをまとめます。

Atlantic(アトランティック)の良い点は以下です。

・シンプルなデザイン、そして動きが洗練されている
・オーソドックスで安定感のあるECレイアウトを構築できる
・webフォント「Gill Sans」が使える
・パララックスを設定できる
・コレクション一覧ページがおしゃれ
・パンくずリストも標準装備
・アコーディオンで開くFAQページを設定できる
・テーマ開発元のマニュアルが充実している

Atlantic(アトランティック)のイマイチな点は以下。

・商品詳細のメイン画像にスライダーがない
・もともとのコーディングにミスがある

Atlantic(アトランティック)がおすすめなのは以下の人です。

・シンプルで安定感のあるECデザインのサイトを構築したい
・ノーコードで完結させたい

今回の記事はここまでです。

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。