Shopifyのページをドラッグ&ドロップで簡単に作れるアプリ「GemPages」

こんにちは、IT+ デザイナーの溝口です。

EC（ネットショップ）を立ち上げる際、また運用を行うにあたって、ページのデザインは必ず必要になりますよね。

ブランド紹介ページやご利用ガイドページ、商品ページに特集ページなど、せっかくならキレイなデザインで作りたいと思われる方は多いのではないでしょうか。

でも、思い通りのキレイなページを作るために必要な、コーディングの知識がない。

そんな方におすすめなのが、ドラッグ&ドロップでShopifyのページを簡単に作成できるアプリ「GemPages」です。

「GemPages」ならコーディングの知識は不要。ドラッグ＆ドロップのみで簡単にShopifyのページが作れちゃいます。（コードを書くこともできます。）

Shopifyのページ作成アプリとしては「Shogun」が有名ですが、今日は「GemPages」についてご紹介したいと思います。

「目次」

「GemPages」とは

「GemPages」はコーディングの知識がなくても、ドラッグ＆ドロップだけで簡単に固定ページや商品ページ、ブログページにコレクションページ（BETA）のデザイン作成ができるShopifyのアプリです。

通常は、Shopifyで各種ページを思い通りに作るには、HTML/CSSやLiquidといったコーディング/プログラミングの知識が必要なのですが、「GemPages」を使えばその必要がありません。

専門知識なしで、どんなテーマやテンプレートでも自由にページのデザインを作ることができます。

「GemPages」には3つの料金プランが用意されていますが、「Shogun」と比べて価格が安いのも魅力の一つです。

下記がその3つのプランになります。（2020年4月現在）

商品ページやコレクションページ、ブログページなどを作りたい場合はPROFESSIONAL：$29/月のプランがおすすめです。

また、10日間の無料体験が可能となっており、その期間中に作成したページは無料期間の終了後に解約してもそのまま残るので、気になる方はぜひ試してみていただければと思います。

ここからはアプリのダウンロードから基本的なページの作り方について見ていきましょう。

（弊社の自社ECサイト「ホロホロトーキョー」の管理画面を使っています）

① Shopify app storeにて、「GemPages」と検索します。

②検索結果の中から、「GemPages Page & Funnel」と書いてあるアプリを選択し、プランを選んでインストールします。

インストールが終わったら、「GemPages」の管理画面を見てみましょう。

今回は固定ページを作る際に必要な機能やそれぞれの設定、デバイスごとの確認調整方法について見ていきたいと思います。

まずはホーム画面の左サイドナビにある ①「Pages」を選択し、右上にある ②「Create Sub Page」を選択します。

その際に下記2つの選択肢があります。

どちらを選択されても問題はありません。

選択後にページ名を入力し、「Create New」でページ作成を始めましょう。

「GemPages」にはページをデザインするにあたって必要な機能がいくつも備わっています。

まずは左サイドバーにある各機能を見ていきましょう。

Row：ブロックのカラム数（1〜4カラム）を挿入する機能。デスクトップ / ラップトップ / タブレット / スマートフォンに対してそれぞれカラム数を選ぶことができます。
例）PCは2カラムにして左に画像、右にテキスト。スマートフォンは1カラムにして上に画像、下にテキストとするなど
Heading：見出しを挿入する機能
Text Block：本文を挿入する機能
Icon：アイコンを挿入する機能
Button：ボタンを挿入する機能
Separator：罫線（ライン）を挿入する機能。線の種類はSolid（実線）/ Dashed（短い横棒の点線）/ Dotted（点線）の3つから選択可能です。