現役エンジニアがMakeShopを使って感じたメリット・デメリット

現役エンジニアがMakeShopを使ってみたメリット・デメリット

MakeShopの概要

MakeShopで作成されている事例／INSECT MARKET、 ファーファ

8年連続 No.1 の実績が輝かしい MakeShop。手数料無料・豊富な機能を武器に他社との差別化を図り、実績を積み上げています。

MakeShopベースで作られたサイトには「INSECT MARKET」や「ファーファ」など有名なショップもあり、安心して導入を検討できそう。 私も実際にユーザー登録し、使ってみると、瞬く間に自分のお店を公開できました。

テンプレートのみ採用し、デザイン編集していない状態の私のネットショップ （LINK）

商品登録もテンプレートがあるので、必要な情報を入力するだけ。

MakeShop商品追加画面

商品情報を入力するフォーム、パソコン用とスマホ用の説明文は別々に用意されている

決済まわりについても、提携先のサービスを管理画面で一覧表示してくれていますので、管理・申請が簡単。

早く・低コストでネットショップを始めたい、という方にはぴったりなサービスであることが確認できます。

MakeShopでできること（メリット）

• カスタマイズ可能なデザイン
• 機能追加もできるJavaScriptの編集性
• SEOの構造化対策
• .webp 画像の読み込み

MakeShopアカウント作成時に出来上がる初期の Webサイト は、 HTML4 でできた古典的な Web ページになりますが、MakeShop では HTML5 に対応した「クリエイターモード」を利用可能。

MakeShop商品追加画面

http://oshimamasara.shop80.makeshop.jp/

実際に少しデザインを編集してみましたが、上図のように自分好みにデザインをカスタマイズできることが確認できます。

また「クリエイターモード」では JavaScript の編集欄もあり、自分好みの機能を追加可能。 jQuery もデフォルトで読み込まれているようなので、試しに　Vue.js を実行できないか、試してみました。

Vue.js でカレンダーを設置した様子

すると npm こそ ❌ なものの、 CDN で必要なプログラムを読み込めば MakeShop で Vue.js も利用することができました。 MakeShop から提供されているテンプレートエンジンの Smarty と Vue.js を掛け合わせてデザインを考えてみるのも面白そうですよね。

それから最近 Google が推奨している Webページの ”構造化” ですが、こちらも商品詳細ページの HTML 編集欄に必要なスクリプトを組み込めるので対応可能。SEO測定ツール：Google Speed Insights でよく警告される .webp もデザイン面では利用できました、ただし商品画像への .webp はアップロードできませんでしたね。

このように MakeShop では、ある程度コードの変更を許容してくれていますので、Wix.comなどに比べて SEO対策や機能追加などを主体的に制御することができるでしょう。

また上記でご紹介した以外にも「商品レビュー機能」が標準だったり、 Yahoo!ショッピングなど他のマーケットにも連携できたり ”売れる仕組み” が　MakeShop にはありますね。

キーワード設定や構造化などの SEO 対策は実行できる一方で、 MakeShop のプラットフォーム上、普通にデザインしていくと SEO採点の Google Speed Insights では 20点から 60点ぐらいになります（参考リンク）。

MakeShopでできないこと（デメリット）

• API
• 800KB以上のファイルアップロード
• 無料SSL
• MakeShop独自のコードブロック

MakeShop にはテンプレートエンジンの Smarty が用意されていますが、それだけでは満足いかない場合も出てくるでしょう。例えばライブで販売実績を Web 上で公開したい場合、売上数のデータをひっぱてくる API はありません。基本的には MakeShop の管理画面で入力したデータにのみ Webページに記載できる形となりますね。

「800KB以上のファイルはアップできない」、こちらは商品画像登録時に発生したことで、 800KB以上の画像ファイルは商品登録画面からは ❌ でした。

画像 824KB の画像をアップロードしようとした時に出たエラー文

しかし、「複数商品画像登録」機能を使えば 800KB 以上もアップでき、また FTP 機能を使えば 800KB 以上もアップロードできました。最初の商品画像をセットするところのみ ❌ という、少しわかりにくい状態。

「SSL」については、ペライチなどが標準無料提供する一方で、MakeShop の場合は、年間 13,200円の費用が必要に。最初は「えっ！？」と思いましたが、 認証機関は「GlobalSign」、申請にあたっては書類を提出しないといけないので、無料の Let's Encrypt とはグレードが違います。 きちんと所在確認されている証明書なら、消費者も安心して購入することができる、ということでしょう。

ペライチも SSL 認証期間は GlobalSign です。

「MakeShop独自のコードブロック」というのは、デザイン編集で追加したつもりのないフォントが読み込まれたりする現象。必要のないコードが読み込まれると SEO 的にマイナスになっちゃいますので、できれば読み込みをなし、にしたいですよね。

MakeShop で作成したサイトの SEO診断結果（Google Speed Insights）

この他にも根本的に Wix.com のような ドラッグ＆ドロップ でページデザインすることはできませんので、ページデザインするにあたっては HTML や CSS、JavaScript、 Smarty の知識は必須、ということですね。

MakeShopを利用する時にあった方がいいスキル

MakeShopのサンプルなどを見ていると、自分でもお洒落なネットショップを作れる、と思うのは勘違いかもしれません。

MakeShopでページデザインを編集していくには、以下のスキルが欠かせないからです。

• HTML
• CSS
• JavaScript
• Smarty

MakeShop では、部分毎にコードが編集できるようになっています。

編集モードをクリエイターモードにして、HTMLを編集する様子

実際にプログラムを確認してみると HTML や CSS 意外に {$item.name} という不思議な文字列が。これは Smarty というテンプレートエンジンによるもので、 {$item.name} は商品名を表示。

Ruby on Rails や Django などフレームワークを触ったことのある方であれば、テンプレートエンジン馴染みがあるのでスムーズに利用できると思いますが、初めての方はちょっと苦戦するかもしれません。

MakeShopのデザイン編集力を身に付ける方法

デフォルトの状態ではどうにもならない MakeShop のデザイン。文字の大きさや配置、色などデザイン変更における全てで HTML や CSS が必要になってきます。 そんな MakeShop に欠かせない ”デザイン・スキル” は、以下の方法で習得可能。

• 独学でHTMLやCSSを学習
• プログラミング・スクールで学習
• 諦めて外注する

独学については参考書や YouTube、 W3School など無料の教材も多く提供されています。”やる気”と”時間”さえあれば独学でも HTML や CSS スキルを身に付けることができるでしょう。

しかし逆に考えれば ”やる気” と ”時間” がそんなにない場合、❌ でしょうか？ 実際にプログラムを編集したり、書いてみるとわかるのですが、最初のうちは思うようにデザインが反映されずに ”イライラ” するものです。そして悪い場合は、やる気をなくし、MakeShop作りを諦めるということも。

一度は夢見たネットビジネスの世界、やり切ってみたいですよね。そんな時に参考となる勉強方法が「オンラインのプログラミング・スクール」。 学習時間がなくても分からないことを聞いて、問題を短時間でクリアできますし、”やる気” も独学に比べると維持しやすい傾向。

「プログラミングスクール」というとお金はかかりますが、身に付けたスキルは一生ものですし、何より ”納得のいく結果” を出すことができます。このサイクルって、人生楽しくなりますよね。

MakeShopに対する求人状況

個人的に MakeShop を利用するにしても、会社で MakeShop を利用するにしても、そのスキルには ”価値” があります。例えば indeed で ”MakeShop” と検索すると 45件の求人が確認できますし、クラウドワークス上でもデザインに関する案件がちらほらありますね。

CrowdWorks で "MakeShop" のキーワード検索した結果

つまり物を売るために自分や仕事のために MakeShop を運営していたことが、そのまま”自分自身”の仕事にできる、ということ。これはコロナ社会のような不確かな時代を生きていくには、安心できる事案と言えるでしょう。

まとめ

MakeShop の公式ページなどを見ると、なんだか簡単にネットショップを開けそうに感じますが、現実はそう甘くありません。

まずは最初の壁であるデザインにぶつかりますし、デザインが大まかにできても決済の申請に１ヶ月かかります。

それからMEOMap Engine Optimizationに販路拡大と次から次にやるべきことが出てきます…。 つまり、かなりの”時間” と ”労力” が必要です。

「時間ないのにアレもコレもしなくちゃ！」「なんで思うように Web デザインできないんだ！」とストレスを抱えている方は、一度ご自身の学習環境を見直してみませんか？ 　CodeCampなら現役エンジニアや現役デザイナーによる的確で適切な指導が受けられ、効率よくスムーズに技術を習得できます！

タイミングよければ即日無料体験できますので、ご公式ページ より確認してみて下さい。