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

Shopifyの有料テーマAtlantic（アトランティック）を使ってみた感想を紹介します。

食品系のクライアントのECで使用しました。Atlanticはシンプルなデザインで全体的に洗練されているテーマです。日本のECでも違和感のないオーソドックスで安定感のあるECレイアウトを構築できます。

Atlantic Theme – Organic – Shopify – Ecommerce Website Template

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

【テーマの価格が変わっています】
Atlantic（アトランティック）の価格は2022年11月16日時点で$200USDです。

Shopifyの有料テーマAtlanticの良い点

Shopifyの有料テーマAtlanticの良い点をまとめました。有料テーマだけあって色々と洗練されています。無料とは違いますね。

①シンプルなデザインで全体的に洗練されている
②オーソドックスで安定感のあるECレイアウトを構築できる
③Webフォント「Gill Sans」が使える
④パララックスを設定できる
⑤商品一覧ページがおしゃれ
⑥パンくずリストも標準装備
⑦アコーディオンで開くFAQページを設定できる
⑧テーマ開発元のマニュアルが充実している

シンプルなデザインで全体的に洗練されている

有料テーマだけあって全体のデザインが洗練されています。開閉メニューの動きなど、JavaScriptの動きもこだわって作られています。

最初にノーコードで構築した時は、

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

と思ったほどです。

オーソドックスで安定感のあるECレイアウトを構築できる

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

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

まず、変更前のデザインは以下です。

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

カスタマイズをすれば、左カラムにメイン画像とその下にサムネイルが配置でき、右カラムに商品名、価格、カートボタンなどの要素が配置できます。まさに日本人に馴染みのある商品詳細レイアウトに変更できます。ノーコードで可能です。

Webフォント「Gill Sans」が使える

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

ただ、Shopifyはコード編集すれば簡単にWebフォントを自由に導入できます。なので、これはそんなに大きなメリットではないです。

パララックスを設定できる

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

商品一覧ページがおしゃれ

各カテゴリの商品一覧ページは、テーマ専用のおしゃれなレイアウトを利用できます。コードをカスタマイズする必要がなく、ノーコードで構築できるので楽です。2カラムや4カラムでコレクションページを表現できます。

【2020年当時のShopifyはトップページだけしかノーコードで編集できませんでした】
2021年夏頃のアップデート Online Store 2.0 によって、トップページ以外のページもノーコードでデザインのカスタマイズができるようになりました。
しかし2020年当時はトップページだけしかノーコードで編集できませんでした。なので、商品一覧ページのデザインをノーコードで変えることができるAtlantic（アトランティック）は結構凄かったのです。

パンくずリストも標準装備

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

2アコーディオンで開くFAQページを設定できる

Atlantic（アトランティック）には、オリジナルのFAQテンプレートが用意されています。最大で12コ「Q」と「A」を作成できます。管理画面からノーコードで構築できるので楽です。

【2020年当時の無料テーマには、アコーディオン形式のFAQがありませんでした】
2022年現在では、無料テーマのDAWN（ドーン）やTaste（テイスト）でもアコーディオン形式のFAQが付いています。
しかし、2020年当時の無料テーマDebut（デビュー）には付いていなかったのです。そのため、アコーディオン形式のFAQがあるAtlantic（アトランティック）は魅力的でした。

テーマ開発元のマニュアルが充実している

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

先ほど紹介したお洒落な商品一覧ページの作成方法や、FAQページの作成方法などもマニュアル化されています。言語は英語です。Chromeのページ翻訳を活用して読みましょう。

Pixel Union – テーマ開発元の公式サイト

Shopifyの有料テーマAtlanticのイマイチな点

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

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

順番に解説します。

商品詳細のメイン画像にスライダーがない

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

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

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

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

もともとのコードにミスがある

【おそらくバージョンアップで改善されているはずです】
有料テーマのコードにミスがあるのは珍しいことではないです。他のテーマでもレイアウト崩れ等を発見して、自分で直したことがあります。テーマは定期的にバージョンアップしています。なので、最新テーマをインストールすれば、不具合は改善されているはずです。

もともとのコードに不具合があります。

私が確認できたのは、以下の2ヶ所です。

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

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

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

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

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

コンタクトページにのみ当たっているCSSが、ベースのCSSよりも勝って適用されているのが原因です。結果としてボタンサイズがおかしくなっています。正確にはpaddingの値がおかしいです。これも修正が必要です。

Shopifyの有料テーマAtlanticがオススメな人

Shopifyの有料テーマAtlantic（アトランティック）は以下の人におすすめです。

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

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

パララックスの設定や、コレクション一覧のオリジナルデザイン、FAQのアコーディオンなど、ノーコードで多くの機能を実装できます。使えるフォントやボタンデザインも洗練されているので、正直ノーコードで十分すぎるデザインです。

Shopifyの有料テーマAtlanticはどんな商材と合う？

化粧品やアクセサリー、革製品などのラグジュアリー感のある商品と相性がいいです。白を基調として写真を大きく使えるレイアウトなので、「写真で魅せる」商品にも向いています。

実案件でAtlanticはどのくらいカスタマイズしたか？

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

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

また、オリジナルデザインのページも作成しました。ここは丸ごとイチからコーディングをしました。企業のコンセプト的なページだったので、ここはしっかり作ろう、という話になりました。

アプリを数個入れました。私は、アプリ同士の競合や、バージョンアップ時の不具合、操作を覚えるための負荷などを考えると、アプリは極力入れたくないという考えです。

公式アプリを中心に必要最小限に留めました。導入したのは、商品レビューのアプリやインスタフィード表示のアプリです。

参考：Shopifyを学ぶ方法まとめ｜本・動画教材・オンラインスクール

Shopifyを本格的に学ぶためにはネットの情報だけは足りません。本（参考書）、動画教材（Udemy）、オンラインスクールを活用して、効果的に学習しましょう。

思い切って有料の教材を買って体系的に学ぶことで、操作に悩む時間が減りますし、より高度なカスタマイズや提案ができるようになり、仕事の幅が広がります。

仕事でShopifyを扱っている筆者が、おすすめの学習教材をまとめました。くわしくは以下の記事をご覧ください。

Shopifyのおすすめ学習方法まとめ【現役エンジニアが紹介】

現役フリーランスエンジニアがShopifyの勉強方法をまとめました。オンラインスクールで学ぶ、本で学ぶ、Udemyで学ぶ、公式のYoutubeで学ぶの4つです。おすすめはオンラインスクールで学ぶことです。

【関連記事】【2023年最新】デイトラShopifyコースは買うべき？【レビュー】
※2コース目以降の追加受講は5000円引き！

デイトラShopifyコースは買うべきか？徹底レビュー【2023年最新】

デイトラShopifyコースを大解剖します。内容、強み、評判、身につくスキルをShopify構築を仕事にしている筆者が解説します。

【日本語のみ】Shopifyの学習に最適なUdemyの教材まとめ

日本語で受講できるUdemyのShopify講座をまとめました。新講座が出るたびに随時、記事を更新します。初心者向けの講座から上級者向けの講座まで紹介しています。また、筆者が実際にUdemyの講座を受講したレビューも紹介しています。

【関連記事】【2023年最新】Shopifyの学習におすすめの本まとめ

Shopifyの学習におすすめの本まとめ【参考書7選を紹介】

本記事ではShopifyを学ぶのにオススメな本・参考書をまとめています。

【Shopifyの独学】勉強方法のまとめ【初心者向け】

本記事ではShopifyの独学方法をロードマップとしてまとめています。筆者はShopifyを独学して3年ほど経ちました。ノウハウが溜まってきたので、Shopify独学のロードマップを整理して記事にしました。

【Udemyで初めて買う場合はお得！】
初回購入ならShopifyの動画教材が安く買える！
Udemyはほとんど常に、初回購入者向けのセールを開催しています。通常1万〜2万円の商品が初回購入だと2,000円程度で購入できます。
・Udemyでセール中のShopifyの講座一覧をまとめて見る