ネットショップ構築サービス「makeshop」には、新しいデザインモード「クリエイターモード」があります。従来の「ベーシックモード」より自由度が高く、レスポンシブ対応やAIデザイン機能も使えるため、これから移行を考えているショップ運営者も多いのではないでしょうか。「移行って難しそう…」「デザインが崩れたらどうしよう」と不安に感じるかもしれませんが、正しい手順とバックアップさえ押さえれば安全に移行できます。この記事では、クリエイターモードへの移行を、準備・手順・スマホ対応・移行後のSEO対策・つまずきやすいポイントまで、順を追って詳しく解説します。
クリエイターモードとは？ベーシックモードとの違い
クリエイターモードは、makeshopの新しいデザインモードです。従来のベーシックモードは「PC用」「スマホ用」を別々に作る仕組みでしたが、クリエイターモードは1つのデザインでPC・スマホの両方に対応（レスポンシブ）できます。テンプレートをベースに自由に作り込め、HTML/CSSでの細かなカスタマイズも可能です。両者の違いを整理すると次のとおりです。
| 項目 | ベーシックモード（旧） | クリエイターモード（新） |
|---|---|---|
| PC・スマホの管理 | 別々に作成 | 1つで両対応（レスポンシブ） |
| デザインの自由度 | 標準的 | 高い |
| テンプレート | 従来型 | Complete等の新テンプレート |
| AIデザイン機能 | 非対応 | 対応（チャットで作成） |
| 今後の位置づけ | 順次移行が推奨 | 今後の主流 |
ベーシックモードは今後どうなる？廃止される？
「ベーシックモードはいつまで使えるの？」と気になる方も多いはずです。現時点で、makeshopからベーシックモードの明確な廃止日（サービス終了日）は公表されていません。ただし、ベーシックモードは「旧デザインモード」として現状維持のための編集環境と位置づけられており、新機能の開発・アップデートはクリエイターモードを標準として進められています。つまり今後の主役はクリエイターモードであり、ベーシックモードは実質的に役目を終えつつある状態です。
明確な期限がないとはいえ、AIデザイン機能をはじめとする便利な新機能はクリエイターモードでしか使えません。将来あわてて移行して失敗するより、余裕のあるうちに計画的に移行しておくのがおすすめです。（※廃止時期などの最新情報は、makeshop公式のお知らせをご確認ください。）
クリエイターモードに移行するメリット
- スマホ対応が1つで完結：PC・スマホを別々に更新する手間がなくなる
- デザインの自由度が上がる：ブランドの世界観を表現しやすい
- 最新機能を使える：AIデザイン機能など、新機能はクリエイターモード向けに提供される
- 更新・運用がしやすい：将来的な機能追加にも対応しやすい
特に「スマホ表示の管理が一本化される」点は、日々の運用負担を大きく減らしてくれます。スマホ経由の購入が主流の今、レスポンシブ対応は売上面でも重要です。
【STEP0】移行前の準備｜まずバックアップ
デザインを変更する前に、必ず現在のデザインをバックアップしてください。これは移行作業で最も重要な準備です。バックアップがあれば、万一うまくいかなくても元の状態に戻せます。makeshopでは、以下の3つのデザインをそれぞれバックアップできます。
- ベーシックモード（PC）のデザイン
- ベーシックモード（スマホ）のデザイン
- クリエイターモードのデザイン
特にベーシックモードのPC・スマホは別管理なので、両方とも取得しておきましょう。日常的にデザインを変更するショップは、移行時に限らず定期的なバックアップを習慣にすると安心です。
【STEP1〜4】移行の手順
- バックアップを取得する（STEP0のとおり）
- テンプレートを追加する：「Complete」などのテンプレートをベースとして追加する
- デザインを移し替える：ベーシックモードのHTML/CSSや変数タグを、クリエイターモード用に変換・調整する
- プレビューで確認：PC・スマホの両方で表示崩れがないかチェックする
- 問題なければ新デザインを適用して公開する
「変数タグ」とは、商品名や価格などショップのデータを自動で表示するための特殊なタグです。ベーシックモードとクリエイターモードでは記述が異なる場合があるため、移行時は変数タグの置き換えも必要になります。いきなり本番へ適用せず、プレビューで十分に確認してから公開するのが失敗しないコツです。
スマホ対応（レスポンシブ化）のポイント
クリエイターモードの大きな魅力がレスポンシブデザイン（画面幅に応じて表示を最適化する仕組み）です。CSSの「メディアクエリ」を使うと、PC・タブレット・スマホなど、デバイスごとに見え方を調整できます。たとえば「画面幅が768px以下（スマホ）のときだけ文字を大きくする」といった指定は次のように書きます。
@media (max-width: 768px) { .title { font-size: 20px; }}移行後は、必ず実際のスマホやプレビューで表示を確認しましょう。文字が小さすぎないか、ボタンが押しやすいか、画像がはみ出していないかなどをチェックすると、購入時のストレスを減らせます。
移行後の注意点｜旧ページのSEO対策
移行後に見落としがちなのが、ベーシックモードで作った独自ページの扱いです。放置すると、古いページと新しいページの両方が検索結果に表示（重複）され、SEO上マイナスになることがあります。対処法は主に2つです。
- noindex設定：旧ページに「検索エンジンに登録しない」指定を入れ、検索結果に出さない
- リダイレクト：旧ページにアクセスした人を、新しいフリーページなどへ自動転送する
「旧ページをそのまま残したいが検索には出したくない」ならnoindex、「旧URLへのアクセスを新ページに引き継ぎたい」ならリダイレクト、と使い分けます。移行の仕上げとして必ず対応しておきましょう。
移行でつまずきやすいポイント
- バックアップを取らずに作業してしまう：戻せなくなるので必ず事前取得を
- 変数タグの置き換え漏れ：商品名や価格が表示されない原因に。プレビューで要確認
- スマホ表示の崩れ：PCだけ見て公開しがち。スマホ確認を忘れずに
- 旧ページのSEO対策忘れ：重複表示の原因。noindexかリダイレクトを
AIでデザインを助けてもらう方法も
「コードを触るのは不安」「時間がない」という方向けに、makeshopではAIを活用したデザイン機能も登場しています。チャットで指示するだけでショップデザインを作成できる機能で、コーディングの知識がなくてもプロらしい仕上がりを目指せます。移行やデザイン調整のハードルを下げてくれる、心強い選択肢です。まずはテンプレート＋AI機能で土台を作り、細部を手直しする、という進め方も効率的です。
不安なときは制作会社に相談する選択肢も
「本業が忙しくて移行作業まで手が回らない」「デザインにこだわりたい」という場合は、Web制作会社に移行やデザインを依頼するのも一つの方法です。バックアップから移行、レスポンシブ調整、SEO対策までまとめて任せれば、本業に集中しながら安心して新デザインへ切り替えられます。自社の状況に合わせて、DIYと外注を上手に使い分けましょう。
よくある質問（FAQ）
Q. 移行は難しいですか？
A. 手順どおり進めれば難しくありません。まずバックアップを取り、テンプレートをベースにプレビューで確認しながら進めれば安心です。不安ならAIデザイン機能や制作会社の活用も検討しましょう。
Q. 移行するとデザインは崩れますか？
A. HTML/CSSや変数タグは調整が必要な場合があります。プレビューでPC・スマホ両方を確認し、レスポンシブ対応もあわせてチェックしましょう。
Q. 移行後にやるべきことは？
A. 旧ベーシックモードの独自ページのSEO対策（noindexまたはリダイレクト）を行いましょう。検索結果の重複表示を防げます。
Q. 今すぐ移行しないとダメですか？
A. クリエイターモードが今後の主流ですが、あわてて作業してデザインを崩すより、バックアップと確認を丁寧に行うことが大切です。準備が整ってから計画的に移行しましょう。
