← 全ページ一覧
plus-art renewal · design system

設定とコンポーネント一覧

サイト全体に関わるグローバル設定 (Global / Navigation / Pages Index) と、共通コンポーネントを視覚化したカタログです。各要素の [G-XX], [N-XX], [P-XX], [CMP-XX] バッジをクリックすると、Excel の該当行が表示されます。

01 · Global

サイト全体の設定

Excel: 01_Global · G-01 〜 G-49
ブランド情報 · Brand Identity
brand_name_jp
株式会社プラスアート
日本語の正式社名
brand_name_en
plus art co., ltd.
英語表記
brand_logo
+ART
+ は赤、ART は黒
brand_tagline
ONE WORLD CHANGE with ART
英語のタグライン
brand_catchphrase_jp
アートで、ブランドを動かす。
日本語キャッチコピー
brand_description
現代アートの企画・販売と、企業のブランディング・広告・空間・組織開発を、200名超のアーティストネットワークでつなぐ。
フッターで使う説明文
カラーパレット · Colors
color_bg_paper
#FAF8F3
メイン背景
color_bg_paper_2
#F4F0E8
補助背景
color_bg_card
#FFFFFF
カード背景
color_ink
#1A1513
メイン文字
color_ink_mute
#6B6560
副次文字
color_black
#0A0805
ボタン用純黒
color_accent
#A50005
メインアクセント
color_accent_deep
#7A0004
ホバー時
color_cat_ad
#0F4C8C
広告 (紺)
color_cat_brand
#A50005
ブランディング (赤)
color_cat_space
#155F37
空間 (緑)
color_cat_thinking
#6E4310
思考 (茶)
color_door_personal
#FFF5EE
個人向け扉
color_door_business
#FDEBE9
企業向け扉
color_rule
#E8E2DC
罫線
タイポグラフィ · Typography
font_serif · 英語見出し

Manifesto

Lora · Bold · 56-96px
font_sans_en · 英語ラベル

PHILOSOPHY

Poppins · Bold · 13-20px
font_sans_jp · 日本語

わたしたちの考え方。

Noto Sans JP · Regular/Bold · 15-21px
レイアウト寸法 · Layout
container_wide
1440px
メインコンテナの最大幅
container_padding
60px
左右の余白
rhythm_base
28px
縦リズムの基本単位 (28/56/84/112)
header_height
88px
浮遊ヘッダーの高さ
header_radius
44px
浮遊ヘッダーの角丸
header_top
32px
ヘッダーの top 位置
card_radius
16px
通常カードの角丸
door_radius
24px
扉カードの角丸
button_radius
32px
ボタンの角丸
レイアウト 視覚化 · Visual Reference
G-25, G-26 · コンテナ幅 1440px + サイドパディング 60px
https://pls-art.com
Content Area
max-width: 1440px
60px
60px
ブラウザ幅が 1440px 以上 → コンテンツは中央配置で1440px幅で固定。
ブラウザ幅が 1440px 未満 → 左右に 60px の余白を確保しつつ全幅表示。
G-27 · 縦リズム 28pxベース
28px (rh-1) セクション内の小さい余白
56px (rh-2) 段落間
84px (rh-3) セクション内の中間余白
112px (rh-4) セクション間の余白 (一番よく使う)
薄い赤の横線が 28px グリッド。すべての縦間隔がこの倍数 (28 / 56 / 84 / 112 / 140...) で並ぶ → 美術館的な端正なリズムを作る。
G-28, G-29, G-30 · 浮遊ヘッダーの位置・寸法
↕ 32px (header_top)
+ART
SERVICESART & BUSINESSABOUTCONTACT
資料請求 →
⌒ 44px (radius) ↕ 88px (height)
↓ コンテンツがここから始まる
ヘッダーは画面の上端ではなく、上から 32px の余白 を空けて浮遊する。左右も 60px 内側。
スクロール下方向で隠れ、上方向で戻ってくる。
G-29, G-31, G-32, G-33 · 角丸スケール比較
16px
card_radius (G-31)
通常カード
24px
door_radius (G-32)
扉カード
32px
button_radius (G-33)
ボタン・ピル
44px
header_radius (G-29)
ヘッダー
要素の重要度が上がるほど角丸が大きい。
通常容器 → 個人扉 → アクション (ボタン) → サイトの顔 (ヘッダー)。
スプラッシュスクリーン · Splash Screen
splash_enabled
Y
Y / N で表示切替
splash_greeting
Hello,
Lora Italic 80px
splash_brand_text
+ART
「+」のみ赤、Poppins Bold
splash_duration_ms
3000
ミリ秒 (3秒)
splash_bg
#1A1513
ダークインク
splash_session_only
Y
Y=同セッションで1回だけ表示
スプラッシュ 視覚化 · Visual Reference
スプラッシュとは何か?

サイトを訪れた最初の瞬間に表示される「全画面のロゴ演出」です。
黒地に「Hello, +ART」が大きく表示され、約3秒後にフェードアウトしてTOPページが現れます。

目的
  • ブランド名「+ART」を最初の3秒で刷り込む
  • 「ただのウェブサイト」ではなく「美術館的な体験」の入口を作る
  • サイトの世界観を一瞬で伝える
  • 読み込み待ち時間を体験に変換する
仕様
  • 表示時間: 約3秒 (G-37)
  • 同セッション中は1回のみ (G-39)
  • 切替: G-34 splash_enabled を Y/N に
  • 背景: #1A1513 ダークインク (G-38)
クリックすると実際の動作 (約3秒) が確認できます
G-37 · タイムライン (3秒の内訳)
FADE IN (1.0s)
HOLD (0.75s)
FADE OUT (0.9s)
0s
0.25s
1.25s
2.0s
2.9s
3.0s
0 → 0.25s
起動 (待機)
黒画面のみ表示
0.25 → 1.25s
入場 (フェードイン)
"Hello, +ART" が下から24px上昇しつつ フェードイン
1.25 → 2.0s
静止 (HOLD)
じっと表示。読み取り時間。
2.0 → 2.9s
退場 (フェードアウト)
全画面 opacity 1 → 0 → TOPページ出現
表示中の見た目 (静的プレビュー)
Hello, +ART
background: #1A1513 · text: #FFFFFF · "+" : #A50005
左の "Hello," は Lora Italic (G-22)、右の "+ART" は Poppins Bold (G-23)。「+」のみ赤 (G-13)。
SNS リンク
sns_instagram
https://www.instagram.com/plus.art.tokyo/
公式アカウント
sns_twitter
— (未設定)
空欄ならフッターに非表示
sns_facebook
— (未設定)
sns_youtube
— (未設定)
sns_linkedin
— (未設定)
お問い合わせ情報
contact_email
info@pls-art.com
公式問い合わせアドレス
contact_phone
— (任意)
空欄ならフッターに非表示
contact_address
東京都渋谷区...
本社住所
contact_form_url
/contact
問い合わせフォームのパス
download_pdf_url
/files/plus-art-service.pdf
サービス資料のPDFパス
03 · Pages

全12ページ サイトマップ

Excel: 03_Pages_Index · P-01 〜 P-12
トップ
/

TOP

10_TOP · T-01〜T-10
扉ページ (個人 / 企業)
/service-art-collecting

Art Collecting

11_Collecting · C-01〜C-10
/service-art-branding

Art × Branding

12_Art_x_Branding · B-01〜B-11
4軸サブサービス
/service-ad

Advertising

13_Service_Ad · AD-01〜AD-11
/service-brand

Branding

14_Service_Brand · BR-01〜BR-11
/service-space

Space

15_Service_Space · SP-01〜SP-11
/service-thinking

Art Thinking

16_Service_Thinking · TH-01〜TH-11
Works / Journal
/works

Works 一覧

17_Works · W-01〜W-07
/works/[slug]

Works Article

18_Works_Article · WA-01〜WA-10
/art-and-business

Journal 一覧

19_Journal · J-01〜J-08
/journal/[slug]

Journal Article

20_Journal_Article · JA-01〜JA-10
会社情報
/about

About

21_About · A-01〜A-10
04 · Components

共通コンポーネント

Next.js 実装時の再利用コンポーネント · CMP-01 〜 CMP-08
Button — ボタン
資料請求 → CONTACT All Works
variant: ink / accent / ghost · radius 32px
CategoryLabel — カテゴリラベル
AD BRAND SPACE THINKING
縦バー(3px×14px) + Poppins Bold 11px · 字間 0.18em
SectionHeading — セクション見出し
PHILOSOPHY

Manifesto

わたしたちの考え方。
props: capsLabel / serifTitle / jpSubtitle
WorkCard — 実績カード
BRAND

マルトモ 花かつおパッケージアート

Package · 2025
props: slug / thumbnail / category / title / meta
SiteHeader — 浮遊ヘッダー
SERVICESART & BUSINESSABOUTCONTACT
資料請求 →
スクロール下方向で隠れる · radius 44px · backdrop-blur
SiteFooter — ダークフッター
+ART
ONE WORLD CHANGE
INDIVIDUALS
BUSINESSES
INSIGHTS
COMPANY
© 2026 plus art co., ltd.
5カラム grid · 背景 ink · リンク hover で accent
Splash — スプラッシュスクリーン
Hello, +ART
3秒表示 · sessionStorage で1回のみ · Framer Motion
Marquee — 横スクロール
中津川翔太 NOMA DAI GOTO. Narcolepsy1999 いがらしゆみこ
60秒で1周 · linear infinite · 取扱作家 / 取引先ロゴで使用