こんにちは、makeshopデザイン質問掲示板担当です。
「そろそろクリエイターモードに切り替えたいけれど、何から手をつければいいかわからない」——そんな声を多くいただきます。このページは、クリエイターモードへの移行に必要な情報を 「①なぜ切り替える？ → ②移行の手順 → ③デザインの仕上げ → ④移行後のよくある質問」 の順にまとめた特集ページです。
上から順に読み進めるだけで、不安の解消から実際の移行、移行後の設定まで一通り把握できます。気になるところだけ拾い読みしてもOKです。
デザインを変えると、ショップの印象はここまで変わります。
▼ Before（ベーシックモード）
▼ After（クリエイターモード／デザインセット「Pulsefit」）
ベーシックモードをご利用中のショップ様は、この機会にクリエイターモードへの移行をご検討ください。（廃止の時期・詳細は、あらためて正式にご案内いたします。）
STEP 1. まずは知る
クリエイターモードは「難しくない」
「クリエイターモードは難しそう」というイメージから一歩踏み出すためのパートです。実際の編集がどれくらいかんたんか、デザインがどう変わるかを見てみましょう。
実はこんなにかんたん！クリエイターモードで思い通りのデザイン編集（トップページ編）
「難しそう…」を解消する入門記事。トップページの項目の並べ替え、テキスト変更、不要な枠の非表示、ボタンの色変更などを、操作動画つきで解説しています。
＜商品詳細ページ編＞実はこんなにかんたん！クリエイターモードで思い通りのデザイン編集
売上に直結する商品詳細ページの編集編。サブ画像の高さ揃え、商品説明3・4の追加表示、カテゴリー別の出し分けなどを、コピー＆ペースト用ソースと動画つきで紹介します。
「Before→After」でここまで変わる！ショップデザインの進化がひと目でわかる事例紹介
同じ商品・同じ内容でも、デザインが変わるだけで印象は大きく変わります。ベーシックモードとクリエイターモードのデザインセット「Pulsefit」を実際の画面で比較し、変化のポイントを解説します。
はじめに｜進め方は2通りあります
クリエイターモードのデザインは、「デザインセット」（テンプレート）を選ぶところから始まります。【Complete】【Pulsefit】などが用意されており、これを土台にショップのデザインを作っていきます。
ここから先は、今のデザインを引き継ぐか、テンプレートから新しく作るかで読む場所が変わります。両方おこなう必要はありません。
| 今のデザインを引き継ぐ | テンプレートから新しく作る | |
|---|---|---|
|
こんな方に |
ベーシックモードで作り込んだデザインを、そのまま活かしたい | この機会にデザインを一新したい／手間をかけずに整えたい |
|
おすすめの |
【Complete】 makeshopの全機能に対応したタグが入っており、引き継ぎに向いています |
【Pulsefit】 シンプルでモダン。商品写真が映える構成が特長です |
|
読むところ |
STEP 2 へ |
STEP 3 へ |
デザインセットは他にも用意があります。実際の表示は下記からご確認いただけます。
STEP 2. 移行の手順
今のデザインを引き継いで切り替える
今のデザインを引き継いで移行したい方はこちら。まず全体像をつかみ、次に具体的なコピー手順、最後にスマホ対応（レスポンシブ）の順で進めるとスムーズです。
はじめる前に必ずバックアップを。
クリエイターモードに切り替えても、ベーシックモードのデザインが消えることはなく、いつでも元に戻せます。安心して進めてください。
ステップバイステップで不安を解消！【Complete】クリエイターモード移行ガイド
まずはここから。移行の全体像を「準備 → デザインセット追加 → プレビュー確認 → ショップに適用」の4ステップで解説。初心者でも計画的に進められます。
ベーシックモードからクリエイターモードに移行する方法！
ベーシックモードで作り込んだデザインを引き継ぐ具体手順。ヘッダー・フッター・各ページの「コピー元／コピー先」対応表や、変数タグの変換例つきで、迷わず作業できます。
ベーシックモードからクリエイターモードに移行する方法！【2】レスポンシブにしよう
移行後にスマホ表示を最適化するパート。メディアクエリ（@media）を使ったPC／スマホの出し分けや、画像のはみ出し防止などを実例で紹介します。
よくある質問
実際の切り替え操作はこちらをご確認ください。
現在ベーシックモードを利用しており、クリエイターモードへ切り替えをおこないたいです。方法を教えてください。
「コードを触るのが難しい」と感じたら
HTMLやCSSの記述に不安がある場合でも、クリエイターモードのデザインを作る方法があります。
チャットで「〇〇のようなデザインを作ってください」とお伝えいただくだけで、AIがコーディングをおこない、クリエイターモードにインポートできる専用ファイル（.cdarファイル）を自動で作成する機能です。「もう少し高級感のある雰囲気に」といった抽象的なご要望にも対応します。ご利用前にClaude Codeなどの初回設定（4項目）が必要です。
STEP 3. デザインを仕上げる
テンプレートを使いこなす
テンプレートから新しく作る方はこちら。デザインセットを土台にショップを作る手順と、見栄えを整えるカスタマイズ方法をご紹介します。STEP 2で引き継いだ方も、移行後の仕上げに活用いただけます。
デザインセット【Pulsefit】で始めよう。開店までのデザインスタートガイド
シンプルでモダンな「Pulsefit」で開店するまでの手順を、ロゴ → スライドショー → バナー → カテゴリー → 商品登録 → 商品説明の順に解説。写真映えする構成が特長です。
デザインセット【Complete】活用術：初めてのデザインカスタマイズガイド
全機能対応の汎用テンプレート「Complete」で、はじめてのカスタマイズに挑戦。編集画面の使い方、ボタン文言の変更、「変更が反映されない」ときの対処法まで動画つきで紹介します。
STEP 4. 移行後のよくある質問
つまずきやすいポイントを解決
移行の前後で出てきやすい疑問をまとめました。作業に入る前に目を通しておくと安心です。
クリエイターモードへの移行に関するよくある質問
「デザインは消えないの？」「元に戻せる？」など、移行にあたっての疑問をまとめたマニュアルページです。作業前の不安解消にお役立てください。
クリエイターモードへ移行後、ベーシックモードで作成した【独自ページ】を検索結果に表示したくない
移行後に残るベーシックモードの独自ページを、検索結果に表示させない（noindex）・別ページへ転送する方法を紹介します。
困ったときは
3つの相談先をご用意しています
「自分のショップだと、どう進めればいい？」と迷ったら、お気軽にご相談ください。内容に応じて、以下の順にご利用いただくとスムーズです。
1. まずは「AIサポート（ショップデザイン）」ですぐに解決
24時間いつでも、その場で回答が得られます。かんたんな疑問や「まず調べたい」というときは、こちらが最短です。
AIサポート（ショップデザイン）
2. 解決しないときは「デザイン質問掲示板」へ
HTML／CSSやクリエイターモードの操作について、専門の担当が個別にお答えします。AIサポートで解決しなかった場合などご相談ください。
デザイン質問掲示板
3. 自分で対応するのが難しいときは「EC制作代行サービス」
「もっと本格的にカスタマイズしたい」「自分で作業する時間がない」という場合は、プロにお任せいただけます。
EC制作代行サービス
もうひとつの選択肢
「ノーコードデザイン」という方法もあります
このページではクリエイターモードへの移行をご案内してきましたが、ベーシックモードからの切り替え先はもうひとつあります。
「ノーコードデザイン」は、用意されたテンプレートを選び、色や文字、配置を画面上で調整するだけでショップデザインを編集できる機能です。コードは一切不要で、スマホでの見え方を確認しながら編集できます。
HTML／CSSで細かくカスタマイズしたい場合はクリエイターモード、画面操作だけで手軽に整えたい場合はノーコードデザインと、ショップ様に合った方法をお選びいただけます。
移行は、ショップを見直す絶好のチャンスです。このページをブックマークして、一歩ずつ進めていきましょう。
