Shopifyのレイアウトをもっと自在に。world株式会社つくろう、ともに。ServiceWorksAboutCSRBlogEventsRecruitShopContactENGLISHTOPブログテクノロジーShopify開発Shopifyのレイアウトをもっと自在に。2019.11.12Shopify開発Shopifyのレイアウトをもっと自在に。エンジニアこんにちは、エンジニアの川島です。Shopifyはテーマエディタだけでも様々なカスタマイズが可能なものの、テーマに存在しない機能の追加や、デザイン面の大幅なカスタマイズを行うには、通常、コーディングの専門知識が欠かせません。Shopifyにはカスタマイズをサポートするアプリが数多く提供されています。本記事ではその内のひとつ、コンテンツビルダーアプリShogunについてご紹介します。Shogunを利用すれば、コーディング抜きで直感的にページが作成できます。CSSのclass指定おわりにShogunについてShogunは、画面上の要素をドラッグ&ドロップするだけで、ページを作成・編集できるコンテンツビルダーです。ShopifyやBIGCOMMERCEなどのECプラットフォーム向けに提供されています。shogunエディタの編集画面(Shopifyの場合)料金プランは3種類で、より上位のプランではページ分析やABテストも利用できます。ページ構築には最安のBuildプラン(39ドル/月)でも充分ですが、後述するカスタム要素を活用するには、Measureプラン(99ドル/月)以上の契約が必要です。Shogunの基本的な使い方については、下記の記事が参考になります。https://www.s-bokan.com/blog/post-18810/また、Shogunは公式のドキュメントも充実しています。英語記事ではありますが、GIF動画を交えた操作解説が多く、分かりやすいので、ぜひ参照してみてください。内容も頻繁にアップデートされています。公式のクイックスタートガイドはこちらです。Shogunで配置できる要素Shogunエディタ上から配置できる要素は、2019年11月現在、下記のとおりです。Structure(構造要素)コンテンツを配置するための箱となる要素です。ページのレイアウトを構成します。Sectionもっともベーシックな要素です。Sectionを配置し、その内部にコンテンツを追加してゆくのが基本的な流れとなります。(HTMLの専門知識がある方へ:section要素と混同しそうな名称ですが、出力されるのはdiv要素です。)Columns二列以上の並列したレイアウトを構築する際に利用します。Sliderスライダーを配置します。スライダーの見た目なども、簡易的ではありますがカスタマイズできます。切り替え秒数の設定や、サムネイル表示はできません。Table表を配置します。行・列の追加はサイドバーから設定できます。Tabsタブ切り替えが可能な領域を配置します。タブのタイトルや境界線の見た目など、レイアウトも比較的詳細に調整可能です。Accordionアコーディオン展開が可能な領域を配置します。見た目は調整できますが、アコーディオン展開時のアニメーション動作などはできません。Contents(コンテンツ要素)コンテンツ要素としては、以下が配置可能です。Image画像を配置します。透明度や、ホバー時挙動の調整ができる他、Lightboxオプションを有効にすれば個々の画像をモーダルで表示することも可能です。VideoYoutubeもしくはVimeoのURLを設定することで、動画を埋め込むことができます。Heading見出しを配置します。H1〜H6として出力されます。見出しの詳細度を設定できます。Textテキストを配置します。HTML上ではp要素として出力されます。Buttonボタンを配置します。ボタン内の文言や色の細かな調整、リンク先の設定が可能です。Iconアイコンを配置します。FontAwesomeが使われており、様々な種類のアイコンが埋めこめます。Countdownカウントダウンタイマーを配置します。期間限定のキャンペーンページと相性が良さそうです:)Separator境界線を配置します。Formフォームを配置します。フォーム内の入力欄は、テキスト・メールアドレス・テキストエリアから選択できます。他の要素も現在開発中とのこと。Shogunのフォーム要素で要件を満たせない場合は、後述するHTML記述要素内に、外部のサードパーティアプリで作成した埋め込み可能なフォームを追加すると良いでしょう。Mapで表示するロケーションはサイドバーから入力する方式です。HTMLHTML記述エリアを配置します。カスタムCSSやJavaScriptの追加や、埋め込みコードの記述場所として利用できます。※Liquidは記述できません。カスタム要素でShogunをさらにパワーアップここまで紹介してきたとおり、Shogunは様々な要素をページ内に配置できますが、より細部までカスタマイズしたい場合には、不便を感じることもあるかもしれません。スライダーのアニメーション調整や、画面内の上下中央揃えはShogunだけでは困難です。その際に役立つのが、オリジナルのカスタム要素です。Measureプラン(99ドル/月)以上の契約と、Liquid/HTML/CSS/Javascriptの知識が必要となりますが、一度カスタム要素を作成すれば、以降は通常のShogun要素と同じようにドラッグ&ドロップで簡単に配置できます。基本的なページ作成はShogun上で行い、複雑な箇所はエンジニアがカスタム要素で実装する、といった協力体制を取れば、よりデザイン性とオリジナリティの高いページをShogunで作成することも可能です。カスタム要素の記述方法shogunのカスタム要素記述画面カスタム要素では、Liquid変数(上記キャプチャにおけるLiquidタブの{{flexItem}}部分)を記述すると、Shogunエディタ上で利用するための設定が編集できるようになります。編集可能な項目は下記のとおりです。Input)か、データコレクションから選択する(Collection)かを決定します。Type編集箇所に配置するコンテンツの種類を定義します。種類ごとの詳細は公式ドキュメントを参照してください。Shogunエディタ上からドラッグ&ドロップでコンテンツを配置したい場合は、Dropzoneを選択します。Type編集箇所に配置するコンテンツ内容の入力方法を、サイドバー(Sidebar)・複数リスト(Multi)・インライン(Inline)のいずれかに設定します。カスタム要素の基本的な使い方については、公式のドキュメントでも詳しく解説されています。Documentation:カスタム要素の仕様詳細カスタム要素の記述サンプル今回、ごくシンプルな画面内上下中央揃えのカスタム要素を作成してみました。それぞれの記述内容は下記のとおりです。サンプルではカスタム要素にCSSを記述していますが、Liquidの記述だけにとどめ、ShopifyテーマのCSSを適用させても良いでしょう。100%;}こちらのカスタム要素を配置し、{{flexItem}}部分にShogunのbutton要素を配置した場合、実際に出力されるDOMは下記のようになります。CSS設定を編集し、Shogun要素に出力されるclass値を追加することも可能です。CSSのclass出力位置は、上記のDOMサンプルを参照してください。出力位置は変更できません。Shogun要素は基本的にdivに囲まれた上で出力されるため、直下子要素への指定を含むレイアウト(※CSSのflexboxなど)にはカスタム要素を利用した方が便利です。おわりにShopifyには、無料・有料含めて多くのテーマが提供されており、デザイン性に優れたECサイトを構築しやすい環境が整っています。いえ、ブランディングにこだわるなら、やはりテーマレイアウトのカスタマイズは欠かせません。送信フォーム記事についてのご意見やご感想、ご質問をお気軽にお寄せください。※なお、ご質問については回答できない場合と、当ブログの記事にて個人情報を伏せたうえで回答させていただく場合がございます。私たちは、D2Cブランドを中心に採用が広がるECプラットフォーム「Shopify」で作るネットショップのコンサルティングと構築を行っています。デザイン思考に基づくワークショップ(デザインスプリント)でスタッフが「自分ごと」と思えるサービスを作ります。詳しくはこちらをご覧ください。私たちは、毎週火曜日にオフィスの入っているカフェ兼シェアオフィスのメンバーで北欧式おやつの時間「フィーカ」を設けており、どなたでもお気軽に参加いただけます!詳しくはこちらをご覧ください。さやかフロントエンドエンジニア。1990年、千葉県生まれ。立教大学文学部(文芸・思想専修)卒業後、Web業界での勤務を経て、2017年7月よりメンバーに加わる。小説を書くエンジニア。policyContact。