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

2026年6月27日

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種類とする。

役割	英語表記	日本語名	目的	主な設置位置
LEAD	LEAD	導入	軽い認知・運営会社紹介	H2-1またはH2-2後
MIDDLE	MIDDLE	説明	記事テーマとツール機能を接続	記事中盤のH2後
SUMMARY	SUMMARY	誘導	DL-LP・アピスmini・問い合わせへ誘導	まとめ前または記事末

記事によって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} -->

各要素の意味

要素	内容
APICE-WORK-BLOCK-START	ボックス開始位置
APICE-WORK-BLOCK-END	ボックス終了位置
H2-{番号}	設置するH2位置
役割	LEAD / MIDDLE / SUMMARY
TPL:{テンプレートID}	使用するHTMLテンプレートID

注意点

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

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

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

命名形式

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

例

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

各項目の意味

項目	例	説明
サイト	tecn / earsta	設置対象サイト
導線商品	STOCKmini / STEPmini / アピスmini	誘導する商品・サービス
大カテゴリ	在庫管理 / ダイソー / どこの国 / WordPress / LDAC	記事の大分類
小カテゴリ	使用期限 / SKU / 家電 / イヤホン / 共通	記事の小分類
役割	導入 / 説明 / 誘導	ボックスの役割
版数	A001 / A002 / B001	A/Bテスト・改訂管理

版数の考え方

版数	意味
A001	最初のA案
A002	A案の軽微修正版
B001	訴求軸を変えたB案
C001	さらに別訴求のC案

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

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

シート名は以下とする。

WORK_BLOCK_TPL

列構成

列	項目名	内容
A	使用	使用する場合は〇
B	TPL名	テンプレートID
C	サイト	tecn / earsta など
D	導線商品	STOCKmini / STEPmini / アピスmini など
E	大カテゴリ	在庫管理 / ダイソー / どこの国など
F	小カテゴリ	使用期限 / SKU / 共通など
G	役割	導入 / 説明 / 誘導
H	版数	A001 / A002 / B001 など
I	内容HTML	実際に差し込むカスタムHTML
J	メモ	設置位置・用途・注意点など

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へ貼る場合は、以下の手順で行う。

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

手貼り時の注意

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

"" → "

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

12. 自動挿入する場合

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

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

記事本文を取得する
APICE-WORK-BLOCK-START を検索する
コメント内の TPL:{テンプレートID} を取得する
スプレッドシートまたはDBから該当テンプレートを取得する
内容HTMLを正規化する
START〜ENDコメントの間を差し替える
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は、内部リンクの青枠と区別するため、原則としてオレンジ系のボックスにする。

基本色

要素	色
枠線	#f59e0b
背景	#fff7ed
見出し文字	#b45309
ボタン背景	#f97316
ボタン文字	#ffffff

基本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の例

設置位置	utm_content
導入	lead_h2_1
説明	middle_h2_4
誘導	summary_h2_8

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

15. 文言作成ルール

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

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

使用期限記事

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

ダイソー記事

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

どこの国記事

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

WordPress記事

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

LDAC・イヤホン記事

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

耳スタ記事

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

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

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

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

それぞれの役割は以下。

TPL名	役割	設置位置
tecn_STOCKmini_在庫管理_使用期限_導入_A001	導入	H2-1またはH2-2後
tecn_STOCKmini_在庫管理_使用期限_説明_A001	説明	H2-4またはH2-5後
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で自動挿入・自動差し替えできる状態にする。

```

筆者プロフィール｜DXジュン（Apice Technology 代表）

```

「tecn」を運営している DXジュン です。
Apice Technology株式会社の代表として、20年以上にわたり Web制作・業務システム開発・業務改善支援に携わっています。

普段は中小企業向けに、在庫管理・予約管理・受発注管理など、業務を効率化するためのシステム開発やDX支援を行っています。

tecnでは、業務改善のヒントやWebシステムの仕組み、「技術が暮らしを少し便利で楽しくする」をテーマに、現場目線で分かりやすく情報発信しています。

最近は在庫管理のDX化に力を入れており、 SKU・JAN・棚卸・バーコード運用など、現場で役立つ実践的なノウハウを発信しています。

また、小規模事業者向けの無料ツール 「アピスminiシリーズ」も公開しています。

```

業務改善に役立つ無料ツールや在庫管理システムを公開しています

無料在庫管理システムを見るアピスminiシリーズを見る ```

🔗 Apice Technology（会社HP）
🔗 音を楽しむ【耳スタ】
🔗 在庫管理システムの機能紹介

記事が皆さまの仕事や日常のヒントになれば幸いです。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

インボイス対応の請求書・領収書で取引年月日はいつ書く？業種別にわかりやすく解説｜　受発注

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