「セールの告知を出したのに気づいてもらえない」「入荷情報や休業案内をどこに載せればいいか分からない」——実店舗からECに乗り出したばかりの事業者や、Shopifyで運営を始めたばかりのEC担当者から、こうした相談をよく受けます。トップページに新着情報を並べる「お知らせ一覧」は、リピーターの来店（再訪）頻度を左右する地味ながら重要な機能ですが、標準のShopifyテーマには用意されていないケースが多く、多くの店舗が「アプリを入れるしかない」と思い込んでいます。
この記事では、Shopifyの標準ブログ機能とLiquidコードだけを使い、アプリを一切追加せずに無料でお知らせ一覧を実装する方法を、コピー&ペーストで使えるコードとともに手順化して解説します。あわせて、コード実装とアプリ導入のどちらを選ぶべきかの判断基準、運用中によくあるトラブルとその対処法、さらにEC担当者が気になるSEO・表示速度への影響まで、実務目線で網羅的にまとめました。
「お知らせ一覧」だけでなくEC全体の設計にお悩みではありませんか
EC Retail Adsでは、Shopifyストアの構築・デザイン実装からアクセス計測設計、広告運用、リピート施策の設計までを一気通貫で支援しています。細部の実装から売上に直結する導線設計まで、まとめてご相談いただけます。
この記事でわかること
- Shopifyでアプリを使わずにお知らせ一覧を無料実装する具体的な手順
- コピーして使えるHTML・CSS（Liquid）のサンプルコードと各パラメータの意味
- 無料のコード実装とアプリ導入のどちらを選ぶべきかの判断基準
- 実装後によくあるトラブル（表示されない・崩れる・更新されない）の原因と対処法
- お知らせ一覧をSEOや顧客のリピート購入につなげる運用のコツ
結論：お知らせ一覧は無料のコード実装で十分実現でき、多くの店舗にとって最適解になる
結論から言うと、Shopifyの「お知らせ一覧」は標準搭載のブログ機能とテーマエディタの「カスタムLiquid」セクションを使えば、追加アプリなし・追加費用なしで実装できます。処理の中身は「ブログ記事を新着順に指定件数だけ取得して並べる」というシンプルなロジックのため、Shopifyが標準で持っているLiquidのループ処理だけで完結し、外部アプリを経由する必要がありません。アプリを使わないぶん、ページの読み込み速度への悪影響（アプリ側のJavaScript読み込みによる表示遅延）も避けられ、月額コストも発生しません。
一方で、複数言語展開をしている店舗、頻繁にテーマを入れ替える予定がある店舗、社内にコードを触れる担当者がいない店舗については、多少のコストをかけてでもアプリで管理画面から直感的に運用できる状態にしたほうが、結果的に運用工数を抑えられるケースもあります。以下の比較表を参考に、自社の状況に近い方を選んでください。
| 比較項目 | 無料のコード実装 | アプリ導入 |
|---|---|---|
| 初期費用 | 0円 | 0円〜（有料アプリは初期費用なしが多い） |
| 月額費用 | 0円 | 無料プランあり〜数千円程度 |
| 導入難易度 | Liquid・CSSの知識が多少必要 | 管理画面の操作のみで完結 |
| デザインの自由度 | 非常に高い（自由にCSS調整可能） | アプリの用意したテンプレート内に限定されがち |
| 表示件数・条件の柔軟性 | コードの数値を変えるだけで自由に変更可能 | アプリの仕様範囲内で設定 |
| 表示速度への影響 | ほぼ影響なし（Liquidはサーバーサイド処理） | アプリのJS読み込み分だけ遅延する場合がある |
| 保守・運用のしやすさ | コードが分かる担当者が必要 | 非エンジニアでも運用しやすい |
| テーマ変更時の引き継ぎ | 手動でコードを再設置する必要あり | アプリを再度有効化するだけの場合が多い |
| おすすめの事業者 | コストを抑えたい店舗、社内にコード編集できる人がいる店舗 | 非エンジニア中心の運用チーム、多言語・多店舗展開の店舗 |
なぜ今「お知らせ一覧」がECサイトに欠かせないのか
実店舗であれば、店頭のポップやスタッフの声かけで「今週末セールです」「新商品入荷しました」と自然に伝えられます。しかしECサイトでは、顧客が能動的にサイトへアクセスしない限り、こうした情報はまったく届きません。トップページに新着情報を並べる「お知らせ一覧」は、いわばECサイトにおける「店頭ポップ」の役割を果たす、地味ながら購買行動に直結する重要な導線です。
加えて、お知らせ一覧の存在はSEOの観点でも意味を持ちます。トップページから各お知らせ記事への内部リンクが自然に発生するため、クローラーが新しいコンテンツを発見しやすくなり、サイト全体の更新頻度も可視化されます。更新が止まっているように見えるECサイトは、Google・ユーザー双方から「運営されていないサイト」と判断されるリスクがあり、離脱率や信頼性の低下につながります。反対に、セール情報・入荷情報・メディア掲載実績などが定期的に更新されているサイトは、リピーターの再訪頻度を高め、Amazon・楽天市場などのモール型ECにはない「このブランドを応援したい」という関係性の構築にも寄与します。
実際に弊社が支援してきた店舗の傾向を見ても、トップページに新着情報が定期的に更新されている店舗のほうが、リピーターのサイト再訪率・メルマガ経由の再訪率が高い傾向にあります。逆に、開業当初のまま数か月間トップページが動いていない店舗では、「このお店は今も営業しているのだろうか」という不安から離脱してしまう新規顧客が一定数存在します。特にアパレル・食品・コスメなど「入荷・欠品・季節限定」の情報鮮度が購買意欲に直結するカテゴリでは、お知らせ一覧の有無が体感的なブランドの信頼感を左右すると言っても過言ではありません。
また、実店舗を持つ事業者がECサイトを開設する場合、店頭で発信している情報（臨時休業、催事出店、テレビ・雑誌掲載など）をそのままECサイトのお知らせに転用できる点も見逃せません。オフラインとオンラインの情報発信を一本化することで、更新の手間を増やさずにECサイトの鮮度を保てるようになります。
Shopifyの「お知らせ一覧」とは
Shopifyにおける「お知らせ一覧」とは、Shopify標準のブログ機能（Blog Posts）で作成した記事を、日付の新しい順に指定件数だけ抜き出し、トップページや専用ページに一覧表示する仕組みを指します。ニュースサイトの「新着記事一覧」と同じ考え方で、実装上は通常のブログ機能をそのまま流用します。掲載する内容としては、主に次のような用途で使われています。
- セール・キャンペーン・期間限定クーポンの告知
- 新商品・再入荷情報の案内
- 臨時休業・配送遅延・システムメンテナンスなどの重要なお知らせ
- メディア掲載・展示会出展・雑誌掲載などの実績紹介
- 採用情報や店舗スタッフからのメッセージ
ブログ機能を流用するため、記事ごとにSEOタイトルやメタディスクリプション、アイキャッチ画像を個別に設定できる点も見逃せないメリットです。単なる「お知らせ」であっても、1記事ずつ検索エンジンに評価される独立したページとして機能するため、積み重ねるほどサイト全体の評価向上にも寄与します。
実装前に準備するもの
ステップ1：お知らせ専用のブログを作成する
既存の「News」や「コラム」ブログに混在させると、SEO記事と告知が入り混じって見づらくなるため、お知らせ専用のブログを新規作成することをおすすめします。Shopify管理画面から「オンラインストア」＞「ブログ記事」＞画面右上の「ブログを管理」＞「ブログを追加」の順に進み、タイトルを「お知らせ」など分かりやすい名称で作成してください。
ステップ2：ブログのハンドル（URLの識別子）を確認する
作成したブログをクリックし、URLの末尾に表示される識別子（例：news、information、announcementsなど）を控えておきます。これがLiquidコード内で`blogs[‘ここに入る’]`という形で参照する重要な値になるため、正確にコピーしてください。日本語のブログタイトルを付けた場合でも、ハンドルは自動的に半角英数字に変換されます。
ステップ3：表示したいページを決める
お知らせ一覧をトップページに置くのか、専用のランディングページに置くのかを事前に決めておきます。トップページに置く場合は回遊性が高まりやすく、専用ページに置く場合はページ自体を「お知らせ」として独立したSEOページに育てやすいという違いがあります。多くの店舗では、トップページに直近5〜6件を表示し、「もっと見る」からブログ一覧ページに遷移させる構成が使いやすいです。
ステップ4：テーマのコードを編集する前にバックアップを取る
Shopifyの「テーマを複製」機能を使い、公開中のテーマを複製してから作業することを強く推奨します。複製したテーマ（プレビュー用テーマ）上で作業・確認し、問題がなければ本番に反映することで、コード編集による表示崩れのリスクをゼロに近づけられます。
【無料】お知らせ一覧をコードで実装する手順
ステップ1：カスタムLiquidセクションを追加する
Shopify管理画面の「オンラインストア」＞「テーマ」から、編集したいテーマの「カスタマイズ」をクリックしてテーマエディタを開きます。お知らせ一覧を表示したい位置（トップページなら「テーマ設定」の直下あたり）にカーソルを合わせ、「セクションを追加」をクリックし、一覧から「カスタムLiquid」を選択します。
ステップ2：HTMLコードを準備する
下記のコードをそのままコピーし、`blogs[‘news’]`の`news`部分を、ステップ2で控えたご自身のブログのハンドルに書き換えてください。新着1件目には自動で「NEW」バッジが付き、お知らせが1件も無い場合は「現在お知らせはありません」という文言が表示されるよう、フォールバック処理も組み込んでいます。
<div class="ec-news-list">
<h2 class="ec-news-list__heading">お知らせ</h2>
<ul class="ec-news-list__items">
{% assign news_blog = blogs['news'] %}
{% for article in news_blog.articles limit: 6 %}
<li class="ec-news-list__item{% if forloop.index0 == 0 %} is-new{% endif %}">
<a href="{{ article.url }}" title="{{ article.title }}">
<span class="ec-news-list__date">{{ article.published_at | date: "%Y.%m.%d" }}</span>
{% if forloop.index0 == 0 %}
<span class="ec-news-list__badge">NEW</span>
{% endif %}
<span class="ec-news-list__title">{{ article.title | truncate: 42 }}</span>
</a>
</li>
{% else %}
<li class="ec-news-list__empty">現在お知らせはありません</li>
{% endfor %}
</ul>
{% if news_blog.articles.size > 6 %}
<div class="ec-news-list__more">
<a href="{{ news_blog.url }}">お知らせ一覧をすべて見る →</a>
</div>
{% endif %}
</div>ステップ3：CSSコードを準備する
続いて見た目を整えるCSSを追加します。カスタムLiquidブロックには文字数の上限があるため、下記のように`<style>`タグでHTMLコードの中に直接埋め込む形にすると、上限に達しにくく管理も1箇所で完結します。
<style>
.ec-news-list { max-width: 900px; margin: 40px auto; padding: 0 16px; }
.ec-news-list__heading { font-size: 20px; font-weight: 700; margin-bottom: 16px; border-left: 4px solid #222; padding-left: 10px; }
.ec-news-list__items { list-style: none; margin: 0; padding: 0; }
.ec-news-list__item { border-bottom: 1px solid #e2e2e2; padding: 12px 0; }
.ec-news-list__item a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.ec-news-list__date { font-size: 13px; color: #888; min-width: 90px; }
.ec-news-list__badge { font-size: 11px; background: #d92c2c; color: #fff; padding: 2px 6px; border-radius: 3px; }
.ec-news-list__title { font-size: 15px; }
.ec-news-list__item a:hover .ec-news-list__title { text-decoration: underline; }
.ec-news-list__more { text-align: center; margin-top: 20px; }
.ec-news-list__more a { display: inline-block; border: 1px solid #222; padding: 8px 28px; font-size: 13px; }
.ec-news-list__empty { color: #999; font-size: 14px; padding: 12px 0; }
@media screen and (max-width: 480px) {
.ec-news-list__item a { flex-direction: column; align-items: flex-start; gap: 4px; }
}
</style>ステップ4：コードをテーマエディタに貼り付けて保存する
ステップ1で追加した「カスタムLiquid」セクションのコード入力欄に、ステップ2のHTMLコードとステップ3のCSSコードをまとめて貼り付けます。貼り付け後、画面右上の「保存」をクリックすれば設定は完了です。多くの主要テーマ（Dawn、Debut、Prestige、Sense など）で共通して「カスタムLiquid」セクションが利用できますが、テーマによって呼称が異なる場合は「Liquidコード」「カスタムHTML」といった名称で探してみてください。
ステップ5：表示を確認し、レスポンシブ対応をチェックする
保存後、テーマエディタのプレビューでパソコン表示とスマートフォン表示の両方を確認します。特にスマートフォン表示では、日付・バッジ・タイトルが横並びのままはみ出していないか、タップ領域が指で押しやすい大きさになっているかを必ずチェックしてください。問題がなければ、複製テーマから本番テーマへ同じ手順でコードを反映します。
ステップ6（応用）：表示件数やデザインをカスタマイズする
表示件数を増やしたい場合はコード内の`limit: 6`の数値を変更するだけで反映されます。タイトルの表示文字数は`truncate: 42`の数値で調整可能です。また、特定のタグが付いた記事だけを抽出したい場合は、`{% for article in news_blog.articles limit: 6 %}`の内側に`{% if article.tags contains ‘セール’ %}`のような条件分岐を追加することで、セール告知だけを別枠で目立たせるといった応用も可能です。
補足：アクセシビリティにも配慮する
スクリーンリーダーを利用するユーザーにも配慮する場合は、`<a>`タグに`aria-label`を付与し、「{{ article.title }}の詳細を読む」のように読み上げ内容を明確にしておくと親切です。また、日付とタイトルの間に十分なコントラスト比を確保し、文字サイズも14px以上を目安に設定することで、幅広いユーザーにとって読みやすいお知らせ一覧になります。こうした細部への配慮は、Googleが重視するユーザー体験の評価にも間接的に良い影響を与えます。
アプリを導入したほうがよいケースの見極め方
ここまで無料のコード実装を解説してきましたが、次のような条件に当てはまる場合は、あえて有料・無料のアプリを利用したほうがトータルの運用コストを抑えられることがあります。1つ目は、多言語・多店舗展開をしていてお知らせの出し分けが複雑な場合です。2つ目は、社内にLiquidやCSSを編集できる担当者がおらず、外部委託のたびにコストが発生してしまう場合です。3つ目は、ポップアップ通知やLINE連携など、ブログ機能だけでは実現できない拡張機能まで含めて一元管理したい場合です。アプリを選ぶ際は、表示速度への影響（Google PageSpeed Insightsのスコア低下）とストア全体で使っているアプリ数（アプリが増えるほど表示速度は低下しやすい）を必ず確認したうえで導入を判断してください。
メリット・デメリット
無料のコード実装は、費用面・表示速度面では明確な優位性がある一方、運用面では相応の知識やリソースが求められます。導入を決める前に、双方の観点を整理しておきましょう。
無料コード実装のメリット
- 月額費用が一切かからず、テーマのコードとして永続的に利用できる
- アプリのJavaScript読み込みが発生しないため、表示速度に悪影響を与えにくい
- デザインを自社ブランドのトンマナに合わせて自由にカスタマイズできる
- ストアで使用中のアプリ数を増やさずに済むため、アプリ同士の競合トラブルを避けられる
無料コード実装のデメリット
- 初回設置にLiquid・CSSの基礎知識、もしくは外部への設置依頼が必要になる
- テーマを大幅に入れ替えた場合、コードを新テーマに再設置する必要がある
- 細かな挙動（並び順の変更、条件分岐の追加など）を都度コードで対応する必要がある
- コーディングミスがあった場合、原因の切り分けに一定の知識が求められる
表示速度・SEOへの影響を検証する方法
コード実装は表示速度への影響が小さいと述べましたが、実装後は必ず数値で確認する習慣をつけてください。Google が無料公開している「PageSpeed Insights」にストアのURLを入力するだけで、モバイル・パソコンそれぞれの表示速度スコアと、Core Web Vitals（LCP・CLS・INPなど）の詳細な数値が確認できます。お知らせ一覧を追加する前後でスコアを比較し、大きな低下が見られないかをチェックしておくと安心です。特に画像を含めたお知らせ記事を大量に一覧表示する設計にした場合は、LCP（最大コンテンツの描画時間）が悪化しやすいため、一覧側にはサムネイル画像を表示せずテキストのみにとどめる、あるいは`loading=”lazy”`属性を付けた軽量な画像のみ表示するといった工夫が有効です。
SEOの観点では、お知らせ一覧そのものよりも、そこからリンクされる個々のお知らせ記事ページの中身が重要になります。単に「セール開催中」とだけ書くのではなく、対象商品名やカテゴリ名、開催期間などの固有名詞を本文に含めることで、検索経由での流入も見込めるページに育てられます。お知らせ記事であっても、タイトルタグとメタディスクリプションは毎回きちんと設定することをおすすめします。
お知らせ一覧を成果につなげる運用のコツ
お知らせ一覧は「設置して終わり」ではなく、継続的な運用によって初めて売上への貢献度が高まります。ここでは、実装後の運用フェーズで意識したい3つのポイントを紹介します。
更新頻度を無理のない範囲でルール化する
毎日更新する必要はありませんが、月に2〜4回程度、担当者が交代しても続けられる範囲で更新ルールを決めておくと、お知らせ欄が形骸化しません。「毎週月曜に翌週のセール予定を投稿する」など、社内カレンダーと連動させる運用が定着しやすい方法です。
お知らせ記事の文末に商品ページへの導線を必ず入れる
セールや新商品の告知記事を書く際は、記事の文末に該当商品ページや特集ページへのリンクを必ず設置してください。お知らせ一覧はあくまで「気づいてもらう」ための入口であり、そこから購入につなげる導線がなければ機械的な情報発信で終わってしまいます。リンクには`?utm_source=news&utm_medium=onsite`のようなパラメータを付与しておくと、Google アナリティクスなどの解析ツールでお知らせ経由の流入・購入がどの程度あったかを後から検証できます。
メルマガ・LINE公式アカウントと連携させる
お知らせ記事を公開したタイミングで、同じ内容をメルマガやLINE公式アカウントでも配信すると、サイトへの再訪動線を複数チャネルで用意できます。ECサイト単体で完結させず、既存の顧客接点と組み合わせることで、お知らせ一覧の効果を最大化できます。
運用でよくあるトラブルと対処法
実装後の運用フェーズでは、いくつか典型的なつまずきポイントがあります。多くは設定ミスによる単純な原因であるため、慌てずに一つずつ確認していけば解決できます。あらかじめ知っておくことで、公開後の慌てた対応を防げます。
- お知らせが1件も表示されない：`blogs[‘news’]`のハンドルが実際のブログのハンドルと一致していないケースがほとんどです。ブログ管理画面のURLを再確認してください。
- 新しい記事を投稿したのに反映が遅い：ブラウザやShopifyのCDNキャッシュが影響している場合があります。強制リロード（Shift+再読み込み）で解消することが多いですが、数分から十数分程度のタイムラグが出ることもあります。
- スマートフォンでレイアウトが崩れる：使用中のテーマ側のグローバルCSSと、追加したCSSのクラス名が競合している可能性があります。クラス名の先頭に`ec-`のような一意のプレフィックスを付けることで競合を避けられます。
- 下書き状態の記事まで表示されてしまう：Shopifyのブログ記事は「公開」ステータスにしない限り一覧には表示されない仕様のため、多くの場合は公開日時が未来に設定されていないかを確認してください。
- 「もっと見る」ボタンが常に表示される／されない：コード内の`news_blog.articles.size > 6`の数値と、HTML側の`limit: 6`の数値が一致しているかを確認してください。
よくある質問
Q1. 無料の方法でも、複数のブログ（お知らせとコラムなど）を1つのページに表示できますか？
可能です。今回紹介したコードのブロックをもう1セット追加し、`blogs[‘news’]`の部分を別のブログハンドル（例：`blogs[‘column’]`）に書き換えることで、複数の一覧を並べて表示できます。それぞれに見出しを付けて視覚的に区別すると、ユーザーにとっても分かりやすい構成になります。
Q2. 表示件数を10件に増やしたいのですが、どこを変更すればよいですか？
HTMLコード内の`limit: 6`という数値を`limit: 10`に書き換えるだけで反映されます。あわせて「もっと見る」ボタンの表示条件である`news_blog.articles.size > 6`の数値も同じ値に揃えて変更してください。件数を増やしすぎるとページの縦幅が長くなるため、5〜8件程度に収めるのが一般的です。
Q3. セール告知だけを別枠で目立たせるなど、特定のタグの記事だけを表示できますか？
できます。お知らせ記事にあらかじめ「セール」などのタグを付けておき、コード内のループ処理に`{% if article.tags contains ‘セール’ %}`という条件分岐を追加することで、タグが一致する記事だけを抽出して表示できます。緊急性の高い告知を優先的に見せたい場合に有効な方法です。
Q4. 別のテーマに切り替えた場合、お知らせ一覧の表示は消えてしまいますか？
はい、消えてしまいます。今回のコードはテーマ内の特定セクションに直接書き込む形式のため、テーマそのものを別のものに入れ替えると設定が引き継がれません。テーマ変更の予定がある場合は、変更後のテーマでも同じ手順でコードを再設置する必要があります。この点は、管理画面から再有効化するだけで済むアプリ導入に比べたデメリットと言えます。
Q5. アプリと無料コード、どちらがSEOに有利ですか？
一般的には無料のコード実装のほうがSEOに有利な傾向があります。理由は2つあり、1つはLiquidによるサーバーサイド処理のためページの表示速度が落ちにくいこと、もう1つはアプリの中にはリンクをJavaScriptで動的に生成するものがあり、検索エンジンのクローラーがリンクを正しく認識できない場合があるためです。SEOを重視する店舗ほど、コード実装を優先的に検討する価値があります。
Q6. お知らせ記事に画像やバナーを入れることはできますか？
できます。Shopifyのブログ記事編集画面には通常の記事と同様にアイキャッチ画像を設定できるため、記事本文にバナー画像を挿入すること自体は問題ありません。ただし今回紹介した一覧表示のコードはテキスト（日付・タイトル）のみを抽出する仕様にしています。画像まで一覧に表示したい場合は、コード内に`{{ article.image | image_url: width: 100 }}`のような記述を追加し、`<img>`タグを組み込む形にカスタマイズできますが、画像を増やすほど表示速度への影響が大きくなる点は考慮してください。
まとめ
Shopifyの「お知らせ一覧」は、アプリを追加しなくても、標準のブログ機能とLiquidコードだけで十分に実装できます。月額コストをかけずに、表示速度への悪影響も避けながら、セール告知や入荷情報をタイムリーに顧客へ届けられる点は、特にコストを抑えたい成長期のEC事業者にとって大きなメリットです。一方で、多言語展開や社内リソースの制約がある場合は、無理にコード実装にこだわらずアプリの活用も選択肢に入れるべきでしょう。
ただし、お知らせ一覧はあくまでECサイト全体の導線設計の一部にすぎません。せっかく新着情報を届けても、その先の商品ページや購入導線、広告からの流入設計が整っていなければ、売上には結びつきにくいのが実情です。EC Retail Adsでは、こうした細部の実装から、Shopifyストア全体の構築・計測設計・広告運用・リピート施策までを一気通貫でご支援しています。「お知らせ一覧の実装だけ相談したい」「ストア全体を見直したい」など、規模を問わずお気軽にご相談ください。
コメント