Shopify manual Shogunの使い方と注意

ここではShopify上で作成する各種ページおよび商品の詳細説明エリア（Shopifyの商品詳細画面におけるDescription部分）を編集するアプリ、Shogunについて説明します。具体的なアプリの使用方法の説明に入る前に、ページ構成上の大前提を列挙しますので、実際の作業はその範囲内に収まる方法で実施してください。

ページ構成上必ず守らなければならない事項

ページは端末の画面幅いっぱいまでフルに使用して表示される「レスポンシブ」形式です！
ページ幅は高解像度なモニターなら数千単位、小さなスマホなら数百単位までページを閲覧する端末によって変動します。 決まった幅という概念がそもそも存在しない ことをまずは頭に入れてください。これがページ構成上何に影響するかというと、 無闇な改行はほぼ確実にアダになる ということです。ページの幅が見る人（の使う端末）によって異なるということは、例えばテキスト1つとってもどこで改行が入るか分からないということです。ではどうするか、単純に、 関連した複数の内容物を横並びにしない（下に下に、縦並びで入れていくのはOK）、文章なら文章、表なら表を幅いっぱい使って表記する 、これが正解です。百聞は一見にしかず、PCでこのページを見て、ブラウザの幅を縮めたり伸ばしたりしながら下記2つの文章がどうなるか見比べてください。改行ありのほうはページ幅が広いと文章の右側に不自然な余白ができ、ページ幅が一定以下まで狭まると説明不要なほど無残な姿になります。一方無改行のほうはページ幅の変動による影響を受けていないのが分かると思います。
 

[最重要!!!] 全ての編集作業はShogunで行ってください！
ShogunはShopify向けの外部アプリでShoifyそのものではありません。そしてShopifyにも簡単な文章や画像、HTMLなどを編集できるエディタが用意されています（商品詳細で言うDescription）。ですが、例えばShogunに商品データをロードし、Shogun上で編集を行った上でこれを保存すると、 元々Shopify側で作っていた文章などは全て上書きされてしまいます（通常はShogun側の各Elementに格納されてShogun側にもロードされますが、データの種類によっては何が起こるか分かりません） 。あるものはShopifyに直打ち、あるものはShogun経由で作成、とバラバラなことになると収拾がつかなくなります。 例え1行のテキストを入れるだけでも、必ずShogunを経由して編集を行ってください 。当然ながら、 一度作成したページに改変を加える場合も同様です 。

高度な技術を要するような編集は必要ない、むしろ禁止！
後述しますがShogunには挿入したいデータごとに専用のElementと呼ばれる枠があり、それらをレイアウトするための枠も用意されています。LEGOブロックのようにこれらを組み合わせてページを構成するという、慣れれば非常に簡単で自由度の高いエディタです。もちろん技術がある人なら高度な編集作業も可能になっていますが、原則としてテキスト直打ち、写真挿入、ソース化できるHTML（動画ソースや表のテンプレなど）といった、万人が扱えるようなデータ以外は盛り込まないでください。多くの人が触るものなので、特定のスキルがないと後で改変等が出来ないようなものを作ってしまうと更新などの際に困ってしまうためです。

コピペは怠慢にあらず！「スニペット」の活用で効率化と統制を！
「スニペット」については後述します。Shogunによる商品説明の作成は、言わば宣伝広告の作成なので、小さな細字を淡々と打ち、無感情に写真を並べるだけでは不十分です。フォントサイズを工夫したり、行間をうまく入れて「読むのが大変」という印象を和らげたり、究極の要約文である「表題のキャッチコピー」を作ったり。もちろん作る人が違えばページの仕上がりにも差が出ます。それ自体は一向に構いません。ですが、それぞれが全くバラバラに１から全てを作るというのも困ります。そこで、既存ページのレイアウトなどを参考にし、自分がこれから作ろうとしているページに流用できそうなものは可能な限り流用してください。これは作業の効率化、高速化に加え、ページのクオリティをある程度の水準で統一する上でも非常に重要です。

ページ作成に使用したデータは保管しておいてください！
画像挿入のところで説明した通り、Shopifyのサーバーに上げてしまった画像をいちいち全部ローカルに保管する必要はない、ということになっています。Shogun上に作ったテキストなども同様で、わざわざテキストファイルにコピーして置いておくなどのことは不要です 。ただし、後々改変の可能性のあるエクセルデータや、加工した画像（HP以外にもチラシなどに流用する可能性あり、また、新色が追加された場合などに色補正だけして使いまわすなども）、メーカーの各種 公式データ（PDFなどのデータソースや高解像度の写真など）は保管しておいてください。方法は、 原則としてページ単位 で、そのページに載っている商品の写真、説明写真を作ったならそれら、寸法図、その数値を示す表のエクセルデータなどをフォルダにまとめてください。これまでのHPのソースを保存してある場所に一緒に保存していきますので（2017年現在は）Hiroに渡してくれればOKです。また、 類似商品が大量にあり、各商品ごとにはメイン写真1枚ずつくらいしかない、等の場合は、その一群をまとめて1フォルダに入れる などある程度臨機応変に対応してください。

実際の操作手順とヒント（永久に加筆募集中）
上述の通り、ページレイアウトには「人の味」が出る上に商品によって最適解となるレイアウトは異なります。このため完全なテンプレ化、フォーマット化は不可能だし、そんなことをすればかえって作業がしにくくなりページ品質にも無用の制限がかかります。守るべきルールの範囲内でなら基本的に書式は自由です。下記に基本的な事項をまとめていきますが、これは永久に加筆修正を募集します。皆さんのアイデアを共有してください。

Shogunへの移動方法１

最も簡単な移動方法は、任意のページをShopify上で開き、上部のMore ActionsからEdit with Shogunを押すと言うもの。別タブでShogunが立ち上がり、ページの内容が読み込まれて編集可能になります。初めての編集ならShogun上にページが作成され、既にShogun上にページが存在している場合は該当ページがロードされます。基本的にこの方法で移動してください。ただし、初めてページが作成された場合はページタイトルとURLを設定する必要があります。自動で作成してはくれるのですが、それで良いか、後からそのページを探しにくいようなことになっていないかを必ず確認してください。

Shogunへの移動方法２

アプリの一覧からShogunを手動で起動する方法です。新規にページを立ち上げたい場合はShopifyでページを作成してからShogunへ移動、という手順を踏むよりもShogun上で直接ページを作成したほうが早い場合もあります。また、任意のページをShogun上で直接検索して開くことも可能です。

Shopify左部のメニューよりAppsに入るとShogun Drag ＆ Drop Page Builderがあります。これをクリックするとShogunが別タブで起動します（一つ目の画像）。起動すると二つ目の画像のようなページが出ますので、タブで検索対象のページ種別を指定後、検索窓で検索をかければ対象ページが表示されます。編集したいページが存在していない、またはShogunにロードされていない場合は右上のCreate Pageボタンからページ作成画面へ移動します。Create Pageを押すと3つ目の画像のようなページが出ます。最初はStandard Pageのタブが選択されており、見た目ももっと賑やかですが、ここでは商品ページのロード方法を説明しています。タブをProduct Pageに切り替え、検索窓に商品名を入力します。ただ入力しても何も出ず、移動キーの↓などを押せば該当する商品が表示されます。このリストから対象の商品を選択し、Edit Productをクリックすることでもページが生成されます。なお、既にページが存在している場合はこの方法では検索にヒットしません。このため、原則として「移動方法１」をまずは試すことをおすすめします。

Shogunの基本的なElement１：Text

ごく普通のテキストエディタです。特記すべきことは別段ありませんが、上述の通り配置や配色、フォントサイズ、改行、行間などを工夫しながら文字を配置してください。

Shogunの基本的なElement２：Video

資料として視覚的に、現物を、実際に使っている状態そのものを、お客さんみ見せられるため、宣伝としてはもちろん説明用のツールとしても非常に多用されるのが動画です。Videoのボックスを配置すると右の操作パネルにURLを入力する窓が出てきます。ここに動画を上げているページのURLを貼り付けるだけで動画がロードされます。自社サイトで使用する動画は全てVimeoにアップされており、Vimeoの該当動画掲載ページのURLを指定することで動画を貼り付ける、という方式です。Vimeo側でも設定などがありますが、ShopifyおよびShogunの説明から外れるためここでは割愛します。

Shogunの基本的なElement３：HTML

このボックス挿入後、ボックスをクリックするとページ下部に入力領域が表示されます。表の掲載などに多用するほぼ必須のボックスです。HTMLの直打ち欄が開くので、「え、無理・・」と思われるかもしれませんが心配いりません。表の挿入に限定して言えばオンラインツールがあります。全くの他人様が公開しているものですが、「エクセルシートをHTMLに変換しちゃう君」というものを利用しています（ページダウンロード済みなので本家が消えても問題なし）。やはり変換君自体の詳しい説明は割愛しますが、変換君で生成したHTMLソースを丸ごとコピー＆ペーストするだけで表の掲載は実現可能です。この際、変換君側で表の背景色を設定できますが、この設定のみ「99CCFF」というカラーを使用することだけ統一してください。

Shogunの基本的なElement４：Column

Word的に言うところの「段組み」をするためのElementです。上記で散々「改行は使うな」と言っていますが、唯一ページを縦割りすることが出来るElementがこれです。上記の浦島の場合はColumnでエリアを２個に分割し、それぞれにTextのボックスを入れることで作成しています。ここで再度注意したいのは、「レスポンシブは端末の画面幅に合わせて勝手にレイアウトを変えてくれる」点です。余程明確な理由や意図がない限り、Columnの組み方を苦心しても徒労に終わるか、下手をすればかえって邪魔になります。原則はページフル幅だろうがColumnで区切られた領域の1つだろうが、1つのElementで端から端まで埋めることに変わりはありません。関連するコンテンツを下に下に付け加えていく分には、ページ幅が狭くなって改行位置が迫ってこようが影響は出にくいです。一方、横に横にコンテンツを付け足していくと、ページ幅が迫ってくるほどに元々意図ていたレイアウトが破壊されていきます。例）Column1に寸法を示す図を、Column2に寸法表のHTMLを入れる、など。仮にページ作成者の画面上で問題なく表示されていても、それが幅700pxの古いスマホ上で同じように表示される可能性は恐ろしく低いです。

尚、スマホ等の小サイズ画面で横に一画像のみを表示したい場合、Columnに挿入する画像を奇数にすること。（偶数にすると２枚づつ表示される為）

各Elementに共通の基本設定

何らかのElementを選択した状態であれば、画面右側の操作パネルがStyleタブになっており、Basicの項目が展開されています。ここでは各項目の意味と使い方を簡単にまとめておきます。

Basic
そのElementsの最大/最小幅と高さを設定できます。例えばテキストなどに一切の改行を加えていない場合、ワイドな画面上では延々と横1列に文章が表示されることになります。これは文章量が少ない場合に改行しないことの弊害と言えますが、最大幅を決めておけばこうしたことは起こりません。しかし、幅を決めてしまうことで上記「改行」で説明したことに類似するような問題が発生する恐れが大きいため、やはり余程明確な目的や意図がない限りは最大/最小サイズを設定することはお勧めしません。ただし、画像や動画については際限なく大きく表示されてしまうことを防ぐために最大サイズを設定するのは多くの場合効果的です。列数の少ない表が無駄にページいっぱいに広がらないように幅を制限するのも有効です。また、この設定でアラインメント（左揃え、中央揃え、右揃えなど）が設定できます。こちらは状況に応じて活用してください。

Background
Elementに背景色を設定できます。ワンポイントアドバイスや特にお客さんに読み飛ばして欲しくないこと（大型荷物になるなどの発送条件など）を強調するのに役立ちます。パターン画像を挿入することもできます。

Screen Settings
そのElementsを特定の端末上でしか表示しないように設定できます。PCでなら問題なく表示できるがスマホ上で表示するのが難しいコンテンツなどは、初めからスマホでは表示されないようにする、といったことが可能です。しかし、冒頭でも説明している通り、表示端末を選ぶようなややこしいものは載せない、を原則としてください。

Margins
恐らく最も多用することになる最重要設定です。Elementの外側上下左右に余白を設定します。特にレスポンシブはその性質上、横並びにするつもりだったものが意図せず縦並びで表示されるといったことが起こりえます。そのような場合、例えばColumnで横並びにして、Marginも付けていなかった画像が縦に隙間なく並んでしまうといったことが起こります。こうしたことを防ぐには、全てのElementの上（または下）に同じ幅のMarginを必ず付ける、という統一ルールのもとで作業するのが確実です。

Padding
Marginの逆で、Elementの内側に余白を設定します。例えば背景色をつけた「コラム」的なスペースを設けた際に、背景色を塗った境界ギリギリまで文字で埋め尽くされていると不格好です。そういった場合はPaddingで余白を持たせましょう。

Borders
Elementsの周囲に枠線を付けます。

Box Shadow
よくあるドロップシャドウです。水平、垂直のピクセルサイズを正の数で設定すると下向きに、負の数で設定すると上向きにシャドウがかかります。

[超重要!!]作業効率化と品質統制の鍵を握るElement：BOX

普段は存在理由すら謎に見えるBOXというElementがあります。アイコンも点線で表示されていていかにも影が薄そうですが、BOXこそShogunの最重要Elementです。ShogunはElementを何枚も重ね合わせてページを構成するという特性上、スキルがなくても自由度の高い編集操作が可能です。ですが、出来上がるページは何枚ものElementが重なり合う複雑なものになっていきます。これを任意の塊ごとにまとめるための「グループ化Element」がBOXです。BOXを使えば複数のElementを重ねて作った一群を丸ごと移動させることができます。また、ボックスでまとめた一群は「スニペット」と呼ばれる、いわばテンプレートとして保存し、別のページにドラッグではめ込める状態にしてしまうことも可能です。このため、ページの編集を始める際はとにかくまずBOXを置き、他のElementをBox内で組み合わせていくことで後のメンテナンス性が向上します。もちろん特定部分をまとめるために随時BOXによる小さな括りを設けながら作業を進めるのもオススメです。

BOXを用いた応用技「スニペット」で素早く美しいページ作成

スニペット（Snippet）とは「切り貼りして再利用可能な一部分」といった意味の言葉です。上記で説明した通り、複数のElementsを乗せたBOXを選択してください。うまく選択できない場合は画面右側の操作パネル上部のLayoutタブを開けば、現在のページを構成しているElementの種類と並びが階層的に表示されます。ここで一番下地（階層的には一番上）になっているBOXを選択するとタブが自動でStyleに切り替わり、BOXという太字表示のすぐ下にSave as Snippetという文字が見えると思います。この状態でこのSave as〜をクリックすることで、そのボックス内に入っている全てのElementをグループ化し、纏めて1つの「スニペット」として保存することができます。保存されたスニペットはElementsタブの最下部に一覧表示されており、これをドラッグ＆ドロップで任意の場所に貼り付けることができます。この方法なら、毎回レイアウトに苦心しなくても既存のページからレイアウトを切り貼りしてサクサクページ作成作業を進めることができます。また、Elementの構成に長けた人、苦手な人の間で仕上がりに差が生まれず、出来上がるページの品質もある程度の水準を維持することができます。既に存在しているページをうまく切り貼りし、素早く美しいページを作成しましょう。なお、スニペット自体はElement1つからでも作成可能です。通常のコピペはできないので、何かをコピペしたい場合は一旦スニペット化してください。そして、用の済んだスニペットは都度削除してください。一覧の整理整頓にご協力ください！

Shogunでの作業に関するQ&A
ページ自体や商品説部分の作成状況は明写真挿入のようにパット見で状況が分かりにくい上に作業自体は外部アプリで行なうため、各自が個人裁量で色んなことをやりだすと訳がわからなくなります。これまでに混乱を招いた事態のケーススタディなどを下記に掲載していきます。何かにぶち当たって、他の人もハマりそうだと思うものがあれば、必ず追記してください。もちろんナイスアイデア的なものも大歓迎です。

Q：Shogunでページを作って保存したのにShopify側でそのページを見ても何も反映されてないんだけど？！
A：ページを保存するだけではShopifyには反映されません。Shopifyに反映するにはPublish（公開）を実行する必要があります。失敗があるかもしれないのに公開しちゃうのは怖い、と思われるかも知れませんが、Publishそのものを取り消すことも可能ですので気にせず出してしまって構いません。また、 ShogunのプレビューはShopifyの全てを再現出来るわけではない ので、仕上がりの確認は ShogunでPublish > Shopifyで該当ページを表示 > Shopifyのプレビューで確認（またはHP自体で確認） してください。

Q：Shogun側にページが出来てたり出来てなかったり、作ればいいのか検索の仕方が悪いだけなのか、訳わからん！
A：試作段階でそういう事例が発生しました。運用段階で二度とそういう事態が発生していないことを願います。これは 特に編集するつもりもないのに適当にShogun上でページだけ作って放置してる と陥る可能性のある状況です。Shogun上でページを作るなら何かしら中身も作ってください。そして 必ず保存し、Publishしてください 。 Shogun上では出来ていても Shopifyに反映されてないと、他の人が見ても何がどうなっているのかが分かりません 。未完成状態のページだからPublishしたくないのであれば、Shogun側でPublishせずに止めるのではなく、 Shopify側でそのページをHiddenにする、または商品ページであればSales Channnelのチェックボックスを外せばHP上には表示されません 。

Q：自分は確かにColumnで3枚の画像を並べたのに、「左の写真ってどれ？」等と言われ全く説明が伝わらない！
A：相手の画面が小さく、作った側が横並びに表示させたつもりの画像が相手の画面では縦並び（改行）で表示されているためです。レスポンシブなページを作成する際は、 横方向に行く全てのものを信用してはいけません、どこで改行がかかるかは分からないのです 。このため、例えば写真を3枚横並びに配置した場合は、左、中、右とは言わず（左読みという前提のもと） 1枚目、2枚目、3枚目と言ったほうが確実です 。また、本来横並びで表示するつもりのものが縦並びになってしまった場合、 マージンを付けていなかったために詰まって表示されてしまう こともあります。編集画面右上にある端末切り替えボタンを使用し、 どんな端末でどのようにレイアウトが変わって表示されても問題ない作りになっている ことを確認しながら作業しましょう。

Q：ページを消したい場合はShopify、Shogunどちらから消せばいいですか？
A：ShogunはShopifyのデフォルトエディタより優先されます。Shogunでの変更はShopifyにも反映されます。つまり、Shogunでページを消せばShopifyからもそのページは削除されます（その旨の警告文が出るため間違いない）。逆に、Shopify側での処理はShogunへ自動で送られて同期されるということはないようです （本当にそうか追記募集します） 。Shopifyでページを削除した後、Shogunでそのページを検索したら普通に出てきました。このページに編集をかけて保存、PublishするとShopify側にページが復活するのかも知れません（未確認）。 確実なのはページの削除もShogun側から行うことです。Shopify側で消してしまった場合はShogun側も必ず確認してください 。

Q：PDFファイルやURLを文章内のワードに埋め込みたいんだけど。。("PDFを開くにはここから"というスタイルにするには？)
A：まず、PDFについてですが、PDFファイルをShopifyのサーバー上に保管しておくことで、Shogun上からでもそのファイルにアクセスできるようになります。手順は、Shopifyのメインページの画面左下にあるSettings→upload filesをクリックし、事前に保存してあるファイルを選択し、アップロードする。その際に、データのリストの一覧のページ右側にそのPDFを保管しているサーバーのURLが記載されているので、それをコピーしておきます。次に、shogunを開き、textタブを配置し、リンクさせたい言葉を書き、ツールバーにある鎖のようなマークをクリックすると、URLを入れるところが出てくるのでそこにコピーしておいたものを入れるとおっけーです。URLに関しては面倒なShopifyの操作は存在せず、そのまま先ほどと同じようにshogunにテキストタブを開き、同じようにツールバーの鎖のマークを開き、URLを貼り付けると簡単にリンクできます。

Q：Shopify側で商品名が変更できないんだけど？！
A：既にその商品のページがShogun側でも存在している場合、Shopifyからは名前やパスも変更できなくなります。Shogunの編集画面を開くとページ上部にTitleなどが表示された窓があります。ここに変更を加え、保存＆PublishするとShopify側にも変更が反映されます。これはShogunの、というよりShopify側で起こるトラブルですが関連性が高いのでここにも記載しています。なお、Shogun上にページが存在している商品の品名などをShopify側で変更しようとした場合、 見た目上は'Successfully Saved'されたように表示されてしまいます 。 実施には変更は破棄されていますのでダマされないでください 。

Q：Column応用技！レスポンシブのON/OFFの使い分け
A：Columnにはなんと レスポンシブによるレイアウトの自動変更を無効にする 設定があります。分割数を指定する目盛りの下の disable mobile responsiveness がそれです。

例：3分割のcolumnで画像を3枚横並びに配置しているときにdisable mobile～が
OFF＝スマホ上では画像が縦1or2列に表示されます。
ON＝スマホ上でも3枚横並びのレイアウトが保持されます。

ただし、columnの幅を任意で変更していた場合（真ん中だけ狭いなど）は、そうした設定は無視されて必ず等間隔になります。これを利用した応用技として以下のような使い方が考えられます。

小さな画像を6枚並べたい。PCでは問題なく6枚横並びになるが、これをスマホで表示すると縦に並んでしまいページが無駄に長くなる。スマホでも3枚×2列くらいで表示できれば丁度良いのだが。

以下の方法で実現可能です（設定数値は一例）。
1. Columnを2分割で配置し、列の間隔を10pxに設定する。
2. 上記のColumn内（左右とも）に3分割、間隔10pxに指定したColumnを配置する（等間隔の６Columnになる）
3. 2で配置した3Column×2個のDisable mobile responsivenessをONにする
4. こうして出来た6Columnに、Topのみに10pxのマージンを付けたimageを配置する。

この方法だと中に入っている3Column（=3枚の画像）が「1個」と見なされ、レスポンシブが有効なままの2Columnによって画面幅が狭くなると3Columnが丸ごと改行されます。一方その3Columnはレスポンシブが無効になっているため、中に入れた3枚の画像はそれ以上改行されることはありません。これでPCなら6枚横並び、スマホなら必ず3枚×2行になるように完全に制御可能なレイアウトが出来ます。なお、全てのColumnの間隔を同じにし、さらにそれと同じ幅のMarginを画像の上側に取っておくことで3×2表示になった時もすべての画像の上下左右に同じ幅のスペースが生まれます（画像サイズによっては横幅が間延びすることがある）。余談ですが、Columnの中にColumnを配置することで単体のColumnでは最大6分割までしか出来ないところを、もっと細かく分割させることも可能です。

下のアイコンは上記の要領でPCなら9個の横並び、スマホなら3×3になるように設定したものです。