DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • MakeShopでECサイトを制作するときの特徴と注意点をまとめてみた

MakeShopでECサイトを制作するときの特徴と注意点をまとめてみた

think

  • top
  • blog
  • MakeShopでECサイトを制作するときの特徴と注意点をまとめてみた

MakeShopでECサイトを制作するときの特徴と注意点をまとめてみた

2020.09.12.

スポンサーリンク

スポンサーリンク

現在、いつも制作させてもらっている「のぼり刃物店」さんのECサイト制作をしています。

今回のECサイトはGMOさんが運営する「MakeShop(メイクショップ)」というネットショップ制作サービスを契約しての制作です。ボクが以前働いていた前職のメイン事業はECだったので楽天やヤフー、FutureShop、EC-CUBEとそれなりにいろんなカートシステムでの制作経験は持っているつもりでしたが、MakeShopでECサイトを制作することは初めてで、非常にいい経験をさせていただいています。

まだ制作途中ではありますが、この一ヶ月ほど集中して制作してきたので、MakeShopにてECサイトを制作する場合の特徴や気をつけたいことなどがいくつか見えてきました。

今回のブログでは、これからECサイト制作を検討されている方に向けて、MakeShopでECサイトをつくる場合、こういうところに注意してくださいという内容で書いていきたいと思います。webデザイナー含めぜひ参考にしてくださいね。

index

このブログの目次

1. レスポンシブデザインでの制作は一部以外不可能

ECサイトは取扱う商材や商品数によってはどうしてもwebページの情報量が多くなりすぎてしまうことがあるので、基本的にPCやスマホを同一ページでデザインを変えて表示させる「レスポンシブデザイン」でのサイト制作は難しいです。

PCで見る場合のサイト制作なら問題ないのですが、スマホだとどうしてもページの容量や情報過多のためwebページ表示速度が落ちてしまいます。他にもいろいろな理由があるのだと思いますが、MakeShopは同じECサイトでもPCとスマホで別サイトのようになっていて、それぞれをデバイスの表示別に繋ぎ合わせているという構造になっています。

もう少しわかりやすく言うと、PCサイトとスマホサイトそれぞれ別々に制作しないといけないということです。これにはメリットもあればデメリットもあります。

非レスポンシブのメリットとデメリットを簡単に

あまり詳しく書くつもりはないですが、PCとスマホで別々のサイト制作をするメリットとデメリットを簡単に挙げますと、メリットの方はPCとスマホ、それぞれを別として考えて制作できるという点ですね。PCの制作画面ではPCだけのデザインを考えればいいし、スマホの画面ではスマホだけ集中して制作できます。

逆にデメリットは2倍手間がかかるというところです。
例えば「よくあるご質問」ページを編集しないといけない場合、PCのページだけ編集してもスマホのよくあるご質問ページには編集された内容が反映されません。スマホの管理画面から再度よくあるご質問ページに同じ編集をしなければいけないということです。制作という面では何をするにも「二度手間」になってしまいます。

基本的にはPCとスマホ別々に編集しなければいけないということは頭に入れておきましょう。
※「クリエイターモード」という一部レスポンシブデザインに対応している制作領域は存在しています。

2. スマホの制作機能がPCより劣っている

スマホが誕生する前から存在しているカートシステムの場合、メインとなるデバイスは基本的にPCのままです。

今の時代、ほとんどの人がスマホを持っていて、デスクトップのPCよりもスマホのほうが身近でネット利用率が高く、webサイト制作の現場ではスマホをメインとしてデザインやサイト構成を考えるいわゆる「スマホファースト」が主流となっていますが、それでもカートシステムはPCをメインに構成されている場合がほとんどです。

今後改善されてくる可能性は大いにありますが、現状はMakeShopも例外ではなく、PCよりスマホサイトの制作機能が少し劣っています。

スマホの編集可能ページ一覧画面
スマホの編集可能ページ一覧画面。けっこう少ないです

PC版サイトの制作画面ではカテゴリページはページ毎にカスタマイズできますが、スマホでは1種類のみでカテゴリページごとにデザインを変えたりすることはできないし、「最近チェックした商品」をスマホで表示させたくても有料サービスへの加入が必要だったりします(PCは無料で表示できるのになぜだ・・)。

そんな感じでPCとスマホでできることに差があり、ちょっと不便にも感じます。ただ、スマホのhtmlソース構造は装飾・編集しやすくなっているので(後発なので当たり前ですが)、その点は助かりました。スマホでもtableレイアウトが主流だったらかなりキツいので・・。

3. html構造がちょっと古い

こちらも老舗カートシステムではあるあるですが・・html構造がひと昔前のものになっています。

例えば現在のwebサイトは「HTML5」で制作するのが通常ですが、MakeShopはまだ「HTML4」だったりします。日本語の文字コードもカートシステムにありがちな「EUC-JP」ですし・・。PC版サイトのhtmlソース構造の大枠がtableレイアウトだったり、かなりtableを入れ子で使用していたりと、構造が複雑になっている部分も多々あり、ページの構造を把握するのにけっこう時間をとられます。

webの進化は非常に速く、5年前に主流だった制作フローも今となっては古く感じてしまうこともよくあります。老舗であるということは、昔から利用しているショップさんも多く抱えているということで最新のwebの技術に合わせることも難しく、昔のやり方に慣れているショップさんをおざなりにするわけにもいかないはずで、楽天市場も同様ですがこの辺はカートシステムを提供する側のジレンマを感じますね。

4. システムが絡んでいる部分の装飾変更にかなり苦労する

MakeShopが用意してくれている「パンくず」や「最近チェックした商品」、「お気に入りリスト」などはどこに表示させるか?の位置の変更は利用者側でできるものの、『サイトに訪れたお客さまに商品を購入してもらう』というメインの機能の部分は、そもそものhtmlソースを編集することはできません。編集に失敗してプログラムのコードを触ってしまったりすると取り返しのつかないことになったりしますからね・・。

その部分のデザインを変えたい場合、htmlソースを見ながらどういうclass名が付けられているのか?ここを装飾変更することで他に影響が出ないか?などを確認しながら進める必要があるので、専門的な知識がない人には難しい部分かもしれません。

予算の都合などでwebデザイナーなどに制作をお願いできない場合は、MakeShop側が提供しているデザインテンプレートを使用するのが間違いないと思います。

5. 会員になった後の「体験」の部分が少し弱い

MakeShopは比較的安価な月額利用料金なので(プレミアムショッププランで月額10,000円!)、小規模のお店や個人などでも利用しやすいECカート提供サービスです。

その分どうしても簡素になってしまうのか、会員登録ページや購入手続きページ、ログイン後のマイページなどのページはMakeShop提供のデフォルトのページで、デザインのカスタマイズが不可能となっています。ページによっては上部ヘッダーにロゴ画像を表示できるくらいです。

ここの会員関連ページがサイトデザインと同じくテイストを合わせたりカスタマイズできるようになると、よりストアロイヤリティを上げることにも繋げられるのですが・・現時点ではなかなか難しいみたいです。編集可能なページは全ページしっかりカスタマイズしてサイトデザインに少しでも統一感を持たせるように制作しましょう。

ECサイトは通常のwebサイトのように100%自由に制作することはできない

今回はMakeShopに限定してサイト制作時の注意点などを挙げました。ちょっと不満の多い内容になってしまったのは申し訳ないところもあるのですが・・もちろんショップ運営側にはメリットも多いです。(初期費用や月額利用料が安い、商品登録がしやすい、SNSとの連携に力を入れているなど)

しかし、MakeShopに限らずAmazonや楽天、FutureShopなんかもそうですが、ネット上でユーザーに個人情報を入力してもらうサービスの場合、サービス利用者側ではwebサイト制作面ではどうしてもできることが限られます。

その中で訪問してくださったお客さまたちにどうやって商品を買ってもらうか、欲しい商品を見つけてもらうか。ブランド力を高めるためにどんなサイトデザインにするか・・考えるのも楽しく、学びもたくさんあります。ECサイトはネットだけですべて完結させられるからこそやり甲斐はかなりあります。ボク自身もまだまだ学んでいる最中です。より良いECサイトをつくっていきましょう。

BUROKIアイコン

もしMakeShopでECサイトをつくることになった時に参考にしてください。
スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

think

もうすぐ5周年。フリーランスデザイナーになってから気をつけていることは?

まだもう少し先なのですが、2019年5月にBUROKI designを開業して、もうすぐ5周年を迎えます。 さすがにもうすっかり会社員時代の習性などは抜け切っ…

2024.03.16.

think

2024年2月の活動報告。2月はこんなデザイン制作をしていました

今年の冬は異常なほどの暖冬だったそうですね。 でも最近は夏になれば例年以上の異常な暑さといわれることが多いですし、この気候の異常さが通常にな…

2024.03.07.

design_thing

ペンタブが苦手な人向け。illustratorでイラストを制作する方法

デザイン制作でイラストが必要になることはよくありますよね。 僕の場合はイラストレーターさんに依頼することがほとんどなのですが、案件によっては…

2024.02.14.

think

2024年1月の活動報告。1月はこんなデザイン制作をしていました

もうすぐ確定申告はじまるなぁ・・とこの時期になると毎年思います。 しかも今年からは昨年10月より開始したインボイス制度により消費税を申告する必…

2024.02.06.

private

北新地にある「鮨 かうと」で42歳の誕生日を祝ってもらいました

先日のことですが、1月16日は僕の誕生日ということで・・ 今年も相方に祝ってもらいました。 実は年末に欲しがっていたカセットデッキを誕生日プレゼ…

2024.01.19.

private

豊中市民なので2024年から服部天神宮の豊中えびすにて商売繁盛祈願

年が明けて、1月9日から11日までの3日間は商売人にとって毎年恒例の十日戎ですよね。 今までは大阪市民だったので今宮戎神社の十日戎で毎年商売繁盛…

2024.01.13.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル