この記事の対象: カラーミーショップで運営中のECをShopifyへ移す検討をしている事業者・制作者
読了時間: 約9分
カラーミーショップからShopifyへの移行は、CMSの乗り換えとは別の種類の仕事になります。テンプレート言語が違うだけでなく、商品のバリエーションの持ち方、カート周り、会員情報の扱いまで前提が変わるためです。この記事では「移行作業の手順」ではなく、カラーミー固有の構造がShopifyのどこで引っかかるかと、デザイン面で何を作り直す判断になるかに絞ってまとめます。手順そのものは別記事で扱っているので、重複する部分はそちらへ送ります。
カラーミー shopify 移行で最初に判断すべきは「何を持っていくか」
移行の難所はデータではなく構造
商品データのCSV書き出しとインポート自体は、どちらのサービスも機能として持っています。詰まるのはそこではなく、カラーミーで組んでいた「商品の持ち方」がShopifyの型に収まるかという部分です。
カラーミーはオプション設定が比較的自由に組めるため、サイズ・カラー・刻印の有無・ギフト包装などを1商品の中で並列に扱っている店舗が多くあります。Shopifyは商品バリエーションを最大3つのオプション軸で持つ設計です（アプリで拡張は可能です）。4軸以上で組んでいた商品は、移行時に以下のどれかを選ぶことになります。
| 選択肢 | 向いているケース | 代償 |
|---|---|---|
| 商品を分割する | 軸のひとつが実質別商品（例: 本体とギフトセット） | 商品数が増え、一覧の見せ方を作り直す |
| オプションアプリを入れる | 刻印・名入れなど在庫を持たない軸がある | 月額が乗る。カート周りのデザイン制約が増える |
| 軸を統合する | 「カラー×サイズ」に畳める | 商品名が長くなり、検索結果での見え方が落ちる |
どれを選ぶかでカテゴリページのレイアウトが変わります。 商品を分割する方針を取った瞬間に、一覧ページのカード設計とフィルタ設計はゼロから引き直す仕事になる。ここを「データ移行の後でやればいい」と後回しにすると、デザインの手戻りが一番大きく出ます。
消えるものを先に数える
そのまま持っていける
- 商品名・価格・説明文
- 商品画像
- 注文履歴（参照用として）
作り直しになる
- テンプレート（独自タグ→Liquid）
- カテゴリ構造（コレクションへ）
- フリーページ
引き継げない
- 会員パスワード
- 保有ポイント（アプリで代替）
- 定期購入の決済情報
設計を見直す対象
- 商品オプションの軸
- 送料の条件分岐
- 会員ランク・割引ルール
この4分類のうち、事業者が最も驚くのは3番目です。会員パスワードはハッシュ化されて保存されているため、どのECカートからも書き出せません。既存会員には再設定の案内が必要になります。
ポイント残高も同様で、Shopify標準にポイント機能はありません。アプリで入れるか、移行時に一度クーポンへ振り替えるかの判断になります。移行の告知文を書く段階でこの2つが決まっていないと、お客さまへの説明ができません。
移行手順そのもの（どの順でデータを入れ、いつDNSを切り替えるか）は、CMSからの移行と共通する部分が多くあります。工程の全体像はこちらで整理しています。
テンプレートの作り直しで何が変わるか
独自タグとLiquidは思想が違う
カラーミーのテンプレートは<{$product.name}>のような独自タグで、HTMLの中に直接値を差し込む形です。ShopifyのLiquidも書き方は似ていますが、セクションという単位でテンプレートを分割し、管理画面から並び替えられるという前提が加わります。
{% comment %} Shopify: セクション単位で設定を持たせる {% endcomment %}
{% schema %}
{
"name": "商品特長",
"settings": [
{
"type": "text",
"id": "heading",
"label": "見出し",
"default": "この商品について"
},
{
"type": "select",
"id": "columns",
"label": "カラム数",
"options": [
{ "value": "2", "label": "2列" },
{ "value": "3", "label": "3列" }
],
"default": "3"
}
],
"presets": [{ "name": "商品特長" }]
}
{% endschema %}
このスキーマ部分がカラーミーには存在しない概念です。「運用担当者が管理画面でどこまで触れるようにするか」を設計に含める必要が出てくるのが、移行時の一番大きな変化になります。
カラーミー時代は「変更はすべて制作会社に依頼」で運用できていた店舗が、Shopifyでは「トップページの並び替えは自社でやりたい」と言い出す。これは良い変化ですが、設定項目を増やしすぎるとデザインが崩れる余地も増えます。実装のポイントは次の3つです。
- 色は
settingsに出さない。 ブランドカラーを管理画面から変えられるようにすると、必ずコントラスト基準を割る組み合わせが生まれます - カラム数は
selectで選択肢を絞る。 数値入力にすると5列・7列が選ばれて破綻します - 余白は
rangeで刻みを決める。0, 8, 16, 24, 32のような8の倍数に限定すれば、縦のリズムが保てます
色を管理画面に出さない理由は、コントラスト比の担保が人の目では難しいからです。判定の手順はこちらにまとめています。
スマホ側の設計は移行のタイミングで引き直す
カラーミーのテンプレートを長く使っている店舗では、スマホ表示がPCテンプレートの縮小版になっているケースがよくあります。レスポンシブ対応が後付けで、ブレイクポイントが768pxの1本だけ、という状態です。
Shopifyへ移すタイミングは、ここを直す数少ない機会になります。既存のCSSを移植しても意味がないため、どうせ書き直すことになるからです。
基準値の決め方はこちらで扱っています。
実際の端末サイズが何種類あるかを把握しないままブレイクポイントを置くと、特定機種だけ崩れる状態が残ります。混ぜると設計が狂う理由はスマホの画面のサイズは4種類｜混ぜると設計が狂う理由と直し方に書いています。
移行後のデザインで差が出る3か所
Shopifyのテーマをそのまま使うと、どの店も同じ見た目になります。ギャラリーに掲載されているECサイトを見ていくと、手を入れている店舗は決まった3か所を触っているのが分かります。
商品一覧のカード
テーマ標準のカードは「画像・商品名・価格」の3段です。ここに何を足すかで印象が変わります。
- 在庫の状態を文字で出す。 「残り2点」「再入荷待ち」をバッジではなく小さな文字で添えると、急かす感じが出ずに情報が伝わります
- カラーバリエーションを点で見せる。 スウォッチを並べると、クリックせずに選択肢の幅が伝わります
- 価格の桁を揃える。
tabular-numsを当てるだけで一覧の縦線が揃います
/* 価格の数字幅を固定して、一覧の桁を揃える */
.product-card__price {
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
主要なモダンブラウザでは対応していますが、等幅数字を持たないフォントでは効かないため、英数字部分にInterやNoto Sans JPを指定している前提で使います。
カートに入れた直後の見せ方
カラーミーでは「カートに入れる」でカートページへ遷移する作りが多く、Shopifyのテーマはドロワー（横から出てくるパネル）が標準です。この差を意識せずに移行すると、既存のお客さまが「カートに入ったのか分からない」と戸惑います。
ドロワーを使うなら、開いた瞬間に以下を見せます。
| 要素 | 入れる理由 |
|---|---|
| 追加した商品のサムネイル | 「これが入った」を画像で確認させる |
| 小計と送料無料までの残額 | 次の行動（もう1点足す）につなげる |
| 「買い物を続ける」の明示 | 閉じ方が分からず離脱するのを防ぐ |
読み込み中の見せ方も効きます。ドロワーが開くまでの一瞬が白いままだと、押せていないと誤解されます。
導線とSEOの引き継ぎ
カラーミーのURL構造とShopifyのURL構造は一致しません。Shopifyは/products/<handle>と/collections/<handle>に固定されるため、既存URLをそのまま維持することができません。301リダイレクトの設計が移行作業の中で一番細かい工程になります。
4工程目を省く現場が多いのですが、ここでリダイレクトループや404が残ると、流入が戻らないまま数か月が過ぎます。移行の成否はこの確認作業で決まります。
導線とオンページSEOを同時に成立させる考え方はこちらです。
移行すべきか、残すべきかの線引き
Shopifyへの移行は常に正解ではありません。判断軸を対比で置きます。
移行が効く
- 越境販売・多通貨を考えている
- 外部サービス連携を増やしたい
- 自社でページを組みたい担当者がいる
- サブスク・定期便を本格的に回す
急がなくてよい
- 商品数が少なく更新頻度も低い
- ポイント・会員ランクが売上の柱
- 月商に対して月額の上乗せが重い
- 社内に運用できる人がいない
左の条件に2つ以上当てはまるなら移行の費用対効果が出やすく、右に寄っているならカラーミーのテンプレート改修で伸ばすほうが早いという判断になります。
費用面の考え方としては、テンプレートベースで商品数が少なく・オプション軸が3つ以内に収まる構成なら、移行は比較的短い工程で済みます。逆に、オプションアプリと会員ランクの再現が必要になると、工数は大きく膨らみます。見積を取る前に、自店のオプション軸の数を数えておくことをおすすめします。これだけで話が早くなります。
業界ごとの事情で設計の前提が変わる場合もあります。規制のある業種では、移行前に表示要件の確認が必要です。
よくある質問
カラーミーからShopifyへ移行すると会員情報はどうなりますか
商品データと注文履歴は移せますが、会員のパスワードは移行できません。ハッシュ化されて保存されているため、どのECカートからも書き出せない仕様です。既存会員には移行後にパスワード再設定の案内を出す必要があります。メールアドレスと氏名・住所は引き継げます。
保有ポイントは引き継げますか
Shopify標準にポイント機能がないため、そのままでは引き継げません。ポイントアプリを導入して残高をインポートするか、移行の時点でクーポンに振り替えるかの二択になります。どちらにするかは告知文を作る前に決めてください。お客さまへの説明が変わります。
既存のURLはそのまま使えますか
使えません。Shopifyは商品ページが/products/<handle>、カテゴリが/collections/<handle>に固定されるため、旧URLは301リダイレクトで新URLへ向けることになります。Search Consoleから流入のあるURLを全件書き出し、1対1で対応を作ってから切り替えてください。
テンプレートのデザインはそのまま移植できますか
できません。カラーミーの独自タグとShopifyのLiquidは文法が違い、Shopifyはセクション単位でテンプレートを分割する前提になっています。見た目を近づけることはできますが、HTMLとCSSは書き直しになります。移行はスマホ側の設計を見直す機会として使うほうが得です。
移行作業の期間はどれくらい見ておくべきですか
商品のオプション軸の数で大きく変わります。3軸以内に収まり商品数も少なければ短く済みますが、4軸以上あってアプリでの再現が必要になると設計からやり直しになります。見積依頼の前に、自店で一番複雑な商品のオプション構成を数えておいてください。
まとめ
カラーミーからShopifyへの移行で判断を左右するのは、次の3点です。
- オプション軸が3つ以内に収まるか — 収まらないなら商品分割かアプリ導入の判断が先に来る
- ポイントと会員パスワードの扱いを決めたか — 告知文より先に決める。後からでは説明が破綻する
- リダイレクトの検証工程を工程表に入れたか — 切替後の全件確認を省くと流入が戻らない
テンプレートの作り直しは避けられない工程です。であれば、スマホ側の設計とカード・カートの見せ方まで引き直すほうが、移行の投資に見合います。移行を「同じ見た目を別の器に移す仕事」として扱うと、一番もったいない使い方になります。
