こんにちは、makeshopデザイン質問掲示板担当です。
いつもmakeshopをご利用いただきありがとうございます。

「クリエイターモード」のデザインセット「Complete」を使っているけど、どうやってカスタマイズしたらいいかわからない…とお悩みではありませんか？

このサポート記事では、クリエイターモードの「Complete」を使った、初めてのカスタマイズ方法をご紹介します。

新規ショップ運営者の方や、HTML/CSSの基本はわかるけれど管理画面での操作に不安がある方に向けて、デザインセット【Complete】のカスタマイズ方法を解説します。

はじめに：デザインセット【Complete】の強みと活用メリット

デザインセット【Complete】は、makeshopのすべての機能に対応したタグ（変数）が最初から入っている、汎用性の高いテンプレートです。

  • 短工期で制作できる: テンプレートをベースにすることで、ゼロからデザインするよりも早くショップをオープンできます。

  • デザインが整っている: すぐに使えるよう、洗練されたデザインがデフォルトで設定されています。

  • 拡張が容易: あらゆる機能タグが揃っているため、「定期購入」など将来的に機能を増やしても対応が簡単です。

カスタマイズを進める際のポイントは、「変更前にバックアップを取ること」と「段階的に変更すること」です。これを守ることで、トラブルを避けながら安心して作業を進められます。

事前準備：カスタマイズを始める前に

カスタマイズを始める前に、必ず以下の準備をおこないましょう。

1. テンプレートのバックアップを取る

万が一のトラブルに備え、カスタマイズを始める前に現在のショップデザインを必ずバックアップしてください。バックアップは、makeshop管理画面の「ショップデザイン / テンプレート選択・編集 / クリエイターモード / デザインセット一覧」からおこなえます。

バックアップ方法:

（１）makeshop管理画面の

ショップデザイン / テンプレート選択・編集 /

をクリックします。

（２）「デザインセット一覧」画面よりコピーしたいデザインセットの最終更新日の右にある「コピー」ボタンをクリックしてください。

（３）デザインセット名に「コピー」の文字が入力されたデザインセットが一覧に追加されます。
サポート記事「ショップデザインバックアップしてますか？！」

デザインセットがすでに上限の5個作成されている場合は、コピーボタンは表示されません。
デザインセットを4個以下に減らすことができない際には、別の方法でバックアップをとってください。
オンラインマニュアル「デザインセットのエクスポート・インポート機能」

2. 推奨ブラウザと設定の確認

最新バージョンのGoogle Chrome、Microsoft Edgeの使用を推奨します。

よくある質問「makeshop管理画面・ショップページの利用について、推奨環境を教えてください。」

デザイン編集画面：こちらからデザインカスタマイズします！

  1. makeshop管理画面の

    ショップデザイン / テンプレート選択・編集 /

    をクリックします。

  2. 編集したいデザインセットにカーソルを合わせると「コードを編集」が表示されますので、クリックしてください。

  3. 左側に「トップ」「商品カテゴリー」などページ名が表示されるので、編集したいページをクリックしてください。

  4. 「HTML」「CSS」「JavaScript」欄のコードを編集してください。

💡動画で確認！

makeshop管理画面でのショップデザイン編集画面の様子を詳しく解説しています。

よくあるカスタマイズ例：ボタンのテキストを変えてみよう！

よくあるカスタマイズ例

ここでは、買い物かごページ「ご購入手続きへ進む」ボタンのテキストを変更する方法を例に、具体的なカスタマイズ手順を解説します。この方法は、makeshop管理画面のソース編集でHTMLやCSSを編集する際の基本となります。

変更手順

  1. 該当箇所のソースコードを探す

    2. デザインセット【Complete】の買い物かごページは、makeshop管理画面の

    ショップデザイン / テンプレート選択・編集 / クリエイターモード / 買い物カゴ

    「HTML」欄内の記述箇所を探してください。

    <a href="<{$cart.order_url}>">ご購入手続きへ進む</a>

    該当の記述を探す方法は、
    （１）欄内に一度カーソルをおきます
    （２）キーボードの「Ctrl」と「F」キーを同時に押し表示される検索窓に「ご購入手続きへ進む」と入力します
    （３）「Enter」キーを押すと、該当箇所が表示されます

  2. テキストを変更する

    3. [ご購入手続きへ進む]の記述内容を変更することで、表示されるテキストを変更できます。
    例えば、海外からのお客様が多いので日本語と英語を併記したい場合は、以下のように「ご購入手続きへ進む」を「購入する / BUY」へ変更します。

    <a href="<{$cart.order_url}>">購入する / BUY</a>

  3. プレビューして確認後に保存する

変更が終わったら、必ず「プレビュー」ボタンで変更内容を確認してください。問題がなければ「保存」ボタンをクリックして、ショップに反映させましょう。

💡動画で確認！

makeshop管理画面でのソース編集の様子を詳しく解説しています。

トラブルシューティング：デザインが変わらないときは？

変更を保存したのにショップのデザインが変わらない場合は、ブラウザのキャッシュが原因かもしれません。

キーボードの「F5」キーや「Ctrl + F5」（Windows）、「Cmd + Shift + R」（Mac）でページの再読み込み（スーパーリロード）を試してみてください。

スーパーリロードとは？
ブラウザに一時的に保存されているキャッシュを無視して、サーバーから最新の情報を再取得する機能です。
より詳細な対処法は「【修正した画像が変わらない…】ブラウザ別！キャッシュを削除する方法！」を参照してください。

次のアクション

このガイドで基本的なカスタマイズのポイントをつかんだら、以下のページを活用して、さらにショップのデザインを磨き上げましょう。

このサポート記事で紹介しているカスタマイズ例は一例です。

デザインセット【Complete】にはさまざまなカスタマイズが可能ですので、バナー画像の差し替えやフォントの変更など、多くの要素を自由に編集できます。
よくある質問でお問い合わせ頻度の高いカスタマイズ方法をご紹介していますので、ぜひチェックしていただき、挑戦してみてください！

まとめ

いかがでしたでしょうか。
まずはかんたんなカスタマイズから始め、少しずつ自分のショップらしいデザインに仕上げていきましょう。