MakeShopにInstagramの投稿を表示する方法(クリエイターモード)
MakeShopのネットショップに自社のInstagramの投稿を並べたいとき、まず確かめたいのは今どのデザインモードを使っているかです。MakeShopには、HTML・CSS・JavaScriptを直接編集できる「クリエイターモード」、ソースを書かずにセクションを並べる「ノーコードデザイン」、2027年3月31日に廃止される「旧デザインモード(ベーシックモード)」があります。scriptタグ1行のウィジェットを貼れるのは、HTMLを編集できるクリエイターモードです。この記事では、MakeShopの公式マニュアルとよくある質問に書かれている範囲で、貼り方と、ノーコードデザインの場合の考え方、表示されないときの確認点をまとめます。Instagramをサイトに載せる理由や全体の流れは「Instagramの投稿を自社サイトに埋め込む方法」をご覧ください。
更新日：2026年10月12日
デザインモードごとの結論
| デザインモード | タグを貼れるか | 根拠(MakeShop公式) |
|---|---|---|
| クリエイターモード | 貼れる。フリーページや各ページの「HTML」欄 | フリーページの「HTML」欄に <script src="https://…"> を書く記述例がある |
| ノーコードデザイン | 貼れない | 「本機能ではHTML/CSSの直接編集はできません」と明記。追加できるセクションにHTML用のものは無い |
| 旧デザインモード(ベーシックモード) | この記事では扱わない | 2027年3月31日15時以降に廃止と案内されている |
よくある質問「旧デザインモード(ベーシックモード)からクリエイターモードもしくはノーコードデザインに切り替えると費用は発生しますか」には、切り替えと、切り替え後の利用にともなう追加費用や月額費用の変更はない、と書かれています。ただし、クリエイターモードを使えるかどうかを契約プラン別に示した記述は、今回確認した範囲では見つかりませんでした。ご利用のプランをご確認ください。
MakeShop公式ヘルプで確認できること
よくある質問「【クリエイターモード】フリーページにJavaScriptを適用させることはできますか」では、JavaScriptファイルをファイルサーバーにアップロードし、フリーページに読み込ませる方法が案内されています。記述例は <script src="https://gigaplus.makeshop.jp/ショップID/フォルダ名/○○.js"></script> です。外部URLを src に書いたscriptタグを「HTML」欄で使えるということです。
始める前に用意するもの
- Instagramのプロアカウント(ビジネスまたはクリエイター)。連携できるのはプロアカウントだけです(切り替え方はこちら)。
- Social Feed by grip spaceのアカウント。メールアドレスとパスワードだけで無料で登録できます。
- MakeShopの管理画面で、クリエイターモードのデザインセットを編集できること。
- デザインセットのバックアップ。クリエイターモードでは保存した内容が上書きされるため、作業前に「デザインセット一覧」の「デザインセットをコピー」でコピーを取るよう、公式に案内されています。
手順1: Social Feedで埋め込みコードをコピーする
- Social Feedの管理画面でInstagramアカウントを連携します。
- 「＋ ウィジェットを追加」でウィジェットを作り、「表示設定」で表示形式(グリッドかスライダー)、列数、表示件数、余白などを決めます。
- ウィジェットが「公開」になっていることを確かめ、「WEBサイトにタグを設置」の欄の「コピー」を押します。
コピーされるのはscriptタグ1行です。URLはウィジェットごとに違うので、必ず管理画面からコピーしてください。
<script type="text/javascript" src="https://（管理画面に表示されるURL）"></script>このタグはiframeを使わず、置かれた場所に投稿一覧を描きます。
方法1: フリーページの「HTML」欄に貼る
Instagramの特集ページやスタッフ紹介のように、1ページだけに出したいときの方法です。マニュアル「フリーページ管理/編集」に沿って進めます。
- 管理画面の「ショップデザイン / テンプレート選択・編集 / クリエイターモード / フリーページ管理」を開きます。
- 「ページ追加」ボタンをクリックします。既存のページに追加するなら、一覧のページ名をクリックします。
- ページのURLを入力します。「/view/page/」は固定で、その後ろの文字列(半角英小文字・数字・ハイフンなど、最大64文字)を自由に決められます。
- ページ名を入力し、【ステータス】で公開・非公開を選びます(新規作成時は「公開」)。
- フリーページの内容(HTML)の中で、一覧を出したい位置に、手順1でコピーしたタグを貼ります。
- 保存して、管理画面のプレビューか公開後のページで表示を確かめます。
フリーページはデザインセットごとに最大1,000ページまで作れ、適用中のデザインセットのフリーページだけが表示されます。非公開のページは「見つかりません」と表示されますが、管理画面からのプレビューはできます。
フリーページで気をつけたい点
- フリーページは <head> から自分で書く。 よくある質問では、フリーページの <head>～</head> 内に <link rel="stylesheet" href="<{$page.css}>"> を書くと「全ページ共通」の「CSS」欄の内容が適用される、と案内されています。ほかのページと同じ見た目にするには、ヘッダーやフッターの記述も必要です。
- レスポンシブにするにはCSSが要る。 「フリーページをレスポンシブ対応にしたいのですが方法はありますか」によると、レスポンシブ用のCSSを書くか、ほかのページと同じヘッダー・フッターを記述します。投稿一覧そのものは置かれた場所の幅に合わせて縮みますが、ページ全体の幅はフリーページ側の記述で決まります。
- タグは <body> の中、一覧を出したい位置に置く。 <head> の中は画面に出ない場所なので、一覧は表示されません。
方法2: トップページや商品詳細の「HTML」欄に書く
マニュアル「クリエイターモード各ページ」によると、トップ、商品カテゴリー、商品詳細、お知らせ一覧、会社概要などの各ページに、デザインセットのHTML初期値が入った「HTML」欄と、そのページだけに適用する「CSS」欄・「JavaScript」欄があります。公式の記述例はフリーページのものですが、各ページの「HTML」欄もHTMLを直接編集する欄なので、同じようにタグを1行追加します。
- 作業前に、「デザインセット一覧」の「デザインセットをコピー」でバックアップを取ります(デザインセットは最大5個まで保存できます)。
- 「ショップデザイン / テンプレート選択・編集 / クリエイターモード」で、編集するページ(トップ、商品詳細など)を開きます。
- 「HTML」欄で、一覧を出したい位置にタグを貼ります。トップページなら、フッターの手前あたりが向いています。
- 画面の「プレビュー」で表示を確かめてから保存します。
HTML欄には <{$page.css}> のような変数タグが書かれています。既存の行は消さず、タグを1行足すだけにしてください。商品詳細の「HTML」欄は全商品で共通です。
置き場所ごとの比較
| 置き場所 | 表示されるページ | 向いている使い方 |
|---|---|---|
| フリーページの「HTML」欄 | そのフリーページだけ | Instagram特集、コーディネート紹介、スタッフ紹介 |
| トップの「HTML」欄 | トップページだけ | 新作や季節の雰囲気を最初に見せる |
| 商品詳細の「HTML」欄 | すべての商品詳細ページ | 使用例や着用例を商品説明の下に見せる |
Social Feedでは1つのInstagramアカウントから複数のウィジェットを作れます。トップページにはグリッド、商品詳細にはキャプションに「#着用例」を含む投稿だけのスライダー、と分けて別々のタグを貼ることもできます。作れる数はフリープランが1つ、ライトプランが3つまで、スタンダードプランが無制限です。詳しくは「ウィジェットを複数作る方法」と「キャプションのキーワードで絞り込む方法」をご覧ください。
注文画面やマイページには入らない
マニュアル「クリエイターモードよくある質問」には、マイページ、注文画面など makeshop.jp ドメインのページはクリエイターモードの対象外、と書かれています。購入の手続き中にInstagramへ移動されるのは避けたいので、一覧は購入前のページで見せましょう。
ノーコードデザインを使っている場合
マニュアル「ノーコードデザインとは」には、ノーコードデザインは使いやすさと一定の品質を重視する方向けの機能で、HTMLやCSSを直接編集するカスタマイズはクリエイターモードを使うよう書かれています。フリーページに追加できるセクションも、アナウンス、画像バナー、商品一覧、YouTube、SNSボタンなどで、HTMLを書けるものはありません。選べる道は2つです。
- SNSボタンのセクションで、Instagramへのリンクを置く。 投稿は並びませんが、ノーコードデザインのまま、Instagramへの入口は作れます。
- クリエイターモードに切り替える。 「ノーコードデザインからクリエイターモード、ベーシックモードの表示に切り替える方法を教えてください」によると、編集画面上部の「クリエイターモードを利用する」から切り替え、適用したいデザインセットの「ショップに適用」を押します。以後はHTMLでデザインを管理することになります。
MakeShopに合わせる表示設定
| 設定 | おすすめ |
|---|---|
| 表示形式 | トップページや特集ページならグリッド。商品詳細なら、高さを抑えられるスライダー |
| 列数・表示件数 | グリッドなら3〜4列で6〜8件から。スマートフォンでも同じ列数のまま縮むので確認する |
| 文字色 | 背景が暗いテンプレートでは「暗い背景用」を選ぶ |
| 投稿の絞り込み | リールを除く、期間(30・90・365日)、キャプションのキーワードで商品の写真を中心に |
表示されないときの確認点
MakeShopに限らない原因は「Instagramの埋め込みが表示されない原因と直し方」にもまとめています。
| 症状 | 確認すること |
|---|---|
| どこにも出ない | タグを「HTML」欄に貼ったか(「JavaScript」欄ではないか)。<body> の中か |
| フリーページが開けない | フリーページの【ステータス】が「公開」か。編集したデザインセットが、ショップに適用中のものか |
| 一覧より後ろのレイアウトが崩れた | タグの閉じ忘れや全角の山括弧が混ざっていないか。タグを1行まるごと貼ったか |
| 空白のまま | Social Feedのウィジェットが「公開」か |
| 新しい投稿が出ない | フリープランのサイトへの反映は1日1回。絞り込み条件で外れていないか |
| 急に出なくなった | Instagramとの連携が切れていないか。管理画面の「Instagramアカウントを再連携」でつなぎ直せる |
新しい投稿が出ないときは「サイトのインスタが更新されないときの確認点」も参考にしてください。
よくある質問
Q. 費用はいくらかかりますか?
MakeShop側では、デザインモードの切り替えに追加費用はかからないと案内されています(契約プランの条件はご利用のプランをご確認ください)。Social Feedはフリープラン(0円、ウィジェット1つ、月3,000回まで、16件まで、反映は1日1回、表記あり)から始められます。有料はライトが月1,200円、スタンダードが月2,980円(いずれも税込)です。詳しくは料金プランをご覧ください。
Q. LEEEPとどちらを選べばよいですか?
MakeShopのよくある質問で紹介されているLEEEPは、makeshop appsから導入するアプリです。機能や料金はアプリ提供元の案内をご確認ください。自社のInstagramの投稿を、タグ1行でグリッドやスライダーに並べられれば十分という場合は、Social Feedのフリープランで試してから決めることもできます。
まとめ
MakeShopにInstagramの投稿一覧を出すなら、クリエイターモードで、1ページだけならフリーページの「HTML」欄に、トップや商品詳細なら各ページの「HTML」欄に、Social Feedのタグを1行貼ります。「JavaScript」欄ではなく「HTML」欄に、作業前にはデザインセットのコピーを、が2つのポイントです。ノーコードデザインではHTMLを書けないため、SNSボタンでリンクするか、クリエイターモードへの切り替えを検討してください。Instagramウィジェットの紹介ページで見た目を確かめてから、無料登録で試せます。
参考にした資料
- makeshop よくある質問「【クリエイターモード】フリーページにJavaScriptを適用させることはできますか。」
- makeshop よくある質問「【クリエイターモード】フリーページにもCSSを適用させることはできますか。」
- makeshop よくある質問「【クリエイターモード】フリーページをレスポンシブ対応にしたいのですが方法はありますか。」
- makeshop よくある質問「【クリエイターモード】「CSS」欄、「JavaScript」欄に入力した内容が反映されません。原因を教えてください。」
- makeshop よくある質問「【クリエイターモード】HTMLを書いたのに反映されない、意図した通りにならない場合のチェックポイントを教えてください。」
- makeshop よくある質問「【クリエイターモード】デザインセット(ソースコード)をバックアップする方法を教えてください。」
- makeshop よくある質問「Instagramなどの動画や画像をショップページに埋め込み、表示させることはできますか。」
- makeshop よくある質問「【ノーコードデザイン】ノーコードデザインからクリエイターモード、ベーシックモードの表示に切り替える方法を教えてください。」
- makeshop よくある質問「旧デザインモード(ベーシックモード)からクリエイターモードもしくはノーコードデザインに切り替えると費用は発生しますか。」
- makeshop よくある質問「ショップデザイン 旧デザインモード(ベーシックモード)は今後も利用できますか?」
- makeshop オンラインマニュアル「フリーページ管理/編集」
- makeshop オンラインマニュアル「クリエイターモード各ページ」
- makeshop オンラインマニュアル「クリエイターモードよくある質問」
- makeshop オンラインマニュアル「ノーコードデザインとは」
- makeshop オンラインマニュアル「ノーコードデザイン:フリーページ」
- makeshop オンラインマニュアル「Instagram連携」
