ERPNext JPERPNext JP

カスタムHTMLブロック

ERPNextのワークスペースをカスタムHTMLで拡張。装飾・ボタン・CSSグラフ・アコーディオン・タブ・YouTube・FAQ・アラート・フォームまで、9例で手順とコツを解説。

8分
最終更新: 2025年9月11日
ERPNextワークスペースカスタムHTMLWorkspaceカスタマイズ

ERPNextワークスペースのカスタムHTML徹底ガイド（9つの実装例と手順）

はじめに

ワークスペースとカスタムHTMLブロック

本記事では ERPNextのワークスペースをカスタムHTMLブロックで拡張 し、UIをモダンにカスタマイズする方法を9つの実装例で解説します。

**ワークスペース(Workspace)**とは、ERPNextにログインしたときに最初に開く「ユーザーが使うホーム画面」です。
よく使う画面へのショートカットや、数字・グラフ・お知らせなどをまとめて置ける、アプリの入口＆掲示板のような場所だと考えると分かりやすいです。

今回は、このワークスペースにカスタムHTMLを実装してみます。
「カスタムHTML」ブロック を使うと、HTMLとCSSだけで標準では難しいことを自由に表現できます。
今回はこのカスタムHTMLを実装しながら、「どこまでできるのか？」を検証しました。

ワークスペース (実装したワークスペースの検証画面はこちら)

標準ブロック

なお、ワークスペースには下記のような標準ブロックがあります（代表例）。

  • ショートカット（/app/○○ への導線）
  • チャート／レポート（折れ線・棒グラフ、一覧）
  • KPIカード（数値）
  • リンク／カード（関連ページのまとまり）
  • 見出し／区切り などのレイアウト用

詳しくは公式ドキュメント⤴も参考になります：

検証の結論

先に検証の結論を申し上げると、

ERPNextの表現力は想像以上に柔軟です。よく見るWebアプリの大抵の表現を実装可能です！

この記事を読むことで

  • ERPNextのUIで表現できる範囲を知ることができます。
  • ワークスペースのカスタム手順が分かります。(← 公式Docには書かれておらず、少しはまりがちです💦)

実装例（9種）：カスタムHTMLで広がる表現

それでは、今回、試してみた表現は 9 つあります。
読みやすさ重視のモダンなUIを意識して、最小構成＋再利用しやすい型で実装しました。
1つずつ見ていきましょう。

#1 基本装飾（見出し／カード／リスト）

読みやすさが一気に上がる“土台"です。

🔶成功！
チーム掲示板／作業手順のショートノート など、あらゆる項目で使えます。 基本装飾

🔷実装コード

# HTML
<div class="mhx1-wrap">
  <div class="mhx1-card">
    <div class="mhx1-head">
      <h3 class="mhx1-title">チーム掲示板</h3>
      <span class="mhx1-badge" id="mhx1-badge">今月</span>
    </div>
    <p class="mhx1-lead">今週のポイント</p>
    <ul class="mhx1-list">
      <li><strong>棚卸し</strong>：ドラフト伝票を先に整理</li>
      <li><strong>承認フロー</strong>：差戻し時はコメント必須</li>
      <li><strong>KPI</strong>：確度更新は金曜まで</li>
    </ul>
  </div>
</div>
# CSS
.mhx1-wrap{font-family:system-ui,"Noto Sans JP",sans-serif;color:#111}
.mhx1-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mhx1-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.mhx1-title{margin:0;font-size:1.1rem;font-weight:800}
.mhx1-badge{font-size:.75rem;padding:.2rem .5rem;border-radius:999px;background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}
.mhx1-lead{margin:.25rem 0 .4rem;font-weight:700}
.mhx1-list{margin:.2rem 0 0 1rem;padding:0}
.mhx1-list li{margin:.25rem 0}
@media (prefers-color-scheme:dark){
  .mhx1-wrap{color:#e5e7eb}
  .mhx1-card{background:#0b1220;border-color:#1f2937}
}
# JavaScript
(() => {
  const el=document.getElementById('mhx1-badge');
  if(el){const d=new Date();el.textContent=`${d.getFullYear()}年${d.getMonth()+1}月`;}
})();

#2 アイコンと画像（タイル＋画像グリッド）

直感的で押しやすい。入口導線に最適な装飾です。

🔶成功！
よく使う画面（/app/…）へのショートカット やお知らせ用の横長バナー　など、幅広く使えます。 アイコンや画像

🔷実装コード

<div class="mhx2-wrap">
  <div class="mhx2-tiles">
    <a class="mhx2-tile" href="/app/sales-invoice"><span class="mhx2-ico">🧾</span><span>販売請求書</span></a>
    <a class="mhx2-tile" href="/app/item"><span class="mhx2-ico">📦</span><span>品目一覧</span></a>
    <a class="mhx2-tile" href="/app/project"><span class="mhx2-ico">📁</span><span>プロジェクト</span></a>
  </div>
  <div class="mhx2-imgs">
    <img src="/files/sample-banner.png" alt="お知らせ" loading="lazy">
    <img src="/files/sample-thumb.png" alt="新機能" loading="lazy">
  </div>
</div>
.mhx2-wrap{font-family:system-ui,"Noto Sans JP",sans-serif}
.mhx2-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:.5rem 0 1rem}
.mhx2-tile{display:flex;align-items:center;gap:.5rem;padding:.65rem .8rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:#111;text-decoration:none;transition:transform .08s,box-shadow .12s}
.mhx2-tile:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.06)}
.mhx2-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#f5f7ff}
.mhx2-imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.mhx2-imgs img{width:100%;height:auto;border-radius:10px;border:1px solid #e5e7eb}
@media (prefers-color-scheme:dark){
  .mhx2-tile,.mhx2-imgs img{border-color:#1f2937}
  .mhx2-tile{background:#0b1220;color:#e5e7eb}
}
(() => {
  document.querySelectorAll('.mhx2-imgs img').forEach(img=>{
    img.addEventListener('error',()=>{img.style.display='none';});
  });
})();

#3 ボタンとリンク（内部 / 外部）

迷わないナビの基本セット。色のバリエーションで優先度を表現可です。

🔶成功！
よく使う製造・購買・在庫など主要モジュール導線 などに使えます。 ボタンやリンク

実装の要点

  • 内部は /app/...、外部は 別タブ＋↗︎印
  • 角丸＋軽いシャドウで“押せる”見た目

🔷実装コード

<div class="mhx3-wrap">
  <div class="mhx3-row">
    <a class="mhx3-btn" href="/app/製造" data-internal="true">製造へ</a>
    <a class="mhx3-btn ghost" href="/app/buying" data-internal="true">購買</a>
    <a class="mhx3-btn ghost" href="/app/stock" data-internal="true">在庫</a>
    <a class="mhx3-btn outline" href="https://docs.erpnext.com/" target="_blank" rel="noopener">公式ドキュメント ↗︎</a>
  </div>
  <p class="mhx3-note">外部リンクは新しいタブで開きます。</p>
</div>
.mhx3-wrap{font-family:system-ui,"Noto Sans JP",sans-serif}
.mhx3-row{display:flex;flex-wrap:wrap;gap:.5rem}
.mhx3-btn{display:inline-flex;align-items:center;justify-content:center;padding:.55rem .9rem;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid #1f6feb;background:#1f6feb;color:#fff;box-shadow:0 2px 6px rgba(31,111,235,.25)}
.mhx3-btn.ghost{background:#f3f4f6;border-color:#e5e7eb;color:#111}
.mhx3-btn.outline{background:#fff;color:#1f2937;border:1px solid #cbd5e1}
.mhx3-note{color:#6b7280;font-size:.85rem;margin:.35rem 0 0}
@media (prefers-color-scheme:dark){
  .mhx3-btn.ghost{background:#0b1220;border-color:#1f2937;color:#e5e7eb}
  .mhx3-btn.outline{background:#0b1220;border-color:#1f2937;color:#e5e7eb}
}
<script>
(() => {
  document.querySelectorAll('.mhx3-btn[data-internal="true"]').forEach(a=>{
    a.addEventListener('click',(e)=>{
      if(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button!==0) return;
      const href=a.getAttribute('href');
      if(window?.frappe?.router?.push && href){ e.preventDefault(); window.frappe.router.push(href); }
    });
  });
})();
</script>

#4 CSSだけで作る棒グラフ（ERPNextワークスペースの可視化）

軽くて速い。ラフな比較や“雰囲気把握”に効くグラフです。

🔶成功！
予算 vs 実績の簡易比較 や 週次/日次のトレンド確認 など、幅広く使えます。 グラフや可視化

🔷実装コード

<div class="mhx4-chart">
  <div class="mhx4-bars">
    <div class="mhx4-axis"></div>
 
    <div class="mhx4-group" aria-label="Week1">
      <div class="mhx4-bar budget" style="--h:70%"><span class="mhx4-val">70</span></div>
      <div class="mhx4-bar" style="--h:80%"><span class="mhx4-val">80</span></div>
    </div>
    <div class="mhx4-group" aria-label="Week2">
      <div class="mhx4-bar budget" style="--h:78%"><span class="mhx4-val">78</span></div>
      <div class="mhx4-bar" style="--h:85%"><span class="mhx4-val">85</span></div>
    </div>
    <div class="mhx4-group" aria-label="Week3">
      <div class="mhx4-bar budget" style="--h:75%"><span class="mhx4-val">75</span></div>
      <div class="mhx4-bar" style="--h:52%"><span class="mhx4-val">52</span></div>
    </div>
    <div class="mhx4-group" aria-label="Week4">
      <div class="mhx4-bar budget" style="--h:88%"><span class="mhx4-val">88</span></div>
      <div class="mhx4-bar" style="--h:94%"><span class="mhx4-val">94</span></div>
    </div>
  </div>
 
  <div class="mhx4-x"><span>W1</span><span>W2</span><span>W3</span><span>W4</span></div>
  <div class="mhx4-leg"><span class="mhx4-pill">予算</span><span class="mhx4-pill">実績</span></div>
</div>
.mhx4-chart{--bg:#0b1421;font-family:system-ui,"Noto Sans JP",sans-serif;background:var(--mhx4-bg,var(--bg));border-radius:16px;padding:16px;border:1px solid #e5e7eb}
.mhx4-bars{display:flex;align-items:flex-end;gap:18px;height:180px;padding:8px 8px 22px;position:relative}
.mhx4-axis{position:absolute;left:8px;right:8px;bottom:22px;height:1px;background:rgba(229,231,235,.5)}
.mhx4-axis::before,.mhx4-axis::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(229,231,235,.15)}
.mhx4-axis::before{top:-80px}.mhx4-axis::after{top:-160px}
.mhx4-group{display:flex;gap:6px;align-items:flex-end;height:100%}
.mhx4-bar{width:18px;height:var(--h);border-radius:6px 6px 0 0;background:#60a5fa !important;position:relative}
.mhx4-bar.budget{background:#93c5fd !important}
.mhx4-val{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-4px);font-size:.7rem;color:#e5e7eb}
.mhx4-x{display:flex;gap:18px;margin-top:6px;color:#94a3b8;font-size:.8rem}
.mhx4-leg{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mhx4-pill{font-size:.75rem;padding:.15rem .5rem;border:1px solid #e5e7eb;border-radius:999px;background:#f8fafc}
@media (prefers-color-scheme:dark){
  .mhx4-chart{border-color:#1f2937}
  .mhx4-axis{background:rgba(51,65,85,.7)}
  .mhx4-axis::before,.mhx4-axis::after{background:rgba(51,65,85,.45)}
}
<script>
(()=>{})();
</script>

#5 アコーディオンとタブ（JSレス）

“情報を畳む”ので画面が散らからず、ワークスペースに相性良い装飾です。

🔶成功！
よくある質問／注意書き や 「概要」「詳細」を切り替える小パネル など、幅広く使えます。 動きのある要素

🔷実装コード

<div class="mhx5-wrap">
  <details class="mhx5-acc" open>
    <summary>開閉式（アコーディオン）</summary>
    <div class="mhx5-body">
      <ul class="mhx5-list">
        <li>使い方ガイドをここに</li>
        <li>頻出URLのショートカットもOK</li>
      </ul>
    </div>
  </details>
 
  <div class="mhx5-tabs">
    <input type="radio" name="mhx5" id="mhx5-t1" checked>
    <input type="radio" name="mhx5" id="mhx5-t2">
    <div class="mhx5-tablabels" role="tablist">
      <label for="mhx5-t1" role="tab">概要</label>
      <label for="mhx5-t2" role="tab">詳細</label>
    </div>
    <div class="mhx5-panels">
      <div id="mhx5-p1" role="tabpanel">概要：ここにハイライト。</div>
      <div id="mhx5-p2" role="tabpanel">詳細：仕様の箇条書きなど。</div>
    </div>
  </div>
</div>
.mhx5-wrap{font-family:system-ui,"Noto Sans JP",sans-serif}
.mhx5-acc{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.mhx5-acc summary{cursor:pointer;padding:.6rem .8rem;font-weight:700;background:#0b1220;color:#e5e7eb}
.mhx5-body{padding:.6rem .8rem;border-top:1px solid #e5e7eb;background:#0b1220;color:#e5e7eb}
.mhx5-list{margin:.25rem 0 0 1rem;padding:0}
.mhx5-tabs{margin-top:10px;border:1px solid #e5e7eb;border-radius:12px;padding:10px;background:#fff}
.mhx5-tabs [type="radio"]{display:none}
.mhx5-tablabels{display:flex;gap:.25rem;margin-bottom:.5rem}
.mhx5-tablabels label{padding:.4rem .7rem;border:1px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer}
#mhx5-t1:checked ~ .mhx5-panels #mhx5-p1,
#mhx5-t2:checked ~ .mhx5-panels #mhx5-p2{display:block}
.mhx5-panels>div{display:none}
#mhx5-t1:checked ~ .mhx5-tablabels label[for="mhx5-t1"],
#mhx5-t2:checked ~ .mhx5-tablabels label[for="mhx5-t2"]{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
@media (prefers-color-scheme:dark){
  .mhx5-tabs{background:#0b1220;border-color:#1f2937}
  .mhx5-tablabels label{background:#0b1220;border-color:#1f2937;color:#e5e7eb}
}
<script>
(()=>{})();
</script>

#6 FAQ・マニュアルリンク（カード化）

迷子を減らす導線。新メンバーのオンボーディングにも効く装飾です。

🔶成功！
よく使う社内KB、操作マニュアル、標準機能ガイド など、幅広く使えそうです。 FAQ／マニュアルリンク

🔷実装コード

<div class="mhx6-wrap">
  <div class="mhx6-links">
    <a class="mhx6-card" href="/app/knowledge-base">
      <strong>社内ナレッジベース</strong>
      <span class="mhx6-sub">基本操作・トラブルシュート</span>
    </a>
    <a class="mhx6-card" href="https://docs.erpnext.com/" target="_blank" rel="noopener">
      <strong>公式ドキュメント ↗︎</strong>
      <span class="mhx6-sub">導入〜開発者向けまで</span>
    </a>
    <a class="mhx6-card" href="/app/web-page/user-manual">
      <strong>社内マニュアル</strong>
      <span class="mhx6-sub">社内向けの手順集</span>
    </a>
  </div>
</div>
.mhx6-wrap{font-family:system-ui,"Noto Sans JP",sans-serif}
.mhx6-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.mhx6-card{display:flex;flex-direction:column;gap:6px;padding:.8rem .9rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:inherit;text-decoration:none}
.mhx6-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.06)}
.mhx6-sub{font-size:.85rem;color:#6b7280}
@media (prefers-color-scheme:dark){
  .mhx6-card{background:#0b1220;border-color:#1f2937;color:#e5e7eb}
  .mhx6-sub{color:#9ca3af}
}
<script>
(()=>{})();
</script>

#7 アラート／注意喚起（見落とし防止）

「月末棚卸」など絶対に忘れたくないことに使う装飾です。

🔶成功！
月次ルーティン、メンテ通知、運用ルール変更 など、幅広く使えそうです。 アラート／注意喚起

🔷実装コード

<div class="mhx7-wrap">
  <div class="mhx7-alert">
    <span class="mhx7-ico" aria-hidden="true">⚠️</span>
    <div>
      <div class="mhx7-title">月末は在庫棚卸し必須！</div>
      <div class="mhx7-note">ドラフト伝票の整理と差異メモを忘れずに。</div>
    </div>
  </div>
</div>
.mhx7-wrap{font-family:system-ui,"Noto Sans JP",sans-serif}
.mhx7-alert{display:flex;gap:.6rem;padding:.7rem .9rem;border-radius:12px;border:1px solid #fde68a;background:#fffbeb}
.mhx7-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#fef3c7;color:#b45309}
.mhx7-title{font-weight:800}
.mhx7-note{color:#6b7280}
@media (prefers-color-scheme:dark){
  .mhx7-alert{background:#3a2a06;border-color:#6b4f0c}
  .mhx7-ico{background:#6b4f0c;color:#fde68a}
  .mhx7-note{color:#e5e7eb}
}
<script>
(()=>{})();
</script>

#8 デモ動画の埋め込み（YouTube）

YouTube動画を埋め込んでみます。

🔶成功！
リリースノートの“動くハイライト” や 社内向けクイックデモ など、幅広く使えそうです。 デモ動画

🔷実装コード

<div class="mhx8-wrap">
  <div class="mhx8-iframe">
    <!-- 通常横動画: 56.25%、Shortsなら 178% 程度に -->
    <div class="mhx8-ratio" style="padding-top:56.25%">
      <iframe
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="Demo Video"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerpolicy="strict-origin-when-cross-origin"
        allowfullscreen></iframe>
    </div>
  </div>
</div>
.mhx8-wrap{font-family:system-ui,"Noto Sans JP",sans-serif}
.mhx8-iframe{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#000}
.mhx8-ratio{position:relative;width:100%}
.mhx8-ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (prefers-color-scheme:dark){
  .mhx8-iframe{border-color:#1f2937}
}
<script>
(()=>{})();
</script>

#9 問い合わせフォームの埋め込み（Google フォーム）

Google フォームを埋め込んでみます。

🔶成功！
サイト内で無事にアンケートの提出もできました。
簡易アンケートや問い合わせ窓口として便利ですね。 問い合わせフォーム

🔷実装コード

  <section class="mhx-sec" id="mhx-9">
    <div class="mhx-title"><h3 class="mhx-h1"><span class="mhx-num">#9</span> 問い合わせフォームの埋め込み</h3><span class="mhx-badge">Form</span></div>
    <div class="mhx-card" style="margin-bottom:8px;">
      <div class="mhx-note">※ 組織のCSP設定により埋め込みがブロックされる場合があります。</div>
    </div>
    <div class="mhx-iframe-wrap">
      <iframe src="https://forms.gle/Jar46DNmdENshEmV9">読み込んでいます…</iframe>
    </div>
  </section>
.mhx9-wrap{font-family:system-ui,"Noto Sans JP",sans-serif}
.mhx9-iframe{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}
.mhx9-ratio{position:relative;width:100%;padding-top:62%}
.mhx9-ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mhx9-note{color:#6b7280;font-size:.9rem;margin:.5rem 0 0}
@media (prefers-color-scheme:dark){
  .mhx9-iframe{border-color:#1f2937;background:#0b1220}
  .mhx9-note{color:#9ca3af}
}
<script>
(()=> {
  const ifr=document.querySelector('.mhx9-ratio iframe');
  if(!ifr) return;
  let loaded=false;
  const timer=setTimeout(()=>{
    if(!loaded){
      const note=document.createElement('div');
      note.style.marginTop='8px';
      note.style.color='#ef4444';
      note.textContent='フォームを読み込めませんでした。CSP設定をご確認ください。';
      document.querySelector('.mhx9-wrap').appendChild(note);
    }
  },3000);
  ifr.addEventListener('load',()=>{loaded=true;clearTimeout(timer);});
})();
</script>

結論

今回、9つのよく使うWebアプリの表現を実装してみました。 結果、全て無事にERPNextのワークスペースに実装させることができました。

最小構成のカスタムHTMLだけで、ここまで表現可能です。
「読みやすい型」＋「導線の整理」 を意識すれば、ワークスペースは強力な“社内ポータル”になります。

ワークスペースへの追加手順

ワークスペースのカスタマイズ手順

ワークスペースにカスタムHTMLブロックを追加するまでを
5ステップで説明します。
画像の位置や文言はバージョンによって多少異なりますが、流れは同じです。

Step 1 編集モードに入る

  • 対象のワークスペースを開き、画面右下にある 「編集する」 を押します。
  • 編集モードになると、ブロックの追加や並び替えが可能になります。

ワークスペース右下の「編集する」をクリック

Step 2 ブロックを追加する（＋）

  • 左側のサイドバー付近に表示される 「＋」 をクリックして、ブロック追加メニューを開きます。

画面左側に出てくる「＋」ボタンをクリック

Step 3 カスタムブロックを選択

  • メニュー一覧から 「Custom Block（カスタムブロック）」 を選びます。
  • 既存のカスタムブロック一覧が表示されます。

「カスタムブロック」を選択

Step 4 新しいカスタムHTMLブロックを作成

  • 検索欄の下にある 「新しいカスタム HTML ブロックを作成する」 をクリックします。
  • ブロックの編集画面（作成画面）に遷移します。

「新しいカスタムHTMLブロック」を選択

Step 5 HTML／CSS／Javascriptを記載して保存

  • 画面には HTML と Javascript の入力欄があります。
  • CSSは <style>…</style> をHTML欄に書くのが簡単です（外部CSSに勝たせたい所は !important を併用）。

作成画面で HTML／CSS／JS を記載する

まとめ

今回、ワークスペース上で 9つの表現（装飾／タイル／ボタン／CSSグラフ／アコーディオン＆タブ／FAQリンク／アラート／動画／フォーム）を すべて実装して動作確認 しました。
結果は――

結論：すべて成功！
ERPNextのワークスペースは、カスタムHTML（＋CSS）だけでも実務レベルのUIを十分に作れます。

ポイント（今回わかったこと）

  • 標準ブロックに加えて、カスタムHTMLで「読みやすい型」「導線整理」「軽い動き」を実現できる。
  • スクリプト無しでも、CSSだけでグラフ・タブ・アコーディオン等を表現可能
  • ダークモード配慮と名前空間（mhx-）により、テーマや既存CSSと干渉しにくい
  • 動的な数値や高度な集計が必要な場面は、標準チャート／レポートやClient Scriptとの併用が最適

ERPNextの表現の豊かさについて

ワークスペースは「社内ポータル」としての拡張性が高く、

  • 標準ブロック（ショートカット／レポート／チャート／KPI）で“データ”を、
  • カスタムHTMLで“見せ方・体験”を、
    バランスよく組み合わせることで、多くのWebアプリで見かけるUIの大半を再現できます。

次の一歩

  • まずは今回の型をテンプレ化 → 各部門ワークスペースへ展開
  • 数値連動が必要な箇所は標準レポートやクエリレポートと接続
  • 運用ルール（アラート）やオンボーディング（FAQ/動画）を継続更新

実際に触ってみたい方へ：実装したワークスペースの検証画面はこちら。
※ アカウントは 1分で発行完了、無料で試せます。

まだ疑問が残りますか？

この記事で解決しない疑問は、無料相談でお気軽にご質問ください。ERPNext導入の専門家が直接お答えします。

🟧 無料相談を予約する