グループ会社が新しく設立されたとき、IT周りの整備を代行することになった。
「新しい会社だから何もない」という状態からのスタートだ。ドメインを取る、メールアドレスを発行する、サーバーを借りる、コーポレートサイトを作る、ECサイトを立ち上げる、アナリティクスを仕込む——これを全部やった。
やったことの全体像
| 作業 | 使ったもの |
|---|---|
| ドメイン取得 | お名前.com |
| メールアドレス発行 | Google Workspace |
| レンタルサーバー | エックスサーバー |
| コーポレートサイト | WordPress |
| ECサイト | MakeShop |
| アナリティクス | GA4 + GTM |
普段は治験CRMの開発をしているので、EC領域はほぼ初めてだった。「ノーコードのECプラットフォームなら簡単だろう」と思っていた部分もあった。
MakeShopを選んだ理由
選定はグループ会社側の意向が強かった。国内の決済対応の充実度と、運用を自社スタッフが引き継げることが条件だった。
ShopifyやBASEとの比較もしたが、コンビニ払い対応やキャリア決済など国内向け機能の揃いでMakeShopになった。エンジニアでない人が日常運用することを前提にすると、管理画面の日本語化は思ったより重要だ。
MakeShopでできること・できないこと
MakeShopはサーバーサイドには一切触れない。触れる範囲はフロントエンドだけだ。
触れる範囲
- HTMLテンプレートとCSSの直接編集（管理画面のテンプレートエディタから）
<head>タグへのカスタムスクリプト追加- MakeShop独自タグ（
{{item_name}}など）を使ったテンプレート記述
触れない範囲
- サーバーサイドのロジック
- 決済フローのUI
- データベース
この境界線を最初に把握しておかないと、「これもできるはずだ」という方向に時間を使ってしまう。
GA4の計測をMakeShopに仕込む
アナリティクス計測はGTM経由でGA4を入れた。MakeShopの管理画面でカスタム <head> タグを追加できるので、GTMのスニペットをそこに貼る。
購入完了ページではMakeShop独自変数が使えるため、コンバージョンタグに注文金額や注文IDを渡すことができる。
<!-- 管理画面 > テンプレート > ヘッダータグに追加 -->
<!-- GTM スニペット -->
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXXXX');</script><!-- 購入完了ページのテンプレートに追加 -->
<script>
dataLayer.push({
event: 'purchase',
ecommerce: {
transaction_id: '{{order_id}}',
value: {{order_price}},
currency: 'JPY'
}
});
</script>{{order_id}} や {{order_price}} はMakeShopが値を埋めてくれる独自タグだ。
テンプレートHTMLを編集するときの注意
MakeShopのテンプレートにはこの独自タグが散在している。{{item_name}} を誤って消すと、その商品ページで商品名が表示されなくなる。
管理画面にバージョン管理機能はない。テンプレート編集前は必ずHTMLをローカルにコピーしてから作業する。Gitで管理したいなら手動エクスポートして別リポジトリに保存するしかない。
「整備代行」で学んだこと
設計から運用まで自分で決める開発と、既存プラットフォームに乗る作業はかなり違う感覚だった。
制約の中でどう解決するかを考える力は、普段の開発とは別の筋肉だと思う。「サーバーサイドが触れないならフロントで解決する」「APIが叩けないなら独自タグで何とかする」という発想の切り替えが必要だった。
もう一つ気づいたのは、エンジニアじゃない人が引き継いで使うシステムを作ることの難しさだ。設定の余地を残しすぎると混乱を招く。逆に制約しすぎると何もできなくなる。「引き継ぎやすい状態」を意識してドキュメントを整備したのは、本業の経験が活きた部分だった。
コーポレートサイトのWordPressも含め、最終的にはグループ会社のスタッフが一通り自分で触れる状態で引き渡した。