<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>METABEAT</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
--accent: #F40A64;
--accent-soft: rgba(244, 10, 100, 0.35);
--accent-strong: rgba(244, 10, 100, 0.9);
}
/* ==========
自作フォント
========== */
@font-face {
font-family: 'Groovian';
src: url('/fonts/Groovian-Alphabet.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ==========
ベース
========== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: radial-gradient(circle at top, #191624 0, #05030a 55%, #020107 100%);
color: #f9fafb;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
animation: bodyFadeIn 0.9s ease-out;
}
@keyframes bodyFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
a {
color: inherit;
text-decoration: none;
}
.page {
max-width: 1120px;
margin: 0 auto;
padding: 24px 20px 64px;
}
/* ==========
Header
========== */
header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
margin-bottom: 30px;
}
.logo-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.logo-img {
height: 40px; /* ロゴの見え方に応じて調整 */
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.85));
}
.logo-tagline {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.72;
}
.logo-tagline span {
color: var(--accent);
}
.nav {
display: flex;
gap: 18px;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.8;
}
.nav a {
position: relative;
padding-bottom: 4px;
}
.nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: linear-gradient(90deg, var(--accent), #ffffff);
transition: width 0.2s ease-out;
}
.nav a:hover::after {
width: 100%;
}
/* ==========
Hero
========== */
.hero {
display: grid;
grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.2fr);
gap: 32px;
align-items: center;
padding: 40px 0 32px;
}
.hero-kicker {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 10px;
}
.hero-kicker span {
color: var(--accent);
}
.hero-title {
font-family: 'Groovian', system-ui, sans-serif;
font-size: clamp(32px, 5vw, 46px);
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 14px;
}
.hero-title span {
display: block;
opacity: 0.8;
font-size: 0.9em;
}
.hero-text {
font-size: 14px;
max-width: 470px;
opacity: 0.86;
margin-bottom: 22px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 18px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid var(--accent-strong);
background:
radial-gradient(circle at top left, var(--accent-soft), transparent 60%);
color: #fdf2f8;
cursor: pointer;
gap: 8px;
transition:
transform 0.18s ease-out,
box-shadow 0.18s ease-out,
background 0.18s ease-out,
border-color 0.18s ease-out;
}
.btn:hover {
transform: translateY(-1px);
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.85),
0 0 24px var(--accent-soft);
background:
radial-gradient(circle at top left, rgba(244, 10, 100, 0.55), transparent 65%);
border-color: #ffffff;
}
.btn-ghost {
border-color: rgba(148, 163, 184, 0.8);
background: transparent;
color: #e5e7eb;
}
.btn-ghost:hover {
border-color: #ffffff;
background: rgba(15, 23, 42, 0.8);
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.9);
}
.hero-tagline {
margin-top: 18px;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.6;
}
.hero-tagline span {
color: var(--accent);
}
.hero-visual {
position: relative;
padding: 22px 18px;
border-radius: 22px;
border: 1px solid rgba(148, 163, 184, 0.42);
background:
radial-gradient(circle at top, var(--accent-soft), transparent 60%),
radial-gradient(circle at bottom, rgba(15, 23, 42, 0.95), #020617);
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.9),
0 0 64px rgba(15, 23, 42, 0.9);
overflow: hidden;
}
.hero-pill {
font-family: 'Groovian', system-ui, sans-serif;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 11px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(148, 163, 184, 0.7);
display: inline-flex;
gap: 8px;
align-items: center;
margin-bottom: 14px;
}
.hero-pill-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: radial-gradient(circle, #ffffff, var(--accent));
box-shadow: 0 0 12px rgba(244, 10, 100, 0.9);
}
.hero-wave {
font-family: 'Groovian', system-ui, sans-serif;
font-size: 24px;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.86;
margin-bottom: 6px;
}
.hero-meta {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.62;
margin-bottom: 16px;
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 11px;
}
.badge {
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
background: rgba(15, 23, 42, 0.9);
opacity: 0.92;
}
.hero-blur {
position: absolute;
inset: 40% -40% -40%;
background: radial-gradient(circle at top, rgba(248, 250, 252, 0.12), transparent 70%);
opacity: 0.7;
pointer-events: none;
}
/* ==========
Sections
========== */
.section {
padding: 40px 0 16px;
border-top: 1px solid rgba(148, 163, 184, 0.16);
margin-top: 24px;
}
.section-header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
}
.section-kicker {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.7;
}
.section-title {
font-family: 'Groovian', system-ui, sans-serif;
font-size: 18px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.section-title span {
color: var(--accent);
}
.section-desc {
font-size: 13px;
max-width: 420px;
opacity: 0.82;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 16px;
}
.card {
position: relative;
padding: 16px 14px 18px;
border-radius: 16px;
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.96));
border: 1px solid rgba(51, 65, 85, 0.9);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.9);
overflow: hidden;
transition:
transform 0.18s ease-out,
box-shadow 0.18s ease-out,
border-color 0.18s ease-out,
background 0.18s ease-out;
}
.card::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle at top left, rgba(244, 10, 100, 0.16), transparent 60%);
opacity: 0;
transition: opacity 0.2s ease-out;
pointer-events: none;
}
.card:hover {
transform: translateY(-4px);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.95),
0 0 26px rgba(15, 23, 42, 0.9);
border-color: rgba(244, 10, 100, 0.9);
}
.card:hover::before {
opacity: 1;
}
.card-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 4px;
}
.card-label span {
color: var(--accent);
}
.card-title {
font-family: 'Groovian', system-ui, sans-serif;
font-size: 15px;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 8px;
}
.card-body {
font-size: 13px;
opacity: 0.88;
}
.card-meta {
margin-top: 10px;
font-size: 11px;
opacity: 0.7;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
footer {
margin-top: 40px;
padding-top: 16px;
border-top: 1px solid rgba(15, 23, 42, 0.9);
font-size: 11px;
opacity: 0.6;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px;
}
/* ==========
Responsive
========== */
@media (max-width: 768px) {
header {
flex-direction: column;
align-items: flex-start;
}
.nav {
width: 100%;
flex-wrap: wrap;
}
.hero {
grid-template-columns: minmax(0, 1fr);
}
.hero-visual {
order: -1;
}
.logo-img {
height: 32px;
}
}
</style>
</head>
<body>
<div class="page">
<!-- Header -->
<header>
<div class="logo-block">
<!-- ロゴ画像のパスを自分の環境に合わせて変更 -->
<img src="/images/metabeat-logo.png" alt="METABEAT logo" class="logo-img" />
<div class="logo-tagline">
METABEAT · <span>GROOVIAN ALPHABET</span> & SONIC DESIGN
</div>
</div>
<nav class="nav">
<a href="#concept">CONCEPT</a>
<a href="#visual">VISUAL</a>
<a href="#works">WORKS</a>
</nav>
</header>
<!-- Hero -->
<main>
<section class="hero" id="top">
<div>
<div class="hero-kicker"><span>TOKYO</span> / 2024–</div>
<h1 class="hero-title">
Groovian Alphabets
<span>type system for music-driven brands.</span>
</h1>
<p class="hero-text">
METABEATのために設計した独自フォント「Groovian」。<br />
レーベルロゴ、イベントビジュアル、Webのヒーローまで、
一つのリズムで貫くためのタイポグラフィです。
</p>
<div class="hero-actions">
<button class="btn" type="button">
VIEW SPECIMEN
<span>↗</span>
</button>
<button class="btn btn-ghost" type="button">
CONTACT / BOOKINGS
</button>
</div>
<div class="hero-tagline">
<span>GROOVIAN</span> TYPE · DIRECT-TO-DISC · DIGITAL MOTION
</div>
</div>
<aside class="hero-visual" id="visual">
<div class="hero-pill">
<span class="hero-pill-dot"></span>
<span>Groovian Display</span>
</div>
<div class="hero-wave">METABEAT</div>
<div class="hero-meta">
CUSTOM ALPHABET · LATIN SET · RHYTHMIC CONSTRUCTION
</div>
<div class="hero-badges">
<div class="badge">DISPLAY USE</div>
<div class="badge">WEB + PRINT</div>
<div class="badge">MUSIC-DRIVEN BRANDING</div>
</div>
<div class="hero-blur"></div>
</aside>
</section>
<!-- Concept -->
<section class="section" id="concept">
<div class="section-header">
<div>
<div class="section-kicker">CONCEPT</div>
<h2 class="section-title">
Three strokes of <span>Groovian</span>
</h2>
</div>
<p class="section-desc">
METABEATのプロジェクト群を一つのビジュアル軸で束ねるためのアルファベット。
音源リリース、イベント、オンラインの全てで、同じグルーヴを感じさせることを狙っています。
</p>
</div>
<div class="cards">
<article class="card">
<div class="card-label"><span>01</span> / Rhythm</div>
<h3 class="card-title">Sonic Skeleton</h3>
<p class="card-body">
太さ・角度・マージンを、ビート感のある比率で設計。
ビジュアルだけで「テンポ」を感じるような骨格を持たせています。
</p>
<div class="card-meta">IDEAL FOR LOGOTYPE & TITLES</div>
</article>
<article class="card">
<div class="card-label"><span>02</span> / Motion</div>
<h3 class="card-title">Built for Movement</h3>
<p class="card-body">
フェードインやスクロールアニメーションと相性の良いシルエット。
動きの多いUIの中でも視認性を保つことを前提にしたアウトラインです。
</p>
<div class="card-meta">SCROLL / HOVER / LOOP</div>
</article>
<article class="card">
<div class="card-label"><span>03</span> / System</div>
<h3 class="card-title">Brand Core</h3>
<p class="card-body">
ラベルロゴ、フライヤー、ECの見出し、SNSサムネなど、
どこに置いても「METABEAT」と分かる、一貫性の核として機能します。
</p>
<div class="card-meta">LABEL, EVENTS, DIGITAL</div>
</article>
</div>
</section>
<!-- Works placeholder -->
<section class="section" id="works">
<div class="section-header">
<div>
<div class="section-kicker">PREVIEW</div>
<h2 class="section-title">
Applications <span>in use</span>
</h2>
</div>
<p class="section-desc">
ここには後から、ジャケットモックやWebキャプチャ、イベントビジュアルを差し込む想定です。
まずは文字組みとレイアウトだけを固めるためのプレースホルダーになっています。
</p>
</div>
<div class="cards">
<article class="card">
<div class="card-label"><span>WEB</span></div>
<h3 class="card-title">Landing / Hero</h3>
<p class="card-body">
今ご覧のようなヒーローで、大きくGroovianを打ち出すレイアウト。
ロゴとタイポで世界観を提示し、音源やプロジェクトへの導線を敷きます。
</p>
</article>
<article class="card">
<div class="card-label"><span>RECORD</span></div>
<h3 class="card-title">Sleeve & Label</h3>
<p class="card-body">
12インチスリーブ、センターレーベル、OBIといった物理媒体でもそのまま展開可能。
印刷時のコントラストを意識したストローク設計です。
</p>
</article>
<article class="card">
<div class="card-label"><span>SOCIAL</span></div>
<h3 class="card-title">Feed Visuals</h3>
<p class="card-body">
リリース告知、イベント告知、アーカイブ投稿など、
テキストだけで「METABEATらしさ」を出すための軸として活用できます。
</p>
</article>
</div>
</section>
</main>
<footer>
<span>© METABEAT / Groovian Alphabet</span>
<span>Design draft · Internal use</span>
</footer>
</div>
</body>
</html>