// home.jsx — Top page const HOME_HERO_COPIES = { business: { pre: 'ビジネスを', rotate: ['前進させる', '加速させる', '構造化する', 'デザインする'], post: 'ウェブ制作。', sub: '戦略・デザイン・開発・運用、そしてAI活用までを一貫して。中小企業のデジタル成長を、堅実なパートナーとして伴走します。' }, growth: { pre: '成果につながる', rotate: ['デジタル戦略', 'コーポレート設計', 'ブランド体験', 'コンテンツ運用'], post: 'を、東京から。', sub: 'ウェブを「公開して終わり」にしない。事業課題に踏み込み、KPIに紐付くサイトを、設計から運用までワンストップで。' }, craft: { pre: '企業価値を高める', rotate: ['ウェブ戦略', '情報設計', 'CMS構築', 'SEO設計'], post: '。', sub: '小規模・中堅企業のために、過剰でも安すぎでもない、ちょうどよい品質と速度で。長くお付き合いできるパートナーを目指しています。' } }; function HeroRotator({ words }) { const [i, setI] = useState(0); const [phase, setPhase] = useState('show'); // show -> exit -> enter -> show useEffect(() => { let t1, t2; const tick = () => { setPhase('exit'); t1 = setTimeout(() => { setI((v) => (v + 1) % words.length); setPhase('enter'); t2 = setTimeout(() => setPhase('show'), 30); }, 550); }; const interval = setInterval(tick, 2600); return () => { clearInterval(interval); clearTimeout(t1); clearTimeout(t2); }; }, [words]); // measure widest word for layout stability. // CJK glyphs are ~1em wide (vs ~0.5ch in proportional fonts), so ch // significantly under-allocates. Use em + a small safety pad. const widest = words.reduce((a, b) => (a.length > b.length ? a : b), ''); return ( {words[i]} ); } /* ----------------------------------------------------- * * HeroArt — abstract DX/AI illustration behind the hero * * uses brand vocabulary (square/triangle/circle + nodes) * * ----------------------------------------------------- */ function HeroArt() { return ( ); } function Home({ heroKey }) { const copy = HOME_HERO_COPIES[heroKey] || HOME_HERO_COPIES.business; return (
{/* HERO */}
VARIETIES, INC. EST. 2021 — TOKYO, JP
WEB STUDIO / DIGITAL PARTNER FOR SMALL & MID-SIZED COMPANIES

{copy.pre} {copy.post}

{copy.sub}

{/* MARQUEE */}
STRATEGY · WEB DESIGN · DEVELOPMENT · CMS · EC · SEO · CONTENT · AI INTEGRATION · ANALYTICS · MAINTENANCE · STRATEGY · WEB DESIGN · DEVELOPMENT · CMS · EC · SEO · CONTENT · AI INTEGRATION · ANALYTICS · MAINTENANCE ·
{/* SERVICES */}
Services / 01

01事業を支える、6つの基盤。

企業のフェーズと目的に合わせ、必要なものを過不足なく。
すべてのサービスは戦略・設計・運用までをひと続きで提供します。

{[ { n: '01', t: 'コーポレートサイト制作', d: '企業価値を伝える、骨太な情報設計とブランド体験。CMS実装まで。' }, { n: '02', t: 'LP制作', d: 'CV最大化を起点としたコピー、構成、デザインの一気通貫制作。' }, { n: '03', t: 'ECサイト制作', d: 'Shopify / 自社EC構築。決済・物流・運用フローまで一括設計。' }, { n: '04', t: 'Webマーケティング支援', d: '広告運用、CRM設計、改善仮説の立案。データに根拠を置く。' }, { n: '05', t: 'SEO対策', d: '検索意図のリサーチからコンテンツ運用まで。中長期で資産を積む。' }, { n: '06', t: '保守運用', d: '月次レポート、改善提案、AB検証、CMS運用。継続支援が前提。' }, ].map((s) => (
{s.n}
{s.t}
{s.d}
{e.preventDefault();navigate('services', `svc-${s.n}`);}}> 詳しく見る →
))}
{/* STRENGTHS */}
Strengths / 02

02選ばれる、4つの理由。

派手さよりも、確かな成果と長く続く関係を重視しています。
私たちが大切にしているのは、堅実なものづくりと真摯な伴走です。

{[ { n: '01', t: '少人数・直取引', b: '担当が変わらず、最初の打ち合わせから運用まで同じチームで対応します。意思決定が速く、責任の所在が明快です。' }, { n: '02', t: '事業に踏み込む設計', b: '見栄えではなく成果から逆算します。KPIと顧客課題を整理してから、はじめてデザインを始めます。' }, { n: '03', t: 'AI活用を当たり前に', b: 'コンテンツ生成、リサーチ、運用効率化までAIを内製ツールに組み込み、人手では届かない速度を実現します。' }, { n: '04', t: '長期で関わる前提', b: '公開がゴールではありません。改善仮説と運用負荷を考えた上で、技術選定とCMS設計を行います。' }, ].map((s) => (
{s.n}

{s.t}

{s.b}

))}
{/* AI / DX section */}
AI / DX / 03

「AIで何ができるか」ではなく、
「何を任せるか」を一緒に決めます。

生成AIや自動化ツールが業務をどう変えるかは、企業ごとに違います。私たちは、現場の業務を分解し、AIに置き換えられる部分と人が判断すべき部分を切り分け、コンパクトに導入支援します。

01 — DISCOVERY

業務棚卸し・AI適用診断

定型業務、検索、文書作成、要約、画像処理など、AI化のROIが見込める領域を可視化します。

02 — INTEGRATION

サイトへのAI機能組み込み

FAQボット、社内ナレッジ検索、コンテンツ自動生成、レコメンドエンジンの設計・実装。

03 — OPERATION

運用フローの再設計

記事生成、SNS発信、社内文書整備など、AIを組み込んだ運用ルールと教育設計。

{/* PROCESS */}
Process / 04

045つの工程で、確実に進めます。

ヒアリングから運用まで、各工程ごとに合意を取りながら進行。
「気付いたら違うものが上がってきた」を起こしません。

{[ { n: '01', t: 'ヒアリング', en: 'Discovery', d: '事業状況、課題、KPI、競合、技術制約までを丁寧に整理します。' }, { n: '02', t: '戦略設計', en: 'Strategy', d: '情報設計とサイト構造、コンテンツ方針を決定し、合意形成します。' }, { n: '03', t: 'デザイン', en: 'Design', d: 'ブランドのトーンに沿ったUIを設計。プロトタイプで体感確認。' }, { n: '04', t: '開発・実装', en: 'Build', d: '保守性の高いコードとCMSで実装。SEO・速度・アクセシビリティ準拠。' }, { n: '05', t: '運用・改善', en: 'Operate', d: '公開後の改善仮説とAB検証を月次サイクルで回します。' }, ].map((s) => (
{s.n}
{s.t} {s.en}
{s.d}
))}
{/* FAQ */}
FAQ / 05

05よくあるご質問。

ご検討時にいただくことの多い質問をまとめました。記載のない内容も、お気軽にお問い合わせください。

{/* CTA */}

次のウェブを、
一緒に考えませんか。

初回ご相談は無料です。
事業背景をお伺いした上で、御見積と進行プランをご提示します。

お電話でも承ります 050-1793-8686
{e.preventDefault();navigate('contact');}}> お問い合わせフォーム
); } const FAQ_ITEMS = [ { q: '小規模な会社ですが依頼できますか？', a: 'はい、私たちが最も得意としているのは、まさにそのフェーズの企業様です。少人数で意思決定が速い分、過不足のない設計と適切な投資をご一緒に検討できます。' }, { q: '制作費用の目安を教えてください。', a: 'コーポレートサイトで20万円〜、LPで5万円〜、ECサイトで30万円〜が目安です。要件によって変動しますので、初回ご相談時に概算と内訳をお出しします。' }, { q: '制作期間はどれくらいかかりますか？', a: 'ヒアリングから公開まで、コーポレートサイトで1〜3ヶ月、LPで4〜6週間が標準です。スピード優先のご相談にも個別対応しています。' }, { q: '公開後の運用や保守もお願いできますか？', a: 'はい、月額保守プラン（月2万円〜）と、改善運用プラン（月10万円〜）をご用意しています。CMS更新代行から、改善提案、AB検証まで対応可能です。' }, { q: '既存サイトのリニューアルだけでもお願いできますか？', a: 'はい、リニューアル案件は私たちの得意領域です。現状サイトの分析と棚卸しから着手し、移行と公開、SEO引き継ぎまで責任を持って実施します。' }, ]; function FAQ() { const [open, setOpen] = useState(0); return (
{FAQ_ITEMS.map((it, i) => (

{it.a}

))}
); } Object.assign(window, { Home });