【解説】Shopifyアプリ「Shogun」の使い方！サイトをデザイン・カスタイマイズ！

近ごろ、ECサイトの需要が急速に高まってきています。

日本では、「BASE」などのプラットフォーム使用して気軽にECサイトを制作する傾向が多い中、最近特に注目されているのがShopifyというプラットフォームです。

性能面やカスタマイズ性が優れており、感覚的にECサイトを制作することができます。
しかし、テーマを使用したカスタマイズにはどうしても限界があり、デザイン面の大幅な変更などを行うためにはコーディングの知識が不可欠になります。

特に、Shopifyは「Liquid」という独自の言語を用いて構築されているため、1からコーディングするにはコストがかかります。

また、Shopifyで使用できるテーマはほとんどが海外製のため、日本にマッチしたデザインを探すには手間がかかります。

 

デザイン面で苦労するShopifyの中で最近特に注目されているのがShopifyのアプリであり、コンテンツビルダーの「Shogun」というアプリです。

今回はこの、Shogunについて詳しく解説していきます。

Shopifyアプリ「Shogun」とは

Shogunは、コンテンツビルダーアプリです。

まずは、どういったアプリなのかについて概要を解説していきます。

とても便利なアプリのため、Shopifyユーザーの中でのよく利用されているアプリです。

コンテンツビルダーアプリ

Shogunを用いれば、コーディングをせずに直感的に自分でサイトを構築することができます。

通常、コーディングでは細かな言語のルールにもとづいてサイトを構築していきます。

 

しかし、Shogunを用いると要素をドロップ＆ドラックしてページを制作・編集することができます。

例えるなら、積み木を重ねていく感覚でサイトを制作することができます。

Shogunを用いれば、Shopify内でランディングページやブログページ、商品ページなどさまざまなページを制作することが可能です。

Shogunが優れている理由

それでは、Shogunが注目されている理由をお伝えしていきましょう。

Shogunの良いところはたたりますが、特に優れている点を6つ紹介していきます。

理由①：感覚的に操作可能

Shogunが注目されている最大の理由は、なんといっても感覚的に操作できる点です。

下のスクリーンショットはShogunの管理画面です。

右側（赤枠部分）に「Heading」「Text」「Image」などがあることがわかるでしょう。

サイト上にタイトルを表示したかったら、「Heading」をドロップ＆ドラック。

テキストを挿入したかったら、「Text」をドロップ＆ドラック。

画像を挿入したかったら「Image」をドロップ＆ドラック。

このように、使用したいブロックをドロップ＆ドラックするだけでサイトを完成させることができます。

理由②：テンプレートが豊富

Shogunでトップページやブログページを制作する際に驚くのがそのテンプレートの種類多さで、100種類以上あります。

この中から自由にテンプレートを選択し、自分に好みに合った最適のデザインを探すことができます。

もちろん、真っ白な状態から自分好みにカスタマイズしていくこともできます。

テンプレートを使用し、好みの場所を自分でデザインするという方法も可能です。

理由③：すぐの導入が可能

導入方法は、Shopifyのアプリ管理からShogunを検索してインストールするだけです。

アプリを入れるだけならば、30秒程度で導入することができます。

月額39ドルですが、10日間のトライアル期間がありますよ。

理由④：ブロックの種類が豊富

一般的に、コンテンツビルダーの弱点は、入れたいコンテンツが用意されてないために自分の理想通りのデザインにならないことです。

しかし、Shogunには34個のブロックがそろっています。

また、それぞれのブロックにおいて細かなカスタマイズ（marginやpaddingの設定やフォント変更など）ができるため、自分の理想に近いデザインを再現することができます。

理由⑤：モバイル端末にも対応

Shogunの管理画画面には、4つのビューモードが設定されています。

そのため、クリック一つで各端末でどのような表示になるのか確認することが可能です。

もちろん、それぞれの端末での表示を個別にカスタマイズすることができます。

理由⑥：コーディングでさらなるカスタマイズが可能

Shogunを利用していてどうしても細部のデザインが理想通りにならない場合は、管理画面からHTMLコードを記述してカスタマイズすることが可能です。

ここでオリジナルのカスタム要素を作ることができるのです。

Shogunの管理画面

それでは、ここから実際にShogunの管理画面について解説していきましょう。

先ほども少し登場しましたが、Shogunの管理画面はこのようになっています。

左側が実際に制作するサイト、右側はさまざまなコンテンツがつまった画面になっています。

では、この右側のコンテンツの画面について詳しく紹介していきます。

すべて扱うと量が膨大なため、今回はBuildの画面にフォーカスをあてて解説していきたいと思います。

Structure

Structureには6つのパーツがあります。

Content

Contentには10個のアイテムが入っています。

基礎となるパーツが多く含まれ、イメージしやすいパーツが多いのではないでしょうか。

Shopify

Shopifyは、Shopify内の商品などに関する項目で、10種類のアイテムがあります。

Forms

Formsには6種類のアイテムがあります。

一般的にハードルが高い「フォーム」の制作は、Shogunなら簡単に行うことができます。

Social

SocialはSNS関連のボタンなどを挿入できるコンテンツで、2つのアイテムがあります。

Structure blocks

Structure blocksには、28個のSectionのテンプレートが入っています。

任意のものを選択し、ドロップ&ドラッグするだけで好きなレイアウトのテンプレートを挿入できます。

Shogunを用いてセクションを制作する方法

ここでは実際に、Shogunを用いて簡単なセクションを作ってみたいと思います。

実際に作ってみるのは、下のようなセクションです。

それでは、実際に制作してみましょう。

次の6つのステップに分けて解説していきます。

ステップ①：トップページを制作する

まずは、「CreatePage」から「Standard Page」を選択します。

たくさんのテンプレートが出てくるので、任意のテンプレートを選択します。

「Page name」を決めて、「Create Page」を選択します。

ステップ②：セクションを追加する

今回はデモとして、自分の商品を3点ピックアップするセクションを作ってみます。

まずは、ピックアップセクションを作りたい部分にSectionをドロップ&ドラックします。

セクションの中にさらにセクションを入れることで、メンテナンスしやすいようにします（今回はわかりやすいように、外側のセクションを灰色、内側のセクションを白にしています）。

内側に入れたセクションはmax-widthを1,000pxに設定して、中央に寄せます。

widthの設定は、ControlメニューのMax Widthを設定します。

中央寄せはstyleメニューから左右のマージンをautoにします。

ステップ③：タイトルを挿入する

続いては、セクションのタイトルを設定しましょう。

今回はピックアップ商品を3点を並べたいので、「大人気商品」というタイトルにします。

BuildメニューのContentから、「Heading」をドロップ&ドラックして、タイトルを入力します。

細かな設定が可能なので、今回は次のように設定しました。

• Heading Type：h2
• フォント：Gothic A1
• 文字の太さ：700

ステップ④：カラムを設置する

次は、商品を3つ登録するためのカラムを用意します。

通常ブロックのように縦方向に並んでいくので、カラムを使って横方向に3つ並べていきます。

内側の白いセクションのタイトルの下に「Column」を挿入します。

今回は3つの商品を登録したいので、「Number of Culmns」を「3」に設定します。

ステップ⑤：商品を配置する

次に、商品の配置をしていきます。

今回は自身のサイトで販売している商品を3つピックアップします。

主に使用するのは、「Shopify」のContentです。

 

まずは、商品の情報を挿入するために、「Product Box」を1つのカラムに挿入します。

「Select Product」という表示が出てくるので、ピックアップしたい表品を選びます。

商品を選択すると、「Drop a Product Field Element Here!」という表示が出ます。

ここに、自分が表示したい情報をドロップ&ドロップして挿入していきます。

今回は、商品画像と商品タイトルを表示します。

 

まずは「Product Image」を挿入します。

その下に商品名を記載したいので、「Product title」のContentを挿入します。

同様の手順を2回繰り返し、3つ商品を表示します。

ステップ⑥：完成物を確認する

今回はこのようなピックアップセクションを表示しました。

まとめ

Shopifyのコンテンツビルダーアプリ「Shogun」の概要から、実際に商品を3つ掲載する手順を紹介しました。

今回例で構築したのは非常にシンプルなものです。

このほかにもさまざまなパーツがあり、感覚的にかつ自由に構築することができます。

管理画面からコードを記述して細かなカスタマイズをすることもできます。

非常に便利なアプリですので、導入してみてはいかがでしょうか？

Shopify Guide編集部は、メディア「Shopify Guide」の運営によってShopifyの最新情報やノウハウを常に蓄積してきています。ShopifyでECサイトの新規制作・リニューアル、Web広告などによるプロモーションをお考えの方は、こちらの問い合わせフォームからお気軽にお問い合わせください。