ECサイトを作ってみたはいいものの、細かいデザインの修正がなかなかできない・・。
Shopifyのデフォルトのカスタマイズ機能を用いると、一定レベルまでストアデザインが可能です。 しかし商品詳細ページや特集ページなど、各ページでより細かく編集を行うにはHTMLとCSSの知識が必須となります。
そんな問題を解決してくれるのが、【Shogun Landing Page Builder】です。
【Shogun Landing Page Builder】はコーディングの知識なしに細かなデザイン編集をしたい方に最適なShopify アプリです。
・スマートフォンとPCでコンテンツを出し分けたい
・画像を並列に並べたい
・任意の商品をブログ記事内に表示させたい
・タブやアコーディオンなどのデザインを反映したい。
Shogun Landing Page Builder（ショーグン）とは？
【Shogun Landing Page Builder】は独自のカスタマイズページを用いて、ドラッグアンドドロップだけで柔軟なデザイン編集を可能とするShopify アプリです。
HTMLやCSSなどのコーディングの知識を一切必要とせず、デザイン反映が出来るため、非エンジニアのウェブ担当者でも手軽にコンテンツを作成することができます。
料金プラン
【Shogun Landing Page Builder】の料金体系は以下のとおりです。
BUILD（$39/月）
・25ページを作成可能
・ドラッグアンドドロップページビルダー
・固定ページ・コレクションページ・ブログページ・商品詳細ページの編集
・30以上のページテンプレート
・画面サイズによるデザイン
・SEOコントロール
・メールサポート
MEASURE （$99/月）
・Buildの全機能
・250 ページを作成可能
・ABテスト
・公開スケジュール設定
・分析機能
・マルチサイトコンテンツ共有
OPTIMIZE
・Mesureの全機能
・350ページ作成可能
スピーディーに広告用LPや特集ページをつくるときに最適
Shopifyのデフォルトの機能では、シンプルなコンテンツを作成することはできるものの、よりオリジナリティの高い構成にするには、コーディングの知識が必要となります。
ユーザーへの訴求を意識するLPや特集記事ページでは、デザイン性もコンバージョンを高める重要な指標となり、【Shogun Landing Page Builder】で作成したコンテンツは、オリジナリティの高いページという印象を与えることができるでしょう。
土屋鞄をはじめ国内企業でも多数の利用実績が
厳選された良質な革素材を使い、職人の丁寧な手仕事で仕立てたランドセルや大人向けの鞄が、幅広い消費者の支持を集めている土屋鞄製造所。
ブランディングに定評のある同社でも【Shogun Landing Page Builder】は愛用されており、デフォルトのテーマでは表現できないデザインが随所に見受けられます。
土屋鞄公式サイト
https://tsuchiya-kaban.jp/
Shogun Landing Page Builder の特徴
柔軟にカスタマイズが可能
「画像のサイズや幅を変更したい」「任意の商品詳細をページを表示したい」など、ShopifyのデフォルトのCMS機能では実現できないカスタマイズが可能となります。
要素をドラッグアンドドロップするだけで一からページを作成できるため、非エンジニアでも細かな編集ができます。
テンプレートが豊富
【Shogun Landing Page Builder】には、予め70を超えるデザインテンプレートが用意されているため、一から編集をすることなく質の高いデザインを反映するための準備が整っています。
モバイル端末にも対応
PCとスマートフォンでコンテンツを出し分ける際にも、【Shogun Landing Page Builder】はおすすめです。PCではAのイメージ、スマートフォンではBのイメージなど、デバイスのサイズに応じた出力切り替えが可能です。
Shogun Landing Page Builder の使い方
Shopifyアプリストアより、【Shogun Landing Page Builder】をインストールしてください。
※Shopify app store
https://apps.shopify.com/shogun
インストールが完了したら、Shopify管理画面の「アプリ管理」より
【Shogun Landing Page Builder】をクリックします。
ダッシュボードに遷移しました。
新規のページを作成するために、画面右上の「Add page」ボタンを押します。
次に作成したいページタイプを選択します。
・Standard（ URLのあとに/page/〇〇が入る）
└固定ページの編集を行います。
・Product（ URLのあとに/products/〇〇が入る）
└任意の商品詳細ページの編集を行います。
・Collection（ URLのあとに/collectios/〇〇が入る）
└コレクションページ（商品グループ）の編集を行います。
・Blog post （URLのあとに/blogs/〇〇が入る）
└Blogの投稿コンテンツの編集を行います。
以下より作成したいテンプレートを選択します。
※テンプレートを利用せず、0から作成したい場合、【New blank page】を選択してください。
テンプレートを選択したあと、ページの名前/URLを選択して【Create page】ボタンを押してください。
コンテンツの作成方法
次に具体的なコンテンツ作成方法を説明していきます。
①Section(セクション）を作る。
セクションは複数の要素（グループ）を入れる箱のようなものです。
イメージやテキストを反映させる前に入れておくと後で編集が便利です。
※セクション自体は設定しなくてもイメージやテキストを入れることはできます。しかし同類の要素を一纏めにしておくと編集しやすくなるため、必須の作業です。
②表示したい要素をセクション内に入れる。
※上記ではimageとtextの要素を入れています。
以下の画像のように、ヘッダー部分のチェックボックスを選択すると、各要素がどこに入っているかを視認する事ができます。一纏めにしたい要素がsectionに入っていることをここで確認してください。
③要素の幅や高さを調整する
画像やテキストなどの要素を挿入した後に、高さや幅を調整したい場合、画面右側の「Styles」を選択し、marginsを調整します。
以下では、sectionの要素のMarginを設定して、上下に幅をもたせています。
デバイス（画像サイズ）ごとのコンテンツの出し分け方法
また、デバイスごとに幅や高さを変更したい場合は、
Stylesの各要素の右上部分のボタンを押すと、各デバイスを選択する項目が現れます。例えばスマートフォンのみデザインを変更したい場合は、以下の画像の赤枠の選択を行ってから、設定を行います。
コンテンツの投稿について
これで投稿が完了しました。
テンプレート機能について
１から編集するのではなく、同じ構成でコンテンツを反映する際に便利なのが、テンプレート機能です。一度作成した【Shogun Landing Page Builder】のコンテンツをテンプレートとして保存することができます。
画面右上のボタンを押し「Save Template」を選択して作成したコンテンツを保存します。
完了するとダッシュボード上に作成したテンプレートが反映されます。
新規作成する際に保存したテンプレートを使うことで、コンテンツ作成作業の効率化が可能です。
反映可能な要素について
デザイン反映可能な要素を解説していきます。
これらの要素をドラッグアンドドロップし、組み合わせることでコンテンツを作成します。
・Structure
・content
・Shopify
・Forms
・Social
・Structure blocks
上記の大項目から、要素を選択していきます。
以下にて一つづつ見ていきましょう。
Structure
・Section
└複数の要素（グループ）を入れる箱のようなものです。テキストや画像など一纏めにしたいものをSectionに入れていきます。
・Columns
└要素を並列に並べて表示します。イメージを2列や3列で並べたいときなどに有効です。
・Slider
└スライドショーを作成します。
・Table
└データを纏める為の表を作成します。
・Tabs
└要素を切り替えて表示することタブを作成します。
・Accordion
└クリックするとコンテンツが表示されるアコーディオンボタンを作成します。
Content
└画像を表示します。
└動画を表示します。
└文章を入力します。
Shopify
・Product Box
└ページに表示したい商品を選択します。商品を表示したい場合、この要素を最初に設定する必要があります。
・Collection
└任意のコレクションを表示します。
・Product Title
└商品のタイトルを表示します。
・Product image
└商品に登録された最初の画像を表示します。
・Product image Gallery
└商品に登録されたすべての画像を表示します。
・Product Price
└商品価格を表示します。
・Product Variant
└商品のバリエーションを表示します。
・Product Quantity
└商品購入数を表示します。
・Product Add to Cart
└カートに入れるボタンを表示します。
・Product Reviews
└レビューボタンを埋め込みます。
Forms
・Form Box
└フォームを設定する要素です。フォームを表示したい場合、この要素を最初に設定する必要があります。
・Form text Input
└フォームにテキストを表示します。
・Form Dropdown
└フォームにドロップダウンを表示します。
・Form Check Box
└フォームにチェックボックスを表示します。
・Form Radio Button
└フォームにラジオボタンを表示します。
・Form Submit Button
└フォームに送信ボタンを表示します。
・reCAPTCHA
└フォームにreCAPTCHA を表示します。
Social
・Social
└フォームにSNSのアイコンを表示します。
・Instagram
└Instagramのアカウントと連携してコンテンツを表示します。
Structure blocks
コンテンツテンプレートです。shogunで予め作成されたSection群を表示してくれます。
注意：修正はShogun App上でしかできない
【Shogun Landing Page Builder】コンテンツを保存すると、Shopifyの
ページやブログ記事内に投稿が反映されます。しかし、Shopifyの管理画面上ではショーグンの用にドラッグアンドドロップでの修正ができません。
また、任意のテキストのみ直す場合でも、ショーグン内にShopifyの管理画面上から対応した修正は反映されないため、編集はアプリ内から実施することをおすすめします。
【Shogun Landing Page Builder】では専門知識不要で、非エンジニアでも簡単にページ制作が可能です。
さらにSEOの機能やHTML/CSSの記述など、詳細な設定も可能です。
ドラッグ・アンド・ドロップで簡単に要素を挿入し、調整し、自分の思い通りのページを作っていくことができる【Shogun Landing Page Builder】はスピーディーにECサイトのページを作りたいユーザーにおすすめのShopify アプリですので、是非利用してみてください。
アプリダウンロードはこちら
※Shopify app store
https://apps.shopify.com/shogun
Shopifyアプリの開発、承ります。
SlashApp運営チームは、アプリ開発も行っております。開発したいアプリの概要を教えていただければ、仕様設計から細かくサポートいたします。 ぜひお問い合わせください。
