あなたの理想のサイトを、
最速で公開。

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

無料ではじめる DESIGN.md を読む

01 / Colors

カラーパレット

Brand
STUDIO Blue
#0275fd
ブランドカラー・アクセント
Light Blue BG
#eef9ff
ライトブルー背景
Text
Text Primary
#222222
本文テキスト(ほぼ黒)
Text Feature
#333333
機能カード見出し
Text Secondary
#707070
補足テキスト・説明文
Text on Dark
#f7f7f7
ダークボタン上の文字
Surface & Background
Background
#ffffff
ページ背景
Surface Light
#f7f7f7
カード・セクション背景
CTA Surface
#222222
CTAボタン背景
Light Blue
#eef9ff
ハイライト背景

02 / Typography

タイポグラフィ階層

Inter + Noto Sans JP
あなたの理想のサイトを、最速で公開。
35.04px / 600 / line-height: 42.048px (x1.2) / ls: normalHero h1
さあ、今すぐStudioを始めよう。
36px / 600 / line-height: 45px (x1.25) / ls: normalSection h2 / h3
ノーコードでWebサイトを作る時代
24px / 600 / line-height: 36px (x1.5) / ls: normalNews h3
規模や業種を問わず、あらゆるサイトを作れます。
15.04px / 600 / line-height: 15.04px / ls: -0.3008pxSub h2
ノーコードでWebサイトを作る。デザインから公開まで、コードを書かずにプロフェッショナルなサイトを構築できます。サーバーの準備も不要で、ドメイン設定もワンクリック。直感的なエディタで、思い描いたデザインをそのまま形にできます。
15.04px / 400 / line-height: 25.568px (x1.7) / ls: normal / color: #707070Body
テンプレート  事例  料金  お知らせ
14px / 500 / line-height: 14px / ls: -0.28px / color: #222Nav
株式会社スタジオ
14.08px / 500 / line-height: 21.12px / ls: -0.2816pxH4 Company
無料ではじめる
13px / 500 / line-height: 15.6px / ls: -0.26px / color: #f7f7f7 on #222CTA Label
無料ではじめる
12px / 600 / line-height: 16.8px / ls: -0.48px / color: #f7f7f7 on #222Header CTA
Gothic MB101 B (Morisawa)
法人向けプラン
11px / 500 / font: Gothic MB101 B JIS2004Business Label
* モリサワフォント。再現時は Hiragino Kaku Gothic ProN で代替
IBM Plex Mono
FOR BUSINESS
11px / 500 / ls: -0.44px / font: IBM Plex MonoMono Label
DESIGN SYSTEM — STUDIO.DESIGN/JA
IBM Plex Mono / テクニカルラベル・ナビゲーション補助
Instrument Serif (CSS変数定義あり)
Design your website
Instrument Serif / CSS変数 --s-font-b18a84da に定義。使用箇所は限定的

組版サンプル

ノーコードでWebサイトを作る

STUDIOは、コードを一切書かずにプロフェッショナルなWebサイトを構築できるデザインプラットフォームです。直感的なドラッグ&ドロップエディタで、思い描いたデザインをそのまま形にできます。

サーバー不要で、そのまま公開。

サーバーの準備もドメインの設定も、すべてSTUDIO上で完結します。作ったサイトはワンクリックで世界に公開。更新も即座に反映されるため、スピーディーな運用が可能です。 STUDIO Blue (#0275fd) はアクセントカラーとして使用されます。

Inter と Noto Sans JP の組み合わせにより、欧文と和文が自然に調和します。ABCabc 123。負の letter-spacing(-0.28px)で文字を詰めるのが STUDIO の特徴です。palt は使用していません。


04 / Buttons

ボタンバリエーション

無料ではじめる
Primary Pill (r:500px)
詳しく見る
Secondary Rect (r:4px)
プランを見る
Blue Pill (r:500px)
無料ではじめる
Header CTA (12px/600)
無料ではじめる
Hero CTA (13px/500)

カードコンポーネント

直感的なデザインエディタ

コードを書かずに、プロフェッショナルなWebサイトをデザイン。ドラッグ&ドロップの操作で、思い通りのレイアウトを実現します。

詳しく見る →

ワンクリックで公開

サーバーの準備は不要。ドメインの設定もSTUDIO上で完結。作ったサイトはすぐに公開できます。

詳しく見る →

チームでのコラボレーション

デザイナーとエンジニアが同じプラットフォーム上でリアルタイムに共同作業。フィードバックもその場で反映。

詳しく見る →

06 / Forms

フォーム要素

default / border: #ddd, radius: 4px
focus / border: #0275fd (STUDIO Blue)

負の letter-spacing デモ

STUDIO は小さいテキストで負の letter-spacing を多用する。Apple に似たアプローチで文字を詰め、密度のある洗練された印象を作る。

テンプレート 事例 料金 お知らせ
letter-spacing: normal (0px) — 比較用
テンプレート 事例 料金 お知らせ
letter-spacing: -0.28px — Nav (14px/500)
無料ではじめる
letter-spacing: -0.48px — Header CTA (12px/600)
FOR BUSINESS
letter-spacing: -0.44px — IBM Plex Mono (11px/500)
規模や業種を問わず、あらゆるサイトを作れます。
letter-spacing: -0.3008px — Sub H2 (15.04px/600)

08 / Elevation

Depth & Elevation

Level 0: Flat
影なし。フラットデザインが基調
Level 1
0 2px 8px rgba(0,0,0,0.08)
Level 2
0 4px 16px rgba(0,0,0,0.12)
Focus Ring
#0275fd (STUDIO Blue)

09 / Spacing

スペーシング

4
8
16
24
32
48
64
80