ECサイト作成のコツとセンスが凝縮！「MakeShop Design Contest」優秀作品はテンプレート化も！

2022.3.10

2020年以降続くコロナ禍の影響もあり、ECサイトの利用頻度が上がったという人も多いのではないでしょうか？販売する事業者側を見ても、これまで以上にECサイトへ力を入れている方が多いように感じます。

ライバルとなるECサイトと差別化を図り売り上げを獲得するためには、サイトのデザインも重要な要素です。実店舗での店舗設計やディスプレイともいえるサイトデザインは、見栄えだけでなく商品の探しやすさや購入のしやすさにつながり、売り上げにも大きく影響してくるからです。

GMOメイクショップが運営するネットショップ構築ASPサービス「MakeShop byGMO（以下、MakeShop）」は、2019年3月より、レスポンシブWebデザイン（※）に対応しながら、自由度の高いデザイン編集機能『クリエイターモード』を提供しています。

※1つのHTMLソースで、PCやスマートフォン、タブレットなどさまざまなデバイスに最適化されたレイアウト・デザインのページを自動で表示する技術

従来のデザイン編集機能では本格的なECサイトを簡単に制作できる点を重視していたため、テンプレート化されたコードが自動で出力され、決められたテーブルレイアウトでしかデザインをすることができず、レスポンシブWebデザインへの対応が難しいという状況がありました。

幅広いテンプレートを用意していましたが、EC店舗が増加しライバルとなるサイトが増えるなか、「独自のデザインで差別化を図りたい」「商品の持つ世界観を表現したい」と、自由なデザインに対する要望が多く寄せられるようになり『クリエイターモード』をリリースしました。

『クリエイターモード』は、デザイン制作会社やサイト構築経験がある方からはご好評をいただいておりましたが、自由に編集できるがゆえにHTMLやCSSの知識が必要となり、これまでサイトを構築した経験がない人にとっては難しい上級者向けになってしまうという課題がありました。

そこで、初心者の方でも簡単に『クリエイターモード』でサイト構築をしていただけるよう、昨年は外部から広くデザインを募集するデザインコンテストを開催しました。今回はそのコンテストで優秀作品に選ばれたデザインをご紹介するとともに、ECサイトのデザインにおけるポイントを見ていきたいと思います。

◆「MakeShop Design Contest」作品一覧
https://www.makeshop.jp/main/mdc/

デザインコンテストで優秀作品に選ばれたデザインは、順次テンプレート化し「MakeShop」のご利用ショップ様に無料で提供いたします。テンプレートをご利用いただくことで、初心者の方でも『クリエイターモード』でのサイト構築がしやすくなります。

「MakeShop Design Contest」優秀作品をご紹介！

「MakeShop」の制作パートナー様からフリーのデザイナーの方まで多くの応募をいただいたデザインコンテストでは、GMOメイクショップ社内での審査に加え、ECサイトのデザインに精通したゲスト審査員と、「MakeShop」ご利用ショップ様の投票により6つの優秀作品を選出しました。なかでも得票数が高かった3作品を紹介します。

谷勇一郎さん「BRothers」

谷勇一郎さん「BRothers」

ゲスト審査員、ショップ様、GMOメイクショップ社内の各得票が最も多い作品です。ゲスト審査員からは、以下の講評がありました。

・商品にしっかりと目がいくレイアウトと、最も王道のUIでありながら、認知容易性の観点からも高評価
・レビュー評価の見やすさなど、ユーザー目線での使いやすさを重視し、また検索機能がわかりやすい箇所にある点も嬉しい
・複数商品の画像レイアウトが現在のデザインテンプレートにはない仕様になっていることに加え、今回の候補作品の中で、一番汎用性が高く使いやすい

「Brothers」のデザインは、『クリエイターモード』のデザインテンプレートとして無料で提供を開始しています。

・「Brothers」テンプレートサンプルショップ
http://tplbrothers.shop20.makeshop.jp/
・谷勇一郎さんWebサイト
https://br-others.jp/

株式会社まなびと「まなびとちーむ１」

株式会社まなびと「まなびとちーむ１」

ゲスト審査員、ショップ様の得票を多く獲得したのが、こちらの作品です。ゲスト審査員からは、以下のような講評がありました。

・王道・オーソドックスなレイアウトで商品にしっかりと目がいくこと、プレーンなデザインのため汎用性が高いこともテンプレートとして高評価
・商品ページでカートボタンが追従してくる工夫も評価ポイント

ショップ様からも、カートボタンの追従により購入率アップが期待できる点が高く評価されたのではないでしょうか。「まなびとちーむ１」のデザインは、デザインテンプレートとしての提供に向け準備を進めております。提供が開始された際には『クリエイターモード』で無料でご利用いただけます。

・株式会社まなびとのWebサイト
https://manabito.biz/

ROYさん「＆more」

ROYさん「＆more」

多数のブランドやカテゴリーを扱うショップ様向けのデザインであるこちらの作品は、GMOメイクショップ社内からの得票数が最も多いものでした。ゲスト審査員からは、以下のような講評がありました。

・カレンダーのレイアウトや、唯一カートフック関数を使用している点がポイント
・追加商品説明文を上部に配置するレイアウトになっており、定期購入商品を販売しているショップなどには使いやすい

「&more」のデザインも、『クリエイターモード』のデザインテンプレートとして無料で提供を開始しています。

・「&more」テンプレートサンプルショップ
http://tplandmore.shop18.makeshop.jp/

以上、デザインコンテストで優秀作品に選ばれたデザインテンプレートから3作品をご紹介しました。審査員の講評を見ると、やはりECサイトのデザインの場合は、サイト全体がおしゃれな見た目かどうかやインパクトがあるかだけでなく、商品の検索のしやすさや、カート追加までの導線などが重要であることがわかります。

また、幅広いジャンルのショップに利用いただいている「MakeShop」ならではの、汎用性の高さも評価のポイントになっていました。

GMOメイクショップでは、EC事業者様の成長に大きく関わるサイトデザインの面でもご支援ができるよう、デザイン構築機能の強化に取り組んでいます。テンプレートの拡充においては、今後もデザインコンテストの開催を予定しておりますので、ぜひご応募をお待ちしております！

◆デザインの自由度が高いASPサービス「MakeShop byGMO」
https://www.makeshop.jp/

GMOメイクショップ　広報　戸恒智美

GMOメイクショップ広報
豊富な機能と安心のサポート体制で法人様に多く選ばれているECサイト構築SaaS「MakeShop byGMO」を中心に、ECの構築支援だけでなくマーケティング支援や運営代行までEC領域全般をサポートするGMOメイクショップで広報を担当。インテリアブランドや建材メーカーを経て、2018年入社。家族の転勤を機に、現在は福岡で暮らしている。