ちょっとお仕事の話ですが！　APICE-WORK-BLOCK 運用規則 v1.0

TECN・耳スタ記事内に「ちょっとお仕事のお話し」ボックスを設置するための社内ルール

1. 目的

TECNおよび耳スタの記事内に、アピステクノロジーの無料ツール・業務改善ツール・関連サービスへの導線を、読者体験を大きく損なわない形で設置する。

この導線は、Googleアドセンスのように記事閲覧を中断させる広告ではなく、記事本文とは役割を分けた「ちょっとお仕事のお話し」枠として設置する。

目的は、以下の通り。

• TECN・耳スタ読者に、アピステクノロジーの業務改善ツールを自然に知ってもらう
• STOCKmini、STEPmini、アピスminiシリーズなどの無料DLにつなげる
• 無料ツール利用者を増やし、アピスへの信頼形成につなげる
• 将来的にアピス在庫管理システム、受発注・請求管理システムなどの商品販売へつなげる
• 記事ごとの反応を分析し、テンプレート文言を改善できるようにする

2. 基本方針

記事内に設置する「ちょっとお仕事のお話し」ボックスは、内部リンクブロックとは役割を分ける。

• 内部リンクブロック：青枠
• ちょっとお仕事のお話し：オレンジ枠

オレンジ枠は、記事本文とは別の「仕事・業務改善・無料ツール紹介」の導線として扱う。

読者に強制的に広告を見せるのではなく、以下のような姿勢で設置する。

• 興味がある人だけ読めばよい
• 記事テーマと自然につながる内容にする
• 無理に売り込まない
• 無料ツールや業務改善の入口として紹介する
• 記事ジャンルごとに文言を変える

3. APICE-WORK-BLOCKとは

APICE-WORK-BLOCKとは、記事内に「ちょっとお仕事のお話し」ボックスを設置・管理するためのコメント規則である。

将来的には、WordPress APIを使って、記事本文内のコメント位置に、スプレッドシートまたはDBで管理しているHTMLテンプレートを自動挿入・差し替えする。

当面は手作業で設置するが、将来の自動化を前提に、コメント規則とテンプレートIDを統一する。

4. 設置位置の考え方

APICE-WORK-BLOCKは、原則として1記事に1〜3箇所設置する。

役割は以下の3種類とする。

記事によってH2数が異なるため、H2番号は記事ごとに調整してよい。

例：

<!-- APICE-WORK-BLOCK-START H2-1 LEAD TPL:tecn_STOCKmini_在庫管理_使用期限_導入_A001 -->
<!-- APICE-WORK-BLOCK-END H2-1 LEAD TPL:tecn_STOCKmini_在庫管理_使用期限_導入_A001 -->

<!-- APICE-WORK-BLOCK-START H2-5 MIDDLE TPL:tecn_STOCKmini_在庫管理_使用期限_説明_A001 -->
<!-- APICE-WORK-BLOCK-END H2-5 MIDDLE TPL:tecn_STOCKmini_在庫管理_使用期限_説明_A001 -->

<!-- APICE-WORK-BLOCK-START H2-8 SUMMARY TPL:tecn_STOCKmini_在庫管理_使用期限_誘導_A001 -->
<!-- APICE-WORK-BLOCK-END H2-8 SUMMARY TPL:tecn_STOCKmini_在庫管理_使用期限_誘導_A001 -->

5. コメント規則

APICE-WORK-BLOCKのコメントは、以下の形式で記述する。

<!-- APICE-WORK-BLOCK-START H2-{番号} {役割} TPL:{テンプレートID} -->
ここにカスタムHTMLを入れる
<!-- APICE-WORK-BLOCK-END H2-{番号} {役割} TPL:{テンプレートID} -->

各要素の意味

注意点

• STARTとENDのテンプレートIDは必ず一致させる
• H2番号は記事ごとの実際の設置位置に合わせる
• 役割名は LEAD / MIDDLE / SUMMARY のいずれかを使う
• テンプレートIDはスプレッドシートのTPL名と一致させる

6. テンプレートID命名規則

テンプレートIDは、社内メンバーが見ても内容を理解できるよう、日本語を含めてわかりやすく命名する。

命名形式

{サイト}_{導線商品}_{大カテゴリ}_{小カテゴリ}_{役割}_{版数}

例

tecn_STOCKmini_在庫管理_使用期限_導入_A001
tecn_STOCKmini_在庫管理_使用期限_説明_A001
tecn_STOCKmini_在庫管理_使用期限_誘導_A001

各項目の意味

版数の考え方

7. テンプレート管理シートのレイアウト

当面はスプレッドシートでテンプレートを管理する。
将来的にはDB化する。

シート名は以下とする。

WORK_BLOCK_TPL

列構成

TSV貼り付け用ヘッダー

使用	TPL名	サイト	導線商品	大カテゴリ	小カテゴリ	役割	版数	内容HTML	メモ

8. 内容HTMLの記述ルール

スプレッドシートの 内容HTML には、実際にWordPressのカスタムHTMLブロックへ差し込むHTMLを記載する。

基本ルール

• HTML全文を1セルに入れる
• セル形式は原則「自動」でもよいが、安定運用では「書式なしテキスト」を推奨する
• HTML内の属性値は、原則としてシングルクォートで記述する
• ダブルクォートはなるべく使わない
• タブ文字は使わない
• インデントは半角スペースで行う
• URLの & は、HTML内では & にする

推奨例

<div class='apice-work-box' style='border: 2px solid #f59e0b; background: #fff7ed; padding: 18px 20px; margin: 28px 0; border-radius: 10px;'>
  <p style='margin: 0 0 10px; font-weight: bold; color: #b45309; font-size: 1.05em;'>
    ちょっとお仕事のお話しです
  </p>
</div>

非推奨例

<div class="apice-work-box" style="border: 2px solid #f59e0b;">

ダブルクォート自体は禁止ではないが、スプレッドシートやCSV経由で "" に変換される可能性があるため、原則としてシングルクォートを使う。

9. ダブルクォート崩れ対策

スプレッドシートやCSVを経由した場合、HTML内のダブルクォートが以下のように二重化されることがある。

崩れた例

<div class=""apice-work-box"" style=""border: 2px solid #f59e0b;"">

正しい例

<div class="apice-work-box" style="border: 2px solid #f59e0b;">

この問題を避けるため、社内ルールとしてはシングルクォートを推奨する。

ただし、外注・コーダー・既存HTML流用により、ダブルクォートが混在する可能性があるため、WordPress APIで自動挿入する際には、挿入直前に補正処理を行う。

API挿入前の補正処理例

function normalizeWorkBlockHtml_(html) {
  if (!html) return '';

  return String(html)
    .replace(/""/g, '"')
    .trim();
}

注意

以下のように、すべてのダブルクォートをシングルクォートへ一括変換する処理は行わない。

html.replace(/"/g, "'");

本文中の引用符や将来の特殊なHTMLが壊れる可能性があるため。

10. コメントの扱い

APICE-WORK-BLOCKのSTART / ENDコメントは、記事本文側の差し替え位置を示すために使う。

一方、スプレッドシートの 内容HTML には、原則としてSTART / ENDコメントを含めない。

記事本文側

<!-- APICE-WORK-BLOCK-START H2-8 SUMMARY TPL:tecn_STOCKmini_在庫管理_使用期限_誘導_A001 -->
ここにテンプレートHTMLを差し込む
<!-- APICE-WORK-BLOCK-END H2-8 SUMMARY TPL:tecn_STOCKmini_在庫管理_使用期限_誘導_A001 -->

スプレッドシート側

<div class='apice-work-box' style='border: 2px solid #f59e0b; background: #fff7ed; padding: 18px 20px; margin: 28px 0; border-radius: 10px;'>
  ...
</div>

記事本文側のコメントと、テンプレートHTML本文は分けて管理する。

11. 手作業で設置する場合

当面は手作業で設置する場合がある。

手作業でWordPressへ貼る場合は、以下の手順で行う。

1. 記事内の設置位置を決める
2. STARTコメントを入れる
3. スプレッドシートの内容HTMLをコピーする
4. WordPressのカスタムHTMLブロックに貼る
5. ENDコメントを入れる
6. プレビューでオレンジボックス表示を確認する
7. リンク先が正しいか確認する
8. スマホ表示も確認する

手貼り時の注意

スプレッドシートからコピーしたHTMLに "" が含まれている場合は、貼り付け前に以下の一括置換を行う。

"" → "

ただし、基本はシングルクォートでHTMLを登録するため、通常はこの問題は発生しにくい。

12. 自動挿入する場合

将来的にWordPress APIで自動挿入する場合は、記事本文内のAPICE-WORK-BLOCKコメントを検出し、TPL名に対応する内容HTMLを挿入する。

処理イメージは以下の通り。

1. 記事本文を取得する
2. APICE-WORK-BLOCK-START を検索する
3. コメント内の TPL:{テンプレートID} を取得する
4. スプレッドシートまたはDBから該当テンプレートを取得する
5. 内容HTMLを正規化する
6. START〜ENDコメントの間を差し替える
7. WordPress APIで記事を更新する

差し替え後のイメージ

<!-- APICE-WORK-BLOCK-START H2-8 SUMMARY TPL:tecn_STOCKmini_在庫管理_使用期限_誘導_A001 -->
<div class='apice-work-box' style='border: 2px solid #f59e0b; background: #fff7ed; padding: 18px 20px; margin: 28px 0; border-radius: 10px;'>
  ...
</div>
<!-- APICE-WORK-BLOCK-END H2-8 SUMMARY TPL:tecn_STOCKmini_在庫管理_使用期限_誘導_A001 -->

13. デザインルール

APICE-WORK-BLOCKは、内部リンクの青枠と区別するため、原則としてオレンジ系のボックスにする。

基本色

基本HTML構造

<div class='apice-work-box' style='border: 2px solid #f59e0b; background: #fff7ed; padding: 18px 20px; margin: 28px 0; border-radius: 10px;'>
  <p style='margin: 0 0 10px; font-weight: bold; color: #b45309; font-size: 1.05em;'>
    ちょっとお仕事のお話しです
  </p>

  <p style='margin: 0 0 12px;'>
    本文を入れる。
  </p>

  <p style='margin: 0;'>
    <a href='リンクURL' style='display: inline-block; background: #f97316; color: #ffffff; padding: 10px 16px; border-radius: 6px; text-decoration: none; font-weight: bold;'>
      ボタン文言
    </a>
  </p>
</div>

14. リンク計測ルール

APICE-WORK-BLOCKからLPへリンクする場合は、可能な限りUTMパラメータを付ける。

STOCKmini使用期限向け例

https://tecn.apice-tec.co.jp/lp-replac-excel-tostockmini-free-dl60317/?utm_source=tecn&utm_medium=work_block&utm_campaign=stockmini_expiration&utm_content=summary_h2_8

HTML内では & を & にする。

<a href='https://tecn.apice-tec.co.jp/lp-replac-excel-tostockmini-free-dl60317/?utm_source=tecn&amp;utm_medium=work_block&amp;utm_campaign=stockmini_expiration&amp;utm_content=summary_h2_8'>

utm_contentの例

記事によってH2番号が異なる場合は、実際の設置H2番号に合わせてよい。

15. 文言作成ルール

APICE-WORK-BLOCKの文言は、記事ジャンルに合わせて変更する。

同じLEADであっても、すべての記事で同じ文章を使わない。

使用期限記事

使用期限・ロット・数量管理に自然につなげる。

ダイソー記事

日用品・消耗品・小物・店舗管理・補充タイミングに自然につなげる。

どこの国記事

メーカー・ブランド・仕入れ・販売・商品マスタ管理に自然につなげる。

WordPress記事

Webサイト運営・業務改善・アピステクノロジーの制作支援に自然につなげる。

LDAC・イヤホン記事

音響・ガジェット・型番・カラー・ECの商品管理に自然につなげる。

耳スタ記事

音楽やイヤホンの記事とは少し離れるため、運営会社からのお知らせとして控えめに紹介する。

16. まず作成するテンプレート

初期テンプレートとして、使用期限サブクラスター向けに以下の3つを作成する。

tecn_STOCKmini_在庫管理_使用期限_導入_A001
tecn_STOCKmini_在庫管理_使用期限_説明_A001
tecn_STOCKmini_在庫管理_使用期限_誘導_A001

それぞれの役割は以下。

17. 運用上の注意

• APICE-WORK-BLOCKは広告枠ではなく、アピスの仕事導線枠として扱う
• 記事本文の答えを出す前に強く入れすぎない
• 読者の検索意図と関係が薄い場合は、文言を控えめにする
• 同じ文章を全記事に機械的に貼らない
• カテゴリごとに自然な導入文を作る
• 医療・薬に関する記事では、使用可否や安全性の判断に踏み込まない
• 薬・湿布・坐薬などの記事では、「期限を一覧管理する」「確認漏れを減らす」程度の表現にとどめる
• 不安がある場合は医師・薬剤師に確認する旨を必要に応じて記載する

18. 今後の発展

将来的には、以下の運用に拡張する。

• スプレッドシート管理からDB管理へ移行
• WordPress APIによる自動挿入
• TPL名単位の差し替え
• 記事カテゴリ別の文言自動選択
• A/Bテスト
• LPクリック数・DL数との連携
• 記事台帳との連携
• STOCKmini以外のSTEPmini、アピスmini、アピス在庫管理システムへの導線展開
• TECNだけでなく耳スタ全記事への展開

19. 初期運用まとめ

初期運用では、まず使用期限サブクラスターの記事に対して、以下の3種類のオレンジボックスを設置する。

• 導入：軽い認知
• 説明：使用期限・ロット管理とSTOCKminiの機能接続
• 誘導：STOCKmini DL-LPへの送客

コメント規則、テンプレートID、スプレッドシート管理列、HTML記述ルールを統一しておくことで、将来的にWP APIで自動挿入・自動差し替えできる状態にする。

apice_site=tecn
apice_site=earsta

apice_site=tecn

apice_article={{ARTICLE_SLUG}}

apice_article=ship-expiration
apice_article=suppository-expiration

apice_block=lead
apice_block=middle
apice_block=summary

導入ブロック   ：apice_block=lead
説明ブロック   ：apice_block=middle
誘導ブロック   ：apice_block=summary

{サイト}_{導線商品}_{カテゴリ}

article_campaign=tecn_STOCKmini_expiration

tecn        ：TECNサイト
STOCKmini   ：STOCKminiへの導線
expiration  ：使用期限サブクラスター

tecn_STOCKmini_stock
tecn_STOCKmini_expiration
tecn_STOCKmini_sku
tecn_STOCKmini_daiso
tecn_STOCKmini_country
earsta_APICEmini_audio

tecn_STOCKmini_在庫管理_使用期限_誘導_A001

work_tpl=stockmini_expiration_summary_a001

work_tpl=stockmini_expiration_lead_a001
work_tpl=stockmini_expiration_middle_a001
work_tpl=stockmini_expiration_summary_a001

work_tpl=tecn_stock_exp_summary_a001
work_tpl=twb_stock_exp_summary_a001

apice_article={{ARTICLE_SLUG}}

<a href='https://tecn.apice-tec.co.jp/lp-replac-excel-tostockmini-free-dl60317/?apice_site=tecn&amp;apice_article={{ARTICLE_SLUG}}&amp;apice_block=summary&amp;article_campaign=tecn_STOCKmini_expiration&amp;work_tpl=stockmini_expiration_summary_a001'>
  無料在庫管理ツール「STOCKmini」をダウンロードする
</a>

https://tecn.apice-tec.co.jp/lp-replac-excel-tostockmini-free-dl60317/
?apice_site=tecn
&apice_article={{ARTICLE_SLUG}}
&apice_block=summary
&article_campaign=tecn_STOCKmini_expiration
&work_tpl=stockmini_expiration_summary_a001

<a href='https://tecn.apice-tec.co.jp/lp-replac-excel-tostockmini-free-dl60317/?apice_site=tecn&amp;apice_article={{ARTICLE_SLUG}}&amp;apice_block=lead&amp;article_campaign=tecn_STOCKmini_expiration&amp;work_tpl=stockmini_expiration_lead_a001'>
  無料在庫管理ツール「STOCKmini」を見てみる
</a>

<a href='https://tecn.apice-tec.co.jp/lp-replac-excel-tostockmini-free-dl60317/?apice_site=tecn&amp;apice_article={{ARTICLE_SLUG}}&amp;apice_block=middle&amp;article_campaign=tecn_STOCKmini_expiration&amp;work_tpl=stockmini_expiration_middle_a001'>
  ロット管理・使用期限管理に対応したSTOCKminiを確認する
</a>

<a href='https://tecn.apice-tec.co.jp/lp-replac-excel-tostockmini-free-dl60317/?apice_site=tecn&amp;apice_article={{ARTICLE_SLUG}}&amp;apice_block=summary&amp;article_campaign=tecn_STOCKmini_expiration&amp;work_tpl=stockmini_expiration_summary_a001'>
  無料在庫管理ツール「STOCKmini」をダウンロードする
</a>

使用
TPL名
計測ID
サイト
導線商品
大カテゴリ
小カテゴリ
役割
版数
article_campaign
apice_block
内容HTML
メモ

tecn_STOCKmini_在庫管理_使用期限_誘導_A001

stockmini_expiration_summary_a001

apice_site
apice_article
apice_block
article_campaign
work_tpl