# すべてのブログ記事を、販売ページに。 > どのブログ記事にも、単体商品のウィジェットをインラインで置けます。読者はページを離れずに購入できます。Ghost、WordPress、Webflow、静的サイトで動作。プラットフォーム手数料は0%。 どの記事の、どの段落にも、単体商品のウィジェットを置けます。読者は商品を見て、その場で購入し、読み続けられます。別のショップページへの寄り道も、「ストアはこちら」というクリックもありません。購入意欲が生まれた、その場所で販売が成立します。 [無料トライアルを始める](https://app-v3.shoprocket.io/signup?lang=ja)[埋め込みを見る](#the-embed) 14日間の無料トライアル クレジットカード不要 プラットフォーム手数料0% すべてのブログプラットフォームで動作 インライン どの記事にも 1 埋め込みスニペット フル機能 チェックアウト 0% プラットフォーム手数料 ● 課題 ## 多くのeコマースは、読者に読むのをやめて、ショップに移動してほしいと考えます。 別のストアフロントにリンクする商品レビューは、レビュー自体が築いた購入への勢いの大半を失います。読者が商品ページに着くころには、文脈の半分が失われています。それを保つのがインラインです。 01 ### コンテンツが購買意欲を生みます。 読者は、疑問がすでにはっきりした状態で、商品レビュー、チュートリアル、比較記事にたどり着きます。買いたいと思う瞬間は、その商品についての段落を読み終えた瞬間です。ウィジェットがあるべきなのは、そこです。 02 ### リダイレクトは、注意をそらします。 読者を別のショップのURLに送ると、ブラウザの気の散りやすさ、タブの切り替え、そして、たいてい二度と戻らないことを意味する「あとで戻ってこよう」によって、かなりの割合を失います。記事内のウィジェットなら、その隙間がなくなります。 03 ### ブログは、最大のSEO資産です。 コンテンツサイトは検索で上位に表示されます。商品レビューは、商品一覧ページがめったに獲得できないロングテールの検索意図で上位に入ります。商品を記事の「中」に置けば、上位に表示されるページがそのまま購入ページになります。 ● 仕組み ## サイトにスニペットは一つ。商品に触れるたびに、タグは一つ。 ブログのテーマに、ローダースクリプトを一度貼り付けます。その後は、商品に触れる場所ならどこでも、商品IDを入れたHTMLタグを一つ置くだけです。ウィジェットは描画時に自動でマウントされます。 埋め込み ### 単体商品のウィジェットを、インラインで。 ローダースクリプトは、ブログのテーマのヘッダーに置きます(インストールは一度だけ)。商品に触れる記事を書くたびに、商品を表示したい場所に、HTMLタグを一つ追加します。ウィジェットは、画像、価格、バリエーションの選択、カートに追加ボタンとともに、すべてインラインで、記事の中に描画されます。読者がページを離れることはありません。 - ✓ ブログのテーマに、ローダーを一度だけインストール - ✓ 記事内で商品に触れるたびに、インラインのHTMLタグを一つ - ✓ カートは記事やページをまたいで保持され、読者は読みながら複数の商品を追加できる ● よくあるパターン ## ブログ発のコマースが強い、三つのパターン。 すべての記事に商品ウィジェットが必要なわけではありません。この三つのパターンは、読者を別のショップに送るよりも、この方法が優れている場面です。 01 ### 商品レビュー。 あなたがレビューした商品を、読者は買いたいと思っています。ウィジェットはレビューの最後にすでに読み込まれていて、カートまでワンクリックです。「ショップをご覧ください」という手間はありません。 02 ### チュートリアルとハウツー記事。 誰かに何かのやり方を教える記事では、必要な道具や材料に触れます。それぞれにインラインのウィジェットを置けば、読者は読みながらキット一式を購入できます。チェックアウトは、最後に一度だけです。 03 ### 比較記事。 三つの商品を比較します。各比較セクションに、該当するウィジェットを置きます。読者は、あなたがすすめたものを選んでチェックアウトするか、候補を二つカートに入れて、チェックアウトで決めることもできます。 04 ### まとめ記事とギフトガイド。 10商品を厳選したリスト。各項目に専用のインラインウィジェットがあります。一つの記事が、成約につながる季節のランディングページになります。 05 ### 新商品の発表。 新商品の発売。発表の記事自体に購入ボタンがあり、下のほうにある「今すぐ購入」へのリンクではありません。最初の段落からカートまで、1分以内です。 06 ### ニュースレターのアーカイブページ。 ニュースレターにウェブのアーカイブ(Ghost、Substackのパブリケーションのホーム、Buttondownのアーカイブ)がある場合、インラインの商品ウィジェットはそこにも置けます。購読者が数か月後にアーカイブにたどり着いても、ウィジェットは動作します。 ● ブログのある場所で動きます ## ブログがHTMLを許可するなら、Shoprocketも使えます。 主要なブログプラットフォームは、すべてインラインのHTMLまたはカスタムHTMLブロックに対応しています。それぞれの正直な状況をお伝えします。 01 ### Ghost。 どの投稿にもネイティブのHTMLカードを使えます。有料プランを設けた、またはコンテンツと並行してeコマースを運営するクリエイターに最適です。インストールは2分で完了します。 02 ### WordPress。 カスタムHTMLブロック(Gutenberg)、またはクラシックエディタのHTMLセクション。すべてのテーマとすべてのページビルダー(Elementor、Diviなど)で動作します。WooCommerceは不要です。 03 ### Webflow CMS。 CMSコレクションのテンプレートの中、またはリッチテキストフィールドの中に配置した埋め込み要素。商品IDを保持するCMSフィールドに基づいて、記事ごとに商品ウィジェットが描画されます。 04 ### 静的サイト(Jekyll、Hugo、Astro、11ty)。 レイアウトにローダースクリプトを置きます。記事ごとのウィジェットの埋め込みには、ショートコード、またはMarkdown内の生のHTMLを使います。Netlify、Vercel、Cloudflare Pagesなど、どこでホストしていても動作します。 05 ### SubstackとMedium。 どちらも、プラットフォームを守るために、投稿内の任意のHTMLをブロックします。正直な回避策は、Shoprocketのホスト型ストアフロント、または、コンテンツとコマースを自分で所有できるGhost / WordPressのブログを使うことです。 06 ### Notion(Super.so / HeyNotion経由)。 Notionの公開ページそのままでは、HTMLを使えません。ラッパーサービス(Super.so、HeyNotion)を使うと、Notionのサイトが、HTMLを使える本物のサイトになり、その中の埋め込みでウィジェットが動作します。 ● よくあるご質問 ## ブログコマースについてのご質問にお答えします。 コンテンツの収益化を考えているクリエイターやブロガーの方から、よくいただくご質問です。 カートは記事をまたいで保持されますか?二つの別の記事から追加した場合、一度でチェックアウトできますか? + はい。カートはページではなく、訪問者のセッションに保持されます。記事Aから追加し、記事Bに移動して別の商品を追加し、両方を一度にチェックアウトできます。フローティングカートのアイコンは、ローダーをインストールしたすべてのページに表示されるため、読者はブログのどこでもカートの状況を確認できます。 ウィジェットでブログが遅くなりませんか? + 意味のある影響はありません。ローダースクリプトは非同期なので、ブログの描画をブロックしません。各ウィジェットは、確保済みのコンテナに遅延してマウントされるため、累積レイアウトシフトは発生しません。インストール前にCore Web Vitalsに合格していたブログは、インストール後も合格します。 一つのウィジェットのテンプレートを、多くの記事で使えますか?(例: 「おすすめの商品トップ3」) + はい。HTMLをスニペット / パーシャル / テンプレートのインクルード(Ghostのダイナミックな会員プラン、WordPressの再利用ブロック、Hugoのパーシャルなど)に入れ、どの記事からも参照します。ウィジェットは、各コピーを自動でマウントします。 RSSフィードやメールのニュースレターはどうですか?そこでもウィジェットは動きますか? + いいえ。RSSリーダーやメールクライアントは、サードパーティのJavaScriptを実行しません(するべきでもありません)。RSSフィードには、埋め込みのウィジェットの代わりに記事へのリンクが表示されます。これは、あらゆるインタラクティブなコンテンツの標準的な動作です。読者が記事自体にアクセスしたときに、購入につながります。 埋め込むべき商品IDは、どうすればわかりますか? + Shoprocketのダッシュボードのすべての商品には、固有のIDがあります。商品ページには、貼り付けるだけの埋め込みスニペットが表示されるため、実際には、ダッシュボードを開き、記事に書いている商品を見つけて、スニペットをコピーし、記事に貼り付けるだけです。 読者は、記事を離れずにチェックアウトできますか? + はい。カート、住所、配送方法の選択は、記事上の埋め込みの中で動作します。最後の決済のステップは、PCI準拠のため決済代行会社(Stripe、PayPal)へのホスト型リダイレクトを使い、その後、読者はあなたのサイトの確認画面に戻ります。専用のショップページと同じ流れです。 記事が有料会員限定の場合はどうなりますか? + ウィジェットは気にしません。Ghost / Substack / Patreonが記事自体に課金の壁を設けている場合、ウィジェットを見られるのは有料会員のみです。記事が公開されていれば、誰でも見られます。ウィジェットは、ブログのプラットフォームが適用する公開範囲に従います。 どのブログ記事が、どの売上につながったか追跡できますか? + はい。Shoprocketの分析は、すべてのカートと注文の参照元ページを記録します。どのブログ記事から購入につながったか、その記事でどの商品が売れたか、どのくらいの期間かを確認できます。どのコンテンツが成果を上げているかを知るのに役立ちます。 Shoprocketのプラットフォーム手数料は、本当に0%ですか? + はい。決済代行会社(Stripe、PayPalなど)は引き続き標準の処理手数料を請求します。これはお金を動かすためのコストですが、Shoprocketはそこに何も上乗せしません。プラットフォーム手数料0%は、すべてのプラン、すべての埋め込み、すべてのブログに適用されます。 ## 読者がいる場所に、買い手がいます。 14日間の無料トライアル。クレジットカードは不要です。ローダーを一度貼り付けて、コンテンツのどこにでもインラインウィジェットを置きましょう。 [無料トライアルを始める](https://app-v3.shoprocket.io/signup?lang=ja)[お問い合わせ](https://v3.shoprocket.io/ja/contact.md) --- - HTML version: https://v3.shoprocket.io/ja/features/sell-from-blog-posts - Language: 日本語 (ja) - Also in: [العربية](https://v3.shoprocket.io/ar/features/sell-from-blog-posts.md), [Deutsch](https://v3.shoprocket.io/de/funktionen/aus-blogbeitraegen-verkaufen.md), [Ελληνικά](https://v3.shoprocket.io/el/features/sell-from-blog-posts.md), [English](https://v3.shoprocket.io/features/sell-from-blog-posts.md), [Español](https://v3.shoprocket.io/es/funciones/vender-desde-entradas-de-blog.md), [Français](https://v3.shoprocket.io/fr/fonctionnalites/vendre-depuis-un-blog.md), [עברית](https://v3.shoprocket.io/he/features/sell-from-blog-posts.md), [हिन्दी](https://v3.shoprocket.io/hi/features/sell-from-blog-posts.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/fitur/jual-dari-postingan-blog.md), [Italiano](https://v3.shoprocket.io/it/funzionalita/vendere-dagli-articoli-del-blog.md), [Lietuvių](https://v3.shoprocket.io/lt/funkcijos/pardavimas-tinklarascio-irasuose.md), [Norsk](https://v3.shoprocket.io/nb/funksjoner/selg-fra-blogginnlegg.md), [Nederlands](https://v3.shoprocket.io/nl/functies/verkopen-via-blogposts.md), [Polski](https://v3.shoprocket.io/pl/funkcje/sprzedaz-z-wpisow-na-blogu.md), [Português](https://v3.shoprocket.io/pt/funcionalidades/vender-pelo-blog.md), [Română](https://v3.shoprocket.io/ro/functionalitati/vinde-din-articole-de-blog.md), [Русский](https://v3.shoprocket.io/ru/features/sell-from-blog-posts.md), [ไทย](https://v3.shoprocket.io/th/features/sell-from-blog-posts.md), [Türkçe](https://v3.shoprocket.io/tr/ozellikler/blog-yazilarindan-satis.md), [中文](https://v3.shoprocket.io/zh/features/sell-from-blog-posts.md)