mingle-website/ja/about.html
68893236+KINDNICK@users.noreply.github.com 30cd06e9d6 feat: setup i18n build script and SEO optimizations
2026-03-01 14:56:52 +09:00

420 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="ja"><head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PPTNN6WD');</script>
<!-- End Google Tag Manager -->
<!-- Google tag (gtag.js) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-R0PBYHVQBS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-R0PBYHVQBS');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会社紹介 - Mingle Studio</title>
<!-- 파비콘 -->
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/ja/about.html">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studioは技術と創造力が融合したモーションキャプチャー制作空間です。2025年設立、仁川テクバレー所在。">
<meta name="keywords" content="밍글스튜디오, 회사소개, 모션캡쳐, 창작공간, 버추얼콘텐츠">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="会社紹介 - Mingle Studio">
<meta property="og:description" content="2025年設立の仁川唯一のモーションキャプチャー専門スタジオ。技術と創造力が融合したバーチャルコンテンツ制作空間です">
<meta property="og:url" content="https://minglestudio.co.kr/about.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
<meta property="og:site_name" content="밍글 스튜디오">
<meta property="og:image:alt" content="밍글 스튜디오 - 회사소개">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="회사소개 - 밍글 스튜디오">
<meta name="twitter:description" content="2025년 설립된 인천 유일의 모션캡처 전문 스튜디오. 기술과 창의력이 어우러진 버추얼 콘텐츠 창작 공간입니다">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
<!-- 폰트 -->
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- Icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/about.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/about.html">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/about.html">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/about.html">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/about.html">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/about.html">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a href="#main-content" class="skip-to-content" data-i18n="common.skipToContent">本文へスキップ</a>
<!-- 헤더 -->
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/ja/">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고">
<span data-i18n="header.studioName">Mingle Studio</span>
</a>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="/ja/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/ja/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/ja/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/ja/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/ja/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/ja/qna" class="nav-link" data-i18n="header.nav.qna">Q&amp;A</a></li>
</ul>
<div class="nav-actions">
<div class="lang-switcher">
<button class="lang-btn" aria-label="言語選択" data-i18n-aria="header.langSelect">
<span class="lang-current">KO</span>
<svg class="lang-chevron" viewBox="0 0 10 6" width="10" height="6" aria-hidden="true">
<path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<ul class="lang-dropdown">
<li><button data-lang="ko">🇰🇷 한국어</button></li>
<li><button data-lang="en">🇺🇸 English</button></li>
<li><button data-lang="zh">🇨🇳 中文</button></li>
<li><button data-lang="ja">🇯🇵 日本語</button></li>
</ul>
</div>
<button class="theme-toggle" id="themeToggle" aria-label="다크 모드 전환" title="다크/라이트 모드 전환">
<div class="theme-toggle-thumb">
<svg class="theme-toggle-icon theme-toggle-icon--sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="theme-toggle-icon theme-toggle-icon--moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
</button>
</div>
<button class="hamburger" aria-label="메뉴 열기" aria-expanded="false" aria-controls="nav-menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</div>
<main id="main-content">
<!-- 페이지 헤더 -->
<section class="page-header page-header--hero">
<div class="page-header-bg" aria-hidden="true">
<img src="/images/studio/넓은 모션 캡쳐 공간 002.webp" alt="" loading="eager">
</div>
<div class="container">
<h1 data-i18n="about.pageHeader.title">About Us</h1>
<p data-i18n="about.pageHeader.desc">技術と創造力、情熱が一つに混ざり合い新しい価値が生まれる空間</p>
</div>
</section>
<!-- 회사 소개 -->
<section class="section">
<div class="container">
<div class="company-info">
<div class="info-grid reveal">
<div class="info-item">
<h3 data-i18n="about.info.companyName">会社名</h3>
<p data-i18n="about.info.companyNameValue">Mingle Studio</p>
</div>
<div class="info-item">
<h3 data-i18n="about.info.foundingDate">設立日</h3>
<p data-i18n="about.info.foundingDateValue">2025年7月15日</p>
</div>
<div class="info-item">
<h3 data-i18n="about.info.slogan">スローガン</h3>
<p data-i18n="about.info.sloganValue">"みんなが交わる楽しい創作空間"</p>
</div>
<div class="info-item full-width">
<h3 data-i18n="about.info.meaning">意味</h3>
<p data-i18n="about.info.meaningValue">Mingle Studioは技術者とクリエイター、そして視聴者が共に交わるバーチャルコンテンツ制作空間です。最先端光学式モーションキャプチャー技術でバーチャルキャラクターの生き生きとした感情と動きを捉え、新しい世代のデジタルパフォーマンスを実現します。</p>
</div>
</div>
</div>
<div class="about-content stagger-children">
<div class="card card--flat reveal" data-reveal="fade">
<h2 data-i18n="about.companyIntro.title">会社紹介</h2>
<p data-i18n="about.companyIntro.desc1">Mingle Studioは、クリエイターと技術、人と人との「交わり」を通じて新しいコンテンツを作り上げるモーションキャプチャー基盤の創作空間です。</p>
<p data-i18n="about.companyIntro.desc2">設立以来、どなたでも気軽にご利用いただけるスタジオレンタルサービスを中心に、バーチャルコンテンツ制作環境を提供しています。</p>
</div>
<div class="card card--flat reveal" data-reveal="fade">
<h2 data-i18n="about.visionMission.title">ビジョン &amp; ミッション</h2>
<div class="vision-mission">
<div class="vm-item">
<h3><i class="fa-solid fa-bullseye" aria-hidden="true"></i> <span data-i18n="about.visionMission.visionTitle">ビジョン</span></h3>
<p data-i18n="about.visionMission.visionDesc">全てのクリエイターが技術的な制約なく想像を現実にできる創作エコシステムの構築</p>
</div>
<div class="vm-item">
<h3><i class="fa-solid fa-rocket" aria-hidden="true"></i> <span data-i18n="about.visionMission.missionTitle">ミッション</span></h3>
<p data-i18n="about.visionMission.missionDesc">最先端モーションキャプチャー技術を通じてクリエイターのアイデアを生き生きとしたコンテンツに変換し、新しいデジタル体験を提供</p>
</div>
</div>
</div>
<div class="card card--flat reveal" data-reveal="fade">
<h2 data-i18n="about.history.title">沿革</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date" data-i18n="about.history.date1">2025年7月15日</div>
<div class="timeline-content">
<h4 data-i18n="about.history.event1Title">Mingle Studio設立</h4>
<p data-i18n="about.history.event1Desc">Mingle Studio会社設立</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date" data-i18n="about.history.date2">2025年8月1日</div>
<div class="timeline-content">
<h4 data-i18n="about.history.event2Title">スタジオオープン</h4>
<p data-i18n="about.history.event2Desc">OptiTrackシステム構築完了およびスタジオレンタルサービス開始</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 팀 소개 -->
<section class="team-section section bg-light">
<div class="container">
<div class="section-header">
<h2 data-i18n="about.team.title">Our Team</h2>
<p data-i18n="about.team.desc">各分野の専門家が協力してコンテンツ制作をサポートします</p>
</div>
<div class="team-grid stagger-children">
<div class="team-card reveal" data-reveal="zoom">
<div class="team-avatar">
<img src="/images/profile/제이제이.png" alt="김희진 프로필">
</div>
<h3 data-i18n="about.team.member1Name">김희진</h3>
<p class="team-nickname">JAYJAY</p>
<p class="team-role" data-i18n="about.team.member1Role">代表 / 3Dアーティスト</p>
<p class="team-desc" data-i18n="about.team.member1Desc">背景・リソース制作、人事およびプロジェクト管理</p>
</div>
<div class="team-card reveal" data-reveal="zoom">
<div class="team-avatar">
<img src="/images/profile/카닉.png" alt="김광진 프로필">
</div>
<h3 data-i18n="about.team.member2Name">김광진</h3>
<p class="team-nickname">KINDNICK</p>
<p class="team-role" data-i18n="about.team.member2Role">CTO / テクニカルディレクター</p>
<p class="team-desc" data-i18n="about.team.member2Desc">スタジオ全体の技術運営、モーションキャプチャー機材管理、音響システム、エンジンプログラミング</p>
</div>
<div class="team-card reveal" data-reveal="zoom">
<div class="team-avatar">
<img src="/images/profile/야모.png" alt="이승민 프로필">
</div>
<h3 data-i18n="about.team.member3Name">이승민</h3>
<p class="team-nickname">YAMO</p>
<p class="team-role" data-i18n="about.team.member3Role">CCO / コンテンツディレクター</p>
<p class="team-desc" data-i18n="about.team.member3Desc">キャプチャーディレクション、アクターモーションクリーンアップ、カメラムービング、パフォーマンス演出</p>
</div>
</div>
</div>
</section>
<!-- 파트너 스트리머 -->
<section class="partner-streamer-section section">
<div class="container">
<div class="section-header">
<h2 data-i18n="about.partner.title">Partner Streamer</h2>
<p data-i18n="about.partner.desc">Mingle Studioと共にコンテンツを制作するクリエイター</p>
</div>
<div class="streamer-grid stagger-children">
<div class="streamer-card reveal" data-reveal="zoom">
<div class="streamer-avatar">
<img src="/images/partners streamer/밍글 파트너 스트리머 구슬요.webp" alt="구슬요 프로필" loading="lazy">
</div>
<h3>구슬요</h3>
<p class="streamer-handle">@beadyo97</p>
<p class="streamer-desc" data-i18n="about.partner.streamer1Desc">コミュニケーション、歌、ゲーム、VRChatなど多彩なコンテンツを披露するバーチャルストリーマー。SOOPを中心に活発に活動し、Mingle Studioのモーションキャプチャー技術と共に新しいバーチャルコンテンツを制作しています。</p>
<div class="streamer-tags">
<span class="streamer-tag">VTuber</span>
<span class="streamer-tag">노래</span>
<span class="streamer-tag">게임</span>
<span class="streamer-tag">VRChat</span>
<span class="streamer-tag">소통</span>
</div>
<div class="streamer-links">
<a href="https://ch.sooplive.co.kr/beadyo97" target="_blank" rel="noopener">SOOP</a>
<a href="https://www.youtube.com/@beadyo97" target="_blank" rel="noopener">YouTube</a>
<a href="https://www.instagram.com/bead.yo" target="_blank" rel="noopener">Instagram</a>
<a href="https://x.com/beadyo97" target="_blank" rel="noopener">X</a>
</div>
</div>
</div>
</div>
</section>
<!-- 핵심 가치 -->
<section class="values-section section">
<div class="container">
<div class="section-header">
<h2 data-i18n="about.values.title">Core Values</h2>
<p data-i18n="about.values.desc">Mingle Studioが目指すコアバリュー</p>
</div>
<div class="values-grid stagger-children">
<div class="value-item reveal" data-reveal="up">
<div class="value-icon"><i class="fa-solid fa-handshake" aria-hidden="true"></i></div>
<h3 data-i18n="about.values.collaboration">コラボレーション</h3>
<p data-i18n="about.values.collaborationDesc">技術者とクリエイターが共に生み出すシナジー</p>
</div>
<div class="value-item reveal" data-reveal="up">
<div class="value-icon"><i class="fa-solid fa-lightbulb" aria-hidden="true"></i></div>
<h3 data-i18n="about.values.innovation">イノベーション</h3>
<p data-i18n="about.values.innovationDesc">最新技術で新しい創作の可能性を提示</p>
</div>
<div class="value-item reveal" data-reveal="up">
<div class="value-icon"><i class="fa-solid fa-palette" aria-hidden="true"></i></div>
<h3 data-i18n="about.values.creativity">クリエイティビティ</h3>
<p data-i18n="about.values.creativityDesc">想像を現実にするクリエイティブソリューション</p>
</div>
<div class="value-item reveal" data-reveal="up">
<div class="value-icon"><i class="fa-solid fa-star" aria-hidden="true"></i></div>
<h3 data-i18n="about.values.quality">クオリティ</h3>
<p data-i18n="about.values.qualityDesc">最高水準のモーションキャプチャー品質の追求</p>
</div>
</div>
</div>
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder">
<!-- 공통 푸터 컴포넌트 -->
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.companyInfo">会社情報</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">代表: 김희진</li>
<li data-i18n="footer.businessNumber">事業者登録番号: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">お問い合わせ</h3>
<ul class="footer-list">
<li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
<li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> <span data-i18n="footer.businessInquiry">ビジネスお問い合わせ</span></a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> <span data-i18n="footer.reservationInquiry">ご予約お問い合わせ</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">アクセス</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">仁川広域市富平区主夫吐路236</span></li>
<li data-i18n="footer.addressDetail">仁川テクバレーU1センター A棟 B105号</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p data-i18n="footer.copyright">© 2025 Mingle Studio. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="site-footer" id="backupFooter">
<div class="container">
<div class="footer-grid">
<div class="footer-section">
<h3 class="footer-heading">회사 정보</h3>
<ul class="footer-list">
<li><strong>밍글 스튜디오</strong></li>
<li>대표: 김희진</li>
<li>사업자등록번호: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading">연락처</h3>
<ul class="footer-list">
<li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
<li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading">오시는 길</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
<li>인천테크노밸리 U1센터 A동 B105호</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 밍글 스튜디오. All rights reserved.</p>
</div>
</div>
</footer>
<!-- JavaScript -->
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body></html>