私たちGMOメイクショップ株式会社（以下、GMOメイクショップ）は、EC⽀援を軸として、マーケティング⽀援などのサービス、プロダクトを開発・提供しています。その中でも主軸サービスであり、8年連続で業界No.1（※1）を獲得し続けているネットショップ・ECサイト構築サービス「MakeShop byGMO（以下、MakeShop）」は、2019年3月に自由度の高いデザイン編集機能「クリエイターモード」を提供開始いたしました。
今回は、上級者向けである「クリエイターモード」について、MakeShop事業部 MakeShopカスタマーグループでサービスのプロモーションデザインおよびUX/UIデザインを担当しているリーダーの大橋より開発秘話をお届けします。
（※1）ネットショップASPサービス運営企業各社の発表数値より比較（自社調べ 2020年3月時点）
ショップ運営者様やウェブ制作会社の方がより自由に効率的なデザイン編集ができる機能で、ゼロからデザインできるため、カスタマイズ性にも優れています。つまり、デザインにこだわったネットショップを作りたいという方にもってこいの機能なのです。
また、レスポンシブWebデザイン（※2）にも対応しているため、モバイルファーストのデザインやSEO対策がしやすくなっています。
（※2）1つのソース（HTML）で、PCやスマホ、タブレットといった様々なデバイスに、最適化されたレイアウト・デザインのページを自動で表示する技術のこと。
「ベーシックモード」では、ある程度テンプレート化されたコードが自動で出力されるようになっていたため、HTMLやCSSの知識がない方でも、かんたんにショップを作成できていました。
しかし、より自由なデザインや独自性のあるショップを作成したいという要望がユーザーから出てきたことにより、もう少し上級者向けのデザイン編集機能が必要になりました。
そんな背景から、クリエイター（ものづくりをしている方々）に愛されるデザイン機能になって欲しいという想いで「クリエイターモード」と名付けました。
また、様々な分野のEC化が進みライバルショップが増える中で、他のショップとの差別化や、商品の持つ世界観を表現したいと、自由なデザインに対する要望が多く寄せられるようになってきました。
そこで「もっと自由度が高く、レスポンシブWebデザインにも対応したデザイン編集機能を作りたい！」という想いから、新デザイン編集機能開発プロジェクトが発足しました。
しかし「MakeShop」の特徴でもある「多機能」の部分がネックとなり、開発は難航しました。
制作担当者の目線でカスタマイズ性にこだわる制作メンバーと、ショップ運営者の目線で対応機能の種類にこだわる営業メンバー、それぞれ視点が異なるため、当初はやりたいことを盛り込み過ぎてなかなか上手く意見がまとまらず、一度はプロジェクトに暗雲が漂ったこともありました。
他にも、デザイン編集時に使用する独自タグの命名規則、ページを表示する際のURLなど、SEOの観点なども考慮した仕様の検討は範囲が広く大変でした。
しかし、提供するべき機能を明確にして優先順位をつけることで、なんとか2019年3月のリリースまで持っていくことができました。そしてリリース以降は、さらに完成度を高めるべく開発を進め、提供開始から約1年半、ようやくご要望の多いすべての機能に対応したデザイン編集ができるようになりました。
まっさらな状態（DOCTYPE宣言）から自由にショップをデザイン・構築することができます。
プログラム上どうしても入ってしまうコードがあったり、変更できないHTMLソースがあって不便だったりということはありません。
■よく使う部分をパーツ化して管理
「クリエイターモード」には「モジュール管理」という機能があり、サイト内で複数ページに跨ってよく使う部分（ヘッダーやフッターなど）を、パーツ化して管理できます。専用のタグを生成できるので、そのタグを入れておけば更新や管理もラクになります。
■CSSやJavaScriptも自由に追加可能
サイト全体で使うものは「全ページ共通」に、特定の画面でしか使わないものは画面ごとに追加していくことができます。このように、画面ごとに読み込むファイルを管理できるので、不要なファイルの読み込みで表示速度が遅くなることもありません。
■構造化データに対応
headタグ内も自由に編集できるので、構造化データ（JSON-LD形式）を書くことができます。商品名や商品画像を表示する独自タグを使って指定の形式で書くことができるため、検索結果の表示がリッチになりクリック率アップが期待できます。
このように「クリエイターモード」を使うことで、ショップのデザインや機能に独自性を持たせることができます。そのため、オリジナルの世界観があるアパレル関連のショップ様や、写真の見せ方が重要になる食品を取り扱うショップ様から好評いただいています。
また、実際に「クリエイターモード」を利用してデザインをリニューアルしたショップ様では、昨対比の平均で注文数は約26%アップ、売上も約12%アップ、スマホからの注文は約30％アップしたという結果が出ています。
しかし上級者向けであるがゆえに、多少のHTMLやCSSの知識が必要です。そのため、これまでサイト構築の経験があまりない方にとっては、かんたん・手軽にショップをデザインするのは難しいかもしれません。
そこで、もっと多くの方にご利用いただけるよう、マニュアルやサンプルコードを充実させる計画を現在進めています。編集画面も「より分かりやすく」を意識し、操作性を考慮してシンプルに作っています。
また、「クリエイターモード」は追加の機能開発がスムーズにいくように設計されており、利用者にスピーディーに価値を提供できるようになっています。今後はデザインテンプレートもどんどん追加していき、自由度の高い「クリエイターモード」でありつつも、テンプレートそのままでも十分使いやすいショップができるようにしていきます。
最終的には「デザインにこだわってネットショップを作るならMakeShopだね！」と言われるサービスにしたいですね！
＜関連URL＞
・GMOメイクショップ株式会社 クリエイターモード提供開始のプレスリリース
URL：https://www.makeshop.co.jp/news/press/2019-03-28/
・クリエイターモード特設ページ
URL：https://reference.makeshop.jp/manual/info/creator-mode/
今回は、上級者向けである「クリエイターモード」について、MakeShop事業部 MakeShopカスタマーグループでサービスのプロモーションデザインおよびUX/UIデザインを担当しているリーダーの大橋より開発秘話をお届けします。
（※1）ネットショップASPサービス運営企業各社の発表数値より比較（自社調べ 2020年3月時点）
デザイン編集機能「クリエイターモード」とは？
クリエイターモードとは、ネットショップ・ECサイト構築サービス「MakeShop」のデザイン編集機能のひとつです。ショップ運営者様やウェブ制作会社の方がより自由に効率的なデザイン編集ができる機能で、ゼロからデザインできるため、カスタマイズ性にも優れています。つまり、デザインにこだわったネットショップを作りたいという方にもってこいの機能なのです。
また、レスポンシブWebデザイン（※2）にも対応しているため、モバイルファーストのデザインやSEO対策がしやすくなっています。
（※2）1つのソース（HTML）で、PCやスマホ、タブレットといった様々なデバイスに、最適化されたレイアウト・デザインのページを自動で表示する技術のこと。
「クリエイターモード」というネーミングの由来は？
従来のデザイン編集機能である「ベーシックモード」と比較しています。「ベーシックモード」では、ある程度テンプレート化されたコードが自動で出力されるようになっていたため、HTMLやCSSの知識がない方でも、かんたんにショップを作成できていました。
しかし、より自由なデザインや独自性のあるショップを作成したいという要望がユーザーから出てきたことにより、もう少し上級者向けのデザイン編集機能が必要になりました。
そんな背景から、クリエイター（ものづくりをしている方々）に愛されるデザイン機能になって欲しいという想いで「クリエイターモード」と名付けました。
誕生のきっかけ～開発～リリースまで
数年前まで「MakeShop」は、本格的なネットショップをかんたんに作成できるという点を重要視していたため、テンプレートごとに決められたテーブルレイアウトでしかショップをデザインすることができませんでした。そのため、レスポンシブWebデザインに対応したネットショップを作ることが難しく、スマホでネットショッピングをするのが当たり前になっている今の時代のニーズに応えるサービスを提供できていないと感じていました。また、様々な分野のEC化が進みライバルショップが増える中で、他のショップとの差別化や、商品の持つ世界観を表現したいと、自由なデザインに対する要望が多く寄せられるようになってきました。
そこで「もっと自由度が高く、レスポンシブWebデザインにも対応したデザイン編集機能を作りたい！」という想いから、新デザイン編集機能開発プロジェクトが発足しました。
しかし「MakeShop」の特徴でもある「多機能」の部分がネックとなり、開発は難航しました。
多機能であるがゆえに全機能をクリエイターモードに反映させることが難しかったため、まずは機能の選定から始めました。
制作担当者の目線でカスタマイズ性にこだわる制作メンバーと、ショップ運営者の目線で対応機能の種類にこだわる営業メンバー、それぞれ視点が異なるため、当初はやりたいことを盛り込み過ぎてなかなか上手く意見がまとまらず、一度はプロジェクトに暗雲が漂ったこともありました。
他にも、デザイン編集時に使用する独自タグの命名規則、ページを表示する際のURLなど、SEOの観点なども考慮した仕様の検討は範囲が広く大変でした。
しかし、提供するべき機能を明確にして優先順位をつけることで、なんとか2019年3月のリリースまで持っていくことができました。そしてリリース以降は、さらに完成度を高めるべく開発を進め、提供開始から約1年半、ようやくご要望の多いすべての機能に対応したデザイン編集ができるようになりました。
「クリエイターモード」でできること
■ゼロからショップをデザインまっさらな状態（DOCTYPE宣言）から自由にショップをデザイン・構築することができます。
プログラム上どうしても入ってしまうコードがあったり、変更できないHTMLソースがあって不便だったりということはありません。
■よく使う部分をパーツ化して管理
「クリエイターモード」には「モジュール管理」という機能があり、サイト内で複数ページに跨ってよく使う部分（ヘッダーやフッターなど）を、パーツ化して管理できます。専用のタグを生成できるので、そのタグを入れておけば更新や管理もラクになります。
■CSSやJavaScriptも自由に追加可能
サイト全体で使うものは「全ページ共通」に、特定の画面でしか使わないものは画面ごとに追加していくことができます。このように、画面ごとに読み込むファイルを管理できるので、不要なファイルの読み込みで表示速度が遅くなることもありません。
■構造化データに対応
headタグ内も自由に編集できるので、構造化データ（JSON-LD形式）を書くことができます。商品名や商品画像を表示する独自タグを使って指定の形式で書くことができるため、検索結果の表示がリッチになりクリック率アップが期待できます。
このように「クリエイターモード」を使うことで、ショップのデザインや機能に独自性を持たせることができます。そのため、オリジナルの世界観があるアパレル関連のショップ様や、写真の見せ方が重要になる食品を取り扱うショップ様から好評いただいています。
また、実際に「クリエイターモード」を利用してデザインをリニューアルしたショップ様では、昨対比の平均で注文数は約26%アップ、売上も約12%アップ、スマホからの注文は約30％アップしたという結果が出ています。
「クリエイターモード」をもっと使いやすく
「クリエイターモード」は日々進化しており、使える機能も増えています。しかし上級者向けであるがゆえに、多少のHTMLやCSSの知識が必要です。そのため、これまでサイト構築の経験があまりない方にとっては、かんたん・手軽にショップをデザインするのは難しいかもしれません。
そこで、もっと多くの方にご利用いただけるよう、マニュアルやサンプルコードを充実させる計画を現在進めています。編集画面も「より分かりやすく」を意識し、操作性を考慮してシンプルに作っています。
また、「クリエイターモード」は追加の機能開発がスムーズにいくように設計されており、利用者にスピーディーに価値を提供できるようになっています。今後はデザインテンプレートもどんどん追加していき、自由度の高い「クリエイターモード」でありつつも、テンプレートそのままでも十分使いやすいショップができるようにしていきます。
最終的には「デザインにこだわってネットショップを作るならMakeShopだね！」と言われるサービスにしたいですね！
＜関連URL＞
・GMOメイクショップ株式会社 クリエイターモード提供開始のプレスリリース
URL：https://www.makeshop.co.jp/news/press/2019-03-28/
・クリエイターモード特設ページ
URL：https://reference.makeshop.jp/manual/info/creator-mode/
編集部おすすめ
