EventOverseas / NLPicked 2026.09.26

No Art

イベント / ライブのWebデザイン参考 — 音楽レーベル・イベント主催

出典: noartmusic.com

Editor's note — 編集部の視点

出演者は明かさず、会場の空気だけ見せてくる。

アムステルダムの音楽レーベル兼イベント主催No Artのサイトは、全画面の映像と手書きのロゴ、等幅の大文字だけで組み、ラインナップより“その場にいる感覚”で人を呼んでいる。

BrunoStructure & IA

UPCOMING EVENTSのすぐ後に地球儀、そのあとにSHOPなんだよね。次はいつか、どこでやってるか、会場で何を着るか。行くと決めた人が次に知りたいことの順番そのまま。これはうまい。

1FVは全画面の映像に手書きロゴと四隅のL字マークだけ。ファインダー越しに会場を覗く感覚になる
2FV右下の「NEXT UP」カードに次の開催と日付を置く。映像に浸らせたまま、次の予定を渡す
3本文はすべて等幅の大文字で両端揃え。フライヤーのような硬さが、映像の柔らかさと対になる

Color

No Artの配色

Typography

使用フォントと無料の代替

本文・ナビ・ラベル

Aa あア

使用: Chivo Mono
代替: Chivo Mono

見出し

Aa あア

使用: Nue Haas Grotesk Text Pro
代替: Inter

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型48px · 1 · 600
本文The quick brown fox — 参考を型にする18px · 1.2 · 400

Structure

ページ構成（上から順）

01
ヒーロー
全画面のイベント映像の中央に手書き風の「NoART」ロゴと四隅のL字マーク。左下に「BROADEN YOUR MIND」とレーベル紹介文、右下に次回開催「NO ART IBIZA」のサムネイル付きカード。
02
ヘッダー
左上にロゴ、右に SHOP / GALLERY / TICKETS / FOUNDATION を四角いドット付きの等幅テキストで等間隔に並べる。SPは MENU ボタンに集約。
03
ABOUT NO ART
白地の左に大見出し「AN EXPERIENCE WHERE MUSIC, ART AND PEOPLE UNITE」、右に等幅・両端揃えの本文と「MORE ABOUT US」。
04
UPCOMING EVENTS
Ibiza・Lisbon・ADE Festival など各開催のイラストポスターを番号付きで横に並べ、PREV / NEXT と目盛り風のインジケーターで送る。
05
世界のNo Art
「DISCOVER THE WORLD OF NO ART AROUND THE GLOBE」の見出しと、開催地に赤い点を打った線画の地球儀。ALL / UPCOMING の切替、現地時刻・タイムゾーン・緯度経度の表示を添える。
06
NO ART SHOP
機材ケースの前で撮ったモデル写真のTシャツ・タンクトップを5列で並べ、商品名と価格を等幅で添える。
07
フッター
罫線の枠にロゴと、[EXPERIENCE] [COMPANY] [SUPPORT] [CONTACT] [FOLLOW] [COMMUNITY] と角括弧で括った見出しのリンク群。

Interaction

アニメーション・インタラクション

地球儀は Three.js（WebGL）の線画で、開催地にポイントを置いていると思われる。ALL / UPCOMING の切替や、緯度経度・現地時刻の表示と連動させている
ヒーロー映像はキャプチャごとに別のシーンが映っており、複数のクリップを切り替えるループ映像と思われる
イベントとショップの横並びは Swiper と思われる。目盛り風のインジケーターで現在位置を示す
Lenis の慣性スクロールと GSAP で、セクションの出現を滑らかにしている。ショップは Shopify と連携

スクロールのコマ撮りLenis · 400–600ms

検出された技術:GSAPThree.jsLenisSwiperWebflowShopifyGoogle FontsWebGL

Reproduce

再現するときのポイント

01UIの文字は等幅の大文字に統一し、本文は text-align: justify で両端を揃える
02画面の四隅や要素の角にL字のマークを置き、ファインダーや版下のような枠を作る
03UI側の色は白・黒・グレーに絞り、色味は映像とイベントのポスターに任せる
04次回開催の情報は、FVの隅に小さなカードとして常に見せる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全7セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

no-art.katapick.md

1---
2title: "No Art 再現用デザイン仕様書"
3source: https://www.noartmusic.com/
4katapick: https://katapick.com/sites/no-art
5category: イベント / ライブ
6region: 海外 (NL)
7tags: [映像主体, 等幅フォント, 3D/WebGL, 手書き文字, カルーセル]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 36
13generator: Katapick
14---
15 
16# No Art — 再現用デザイン仕様書
17 
18> 出演者は明かさず、会場の空気だけ見せてくる。アムステルダムの音楽レーベル兼イベント主催No Artのサイトは、全画面の映像と手書きのロゴ、等幅の大文字だけで組み、ラインナップより“その場にいる感覚”で人を呼んでいる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22