/* 下島 海 — Personal Portfolio * Design: dark lapis-lazuli navy, gold + blue accent (Claude Design, 2026-08-07刷新) * Content: 職務経歴書 + 本セッション合意内容より実情報に差し替え済み * 注意: 理念・代表メッセージは一次ドラフト。本人の言葉での最終確認が必要 */ const { useState, useEffect } = React; const GAS_WEB_APP_URL = 'https://script.google.com/macros/s/AKfycbz90ee-u5gTX96j_l1hfE2zom3UMYVHV8a_MZNIclMdifTMVZkXaEYi4tgd4q7GKw9KBA/exec'; const CONTACT_TYPES = ['構想', '戦略', '戦術', '実装', '運用', 'その他']; const MOBILE_BREAKPOINT = 900; function useIsMobile() { const [isMobile, setIsMobile] = useState( typeof window !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT ); useEffect(() => { const onResize = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); return isMobile; } /* ---------- data: 概要 ---------- */ const PROFILE = [ { label: '氏名', value: '下島 海（したしま かい）' }, { label: '屋号', value: 'LaZri（ラズリ）' }, { label: '拠点', value: '東京都（フルリモート対応）' }, { label: '専門領域', value: 'プロダクトマネジメント／プロジェクトマネジメント／DXコンサルティング／AI駆動開発・マーケティング', }, { label: '主な技術', value: 'Claude Code（MCP活用）、Google Cloud Platform、Python、Playwright ほか', }, { label: '対応業種', value: 'ゲーム・自動車・スポーツエンタメ・自治体・ヘルスケア・保険・航空 ほか', }, ]; /* ---------- data: 実績（本業） ---------- */ const JISSEKI_BIZCO_SUMMARY = '新規事業の0→1立ち上げから、10年選手の長寿タイトル運用まで。ゲーム・自動車・スポーツ、3つの事業ドメインで一貫して推進。'; const JISSEKI_BIZCO = [ { title: '複数タイトル横断の地方コラボ企画統括', body: '自社プラットフォーム上で運営する複数タイトルを横断し、地方コラボ企画を統括。現地訪問がゲームユーザーの喜びになるUXを設計し、企画骨子を各タイトルへ展開・実装。1ヶ月にわたる地方創生型コラボを実現。', stages: ['構想', '戦術', '実装', '運用'], }, { title: '某長期運営タイトルのV字回復', body: '10年選手の長寿ゲームタイトルの運営責任者として、施策の仕組化と組織の自走化を推進し売上・利益をV字回復。社内表彰（個人・チーム）を受賞。', stages: ['戦略', '戦術', '運用'], }, { title: '某配車アプリの新機能PRD作成', body: '予約配車機能・空車待ち機能のPRD作成、開発チームへの要件伝達を主導。', stages: ['戦術', '実装'], }, { title: '某NFT新規事業の0→1立ち上げ', body: 'プロ野球モチーフのNFTカード事業を起案から半年でリリース。事業構想〜経営会議承認〜開発〜ローンチを一気通貫で完遂。', stages: ['構想', '戦略', '戦術', '実装'], }, ]; const JISSEKI_CONSULTING_SUMMARY = '自治体・ヘルスケア・保険・自動車・興行・航空など、9業界10件のコンサルティングプロジェクトをPM/PMOとして推進。'; const JISSEKI_CONSULTING = [ { title: '自治体向けBPOシステム開発PMO', body: 'As-Is/To-Be業務フローをもとにRFPを作成し、約20社ベンダースクリーニングを経て3社選定までをPMOとして推進。', stages: ['構想', '戦術'], }, { title: 'ヘルスケアB2B新規事業共創', body: 'エキスパートインタビューから事業コンセプトの具体化、事業企画書作成までをPMOとして推進。', stages: ['構想', '戦略'], }, { title: '大手保険代理店 基幹システム刷新', body: '複数部署へのヒアリングから導出したAs-Is業務をもとにTo-Be業務を整理し、そのギャップを埋めるための大方針を策定。大方針を実現するためのシステム構想・グランドデザインまでをPMOとして推進。', stages: ['構想', '戦略'], }, { title: '航空会社 業務効率化・営業DX支援', body: '現状ヒアリングから課題を洗い出し、AI推進に向けた吸い上げから実装までの交通整理を実施。ダッシュボード構築・運用ルールの策定までをPMOとして推進。', stages: ['構想', '実装', '運用'], }, { title: '新設アリーナのDX戦略〜実装支援', body: '新設アリーナのDX戦略を、ステークホルダーの要求分析から要求仕様書作成、ベンダー選定・RFP作成までをPMOとして推進。', stages: ['構想', '戦略', '戦術'], }, { title: '既存ホールのリニューアル支援・ブランド戦略策定', body: '現状分析から導出したあるべき定量・定性目標を策定。目標を実現するための施策群を洗い出し、優先順位付けからロードマップ策定までをPMOとして推進。', stages: ['構想', '戦略', '戦術'], }, { title: '大規模イベントの集客・売上最大化支援', body: '感覚的な運営からの脱却を目指し、複数の観点から仮説を設定。デスクトップリサーチやインタビュー等の定量・定性調査で検証し、施策の洗い出しから優先度付け、ロードマップ策定までをPMOとして推進。', stages: ['戦略', '戦術'], }, { title: '格闘技プラットフォーム構想策定・PMO', body: '壁打ちを重ねながら構想を策定し、経営会議向け資料作成から会議通過までを推進。要件定義から開発を管理し、ベータ版リリース後はデジタルマーケティング・運用までを担当。', stages: ['戦略', '戦術', '実装'], }, { title: 'スポーツチーム向けデータダッシュボード構築', body: 'ヒアリングからユースケースを洗い出して優先順位を決定し、PoC設計・推進からリリースまでをPMOとして推進。', stages: ['戦術', '実装'], }, { title: '防災設備メーカー Salesforce刷新・営業DX支援', body: '基幹システムとSalesforceのデータ連携強化を軸に、要件定義から全体計画書の策定までをPMOとして推進。', stages: ['戦略', '戦術'], }, { title: 'セールス活動', body: 'アタックリストを作成し、SWOT分析ベースのディスカッション型商談を展開。商談資料マスターを構築し、アポ〜初回商談〜デリバリーまでをPMOとして推進。', stages: ['運用'], }, ]; const JISSEKI_OUTSOURCE_SUMMARY = '構想から運用まで、業務委託でAIを活用しながら幅広く支援。'; const JISSEKI_OUTSOURCE = [ { category: 'AIエージェント基盤構築', body: 'Cloud Run・Windows VM・MCPサーバーを組み合わせたAIエージェント基盤を個人で設計・構築・運用。以下すべての実装を支える基盤。', stages: ['構想', '実装', '運用'], }, { category: '投資運用自動化', body: '投資分析・情報収集・レポーティングの自動化基盤を個人で構築し、運用。', stages: ['戦術', '実装', '運用'], }, { category: 'SEO・広告運用', body: '個人事業主・中小企業向けに、検索広告の設計・運用とSEOの現状分析・改善提案・実装までを一気通貫で支援。', stages: ['戦術', '実装', '運用'], }, { category: '越境EC最適化', body: 'eBay等の既存ECチャネルでの受注処理自動化・送料設計・SEO最適化・計測基盤の構築を実装。', stages: ['実装', '運用'], }, { category: '業務効率化・自動化', body: 'Google Workspace Marketplace向けの業務自動化SaaS（帳票自動作成・カレンダー同期・メール差込）を開発。', stages: ['実装'], }, { category: 'デジタルプロダクト開発', body: '開発ハーネス（CLAUDE.md設計・Hook集・PRD/SPECテンプレ）や記事など、自身の知見を活かしたデジタルプロダクトを作成。', stages: ['実装'], }, ]; /* ---------- data: 強み ---------- */ const SUPPORT_STAGES = [ { stage: '構想', en: 'CONCEPT', items: [ '課題と目的の言語化', '市場調査', 'ステークホルダーインタビュー', '壁打ち', ], }, { stage: '戦略', en: 'STRATEGY', items: ['論点整理', '仮説策定', '検証による方向性の確定'], }, { stage: '戦術', en: 'TACTICS', items: ['施策の洗い出し', '優先順位付け', 'RFP作成／ベンダー選定'], }, { stage: '実装', en: 'EXECUTION', items: ['開発', 'システム構築'], }, { stage: '運用', en: 'OPERATIONS', items: ['デジタルマーケティング', '運用保守', '営業'], }, ]; /* ---------- shared ---------- */ const Container = ({ children, style }) => (
{children}
); const SectionLabel = ({ no, ja, en }) => { const isMobile = useIsMobile(); if (isMobile) { return (
{no && ( {no} )} {en}

{ja}

); } return (
{no}

{ja}

{en}
); }; /* ---------- Nav ---------- */ const NAV_ITEMS = [ { id: 'tsuyomi', ja: '支援内容', en: 'Support' }, { id: 'jisseki', ja: '実績', en: 'Works' }, { id: 'message', ja: '代表メッセージ', en: 'Message' }, { id: 'profile', ja: '概要', en: 'Profile' }, { id: 'renraku', ja: '連絡先', en: 'Contact' }, ]; function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const isMobile = useIsMobile(); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { if (!isMobile) setOpen(false); }, [isMobile]); const navBg = scrolled || open ? 'rgba(16,27,48,0.95)' : 'transparent'; return ( ); } /* ---------- Hero ---------- */ function Hero() { const isMobile = useIsMobile(); return (
{(() => { const keyVisual = (
構想から運用まで、一気通貫。

構想〜戦略〜戦術〜実装〜運用まで、
AIを活用して必要な分だけ伴走します。

); return isMobile ? (
{keyVisual}
) : ( {keyVisual} ); })()}
); } /* ---------- 代表メッセージ ---------- */ function Message() { const isMobile = useIsMobile(); return (
下島 海
KAI SHITASHIMA
下島海

大企業で磨いた「一気通貫」の力を、中小企業の現場へ。

そう考えて、私は業務委託という形で個人での支援を始めました。

事業会社やコンサルティングファームでは、要件定義から実装、そして運用まで、 上流から現場まで自分で手を動かしながら一貫して進めるスタイルで仕事をしてきました。 個人事業主や中小企業の方から相談を受けるようになって気づいたのは、 このスタイルこそ、リソースが限られた事業者にとって一番効くということです。 まず今あるリソースでできることを見極めてやり切り、本当に足りない部分だけを 補っていく。そのやり方の方が、結果的に多くの事業者にとって前に進みやすい はずだと思っています。

だからこそ、業務委託・スポットという小さな単位でも、構想から実装・運用までを 一気通貫でお引き受けしています。

その根っこにあるのは、学生時代から続けている格闘技で培った、ことに向き合って 最後までやり切る感覚かもしれません。今も週1で稽古を続けながら、フットサルや ゴルフ、ジムでも体を動かしています。

); } /* ---------- 概要 ---------- */ function Profile() { const isMobile = useIsMobile(); return (
{PROFILE.map((row, i) => (
{row.label}
{row.value}
))}
); } /* ---------- 実績 ---------- */ function JissekiCard({ item }) { const isMobile = useIsMobile(); const [open, setOpen] = useState(false); const expanded = !isMobile || open; return (
setOpen((v) => !v) : undefined} style={{ background: 'var(--card)', border: '1px solid var(--rule)', padding: '24px 24px 22px', display: 'flex', flexDirection: 'column', gap: 10, ...(isMobile ? { minHeight: 118, justifyContent: 'flex-start', cursor: 'pointer' } : {}), }} > {item.stages && (
{item.stages.map((st) => ( {st} ))}
)} {item.org && (
{item.org}
)}

{item.title || item.category}

{item.needsConfirm && ( 要確認 )} {isMobile && ( ▼ )}
{expanded && (

{item.body}

)}
); } function JissekiGroup({ ja, en, summary, items }) { const isMobile = useIsMobile(); return (
{ja} {en}

{summary}

{items.map((item, i) => ( ))}
); } function Jisseki() { return (
); } /* ---------- 強み ---------- */ function SupportCallout({ n, items, bg, top }) { return (
{n} WHAT WE DO
); } function SupportFoundation({ mobile }) { return (
GENERATIVE AI / FOUNDATION
{mobile ? ( <> 構想〜運用のどの工程にも、
AIを組み込んで推進します。 ) : ( '構想〜運用のどの工程にも、AIを組み込んで推進します。' )}
); } function Tsuyomi() { const isMobile = useIsMobile(); return (

構想から運用まで、一本の流れとして伴走します。

{isMobile ? (
{SUPPORT_STAGES.map((s, i) => (
{String(i + 1).padStart(2, '0')} {s.stage} {s.en}
    {s.items.map((it) => (
  • {it}
    • ))}
))}
) : (
{/* 上向きの枝（構想・戦術） */}
{SUPPORT_STAGES.map((s, i) => i % 2 === 0 ? (
) : (
) )}
{/* ベースライン */}
{SUPPORT_STAGES.map((s, i) => (
{String(i + 1).padStart(2, '0')} {s.stage}
{s.en}
))}
{/* 下向きの枝（戦略・実装） */}
{SUPPORT_STAGES.map((s, i) => i % 2 === 1 ? (
) : (
) )}
)}
); } /* ---------- 連絡先 ---------- */ const CONTACT_FIELD_STYLE = { width: '100%', boxSizing: 'border-box', background: 'var(--card)', border: '1px solid var(--rule)', borderRadius: 6, color: 'var(--ink)', padding: '10px 12px', fontSize: 14, fontFamily: 'inherit', }; function FormField({ label, required, children }) { return ( ); } function Renraku() { const [form, setForm] = useState({ type: '', company: '', department: '', email: '', message: '', website: '', // ハニーポット（実ユーザー・スクリーンリーダーからは不可視） }); const [status, setStatus] = useState('idle'); // idle | submitting | success | error const [errors, setErrors] = useState([]); function update(key) { return (e) => setForm((f) => ({ ...f, [key]: e.target.value })); } function validate() { const errs = []; if (!CONTACT_TYPES.includes(form.type)) { errs.push('お問い合わせの種類を選択してください。'); } if (!form.company.trim()) { errs.push('貴社名は必須です。'); } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) { errs.push('メールアドレスの形式が不正です。'); } if (!form.message.trim()) { errs.push('お問い合わせ内容は必須です。'); } return errs; } async function handleSubmit(e) { e.preventDefault(); if (!GAS_WEB_APP_URL) { setStatus('error'); setErrors(['フォーム準備中です。しばらくしてから再度お試しください。']); return; } const clientErrors = validate(); if (clientErrors.length) { setStatus('error'); setErrors(clientErrors); return; } setStatus('submitting'); setErrors([]); try { const res = await fetch(GAS_WEB_APP_URL, { method: 'POST', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify({ action: 'submitContact', params: form }), redirect: 'follow', }); if (!res.ok) throw new Error('HTTP ' + res.status); const data = JSON.parse(await res.text()); if (data.success) { setStatus('success'); } else { setStatus('error'); setErrors( data.errors || [ data.error || '送信に失敗しました。時間をおいて再度お試しください。', ] ); } } catch (err) { setStatus('error'); setErrors(['送信に失敗しました。時間をおいて再度お試しください。']); } } return (
GET IN TOUCH ↓
{status === 'success' ? (
お問い合わせいただきありがとうございます。内容を確認の上、折り返しご連絡いたします。
) : (

現状・課題・ご相談内容をお送りください。
内容を確認の上、折り返しご連絡いたします。