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月現在）

• STARTER：$15/月
• PROFESSIONAL：$29/月
• ADVANCED：$59/月

商品ページやコレクションページ、ブログページなどを作りたい場合はPROFESSIONAL：$29/月のプランがおすすめです。
また、10日間の無料体験が可能となっており、その期間中に作成したページは無料期間の終了後に解約してもそのまま残るので、気になる方はぜひ試してみていただければと思います。

「GemPages」の始め方

ここからはアプリのダウンロードから基本的なページの作り方について見ていきましょう。
（弊社の自社ECサイト「ホロホロトーキョー」の管理画面を使っています）

アプリをインストールする

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

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

固定ページを作る

インストールが終わったら、「GemPages」の管理画面を見てみましょう。
今回は固定ページを作る際に必要な機能やそれぞれの設定、デバイスごとの確認調整方法について見ていきたいと思います。

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

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

• Pre-built Templates：初めから用意されているいくつかのテンプレートをベースにしてページを作成する
• Blank Page：テンプレートは一切使用せず、白紙の状態から自由に作成する

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

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

各機能について

「GemPages」にはページをデザインするにあたって必要な機能がいくつも備わっています。
まずは左サイドバーにある各機能を見ていきましょう。

BASE

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

 

BANNER

• Parallax：スクロールした際に背景画像と文字など動く部分に差が出るバナー画像を挿入する機能。バナー画像の上にテキストやボタンなどのコンテンツを挿入することが可能
• Hero Banner：バナー画像の上にテキストやボタンなどのコンテンツを挿入する機能

 

STACK

• Tabs：タブで情報を切り替えるボックスを挿入する機能。タブの項目は好きなだけ増やすことが可能です。
• Carousel：スライドバナーを挿入する機能
• Pricing：料金プランが複数ある場合の価格表を挿入する機能
• Accordion：アコーティオン形式のブロックを挿入する機能。例）よくある質問を追加するなど

 

LIST

• Icon List Hoz：複数のアイコンを横並びに挿入する機能（アイコンはアプリ内で複数用意されています。）
• Hero Banner：左にアイコンがついたリストを挿入する機能（アイコンはアプリ内で複数用意されています。）

 

MODULE

• Google Maps：Google Mapを挿入する機能（Addressで住所を入力、もしくはCoordinateで緯度経度を入力）
• Instagram：インスタグラムのフィードを挿入する機能（ユーザーネームを入力）

 

POPUP

• Video Popup：動画のポップアップボタンを挿入する機能（Youtube / Vimeo）
• Popup：ブラウザの右端にポップアップボタンを挿入する機能

 

VIDEO

• Youtube：Youtubeの動画を直接挿入する機能（クリックorタップで再生開始）
• Video Bg：常時再生するYoutubeの動画を挿入する機能（動画の上にテキストやボタンなどの追加が可能）
• Vimeo：Vimeoの動画を直接挿入する機能

 

PRODUCT

• Product：商品情報を挿入する機能
• Product List：商品リストを挿入する機能（表示させるコレクションの選択が可能）
• Related Products：関連商品を挿入する機能（表示させる商品の選択が可能）
• Title：商品ブロック内に商品タイトルを挿入する機能
• Description：商品ブロック内に商品説明を挿入する機能
• Price：商品ブロック内に商品の価格を挿入する機能
• Quantity：商品ブロック内に商品数量の選択ボタンを挿入する機能
• Image：商品ブロック内に商品画像を挿入する機能
• Image List：商品ブロック内に商品画像リストを挿入する機能
• Variants：商品ブロック内に商品のSKUの選択ボタン（プルダウン）を挿入する機能
• Swatches：商品ブロック内に商品のSKUの選択ボタン（選択式）を挿入する機能
• Cart BUttton：商品ブロック内に商品購入ボタン（CTA）を挿入する機能
• View More：商品ブロック内に該当商品へのリンクボタンを挿入する機能
• Stock Counter：商品ブロック内に該当商品の在庫数を表示する機能（在庫残りわずか！などの演出）
• （P）Meta：商品ブロック内に該当商品のカスタムコンテンツを追加する機能

 

BOOSTER

• Count Down：カウントダウンのアニメーションを挿入する機能（Dateに日時を設定するとカウントダウン開始）
• Counter：数字のカウントのアニメーションを挿入する機能（Numberに設定した数値までカウント。More setingsで単位の調整が可能）
• Social Share：SNSのシェアボタンを挿入する機能
• Mailchimp：Mailchimp（メルマガ）に登録してもらうメールアドレスを挿入する機能

 

FORM FIELD

• Contact Form：お問い合わせフォームを挿入する機能（ストアの顧客対応用メールアドレスにすべての投稿が送信されます。送信完了画面への遷移設定も可能）
• Email Field：お問い合わせフォーム内にEメール入力欄を挿入する機能
• Text Field：お問い合わせフォーム内にテキスト入力欄を挿入する機能
• Text Area：お問い合わせフォーム内にテキストボックスの入力欄を挿入する機能
• Dropdown：お問い合わせフォーム内にドロップダウンの選択ボックスを挿入する機能
• Checkbox：お問い合わせフォーム内にチェックボックスを挿入する機能
• Submit Button：お問い合わせフォーム内に送信ボタンを挿入する機能

 

COLLECTION

• Banner：カテゴリページ（コレクション）内にバナー画像（テキストあり）を挿入する機能
• Title：カテゴリページ（コレクション）内にカテゴリタイトルを挿入する機能
• Desc：カテゴリページ（コレクション）内にカテゴリの説明文を挿入する機能
• Toolbar：カテゴリページ（コレクション）内に絞り込み・商品総数・並び順を挿入する機能
• Paginator：カテゴリページ（コレクション）内にページャー（ページ選択）を挿入する機能

 

ARTICLE

• Article List：ブログのリストを挿入する機能（ブログやニュースなど各カテゴリの選択が可能。表示する記事数も最新の1〜5記事まで選択可能）
• Title：ARTICLE内に記事タイトルを挿入する機能
• Excerpt：ARTICLE内に抜粋内のテキストを挿入する機能
• Content：ARTICLE内に本文を挿入する機能
• Image：ARTICLE内にアイキャッチ画像を挿入する機能
• Date：ARTICLE内に投稿日時を挿入する機能

以上が「GemPages」で使用可能な各機能の説明となりますが、かなり充実していることがお分かりになるのではないでしょうか。
WIXでのサイトの作り方にも似ていますが、これがEC（ネットショップ）で、しかも低価格でできる、というのは驚きですよね。

機能の設定について

上記の機能を使ってページを作成していく際に気になるのが、各ブロックごとのマージンや背景色などの設定です。
ここではその設定方法についてご紹介したいと思います。
まずは、下記手順により作ったデザインで確認してみましょう。

ーーーーーー
1.「Row」を挿入します

2.SettingのDesktop Layoutを2カラムに設定します

3.左側に「Image」、右側に「Text Block」を挿入します

4.全体の枠を選択し、Settingではなく、Designを選択します

ーーーーーー

さて、上記状態から左サイドバーにある「Design」の設定機能を見ていきましょう。

Visibility

デスクトップ、ラップトップ、タブレット、スマートフォンの各デバイスでの表示、非表示を選択することが可能です。
青い丸ボタンをクリックし、上部バーのデバイス切り替えを使って確認してみてください。

Spacing

Margin（マージン）、Padding（パディング）の数値設定ができます。
（ここではMarginとPaddingの説明は省きます。）
数値を入力し、確認してみてください。

Background

左のペンキのアイコンで背景色、右の画像のアイコンで背景画像の設定ができます。

背景色を「#c3bbbb」に設定した場合

背景画像を設定した場合

Border

枠線のパターンや太さ、角丸の設定ができます。

• Border Style：左から、・枠線なし・実線・破線・点線の4種類が選択が可能
• Border Color：カラーパレットもしくはカラーコードで線の色の設定が可能
• Border Width：線の太さ（線幅）の設定が可能（0〜100px）
• Border Radius：枠の角丸の数値設定が可能（0〜100px）

それぞれのパターンを確認してみてください。

Shadow

枠や画像などに影をつけることができます。

• Shadow Style：Drop Shadow（右下に影が落ちる）もしくはOuter Shadow（全体的に影が落ちる）の2パターンの選択が可能
• Shadow Color：カラーパレットもしくはカラーコードで影色の設定が可能

Shadow Style：Drop Shadow
Shadow Color：#d1d0d0
に設定した場合

Shadow Style：Outer Shadow
Shadow Color：#d1d0d0
に設定した場合

画像で見ると本当に微妙な差になってしまいましたが、影の落ち方の違いが分かりますでしょうか。
影の落ち方によっても印象が変わるので、ショップのトーンに合った方をお使いいただければと思います。

Opacity

透明度を設定できます。

Opacity：1の状態

Opacity：0.5の状態

以上が「GemPages」で各ブロックなどに設定が可能な機能になります。

デバイスを切り替える

ここまで機能と設定について見てきましたが、次は各デバイスごとの切り替え方についてご紹介したいと思います。
「GemPages」はもともとレスポンシブで作られているため、一つのデバイスで作成したデザインが各デバイスにも最適化されているのですが、各デバイスごとにもっと細かく調整したい！という時にとても便利な機能です。

デバイスを切り替える箇所は上部バーにあるデバイスアイコン。
ここをクリックすることで、デスクトップ、ラップトップ、タブレット、スマートフォンの各デバイスに切り替えて調整をすることが可能です。

それぞれの調整の仕方については今まで説明してきた内容のままとなりますので、ここでは説明を省かせていただきたいと思います。

ページを公開する

さぁ、最後は作ったページの公開です。
下記手順で公開することが可能です。

ーーーーーー

1.右上にある青い「Publish」ボタンをクリック

2.①Page Title（ページのタイトル）、②URL and Handle（URL）、③Meta Description（メタディスクリプション ）、④Lazy Loading（そのオブジェクトが必要になるまで、オブジェクトの初期化を遅延する技術）を入力、チェック
3.下にある青い⑤「Publish」ボタンをクリック
4.公開完了！
ーーーーーー

ここでは紹介しきれなかった細かい機能などがありますが、以上のことを使えば「GemPages」で固定ページのデザインは一通りできるはずです。
ただ、本当に大事なことはそのページで誰に何を伝えるのか、という部分。
必要なコンテンツや導線設計を意識しながらページを作っていきましょう。

また、デザイナーから見たshopifyのおすすめポイントについては下記記事をご覧ください。
今ネットショップを作るなら「Shopify」！デザイナーから見る4つのおすすめポイント

まとめ

今日は「GemPages」の基本的な機能の使い方についてご紹介しましたが、いかがでしたでしょうか。
ネットショップを立ち上げる際にも、運用を行っていく上でもページを充実させ、コンテンツを増やしていくことはとても重要なことです。
それをコーディングの知識がなくても、可能にするアプリが「GemPages」。
10日間の無料体験ができますので、気になった方はぜひ試してみてください。

また、弊社ではECの戦略策定からデザイン、コンサルティングの支援も行っておりますので、気になる方は是非お気軽にご相談ください。