const { useState, useEffect, useRef } = React; const NAV = (typeof NAV_URLS !== 'undefined') ? NAV_URLS : {}; const ASSET = (path) => THEME_URI + '/assets/' + path; // TODO: 実写真に差し替え予定のプレースホルダー（WP管理画面から後日アップロード） function ImgPlaceholder({ label, style }) { return (
{label}
); } const SERVICES = { design: { badge: 'Growth Design', title: 'デザイン & ブランディング', img: ASSET('service-design.svg'), icon: ASSET('icon-design.png'), desc: '企業・サービスの価値を伝えるブランド設計・Web・UI/UXデザイン', modalDesc: '目的から逆算したWebサイト設計、UI/UX、ブランドアイデンティティ構築までを一貫して担当し、本質的な課題解決を図ります。デザイナーとエンジニアの連携により、予算や要望に沿った柔軟で高品質な提案が可能です。', problems: [ '自社サイトが古く、見た目が競合に負けている気がする', 'サイトを見ても「何をしている会社か」が伝わらないと言われる', '求人を出しても応募が少なく、採用に苦労している', 'ロゴやデザインがバラバラで、統一感のある会社に見せたい', ], features: ['コーポレートサイト / 採用サイト制作', 'LP・サービスサイト設計', 'UI/UX デザイン', 'ロゴ・ブランドVI設計', 'デザインシステム構築'], }, dx: { badge: 'Growth DX', title: 'デジタル変革支援', img: ASSET('service-dx.svg'), icon: ASSET('icon-dx.png'), desc: '業務改善・システム開発・クラウド活用などのデジタル変革支援', modalDesc: '業務フロー整理からシステム開発、クラウド活用まで、現場で使われるデジタル化を伴走型で推進します。DX診断から開発、リリース後の安定した保守まで一気通貫で支援し、運用オペレーションを資産へと転換する継続保守体制が強みです。', problems: [ '顧客データを紙やExcelで管理していて、探すのに時間がかかる', '日報・報告書の記入・集計に毎日多くの時間が取られている', '担当者しか知らない業務があり、休むと仕事が止まってしまう', '拠点間の情報共有が遅く、現場と事務所で認識がずれる', ], features: ['業務フロー整理・設計', 'カスタムシステム開発', 'クラウド導入・移行支援', 'ペーパーレス化支援', 'SaaS導入コンサルティング'], }, marketing: { badge: 'Growth Marketing', title: 'マーケティング支援', img: ASSET('service-marketing.svg'), icon: ASSET('icon-marketing.png'), desc: '集客・採用・情報発信など、企業成長を支えるマーケティング支援', modalDesc: '戦略から運用まで一貫してWeb集客・採用・情報発信を支援します。SEO、広告、SNSなどを組み合わせ、ビジネス目的に最適な施策を実行。LP制作から継続的なサイト保守・改修まで、ビジネスの成長を止めない強固な基盤を提供します。', problems: [ 'Webからの問い合わせがほとんどなく、どうすれば増えるか分からない', 'SNSを始めたいが、何を投稿すればよいか分からない', '広告を出しているが費用対効果が見えない', '採用に苦労しており、デジタルで応募を増やしたい', ], features: ['SEO・コンテンツ制作', 'Web広告運用', 'SNS運用支援', '採用マーケティング'], }, ai: { badge: 'Growth AI', title: 'AI活用・業務自動化', img: ASSET('service-ai.svg'), icon: ASSET('icon-ai.png'), desc: 'AI活用・業務自動化・ナレッジ活用による業務効率化支援', modalDesc: 'AIツールの選定・導入から業務フローへの組み込みまでを行い、スタッフの負担軽減と生産性向上を実現します。自社で培った最先端のAI活用知見をシステム開発や運用プロセスに組み込み、高速デリバリーと業務効率化を両立させます。', problems: [ '問い合わせ対応やメール返信に毎日多くの時間を取られている', '見積書・提案書など定型書類の作成に手間がかかっている', '社内のノウハウや過去事例が散在していて、すぐに探し出せない', 'AIを活用したいが、何から始めればよいか分からない', ], features: ['AI活用戦略の立案', '書類処理の自動化', 'ナレッジ管理・AI検索構築', 'LLMを活用した社内ツール開発'], }, }; function formatNewsDate(dateStr) { const d = new Date(dateStr); return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`; } function Eyebrow({ label }) { return (
{label}
); } function Header({ mobileOpen, onToggleMenu }) { return (
株式会社HAB&Co. CONTACT →
); } function MobileMenu({ open, onClose }) { return (
ABOUT SERVICES WORKS COMPANY NEWS CONTACT →
); } function Hero() { return (
YOUR DIGITAL TEAM　｜　企業成長の共創パートナー

一緒に走る、
共創パートナー。

「DX担当がいない」「何から手をつければ」——大丈夫。戦略から運用まで、あなたのチームの一員のように並走します。

まずは話してみる →
SCROLL
チームミーティングの様子
); } function ServiceCard({ svcKey, svc, onOpen }) { return (
onOpen(svcKey)} style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', background: '#FFFFFF', border: '1px solid #E7E4DE', borderRadius: 8, overflow: 'hidden', color: 'inherit' }}>
{svc.badge}
{svc.badge}

{svc.title}

{svc.desc.slice(0, 42)}…

詳細を見る →
); } function Services({ onOpen }) { return (

4つの「Growth」で成長を支援する

企業・サービスの価値をデザイン・マーケティング・DX・AIの力で最大化し、事業成長に伴走します。

{Object.keys(SERVICES).map((key) => ( ))}
); } function WhoWeAre() { return (

いつでも頼れる、
隣のチーム。

社外パートナーというより、同じゴールを目指す仲間として。自由な社風と「人の顔」が見える距離感で、事業の成長を一緒に考え、一緒に手を動かします。

{['気軽に相談できる、近い距離感', '戦略から運用まで一気通貫で並走', '自由でオープンな、人が見えるチーム'].map((t) => (
{t}
))}
相談してみる →
チームで作業する様子
スタッフの働く様子
); } function stripTags(html) { return (html || '').replace(/<[^>]+>/g, '').trim(); } function WorkCard({ w }) { return (
{w.img ? ( {w.alt} ) : ( )}

{w.title}

{w.tag && {w.tag}}

{w.body}

{w.client}
); } function Works() { const gridRef = useRef(null); const [activeIdx, setActiveIdx] = useState(0); const [works, setWorks] = useState(null); useEffect(() => { fetch(`${WP_API}/wp/v2/works?_embed&per_page=20&orderby=menu_order&order=asc`) .then((r) => (r.ok ? r.json() : [])) .then((data) => { const mapped = (data || []).map((item) => { const media = item._embedded && item._embedded['wp:featuredmedia'] && item._embedded['wp:featuredmedia'][0]; const title = stripTags(item.title.rendered); return { id: item.id, title, tag: (item.meta && item.meta.works_genre) || '', client: (item.meta && item.meta.client_name) || '', body: stripTags(item.content.rendered), img: media && media.source_url ? media.source_url : null, alt: (media && media.alt_text) || title, }; }); setWorks(mapped); }) .catch(() => setWorks([])); }, []); useEffect(() => { const grid = gridRef.current; if (!grid) return; const onScroll = () => { const idx = Math.round(grid.scrollLeft / (grid.offsetWidth * 0.82)); setActiveIdx(idx); }; grid.addEventListener('scroll', onScroll, { passive: true }); return () => grid.removeEventListener('scroll', onScroll); }, [works]); const scrollToCard = (idx) => { const grid = gridRef.current; if (!grid) return; const card = grid.children[idx]; if (card) grid.scrollTo({ left: card.offsetLeft - 20, behavior: 'smooth' }); }; if (!works || works.length === 0) return null; return (

実績紹介

業種・規模を問わず、さまざまな企業の成長に伴走しています。

{works.map((w) => ())}
{works.map((_, i) => ( scrollToCard(i)}> ))}
); } function News() { const [news, setNews] = useState(null); useEffect(() => { fetch(`${WP_API}/wp/v2/news?_embed&per_page=3&orderby=date&order=desc`) .then((r) => (r.ok ? r.json() : [])) .then((data) => { const mapped = (data || []).map((item) => { const terms = (item._embedded && item._embedded['wp:term']) || []; const catTerm = terms.flat().find((t) => t.taxonomy === 'news_category'); return { id: item.id, date: formatNewsDate(item.date), tag: catTerm ? catTerm.name : 'お知らせ', title: stripTags(item.title.rendered), link: item.link, }; }); setNews(mapped); }) .catch(() => setNews([])); }, []); if (!news || news.length === 0) return null; return (
NEWS お知らせ
一覧を見る →
{news.map((n, i) => ( {n.date}
{n.tag} {n.title}
))}
); } function CTA() { return (
LET'S RUN TOGETHER

お気軽にご相談ください

「社内にデジタル人材がおらず、何から着手すべきか判断がつかない」「他社で見積もりを取ったが適正か知りたい」といった状態でも構いません。
貴社のペースに合わせてお話を伺います。
ご相談や初期のお見積り・ご提案に費用は一切かかりません。

無料で相談する →
); } function ServiceModal({ svcKey, onClose }) { if (!svcKey) return null; const svc = SERVICES[svcKey]; return (
e.stopPropagation()} style={{ background: '#fff', borderRadius: 14, maxWidth: 560, width: '100%', padding: '44px 44px 40px', position: 'relative', boxShadow: '0 32px 80px -24px rgba(0,0,0,.3)', maxHeight: '85vh', overflowY: 'auto' }}> {svc.badge}

{svc.title}

{svc.modalDesc || svc.desc}

こんなお困りごとはありませんか？
{svc.problems.map((p, i) => (
✓ {p}
))}
含まれるサービス例
{svc.features.map((f, i) => (
{f}
))}
このサービスについて相談する →
); } function Footer() { return ( ); } function App() { const [mobileOpen, setMobileOpen] = useState(false); const [modalKey, setModalKey] = useState(null); useEffect(() => { const hash = window.location.hash; if (!hash) return; const id = hash.slice(1); const tryScroll = () => { const el = document.getElementById(id); if (el) { el.scrollIntoView({ behavior: 'auto', block: 'start' }); return true; } return false; }; if (tryScroll()) return; let attempts = 0; const interval = setInterval(() => { attempts += 1; if (tryScroll() || attempts > 30) clearInterval(interval); }, 100); return () => clearInterval(interval); }, []); return (
setMobileOpen((v) => !v)} /> setMobileOpen(false)} /> setModalKey(null)} />
); } ReactDOM.createRoot(document.getElementById('app')).render();