;
}
// =====================================================
// PC HEADER — クリックでスライド開閉する全幅ドロワー
// =====================================================
// 本番 hatenabase.jp の実ナビをそのまま再現。リンクはすべて公式ページへ向ける。
// HB_BASE: ホスト判定で本番/ローカル/ngrok 自動切替え。
// - hatenabase.jp → 'https://hatenabase.jp'
// - hatenahp-v2.local:10028 / *.ngrok-free.dev / *.local 等
// → 現在の origin を使う（ローカル内回遊に閉じる）
const HB_BASE = (function(){
try {
var h = window.location.hostname;
if (/(^|\.)hatenabase\.jp$/.test(h)) return 'https://hatenabase.jp';
return window.location.origin;
} catch (e) {
return '';
}
})();
const HB_WANTEDLY = 'https://www.wantedly.com/companies/company_2336297/projects';
// 採用ポジションの単一ソース（page-recruit.jsx と共有）
// 増減時はここだけ編集すれば、トップ／採用ページ両方の表示が連動する。
const HOME_POSITIONS = [
{ dept:'DX', title:'kintoneコンサルタント', type:'正社員', loc:'東京 / リモート可' },
{ dept:'DX', title:'kintoneアプリ開発エンジニア', type:'正社員', loc:'東京 / リモート可' },
{ dept:'AI', title:'生成AI業務適用 PM', type:'正社員', loc:'東京' },
{ dept:'FINANCE', title:'会計コンサルタント / 公認会計士', type:'正社員', loc:'東京' },
{ dept:'CONTENT', title:'編集ディレクター', type:'正社員', loc:'東京 / リモート可' },
{ dept:'CORP', title:'採用担当', type:'正社員', loc:'東京' },
{ dept:'INTERN', title:'長期インターン (DX/Content/BI)', type:'インターン', loc:'東京' },
];
window.HB_POSITIONS = HOME_POSITIONS;
const HB_NAV = [
{ en:'Service', jp:'事業・サービス', href:`${HB_BASE}/hatena-dx`, items:[
{t:'Hatena,DX.', s:'DXシステム導入・BPRシステム導入支援', href:`${HB_BASE}/hatena-dx`},
{t:'Hatena,Content.', s:'DX・AI人材育成／クラウド会計人材の育成', href:`${HB_BASE}/hatena-content`},
{t:'Hatena,BI.', s:'経理業務改善・DX支援会計コンサル', href:`${HB_BASE}/hatena-bi`},
]},
{ en:'Achievements', jp:'導入事例・実績', href:`${HB_BASE}/achievements` },
{ en:'News', jp:'お知らせ', href:`${HB_BASE}/news` },
{ en:'Blog', jp:'ブログ', href:`${HB_BASE}/blog` },
{ en:'About', jp:'私たちについて', href:`${HB_BASE}/about-us` },
{ en:'Recruit', jp:'採用情報', href:`${HB_BASE}/recruit`, items:[
{t:'採用情報トップ', s:'Careers', href:`${HB_BASE}/recruit`},
{t:'一般採用', s:'Wantedly', href:HB_WANTEDLY},
{t:'新卒採用・インターン採用', s:'Wantedly Newgrad', href:`${HB_WANTEDLY}/newgrad`},
]},
];
function HBHeader() {
const [open, setOpen] = React.useState(null); // null | nav-en (PCドロップダウン)
const [mbOpen, setMbOpen] = React.useState(false); // モバイルドロワー
// 現在地判定: 各 NAV item の href のパス部分が pathname に prefix で含まれていれば active。
// 例: pathname=/news/ → m.href=…/news が match。/blog/{slug}/ → m.href=…/blog も match。
const currentPath = (typeof window !== 'undefined' && window.location && window.location.pathname) || '/';
function isNavActive ( m ) {
if ( ! m || ! m.href ) return false;
let path = '';
try { path = new URL( m.href, 'http://x' ).pathname; } catch(e){ return false; }
if ( ! path || path === '/' ) return currentPath === '/';
// パス末尾 / を整形してから前方一致
const norm = ( p ) => ( p.endsWith('/') ? p : p + '/' );
return norm( currentPath ).startsWith( norm( path ) );
}
// モバイル時はスクロールロック
React.useEffect(() => {
if (mbOpen) {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}
}, [mbOpen]);
// 親 wrapper の transform: scale() スコープから抜けるため createPortal で body 直下にマウント
// → position:fixed が viewport 基準で動作し、PC でもスクロール時にヘッダー常時固定
const headerNode = (
<>
{String(HB_NAV.findIndex(n=>n.en===open)+1).padStart(2,'0')}
{HB_NAV.find(n=>n.en===open).en.toUpperCase()}
{HB_NAV.find(n=>n.en===open).jp}
{HB_NAV.find(n=>n.en===open).items.map((it,i)=>(
0{i+1}
↗
))}
{it.t}
{it.s}
);
}
// === ヒーロー背景: SVGアニメ円グリッド + Canvasノイズ ===
// パフォーマンス対応: prefers-reduced-motion で停止 / tab非可視時に rAF 停止 /
// ライン本数 14→8、dot 60→24、ストローク・フィルはループ外で確定
function useHeroCanvas(canvasRef) {
React.useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) return; // 動きを抑制したいユーザーには canvas 描画自体を行わない
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const resize = () => {
const r = canvas.getBoundingClientRect();
canvas.width = r.width * dpr; canvas.height = r.height * dpr;
ctx.setTransform(dpr,0,0,dpr,0,0);
};
resize();
let raf;
let running = !document.hidden;
const start = performance.now();
const STROKE = 'rgba(31,97,171,.10)';
const DOT_FILL = 'rgba(14,14,20,.045)';
const loop = () => {
const r = canvas.getBoundingClientRect();
const w = r.width, h = r.height;
const t = (performance.now() - start) / 1000;
ctx.clearRect(0,0,w,h);
ctx.strokeStyle = STROKE;
ctx.lineWidth = 1;
for (let i=0; i<8; i++) {
const yBase = (h * (i+1)) / 9;
ctx.beginPath();
for (let x=0; x<=w; x+=10) {
const y = yBase + Math.sin(x*0.005 + t*0.4 + i*0.3) * 14;
if (x===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
}
ctx.stroke();
}
ctx.fillStyle = DOT_FILL;
for (let i=0; i<24; i++) {
const x = (Math.sin(i*12.9 + t*0.2)*0.5 + 0.5) * w;
const y = (Math.cos(i*7.1 + t*0.3)*0.5 + 0.5) * h;
ctx.fillRect(x, y, 2, 2);
}
if (running) raf = requestAnimationFrame(loop);
};
loop();
const onVis = () => {
if (document.hidden) {
running = false;
if (raf) cancelAnimationFrame(raf);
} else if (!running) {
running = true;
raf = requestAnimationFrame(loop);
}
};
document.addEventListener('visibilitychange', onVis);
window.addEventListener('resize', resize);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener('resize', resize);
document.removeEventListener('visibilitychange', onVis);
};
}, []);
}
function useHBInit(rootRef) {
React.useEffect(() => {
const root = rootRef.current;
if (!root) return;
const reveals = root.querySelectorAll('.hb-chars, .hb-up');
// root を viewport(null) にして transform:scale 内側でも intersection 計算が壊れないよう改修
const io = new IntersectionObserver(es => {
es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } });
}, { threshold: 0.05, rootMargin: '0px 0px -5% 0px' });
reveals.forEach(el => {
io.observe(el);
// ヒーロー内の reveal はスプラッシュ完了直後に確実に発火させる（IO待ちにしない）
if (el.closest('.hb-hero')) {
requestAnimationFrame(() => el.classList.add('is-in'));
}
});
return () => io.disconnect();
}, []);
}
// ==================================================
// PC
// ==================================================
function VariantDPC() {
const rootRef = React.useRef(null);
const heroCanvasRef = React.useRef(null);
useHeroCanvas(heroCanvasRef);
useHBInit(rootRef);
// ライブデータ: WordPress から注入された window.HB_HOME を使う。
// front-page.php が news / achievements / blog の最新投稿と件数を渡している。
const HB = (typeof window !== 'undefined' && window.HB_HOME) || { news:[], cases:[], editorials:[], counts:{}, links:{} };
const news = (HB.news || []).map(p => ({
d: p.date,
cat: p.cat,
cls: p.cat_cls,
t: p.title,
href:p.permalink,
}));
const services = [
{ num:'01', en:'DX / BPR', jp:'DXシステム導入・BPRシステム導入支援', d:'kintone・Salesforce・会計ソフトの導入から、業務プロセス再設計（BPR）まで内製チームで一貫対応。事業の意思決定スピードを上げる業務基盤を構築する。', img:'images/storyset_data.svg' },
{ num:'02', en:'Finance', jp:'経理業務改善・DX支援会計コンサル', d:'手作業の経理を、クラウド会計ソフト＋BIで再設計。月次決算の高速化・管理会計・IPO 準備まで、経理・会計の実務専門家チームが伴走する。', img:'images/storyset_business_plan.svg' },
{ num:'03', en:'AI / Talent', jp:'DX・AI人材育成／クラウド会計人材の育成', d:'速習freee会計研修・kintone 速習・生成 AI 業務適用研修。「使える人」を組織に増やすことから業務改革を始める。', img:'images/storyset_consulting.svg' },
];
// Live tweaks — density/mood/geometry. Reads global state, recomputes on change.
const tw = (window.useHBTweaks ? window.useHBTweaks() : null);
const dens = tw ? tw.density : { sectionPadY:96, heroPadY:72, heroDisplay:72, sectionTitle:34, bodyLine:2.05, grid:32 };
const mood = tw ? tw.mood : { blue:hbcp.blue, blueLight:hbcp.blueLight, blueGhost:hbcp.blueGhost, ink:hbcp.ink, paper:hbcp.paper };
return (
{/* MOBILE DRAWER — はてなベース株式会社 / 税理士事務所 を縦タブで切替 (hatenabase.jp legacy 構成) */}
{(() => {
const COMPANIES_DRAWER = [
{
key: 'inc',
tab: 'はてなベース',
tagline: '「攻めのバックオフィス」を構築し、\n企業の成長を力強く後押しします。',
sections: [
{ en:'Service', jp:'事業・サービス', items:[
{t:'Hatena,DX.', href:`${HB_BASE}/hatena-dx`},
{t:'Hatena,Content.', href:`${HB_BASE}/hatena-content`},
{t:'Hatena,BI.', href:`${HB_BASE}/hatena-bi`},
]},
{ en:'Achievements', jp:'導入実績・事例', href:`${HB_BASE}/achievements` },
{ en:'News', jp:'お知らせ', href:`${HB_BASE}/news` },
{ en:'Blog', jp:'ブログ', href:`${HB_BASE}/blog` },
{ en:'About us', jp:'会社情報', href:`${HB_BASE}/about-us` },
{ en:'Contact', jp:'お問い合わせ', href:`${HB_BASE}/contact` },
{ en:'Recruit', jp:'採用情報', href:`${HB_BASE}/recruit`, items:[
{t:'一般採用', href:HB_WANTEDLY, ext:true},
{t:'新卒採用・インターン採用', href:`${HB_WANTEDLY}/newgrad`, ext:true},
]},
],
secondary: [
{t:'利用規約', href:`${HB_BASE}/terms`},
{t:'資料請求', href:`${HB_BASE}/document-request`},
{t:'コンテンツクリエイター向け', href:`${HB_BASE}/for-content-creaters`},
],
},
{
key: 'tax',
tab: 'はてなベース税理士事務所',
tagline: 'クラウド会計を活用して、\n質の高い経営判断を。',
sections: [
{ en:'Service', jp:'料金・サービス', items:[
{t:'税務顧問', href:`${HB_BASE}/tax-accountant/service/tax-advisor`},
{t:'融資支援', href:`${HB_BASE}/tax-accountant/service/financing-support`},
{t:'管理会計コンサル', href:`${HB_BASE}/tax-accountant/service/consulting`},
]},
{ en:'Achievements', jp:'導入実績・事例', href:`${HB_BASE}/office-achievements` },
{ en:'News', jp:'お知らせ', href:`${HB_BASE}/office-news` },
{ en:'Blog', jp:'ブログ', href:`${HB_BASE}/blog` },
{ en:'About us', jp:'私たちについて', href:`${HB_BASE}/tax-accountant/about-us` },
{ en:'Contact', jp:'お問い合わせ', href:`${HB_BASE}/tax-accountant/contact` },
{ en:'Recruit', jp:'採用情報', href:`${HB_BASE}/tax-accountant/recruit`, items:[
{t:'一般採用', href:HB_WANTEDLY, ext:true},
{t:'新卒採用・インターン採用', href:`${HB_WANTEDLY}/newgrad`, ext:true},
]},
],
secondary: [
{t:'利用規約', href:`${HB_BASE}/tax-accountant/terms`},
],
},
];
const inactiveBg = '#3a4a5a';
return (
{/* 背景装飾: 大きな concentric circles (右上) + 細かいドットグリッド (全体) + 斜めライン (左下) */}
{/* 背景装飾: ドットグリッド */}
{/* 左下に伸びる斜線 */}
{/* HATENABASE モノグラム (右下にうっすら) */}
{/* ===== 1. 3つの専門領域 (Service) ===== */}
{/* ===== 2. AO Vision (Our Vision) ===== */}
バックオフィスを、
{/* ===== 3. ニュース (News) ===== */}
↗
)) : (
{/* ===== 4. 採用情報 (Recruit) — hatenabase.jp で使われている header_sp_1.svg を流用 ===== */}
{/* ===== 5. 会社情報への動線 (About) — Economist 風 row card =====
編集マガジン体のレイアウト: title/copy 左 + 小型 illust 右 100px。
イラストは情報を補助するアクセントであり主役にしない (mobile editorial 規約)。 */}
私たちについて
→
{/* ===== 6. 取引先・協業パートナー (Partners) — 実データ ===== */}
{/* ===== 7. 導入実績・事例のサンプル (Achievements) ===== */}
{/* ===== 8. コンタクト (Contact) ===== */}
{typeof document !== 'undefined' && ReactDOM.createPortal(headerAndDrawer, document.body)}
);
}
// サブページ（page-hatena-dx 等）が共通シェルとして再利用するための window 公開
Object.assign(window, {
VariantDPC, VariantDMobile,
HBHeader, HBLogo, HBChars, HB_NAV, HB_BASE, HB_WANTEDLY,
hbcp, fontEN, fontENSans, fontJP, fontJPSerif, fontMono, ease,
hbStyles: styles,
});
{window.HBTweaksDPanel ?
{/* 12カラム縦罫 */}
{/* 大円アクセント — geometry tweak対応 */}
{/* Heroイラスト除去（"写真ゼロ" 原則。Storyset がタイポを覆い隠す問題のため）*/}
{/* MARQUEE NEWS — Hero 直下に配置 (デザイン的にここの方が落ち着く: ヒーロー → 速報帯 → 各セクション) */}
{/* THREE-AXIS — DX × 会計 × AI 3つの専門性 */}
ABOUT US ↗
{/* NEWS */}
{/* VISION — 巨大欧文 */}
{/* 抽象SVG — geometry tweak対応 */}
事業の「？」を、
{/* SERVICE */}
{/* SPOTLIGHT — 速習freee会計研修（freee × DIGITAL BASE 業務提携） */}
freee × 一般社団法人DIGITAL BASE 業務提携。
{/* WORKS — 事例 (実データ: window.HB_HOME.cases / achievements CPT) */}
{/* AX-ISSUES — FLUX風 こんな課題ありませんか？ */}
{/* INSIGHTS — 読みもの (実データ: window.HB_HOME.editorials / blog CPT) */}
{/* CAREERS — 採用 */}
{/* TESTIMONIALS — クライアントの声 */}
{/* PICKUP — 抽象的なグラフィックカード */}
{/* PARTNERS — 実際の Hatena Base 取引先ロゴ */}
{/* CTA — LP風 大型導線 */}
{/* 大きな同心円 */}
{/* 右カラム：3導線 */}
{/* 下部：補助情報 */}
{/* FOOTER */}
);
}
// ==================================================
// Mobile
// ==================================================
function VariantDMobile() {
const rootRef = React.useRef(null);
const [menuOpen, setMenuOpen] = React.useState(false);
// ドロワー内で 株式会社 / 税理士事務所 を切替 (hatenabase.jp legacy 構成準拠)
const [drawerCompany, setDrawerCompany] = React.useState('inc');
// メニュー開時は背面スクロール禁止 (タッチデバイス用 touchAction も含む)
React.useEffect(() => {
const prev = document.body.style.overflow;
document.body.style.overflow = menuOpen ? 'hidden' : prev || '';
return () => { document.body.style.overflow = prev || ''; };
}, [menuOpen]);
React.useEffect(() => {
const root = rootRef.current; if (!root) return;
const reveals = root.querySelectorAll('.hb-chars, .hb-up');
const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } }), { root, threshold:0.15 });
reveals.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
// モバイル版もライブデータ: window.HB_HOME を使う
const HB = (typeof window !== 'undefined' && window.HB_HOME) || { news:[], cases:[], editorials:[], counts:{}, links:{} };
const news = (HB.news || []).slice(0, 3).map(p => ({
d: p.date,
cat: p.cat,
cls: p.cat_cls,
t: p.title,
href: p.permalink,
}));
// 導入実績・事例 (achievements CPT) の最新 3 件
const cases = (HB.cases || []).slice(0, 3);
const achievementsHref = (HB.links && HB.links.achievements) || `${HB_BASE}/achievements`;
// Header / Drawer は親 wrapper の transform: scale() スコープから抜けるため
// createPortal で document.body 直下にマウント → position:fixed が viewport 基準で動作。
const headerAndDrawer = (
<>
A BACKOFFICE COMPANY FOR THE MAKERS OF TOMORROW
DX × 会計 × AI の交点で、
戦略設計から現場の導入・運用・改善まで、
スタートアップ・中小企業のバックオフィスを伸び代に変えるパートナー。
SCROLL
{[...news, ...news].map((n,i) => (
{n.cat}
{n.d}
{n.t}
—
))}
Structure
HatenaBaseは、ひとつの専門会社ではありません。
「DX・会計・AI」という、互いに補い合う3つの領域を持つことで、
バックオフィスを単独の最適化ではなく、事業の意思決定スピードそのものとして再設計します。
{[
{
no:'01', en:'DX DIVISION', jp:'業務とシステムを再設計する。',
tag:'DIGITAL TRANSFORMATION',
d:'kintone・Salesforce・会計ソフトをはじめとするSaaSの設計・導入・定着、業務フローの可視化と再構築。「ツールを入れて終わり」ではなく、現場の運用が変わるところまで伴走するのが、私たちの強みです。',
pts:['業務フロー設計・標準化', 'SaaS導入・連携', '内製化支援・運用定着', 'ノーコード／ローコード開発'],
bg:hbcp.white, art:'lines', href:`${HB_BASE}/hatena-dx`,
},
{
no:'02', en:'ACCOUNTING DIVISION', jp:'数字で事業を支える。',
tag:'ACCOUNTING & FINANCE',
d:'税理士・経理BPOチームによる、月次決算の高速化、管理会計、IPO準備、内部統制まで。攻めの経営判断に必要な「数字の見える化」を、専門家チームが裏側で支えます。',
pts:['月次決算の早期化', '管理会計／BI設計', 'IPO・内部統制支援', 'CFOアウトソース'],
bg:hbcp.blueGhost, art:'circles', href:`${HB_BASE}/hatena-bi`,
},
{
no:'03', en:'AI DIVISION', jp:'生成AIを組織に組み込む。',
tag:'GENERATIVE AI',
d:'生成AI／LLMを「PoCで終わらせない」ための導入設計と内製化支援。社内ナレッジRAG、AIエージェント、業務自動化、社員向けAIリテラシー研修まで、組織への定着を一気通貫で。',
pts:['生成AI導入設計', 'RAG／AIエージェント開発', '業務自動化の実装', 'AIリテラシー研修'],
bg:hbcp.white, art:'grid', href:`${HB_BASE}/hatena-content`,
},
].map((c,idx)=>(
{/* 中央 = 強みは交差点 */}
{/* 抽象アート */}
))}
● OUR DIFFERENCE
3領域を1社で抱え、
「業務 × 数字 × AI」を切れ目なくつなぐ。
「業務 × 数字 × AI」を切れ目なくつなぐ。
News
{news.length > 0 ? (
{news.map((n,i)=>(
{n.cat}
{n.d}
{n.t}
READ →
↗
))}
) : (
まだニュースは投稿されていません。
)}
{HB.links && HB.links.news && (
)}
VISION / 2030
事業の「？」を、
働く人の「！」に翻訳する。
スタートアップが伸びる速度は、バックオフィスの速度に等しい。私たちは、組織の意思決定とオペレーションを根本から再設計するパートナーです。専門領域が交差する場所に、事業を伸ばすデザインがある。
About HatenaBase ↗
Service
{services.map((s,i)=>{
// services[0..2] のリンク先
const svcHref = i === 0 ? `${HB_BASE}/hatena-dx` : i === 1 ? `${HB_BASE}/hatena-bi` : `${HB_BASE}/hatena-content`;
return (
{s.num}
{s.en}
{s.jp}
{s.d}
→
);
})}
Spotlight
● PRESS RELEASE / 2025.08.26
freee × 一般社団法人DIGITAL BASE 業務提携。
「速習freee会計研修」を共同開発・提供開始。
DIGITAL BASE は「デジタルを活用するための基礎力は、特定の企業や業界のものではなく、すべての会計人材にとって必要なスキル」という理念のもと設立された一般社団法人。 急速な DX 化が進むなか、会計・税理士事務所がクラウド会計ソフトを十分に活用できていない課題に対応すべく、freee は業務提携を決定し、会計人材の育成と業界発展に貢献します。
「速習freee会計研修」は e-learning + バーチャル環境での実務演習 + テスト受講 を含み、約1ヶ月で完結。公認会計士・税理士など専門家により提供されます。
READ THE FREEE PRESS RELEASE ↗
SEMINAR APPEARANCES
{[
{co:'DIGITAL BASE × freee', t:'「freee人材」育成セミナー', d:'速習freee会計研修の内容解説。DX人材に求められるスキルと研修プログラムを紹介。', href:'https://adv.freee.co.jp/seminar/digital-base'},
{co:'税理士法人松本 × freee', t:'「30名の壁を越える事務所」の作り方', d:'利益率改善と債権管理強化を実現する業務基盤の構築方法。', href:'https://adv.freee.co.jp/seminar/sustainable-office-growth'},
{co:'MAIA × freee', t:'「育成コストゼロ」経営セミナー', d:'クラウド会計習得済み人材の採用で、育成コストを削減。', href:'https://adv.freee.co.jp/seminar/cloud-accounting-employment'},
].map((s,i) => (
● CO-HOSTED WITH
{s.co}
{s.t}
{s.d}
VIEW SEMINAR ↗
))}
Works
{(HB.cases && HB.cases.length > 0) ? (
{HB.cases.map((c,i)=>(
{c.thumbnail && (
)}
))}
) : (
{c.date}
{c.cat}
{c.title}
{c.excerpt}
READ CASE↗
導入事例はまだ公開されていません。
)}
Issues
会計・経理・組織・テクノロジーの現場で、私たちが何度も出会ってきた課題を 16 個に整理しました。
ひとつでも当てはまるものがあれば、AX（Accounting Transformation）で解けるかもしれません。
{[
{c:'FINANCE', t:'月次決算が常に20日以上かかっている'},
{c:'FINANCE', t:'経営数字が見えるのが、月遅れになっている'},
{c:'FINANCE', t:'インボイス・電帳法対応の運用が回っていない'},
{c:'FINANCE', t:'IPO準備で、何から手を付けるべきか分からない'},
{c:'OPS', t:'同じ作業を、複数のSaaSに重複入力している'},
{c:'OPS', t:'kintoneやfreeeを入れたが、定着していない'},
{c:'OPS', t:'業務マニュアルがエクセルで属人化している'},
{c:'OPS', t:'部署間で数字の定義がバラバラで、議論が噛み合わない'},
{c:'AI', t:'生成AIをどう業務に組み込めばいいか分からない'},
{c:'AI', t:'社員に生成AIを使わせたいが、教育が追いつかない'},
{c:'AI', t:'AIエージェントで、社内業務を自動化したい'},
{c:'AI', t:'PoCで終わらない、AIの本格導入を進めたい'},
{c:'TEAM', t:'バックオフィスが慢性的な人手不足で、攻めに回せない'},
{c:'TEAM', t:'BPOを使っているが、業務がブラックボックス化している'},
{c:'TEAM', t:'採用してもバックオフィス人材がすぐに辞めてしまう'},
{c:'TEAM', t:'CFOやCTOがいないが、相談できる相手が欲しい'},
].map((it,i)=>(
{String(i+1).padStart(2,'0')} / {it.c}
?
{it.t}
SOLVE WITH AX
↗
))}
Insights
{(HB.editorials && HB.editorials.length > 0) ? (
{HB.editorials.slice(0,3).map((p,i)=>{
const feat = i === 0;
return (
{feat && (
)}
) : (
{p.cat}
{p.date}
{p.title}
{p.excerpt}
READ↗
);
})}
記事はまだ公開されていません。
)}
{HB.links && HB.links.blog && HB.editorials && HB.editorials.length > 0 && (
)}
CAREERS / 2026
知る人ぞ知る
バックオフィスのよろずや。
専門の境界を越えて事業課題を解く人材を、現在 {(window.HB_POSITIONS || HOME_POSITIONS).length}職種 で募集中。カジュアル面談から、お気軽にどうぞ。
OPEN POSITIONS — {(window.HB_POSITIONS || HOME_POSITIONS).length} →
{(window.HB_POSITIONS || HOME_POSITIONS).map((j,i)=>(
{j.dept}
{j.title}
{j.type}
{j.loc}
↗
))}
Voices
{(HB.testimonials && HB.testimonials.length > 0) ? (
{HB.testimonials.slice(0, 3).map((v,i)=>(
))}
) : (
"
{v.quote}
{v.author}{v.company}
クライアントの声は順次掲載予定です。
導入事例集 もぜひご覧ください。
)}
導入事例集 もぜひご覧ください。
Pickup
{[
{ en:'Pickup / 01', t:'バックオフィスを\n"攻め"に変える3領域', d:'DX × 会計 × AI の結節点で事業を伸ばす。', tone:'white', svg: 'circles', href:`${HB_BASE}/about-us` },
{ en:'Pickup / 02', t:'速習freee会計研修\n× DIGITAL BASE', d:'freeeとの業務提携で生まれた人材育成プログラム。', tone:'fill', svg: 'lines', href:`${HB_BASE}/hatena-content` },
{ en:'Pickup / 03', t:'kintone導入支援\n極みシリーズ', d:'業界別・課題別のkintone DXパッケージ。', tone:'dark', svg: 'grid', href:`${HB_BASE}/hatena-dx` },
].map((p,i)=>(
{/* 抽象SVG */}
))}
{p.en}
{p.t}
{p.d}
READ MORE ↗
Partners
{[
{n:'freee', img:'images/partners/freee.svg'},
{n:'kintone', img:'images/partners/kintone.png'},
{n:'Salesforce', img:'images/partners/salesforce.jpg'},
{n:'勘定奉行(OBC)', img:'images/partners/kanjo-bugyo.png'},
{n:'サイボウズ', img:'images/partners/cybozu.svg'},
{n:'LayerX バクラク', img:'images/partners/bakuraku.png'},
{n:'マネーフォワード', img:'images/partners/moneyforward.svg'},
{n:'HelpTech', img:'images/partners/helptech.png'},
{n:'Arinos', img:'images/partners/arinos.jpeg'},
{n:'SAKYODO', img:'images/partners/sakyodo.png'},
{n:'Solabo', img:'images/partners/solabo.svg'},
{n:'STRANDER', img:'images/partners/strander.png'},
{n:'日本システム技術', img:'images/partners/nihon-system.png'},
{n:'Uniforce', img:'images/partners/uniforce.png'},
].map((p,i)=>(
{p.img
? 
: {p.n}}
))}
CONTACT — まずは30分、話してみませんか
AXは、自社で完結する話ではありません。
会計・テクノロジー・AI、3つの専門性を持つチームと、まずは30分、話してみませんか。
{[
{n:'01', en:'CONSULT', jp:'30分・無料で相談する', d:'まずは課題感のヒアリングから。', cta:true, href:`${HB_BASE}/contact`},
{n:'02', en:'DOWNLOAD', jp:'会社紹介資料をダウンロード', d:'サービス全体・実績・料金感（PDF）', cta:false, href:`${HB_BASE}/document-request`},
{n:'03', en:'CASES', jp:'導入事例集を見る', d:`業界別・課題別、${(HB.counts && HB.counts.achievements) || ''}件の事例から。`, cta:false, href:(HB.links && HB.links.achievements) || `${HB_BASE}/achievements` },
].map((c,i)=>(
{c.n}
{c.en}
{c.jp}
{c.d}
↗
))}
● 平日 9:00-18:00
● 初回相談 30分・無料
● 東京・新宿オフィス（東京都新宿区愛住町23-1 woody21 6階）
● TEL 03-4500-2647
RESPONSE WITHIN 1 BUSINESS DAY
{/* 左 縦タブ — 上下 2 タブで等分 (drawer 高さ ÷ 2 = タブ高さ) */}
);
})()}
);
return (
<>
{COMPANIES_DRAWER.map(c => {
const active = drawerCompany === c.key;
return (
);
})}
{/* 右 アクティブ企業のメニュー */}
{(() => {
const co = COMPANIES_DRAWER.find(c => c.key === drawerCompany) || COMPANIES_DRAWER[0];
return (
{/* Hatenabase ロゴ */}
{/* タグライン */}
))}
{/* 二次リンク (利用規約 / 資料請求 / コンテンツクリエイター向け) */}
{co.secondary && co.secondary.length > 0 && (
);
})()}
{co.tagline}
{/* メニュー */} {co.sections.map(s => ({s.en}
{s.jp}
{s.items && (
{s.items.map(it => (
{it.t}
{it.ext && ↗}
))}
)}
{co.secondary.map(it => (
{it.t}
))}
)}
{/* SNS */}
HB.
HATENABASE INC. / TOKYO
DX × 会計 × AI—
3つの専門領域が交わる場所から、スタートアップの「守り」を、事業を加速させる「攻め」へ翻訳する。
{[...Array(2)].flatMap((_,i) => (HB.news || []).slice(0,3).map((p,j) => (
{p.cat} — {p.title}—
)))}
Service
3つの専門領域
{[
{num:'01', en:'DX / BPR', jp:'DXシステム導入・BPRシステム導入支援', img:'images/storyset_data.svg', href:`${HB_BASE}/hatena-dx`},
{num:'02', en:'Finance', jp:'経理業務改善・DX支援会計コンサル', img:'images/storyset_business_plan.svg', href:`${HB_BASE}/hatena-bi`},
{num:'03', en:'AI / Talent', jp:'DX・AI人材育成／クラウド会計人材の育成', img:'images/storyset_consulting.svg', href:`${HB_BASE}/hatena-content`},
].map((s,i)=>(
{s.num}
{s.en}
{s.jp}
→
))}
● VISION / 2030
OUR
VISION
VISION
Backoffice, redesigned.
バックオフィスを、
事業を伸ばす「攻めの装置」へ。
スタートアップが伸びる速度は、バックオフィスの速度に等しい。
News
ニュース
{news.length > 0 ? news.map((n,i)=>(
{n.cat}
{n.d}
{n.t}
まだニュースは投稿されていません。
)}
Recruit
採用情報
{/* hatenabase.jp に既に存在するオフィス実写 (themes/hatena/images/office_gallery/) を共有参照。
SVG イラストではなく現場の写真でリアル感を出す。redesign 内に複製しない (重複保管回避)。 */}
バックオフィスを「攻めの装置」に変える仲間を募集中。新卒・中途・業務委託まで。
About
会社情報
はてなベース株式会社の
理念・組織・拠点をご紹介します。
Partners
取引先／協業パートナー
{[
{n:'freee', img:'images/partners/freee.svg'},
{n:'kintone', img:'images/partners/kintone.png'},
{n:'Salesforce', img:'images/partners/salesforce.jpg'},
{n:'勘定奉行(OBC)', img:'images/partners/kanjo-bugyo.png'},
{n:'サイボウズ', img:'images/partners/cybozu.svg'},
{n:'LayerX バクラク', img:'images/partners/bakuraku.png'},
{n:'マネーフォワード', img:'images/partners/moneyforward.svg'},
{n:'HelpTech', img:'images/partners/helptech.png'},
{n:'Arinos', img:'images/partners/arinos.jpeg'},
{n:'SAKYODO', img:'images/partners/sakyodo.png'},
{n:'Solabo', img:'images/partners/solabo.svg'},
{n:'STRANDER', img:'images/partners/strander.png'},
{n:'日本システム技術', img:'images/partners/nihon-system.png'},
{n:'Uniforce', img:'images/partners/uniforce.png'},
].map((p,i)=>(
{p.img
?
: {p.n}}
))}
Achievements
導入実績・事例
{cases.length > 0 ? (
{cases.map((c, i) => (
{c.thumbnail && (
)}
{c.cat &&
) : (
{c.cat}
}
{c.title}
))}導入事例を準備中です。
)}
すべての導入事例を見る
↗
● CONTACT