YetiForceCRM \u5c0e\u5165\u52b9\u679c\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', 'Noto Sans JP', sans-serif;\n background-color: #F8F9FA;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .kpi-title {\n color: #00A6A6;\n }\n .kpi-value {\n color: #F28B30;\n }\n .flowchart-arrow {\n font-size: 2rem;\n line-height: 1;\n color: #77D977;\n }\n .flowchart-box {\n border-color: #00A6A6;\n background-color: white;\n color: #333;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 text-gray-800\">\n\n <div class=\"container mx-auto p-4 md:p-8\">\n\n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-6xl font-black kpi-title mb-2\">YetiForceCRM\u306b\u3088\u308b\u5168\u793eDX<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600\">\u90e8\u9580\u306e\u58c1\u3092\u8d8a\u3048\u3001\u4f01\u696d\u4fa1\u5024\u3092\u6700\u5927\u5316\u3059\u308b<\/p>\n <\/header>\n\n <main class=\"space-y-16\">\n\n <section id=\"challenge\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">1. \u300c\u90e8\u9580\u306e\u58c1\u300d\u304c\u3082\u305f\u3089\u3059\u7d4c\u55b6\u8ab2\u984c<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div class=\"text-center md:text-left\">\n <p class=\"mb-6 text-lg leading-relaxed\">\u591a\u304f\u306e\u4f01\u696d\u3067\u306f\u3001\u90e8\u9580\u3054\u3068\u306b\u60c5\u5831\u304c\u5206\u65ad\u3055\u308c\u308b\u300c\u30b5\u30a4\u30ed\u5316\u300d\u304c\u898b\u3048\u306a\u3044\u7d4c\u55b6\u30b3\u30b9\u30c8\u3092\u751f\u3093\u3067\u3044\u307e\u3059\u3002\u9867\u5ba2\u3092\u65ad\u7247\u7684\u306b\u3057\u304b\u7406\u89e3\u3067\u304d\u305a\u3001\u696d\u52d9\u9023\u643a\u306f\u975e\u52b9\u7387\u306b\u306a\u308a\u3001\u8cb4\u91cd\u306a\u77e5\u8b58\u306f\u5c5e\u4eba\u5316\u3002\u7d50\u679c\u3068\u3057\u3066\u3001\u7d4c\u55b6\u5224\u65ad\u306e\u9045\u308c\u3068\u3044\u3046\u6df1\u523b\u306a\u4e8b\u614b\u3092\u62db\u304d\u307e\u3059\u3002<\/p>\n <div class=\"p-6 bg-orange-100 border-l-4 border-orange-500 rounded-lg\">\n <h3 class=\"font-bold text-xl text-orange-800\">\u6a5f\u4f1a\u640d\u5931\u3068\u30b3\u30b9\u30c8\u5897\u5927<\/h3>\n <p class=\"text-orange-700 mt-2\">\u30b5\u30a4\u30ed\u5316\u306f\u3001\u4f01\u696d\u306e\u6210\u9577\u3092\u963b\u5bb3\u3059\u308b\u6839\u672c\u7684\u306a\u8981\u56e0\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"flex flex-col items-center justify-center space-y-4\">\n <div class=\"grid grid-cols-2 gap-4 w-full max-w-md\">\n <div class=\"flowchart-box p-4 border-2 rounded-lg text-center font-bold\">\u55b6\u696d<\/div>\n <div class=\"flowchart-box p-4 border-2 rounded-lg text-center font-bold\">\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0<\/div>\n <div class=\"flowchart-box p-4 border-2 rounded-lg text-center font-bold\">\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9<\/div>\n <div class=\"flowchart-box p-4 border-2 rounded-lg text-center font-bold\">\u751f\u7523\u30fb\u958b\u767a<\/div>\n <\/div>\n <p class=\"text-red-500 font-bold text-center mt-4 text-lg\">\u2717 \u60c5\u5831\u65ad\u7d76 \u2717<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">2. YetiForceCRM\u304c\u5b9f\u73fe\u3059\u308b\u300c\u30ef\u30f3\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u7d4c\u55b6\u300d<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u60c5\u5831\u306e\u4e00\u5143\u5316\uff1a\u9867\u5ba2\u3092360\u00b0\u3067\u7406\u89e3\u3059\u308b<\/h3>\n <p class=\"mb-6 leading-relaxed\">\u55b6\u696d\u3001\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u3001\u30b5\u30dd\u30fc\u30c8\u3001\u958b\u767a\u306a\u3069\u3001\u9867\u5ba2\u306b\u95a2\u3059\u308b\u3042\u3089\u3086\u308b\u60c5\u5831\u3092\u4e00\u5143\u7ba1\u7406\u3002\u5168\u793e\u54e1\u304c\u540c\u3058\u9867\u5ba2\u50cf\u3092\u5171\u6709\u3057\u3001\u4e00\u8cab\u6027\u306e\u3042\u308b\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container h-64 md:h-80\">\n <canvas id=\"dataSourcesChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-sm text-gray-500 mt-2\">\u5168\u793e\u306e\u9867\u5ba2\u95a2\u9023\u30c7\u30fc\u30bf\u3092\u7d71\u5408<\/p>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u306e\u9023\u643a\uff1a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u5186\u6ed1\u306b<\/h3>\n <p class=\"mb-6 leading-relaxed\">\u898b\u7a4d\u304b\u3089\u53d7\u6ce8\u3001\u751f\u7523\u3001\u30a2\u30d5\u30bf\u30fc\u30d5\u30a9\u30ed\u30fc\u307e\u3067\u3001\u4e00\u9023\u306e\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u3092\u30b7\u30b9\u30c6\u30e0\u4e0a\u3067\u9023\u643a\u30fb\u81ea\u52d5\u5316\u3002\u696d\u52d9\u52b9\u7387\u3068\u30b9\u30d4\u30fc\u30c9\u304c\u98db\u8e8d\u7684\u306b\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n <div class=\"space-y-2\">\n <div class=\"flowchart-box p-3 border-2 rounded-lg text-center font-semibold\">\u898b\u7a4d\u30fb\u53d7\u6ce8<\/div>\n <div class=\"text-center flowchart-arrow\">\u2193<\/div>\n <div class=\"flowchart-box p-3 border-2 rounded-lg text-center font-semibold\">\u751f\u7523\u30fb\u958b\u767a\u6307\u793a<\/div>\n <div class=\"text-center flowchart-arrow\">\u2193<\/div>\n <div class=\"flowchart-box p-3 border-2 rounded-lg text-center font-semibold\">\u8acb\u6c42\u30fb\u5165\u91d1\u7ba1\u7406<\/div>\n <div class=\"text-center flowchart-arrow\">\u2193<\/div>\n <div class=\"flowchart-box p-3 border-2 rounded-lg text-center font-semibold\">\u30a2\u30d5\u30bf\u30fc\u30d5\u30a9\u30ed\u30fc<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"impact\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">3. \u7d4c\u55b6\u306e\u53ef\u8996\u5316\uff1a\u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u305f\u8fc5\u901f\u306a\u610f\u601d\u6c7a\u5b9a<\/h2>\n <p class=\"text-center max-w-3xl mx-auto mb-10 leading-relaxed\">\u58f2\u4e0a\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3001\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u52b9\u679c\u3001\u9867\u5ba2\u6e80\u8db3\u5ea6\u306a\u3069\u3092\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u53ef\u8996\u5316\u3002\u7d4c\u55b6\u5c64\u306f\u4f01\u696d\u306e\u73fe\u72b6\u3092\u300c\u30b3\u30c3\u30af\u30d4\u30c3\u30c8\u300d\u306e\u3088\u3046\u306b\u4e00\u76ee\u3067\u628a\u63e1\u3057\u3001\u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u305f\u6b63\u78ba\u3067\u8fc5\u901f\u306a\u6226\u7565\u7684\u610f\u601d\u6c7a\u5b9a\u3092\u884c\u3048\u307e\u3059\u3002<\/p>\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n <div class=\"bg-gray-50 p-4 rounded-lg\">\n <h3 class=\"font-bold text-center mb-2\">\u58f2\u4e0a\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u6210\u9577<\/h3>\n <div class=\"chart-container h-64\">\n <canvas id=\"salesPipelineChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded-lg\">\n <h3 class=\"font-bold text-center mb-2\">\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0ROI\u6bd4\u8f03<\/h3>\n <div class=\"chart-container h-64\">\n <canvas id=\"marketingRoiChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded-lg\">\n <h3 class=\"font-bold text-center mb-2\">\u4e3b\u8981\u7d4c\u55b6\u6307\u6a19 (KPI)<\/h3>\n <div class=\"chart-container h-64\">\n <canvas id=\"kpiRadarChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"transformation\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">4. \u5c0e\u5165\u304c\u3082\u305f\u3089\u3059\u4f01\u696d\u5909\u9769<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u751f\u7523\u6027\u306e\u6700\u5927\u5316<\/h3>\n <p class=\"mb-6 leading-relaxed\">\u5b9a\u578b\u696d\u52d9\u3092\u81ea\u52d5\u5316\u3057\u3001\u793e\u54e1\u306f\u3088\u308a\u4ed8\u52a0\u4fa1\u5024\u306e\u9ad8\u3044\u30b3\u30a2\u696d\u52d9\u306b\u96c6\u4e2d\u3067\u304d\u307e\u3059\u3002\u7d50\u679c\u3068\u3057\u3066\u3001\u30ea\u30fc\u30c9\u30bf\u30a4\u30e0\u77ed\u7e2e\u3001\u30b3\u30b9\u30c8\u524a\u6e1b\u3001\u58f2\u4e0a\u62e1\u5927\u306b\u76f4\u7d50\u3057\u307e\u3059\u3002<\/p>\n <div class=\"flex justify-around text-center\">\n <div>\n <p class=\"text-5xl font-black kpi-value\">+40%<\/p>\n <p class=\"font-bold mt-2\">\u751f\u7523\u6027\u5411\u4e0a<\/p>\n <\/div>\n <div>\n <p class=\"text-5xl font-black kpi-value\">-30%<\/p>\n <p class=\"font-bold mt-2\">\u30ea\u30fc\u30c9\u30bf\u30a4\u30e0\u77ed\u7e2e<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u5f93\u696d\u54e1\u306e\u696d\u52d9\u6642\u9593\u914d\u5206\u306e\u5909\u5316<\/h3>\n <div class=\"chart-container h-80\">\n <canvas id=\"timeAllocationChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-sm text-gray-500 mt-2\">\u30b3\u30a2\u696d\u52d9\u3078\u306e\u96c6\u4e2d\u304c\u53ef\u80fd\u306b<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"advantage\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">5. YetiForceCRM\u306a\u3089\u3067\u306f\u306e\u5f37\u307f\uff1a\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u3068\u3044\u3046\u9078\u629e<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u7dcf\u6240\u6709\u30b3\u30b9\u30c8(TCO)\u306e\u6700\u9069\u5316<\/h3>\n <p class=\"leading-relaxed\">\u9ad8\u984d\u306a\u30e9\u30a4\u30bb\u30f3\u30b9\u8cbb\u7528\u304c\u4e0d\u8981\u3002\u7dcf\u6240\u6709\u30b3\u30b9\u30c8\u3092\u6291\u3048\u3064\u3064\u3001\u72ec\u81ea\u306e\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u306b\u5408\u308f\u305b\u3066\u67d4\u8edf\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3001\u4e8b\u696d\u306e\u6210\u9577\u306b\u5408\u308f\u305b\u3066\u62e1\u5f35\u3067\u304d\u307e\u3059\u3002IT\u6295\u8cc7\u5bfe\u52b9\u679c\u3092\u6700\u5927\u5316\u3057\u3001\u7d4c\u55b6\u6226\u7565\u3092\u529b\u5f37\u304f\u4e0b\u652f\u3048\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div>\n <div class=\"chart-container h-72\">\n <canvas id=\"tcoChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-sm text-gray-500 mt-2\">5\u5e74\u9593\u306e\u7dcf\u6240\u6709\u30b3\u30b9\u30c8\u6bd4\u8f03<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"text-center mt-16 pt-8 border-t border-gray-300\">\n <p class=\"text-xl kpi-title font-semibold mb-3\">\u30c7\u30fc\u30bf\u304c\u7d44\u7e54\u3092\u4e00\u3064\u306b\u3057\u3001\u30d3\u30b8\u30cd\u30b9\u3092\u52a0\u901f\u3055\u305b\u308b\u3002<\/p>\n <\/footer>\n\n <\/div>\n\n <script>\n const FONT_COLOR = '#374151';\n const GRID_COLOR = '#E5E7EB';\n const PALETTE = {\n primary: '#00A6A6',\n secondary: '#77D977',\n accent1: '#F2E7AE',\n accent2: '#F2B950',\n accent3: '#F28B30',\n };\n\n function wrapLabel(label, maxLength = 16) {\n if (label.length <= maxLength) {\n return label;\n }\n const words = label.split(' ');\n const lines = [];\n let currentLine = '';\n for (const word of words) {\n if ((currentLine + word).length > maxLength) {\n lines.push(currentLine.trim());\n currentLine = '';\n }\n currentLine += word + ' ';\n }\n lines.push(currentLine.trim());\n return lines;\n }\n\n const tooltipTitleCallback = (tooltipItems) => {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n }\n return label;\n };\n \n const commonChartOptions = {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n labels: {\n color: FONT_COLOR,\n font: { size: 14 }\n }\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n },\n scales: {\n x: {\n ticks: { color: FONT_COLOR, font: { size: 12 } },\n grid: { color: GRID_COLOR }\n },\n y: {\n ticks: { color: FONT_COLOR, font: { size: 12 } },\n grid: { color: GRID_COLOR }\n }\n }\n };\n\n new Chart(document.getElementById('dataSourcesChart'), {\n type: 'doughnut',\n data: {\n labels: ['\u55b6\u696d', '\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0', '\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9', '\u751f\u7523\u30fb\u958b\u767a', '\u7ba1\u7406\u90e8\u9580'],\n datasets: [{\n label: '\u7d71\u5408\u30c7\u30fc\u30bf\u30bd\u30fc\u30b9',\n data: [35, 25, 20, 15, 5],\n backgroundColor: Object.values(PALETTE),\n borderColor: '#FFFFFF',\n borderWidth: 2,\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: { color: FONT_COLOR, font: { size: 14 } }\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n }\n }\n });\n\n new Chart(document.getElementById('salesPipelineChart'), {\n type: 'line',\n data: {\n labels: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708'],\n datasets: [{\n label: '\u58f2\u4e0a (\u767e\u4e07\u5186)',\n data: [120, 150, 140, 180, 210, 250],\n borderColor: PALETTE.primary,\n backgroundColor: PALETTE.primary + '33',\n fill: true,\n tension: 0.4\n }]\n },\n options: commonChartOptions\n });\n\n new Chart(document.getElementById('marketingRoiChart'), {\n type: 'bar',\n data: {\n labels: ['Web\u5e83\u544a', 'SNS\u30ad\u30e3\u30f3\u30da\u30fc\u30f3', '\u5c55\u793a\u4f1a', '\u30bb\u30df\u30ca\u30fc'],\n datasets: [{\n label: 'ROI (%)',\n data: [350, 420, 280, 510],\n backgroundColor: [PALETTE.secondary, PALETTE.accent2, PALETTE.accent3, PALETTE.primary],\n borderRadius: 4\n }]\n },\n options: {\n indexAxis: 'y',\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n },\n scales: {\n x: {\n beginAtZero: true,\n ticks: { color: FONT_COLOR, font: { size: 12 } },\n grid: { color: GRID_COLOR },\n title: {\n display: true,\n text: 'ROI (%)',\n color: FONT_COLOR\n }\n },\n y: {\n ticks: { color: FONT_COLOR, font: { size: 12 } },\n grid: {\n display: false\n }\n }\n }\n }\n });\n\n new Chart(document.getElementById('kpiRadarChart'), {\n type: 'radar',\n data: {\n labels: ['\u9867\u5ba2\u6e80\u8db3\u5ea6', '\u751f\u7523\u6027', '\u30b3\u30b9\u30c8\u524a\u6e1b', '\u5e02\u5834\u9069\u5fdc\u529b', '\u5f93\u696d\u54e1\u6e80\u8db3\u5ea6'],\n datasets: [{\n label: '\u5c0e\u5165\u5f8c',\n data: [9, 8, 7, 9, 8],\n backgroundColor: PALETTE.primary + '80',\n borderColor: PALETTE.primary,\n pointBackgroundColor: PALETTE.primary,\n }, {\n label: '\u5c0e\u5165\u524d',\n data: [6, 5, 5, 4, 6],\n backgroundColor: PALETTE.accent3 + '80',\n borderColor: PALETTE.accent3,\n pointBackgroundColor: PALETTE.accent3,\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: { color: FONT_COLOR }\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n },\n scales: {\n r: {\n angleLines: { color: GRID_COLOR },\n grid: { color: GRID_COLOR },\n pointLabels: { font: { size: 13 }, color: FONT_COLOR },\n ticks: { backdropColor: 'transparent', color: FONT_COLOR }\n }\n }\n }\n });\n\n new Chart(document.getElementById('timeAllocationChart'), {\n type: 'bar',\n data: {\n labels: ['\u5c0e\u5165\u524d', '\u5c0e\u5165\u5f8c'],\n datasets: [{\n label: '\u5b9a\u578b\u696d\u52d9',\n data: [65, 25],\n backgroundColor: PALETTE.accent3,\n }, {\n label: '\u30b3\u30a2\u696d\u52d9',\n data: [35, 75],\n backgroundColor: PALETTE.primary,\n }]\n },\n options: {\n ...commonChartOptions,\n indexAxis: 'y',\n scales: {\n x: { stacked: true, ticks: { color: FONT_COLOR }, grid: { color: GRID_COLOR } },\n y: { stacked: true, ticks: { color: FONT_COLOR }, grid: { color: GRID_COLOR } }\n }\n }\n });\n\n new Chart(document.getElementById('tcoChart'), {\n type: 'bar',\n data: {\n labels: [wrapLabel('YetiForceCRM (\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9)'), wrapLabel('\u4e00\u822c\u7684\u306a\u30d7\u30ed\u30d7\u30e9\u30a4\u30a8\u30bf\u30eaCRM')],\n datasets: [{\n label: '\u30e9\u30a4\u30bb\u30f3\u30b9\u8cbb\u7528',\n data: [5, 60],\n backgroundColor: PALETTE.accent2,\n }, {\n label: '\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u30fb\u4fdd\u5b88\u8cbb\u7528',\n data: [35, 20],\n backgroundColor: PALETTE.secondary,\n }]\n },\n options: {\n ...commonChartOptions,\n scales: {\n x: { stacked: true, ticks: { color: FONT_COLOR }, grid: { color: GRID_COLOR } },\n y: { stacked: true, ticks: { color: FONT_COLOR }, grid: { color: GRID_COLOR }, title: { display: true, text: '\u30b3\u30b9\u30c8\u6307\u6570' } }\n }\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>YetiForceCRM \u5c0e\u5165\u52b9\u679c\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af YetiForceCRM\u306b\u3088\u308b\u5168\u793eDX \u90e8\u9580\u306e\u58c1\u3092\u8d8a\u3048\u3001\u4f01\u696d\u4fa1\u5024\u3092\u6700\u5927\u5316\u3059\u308b 1. \u300c\u90e8\u9580\u306e\u58c1\u300d\u304c\u3082\u305f\u3089\u3059\u7d4c\u55b6\u8ab2\u984c \u591a\u304f\u306e\u4f01\u696d\u3067\u306f\u3001\u90e8\u9580\u3054\u3068\u306b\u60c5\u5831\u304c\u5206\u65ad\u3055\u308c\u308b\u300c\u30b5\u30a4 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-748","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=748"}],"version-history":[{"count":4,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/748\/revisions"}],"predecessor-version":[{"id":906,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/748\/revisions\/906"}],"wp:attachment":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":748,"date":"2025-08-04T17:23:22","date_gmt":"2025-08-04T08:23:22","guid":{"rendered":"https:\/\/yetiworks.jp\/?page_id=748"},"modified":"2025-08-06T15:51:41","modified_gmt":"2025-08-06T06:51:41","slug":"%e4%bc%9a%e7%a4%be%e5%85%a8%e4%bd%93%e3%83%bb%e9%83%a8%e7%bd%b2%e6%a8%aa%e6%96%ad","status":"publish","type":"page","link":"https:\/\/yetiworks.jp\/?page_id=748","title":{"rendered":"\u4f1a\u793e\u5168\u4f53\u30fb\u90e8\u7f72\u6a2a\u65ad\uff08\u56f3\u89e3\uff09"},"content":{"rendered":"\n\n\n\n \n \n YetiForceCRM \u5c0e\u5165\u52b9\u679c\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', 'Noto Sans JP', sans-serif;\n background-color: #F8F9FA;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .kpi-title {\n color: #00A6A6;\n }\n .kpi-value {\n color: #F28B30;\n }\n .flowchart-arrow {\n font-size: 2rem;\n line-height: 1;\n color: #77D977;\n }\n .flowchart-box {\n border-color: #00A6A6;\n background-color: white;\n color: #333;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 text-gray-800\">\n\n <div class=\"container mx-auto p-4 md:p-8\">\n\n <header class=\"text-center mb-12\">\n <h1 class=\"text-4xl md:text-6xl font-black kpi-title mb-2\">YetiForceCRM\u306b\u3088\u308b\u5168\u793eDX<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600\">\u90e8\u9580\u306e\u58c1\u3092\u8d8a\u3048\u3001\u4f01\u696d\u4fa1\u5024\u3092\u6700\u5927\u5316\u3059\u308b<\/p>\n <\/header>\n\n <main class=\"space-y-16\">\n\n <section id=\"challenge\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">1. \u300c\u90e8\u9580\u306e\u58c1\u300d\u304c\u3082\u305f\u3089\u3059\u7d4c\u55b6\u8ab2\u984c<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div class=\"text-center md:text-left\">\n <p class=\"mb-6 text-lg leading-relaxed\">\u591a\u304f\u306e\u4f01\u696d\u3067\u306f\u3001\u90e8\u9580\u3054\u3068\u306b\u60c5\u5831\u304c\u5206\u65ad\u3055\u308c\u308b\u300c\u30b5\u30a4\u30ed\u5316\u300d\u304c\u898b\u3048\u306a\u3044\u7d4c\u55b6\u30b3\u30b9\u30c8\u3092\u751f\u3093\u3067\u3044\u307e\u3059\u3002\u9867\u5ba2\u3092\u65ad\u7247\u7684\u306b\u3057\u304b\u7406\u89e3\u3067\u304d\u305a\u3001\u696d\u52d9\u9023\u643a\u306f\u975e\u52b9\u7387\u306b\u306a\u308a\u3001\u8cb4\u91cd\u306a\u77e5\u8b58\u306f\u5c5e\u4eba\u5316\u3002\u7d50\u679c\u3068\u3057\u3066\u3001\u7d4c\u55b6\u5224\u65ad\u306e\u9045\u308c\u3068\u3044\u3046\u6df1\u523b\u306a\u4e8b\u614b\u3092\u62db\u304d\u307e\u3059\u3002<\/p>\n <div class=\"p-6 bg-orange-100 border-l-4 border-orange-500 rounded-lg\">\n <h3 class=\"font-bold text-xl text-orange-800\">\u6a5f\u4f1a\u640d\u5931\u3068\u30b3\u30b9\u30c8\u5897\u5927<\/h3>\n <p class=\"text-orange-700 mt-2\">\u30b5\u30a4\u30ed\u5316\u306f\u3001\u4f01\u696d\u306e\u6210\u9577\u3092\u963b\u5bb3\u3059\u308b\u6839\u672c\u7684\u306a\u8981\u56e0\u3067\u3059\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"flex flex-col items-center justify-center space-y-4\">\n <div class=\"grid grid-cols-2 gap-4 w-full max-w-md\">\n <div class=\"flowchart-box p-4 border-2 rounded-lg text-center font-bold\">\u55b6\u696d<\/div>\n <div class=\"flowchart-box p-4 border-2 rounded-lg text-center font-bold\">\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0<\/div>\n <div class=\"flowchart-box p-4 border-2 rounded-lg text-center font-bold\">\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9<\/div>\n <div class=\"flowchart-box p-4 border-2 rounded-lg text-center font-bold\">\u751f\u7523\u30fb\u958b\u767a<\/div>\n <\/div>\n <p class=\"text-red-500 font-bold text-center mt-4 text-lg\">\u2717 \u60c5\u5831\u65ad\u7d76 \u2717<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">2. YetiForceCRM\u304c\u5b9f\u73fe\u3059\u308b\u300c\u30ef\u30f3\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u7d4c\u55b6\u300d<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u60c5\u5831\u306e\u4e00\u5143\u5316\uff1a\u9867\u5ba2\u3092360\u00b0\u3067\u7406\u89e3\u3059\u308b<\/h3>\n <p class=\"mb-6 leading-relaxed\">\u55b6\u696d\u3001\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u3001\u30b5\u30dd\u30fc\u30c8\u3001\u958b\u767a\u306a\u3069\u3001\u9867\u5ba2\u306b\u95a2\u3059\u308b\u3042\u3089\u3086\u308b\u60c5\u5831\u3092\u4e00\u5143\u7ba1\u7406\u3002\u5168\u793e\u54e1\u304c\u540c\u3058\u9867\u5ba2\u50cf\u3092\u5171\u6709\u3057\u3001\u4e00\u8cab\u6027\u306e\u3042\u308b\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n <div class=\"chart-container h-64 md:h-80\">\n <canvas id=\"dataSourcesChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-sm text-gray-500 mt-2\">\u5168\u793e\u306e\u9867\u5ba2\u95a2\u9023\u30c7\u30fc\u30bf\u3092\u7d71\u5408<\/p>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u306e\u9023\u643a\uff1a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u5186\u6ed1\u306b<\/h3>\n <p class=\"mb-6 leading-relaxed\">\u898b\u7a4d\u304b\u3089\u53d7\u6ce8\u3001\u751f\u7523\u3001\u30a2\u30d5\u30bf\u30fc\u30d5\u30a9\u30ed\u30fc\u307e\u3067\u3001\u4e00\u9023\u306e\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u3092\u30b7\u30b9\u30c6\u30e0\u4e0a\u3067\u9023\u643a\u30fb\u81ea\u52d5\u5316\u3002\u696d\u52d9\u52b9\u7387\u3068\u30b9\u30d4\u30fc\u30c9\u304c\u98db\u8e8d\u7684\u306b\u5411\u4e0a\u3057\u307e\u3059\u3002<\/p>\n <div class=\"space-y-2\">\n <div class=\"flowchart-box p-3 border-2 rounded-lg text-center font-semibold\">\u898b\u7a4d\u30fb\u53d7\u6ce8<\/div>\n <div class=\"text-center flowchart-arrow\">\u2193<\/div>\n <div class=\"flowchart-box p-3 border-2 rounded-lg text-center font-semibold\">\u751f\u7523\u30fb\u958b\u767a\u6307\u793a<\/div>\n <div class=\"text-center flowchart-arrow\">\u2193<\/div>\n <div class=\"flowchart-box p-3 border-2 rounded-lg text-center font-semibold\">\u8acb\u6c42\u30fb\u5165\u91d1\u7ba1\u7406<\/div>\n <div class=\"text-center flowchart-arrow\">\u2193<\/div>\n <div class=\"flowchart-box p-3 border-2 rounded-lg text-center font-semibold\">\u30a2\u30d5\u30bf\u30fc\u30d5\u30a9\u30ed\u30fc<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"impact\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">3. \u7d4c\u55b6\u306e\u53ef\u8996\u5316\uff1a\u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u305f\u8fc5\u901f\u306a\u610f\u601d\u6c7a\u5b9a<\/h2>\n <p class=\"text-center max-w-3xl mx-auto mb-10 leading-relaxed\">\u58f2\u4e0a\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3001\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u52b9\u679c\u3001\u9867\u5ba2\u6e80\u8db3\u5ea6\u306a\u3069\u3092\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u53ef\u8996\u5316\u3002\u7d4c\u55b6\u5c64\u306f\u4f01\u696d\u306e\u73fe\u72b6\u3092\u300c\u30b3\u30c3\u30af\u30d4\u30c3\u30c8\u300d\u306e\u3088\u3046\u306b\u4e00\u76ee\u3067\u628a\u63e1\u3057\u3001\u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u305f\u6b63\u78ba\u3067\u8fc5\u901f\u306a\u6226\u7565\u7684\u610f\u601d\u6c7a\u5b9a\u3092\u884c\u3048\u307e\u3059\u3002<\/p>\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n <div class=\"bg-gray-50 p-4 rounded-lg\">\n <h3 class=\"font-bold text-center mb-2\">\u58f2\u4e0a\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u6210\u9577<\/h3>\n <div class=\"chart-container h-64\">\n <canvas id=\"salesPipelineChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded-lg\">\n <h3 class=\"font-bold text-center mb-2\">\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0ROI\u6bd4\u8f03<\/h3>\n <div class=\"chart-container h-64\">\n <canvas id=\"marketingRoiChart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded-lg\">\n <h3 class=\"font-bold text-center mb-2\">\u4e3b\u8981\u7d4c\u55b6\u6307\u6a19 (KPI)<\/h3>\n <div class=\"chart-container h-64\">\n <canvas id=\"kpiRadarChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"transformation\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">4. \u5c0e\u5165\u304c\u3082\u305f\u3089\u3059\u4f01\u696d\u5909\u9769<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u751f\u7523\u6027\u306e\u6700\u5927\u5316<\/h3>\n <p class=\"mb-6 leading-relaxed\">\u5b9a\u578b\u696d\u52d9\u3092\u81ea\u52d5\u5316\u3057\u3001\u793e\u54e1\u306f\u3088\u308a\u4ed8\u52a0\u4fa1\u5024\u306e\u9ad8\u3044\u30b3\u30a2\u696d\u52d9\u306b\u96c6\u4e2d\u3067\u304d\u307e\u3059\u3002\u7d50\u679c\u3068\u3057\u3066\u3001\u30ea\u30fc\u30c9\u30bf\u30a4\u30e0\u77ed\u7e2e\u3001\u30b3\u30b9\u30c8\u524a\u6e1b\u3001\u58f2\u4e0a\u62e1\u5927\u306b\u76f4\u7d50\u3057\u307e\u3059\u3002<\/p>\n <div class=\"flex justify-around text-center\">\n <div>\n <p class=\"text-5xl font-black kpi-value\">+40%<\/p>\n <p class=\"font-bold mt-2\">\u751f\u7523\u6027\u5411\u4e0a<\/p>\n <\/div>\n <div>\n <p class=\"text-5xl font-black kpi-value\">-30%<\/p>\n <p class=\"font-bold mt-2\">\u30ea\u30fc\u30c9\u30bf\u30a4\u30e0\u77ed\u7e2e<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u5f93\u696d\u54e1\u306e\u696d\u52d9\u6642\u9593\u914d\u5206\u306e\u5909\u5316<\/h3>\n <div class=\"chart-container h-80\">\n <canvas id=\"timeAllocationChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-sm text-gray-500 mt-2\">\u30b3\u30a2\u696d\u52d9\u3078\u306e\u96c6\u4e2d\u304c\u53ef\u80fd\u306b<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"advantage\" class=\"bg-white rounded-2xl shadow-lg p-6 md:p-10\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">5. YetiForceCRM\u306a\u3089\u3067\u306f\u306e\u5f37\u307f\uff1a\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9\u3068\u3044\u3046\u9078\u629e<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 items-center\">\n <div>\n <h3 class=\"text-2xl font-bold kpi-title mb-4\">\u7dcf\u6240\u6709\u30b3\u30b9\u30c8(TCO)\u306e\u6700\u9069\u5316<\/h3>\n <p class=\"leading-relaxed\">\u9ad8\u984d\u306a\u30e9\u30a4\u30bb\u30f3\u30b9\u8cbb\u7528\u304c\u4e0d\u8981\u3002\u7dcf\u6240\u6709\u30b3\u30b9\u30c8\u3092\u6291\u3048\u3064\u3064\u3001\u72ec\u81ea\u306e\u696d\u52d9\u30d7\u30ed\u30bb\u30b9\u306b\u5408\u308f\u305b\u3066\u67d4\u8edf\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3001\u4e8b\u696d\u306e\u6210\u9577\u306b\u5408\u308f\u305b\u3066\u62e1\u5f35\u3067\u304d\u307e\u3059\u3002IT\u6295\u8cc7\u5bfe\u52b9\u679c\u3092\u6700\u5927\u5316\u3057\u3001\u7d4c\u55b6\u6226\u7565\u3092\u529b\u5f37\u304f\u4e0b\u652f\u3048\u3057\u307e\u3059\u3002<\/p>\n <\/div>\n <div>\n <div class=\"chart-container h-72\">\n <canvas id=\"tcoChart\"><\/canvas>\n <\/div>\n <p class=\"text-center text-sm text-gray-500 mt-2\">5\u5e74\u9593\u306e\u7dcf\u6240\u6709\u30b3\u30b9\u30c8\u6bd4\u8f03<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <footer class=\"text-center mt-16 pt-8 border-t border-gray-300\">\n <p class=\"text-xl kpi-title font-semibold mb-3\">\u30c7\u30fc\u30bf\u304c\u7d44\u7e54\u3092\u4e00\u3064\u306b\u3057\u3001\u30d3\u30b8\u30cd\u30b9\u3092\u52a0\u901f\u3055\u305b\u308b\u3002<\/p>\n <\/footer>\n\n <\/div>\n\n <script>\n const FONT_COLOR = '#374151';\n const GRID_COLOR = '#E5E7EB';\n const PALETTE = {\n primary: '#00A6A6',\n secondary: '#77D977',\n accent1: '#F2E7AE',\n accent2: '#F2B950',\n accent3: '#F28B30',\n };\n\n function wrapLabel(label, maxLength = 16) {\n if (label.length <= maxLength) {\n return label;\n }\n const words = label.split(' ');\n const lines = [];\n let currentLine = '';\n for (const word of words) {\n if ((currentLine + word).length > maxLength) {\n lines.push(currentLine.trim());\n currentLine = '';\n }\n currentLine += word + ' ';\n }\n lines.push(currentLine.trim());\n return lines;\n }\n\n const tooltipTitleCallback = (tooltipItems) => {\n const item = tooltipItems[0];\n let label = item.chart.data.labels[item.dataIndex];\n if (Array.isArray(label)) {\n return label.join(' ');\n }\n return label;\n };\n \n const commonChartOptions = {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n labels: {\n color: FONT_COLOR,\n font: { size: 14 }\n }\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n },\n scales: {\n x: {\n ticks: { color: FONT_COLOR, font: { size: 12 } },\n grid: { color: GRID_COLOR }\n },\n y: {\n ticks: { color: FONT_COLOR, font: { size: 12 } },\n grid: { color: GRID_COLOR }\n }\n }\n };\n\n new Chart(document.getElementById('dataSourcesChart'), {\n type: 'doughnut',\n data: {\n labels: ['\u55b6\u696d', '\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0', '\u30ab\u30b9\u30bf\u30de\u30fc\u30b5\u30fc\u30d3\u30b9', '\u751f\u7523\u30fb\u958b\u767a', '\u7ba1\u7406\u90e8\u9580'],\n datasets: [{\n label: '\u7d71\u5408\u30c7\u30fc\u30bf\u30bd\u30fc\u30b9',\n data: [35, 25, 20, 15, 5],\n backgroundColor: Object.values(PALETTE),\n borderColor: '#FFFFFF',\n borderWidth: 2,\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: { color: FONT_COLOR, font: { size: 14 } }\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n }\n }\n });\n\n new Chart(document.getElementById('salesPipelineChart'), {\n type: 'line',\n data: {\n labels: ['1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708'],\n datasets: [{\n label: '\u58f2\u4e0a (\u767e\u4e07\u5186)',\n data: [120, 150, 140, 180, 210, 250],\n borderColor: PALETTE.primary,\n backgroundColor: PALETTE.primary + '33',\n fill: true,\n tension: 0.4\n }]\n },\n options: commonChartOptions\n });\n\n new Chart(document.getElementById('marketingRoiChart'), {\n type: 'bar',\n data: {\n labels: ['Web\u5e83\u544a', 'SNS\u30ad\u30e3\u30f3\u30da\u30fc\u30f3', '\u5c55\u793a\u4f1a', '\u30bb\u30df\u30ca\u30fc'],\n datasets: [{\n label: 'ROI (%)',\n data: [350, 420, 280, 510],\n backgroundColor: [PALETTE.secondary, PALETTE.accent2, PALETTE.accent3, PALETTE.primary],\n borderRadius: 4\n }]\n },\n options: {\n indexAxis: 'y',\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n },\n scales: {\n x: {\n beginAtZero: true,\n ticks: { color: FONT_COLOR, font: { size: 12 } },\n grid: { color: GRID_COLOR },\n title: {\n display: true,\n text: 'ROI (%)',\n color: FONT_COLOR\n }\n },\n y: {\n ticks: { color: FONT_COLOR, font: { size: 12 } },\n grid: {\n display: false\n }\n }\n }\n }\n });\n\n new Chart(document.getElementById('kpiRadarChart'), {\n type: 'radar',\n data: {\n labels: ['\u9867\u5ba2\u6e80\u8db3\u5ea6', '\u751f\u7523\u6027', '\u30b3\u30b9\u30c8\u524a\u6e1b', '\u5e02\u5834\u9069\u5fdc\u529b', '\u5f93\u696d\u54e1\u6e80\u8db3\u5ea6'],\n datasets: [{\n label: '\u5c0e\u5165\u5f8c',\n data: [9, 8, 7, 9, 8],\n backgroundColor: PALETTE.primary + '80',\n borderColor: PALETTE.primary,\n pointBackgroundColor: PALETTE.primary,\n }, {\n label: '\u5c0e\u5165\u524d',\n data: [6, 5, 5, 4, 6],\n backgroundColor: PALETTE.accent3 + '80',\n borderColor: PALETTE.accent3,\n pointBackgroundColor: PALETTE.accent3,\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n labels: { color: FONT_COLOR }\n },\n tooltip: {\n callbacks: {\n title: tooltipTitleCallback\n }\n }\n },\n scales: {\n r: {\n angleLines: { color: GRID_COLOR },\n grid: { color: GRID_COLOR },\n pointLabels: { font: { size: 13 }, color: FONT_COLOR },\n ticks: { backdropColor: 'transparent', color: FONT_COLOR }\n }\n }\n }\n });\n\n new Chart(document.getElementById('timeAllocationChart'), {\n type: 'bar',\n data: {\n labels: ['\u5c0e\u5165\u524d', '\u5c0e\u5165\u5f8c'],\n datasets: [{\n label: '\u5b9a\u578b\u696d\u52d9',\n data: [65, 25],\n backgroundColor: PALETTE.accent3,\n }, {\n label: '\u30b3\u30a2\u696d\u52d9',\n data: [35, 75],\n backgroundColor: PALETTE.primary,\n }]\n },\n options: {\n ...commonChartOptions,\n indexAxis: 'y',\n scales: {\n x: { stacked: true, ticks: { color: FONT_COLOR }, grid: { color: GRID_COLOR } },\n y: { stacked: true, ticks: { color: FONT_COLOR }, grid: { color: GRID_COLOR } }\n }\n }\n });\n\n new Chart(document.getElementById('tcoChart'), {\n type: 'bar',\n data: {\n labels: [wrapLabel('YetiForceCRM (\u30aa\u30fc\u30d7\u30f3\u30bd\u30fc\u30b9)'), wrapLabel('\u4e00\u822c\u7684\u306a\u30d7\u30ed\u30d7\u30e9\u30a4\u30a8\u30bf\u30eaCRM')],\n datasets: [{\n label: '\u30e9\u30a4\u30bb\u30f3\u30b9\u8cbb\u7528',\n data: [5, 60],\n backgroundColor: PALETTE.accent2,\n }, {\n label: '\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u30fb\u4fdd\u5b88\u8cbb\u7528',\n data: [35, 20],\n backgroundColor: PALETTE.secondary,\n }]\n },\n options: {\n ...commonChartOptions,\n scales: {\n x: { stacked: true, ticks: { color: FONT_COLOR }, grid: { color: GRID_COLOR } },\n y: { stacked: true, ticks: { color: FONT_COLOR }, grid: { color: GRID_COLOR }, title: { display: true, text: '\u30b3\u30b9\u30c8\u6307\u6570' } }\n }\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>YetiForceCRM \u5c0e\u5165\u52b9\u679c\u30a4\u30f3\u30d5\u30a9\u30b0\u30e9\u30d5\u30a3\u30c3\u30af YetiForceCRM\u306b\u3088\u308b\u5168\u793eDX \u90e8\u9580\u306e\u58c1\u3092\u8d8a\u3048\u3001\u4f01\u696d\u4fa1\u5024\u3092\u6700\u5927\u5316\u3059\u308b 1. \u300c\u90e8\u9580\u306e\u58c1\u300d\u304c\u3082\u305f\u3089\u3059\u7d4c\u55b6\u8ab2\u984c \u591a\u304f\u306e\u4f01\u696d\u3067\u306f\u3001\u90e8\u9580\u3054\u3068\u306b\u60c5\u5831\u304c\u5206\u65ad\u3055\u308c\u308b\u300c\u30b5\u30a4 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-748","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=748"}],"version-history":[{"count":4,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/748\/revisions"}],"predecessor-version":[{"id":906,"href":"https:\/\/yetiworks.jp\/index.php?rest_route=\/wp\/v2\/pages\/748\/revisions\/906"}],"wp:attachment":[{"href":"https:\/\/yetiworks.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}