01 / Colors

カラーパレット

Brand

Corporate Navy

#003349

見出し・ラベル・ユーティリティ

Accent Coral

#ea6359

NEW バッジ背景

Accent Red

#e63d30

Active インジケーター

Surface

Background White

#ffffff

ページ背景

Surface Light

#f0f4f6

セクション背景

Surface Blue-Grey

#d3dee4

ユーティリティバー

Surface Blue-Grey Med

#c5d3db

カテゴリナビ背景

Surface Near-White

#fafcfd

極薄面（セミナー等）

Surface Alert

#fff6f5

重要なお知らせ背景

Text & Border

Text Primary

#333333

本文テキスト

Text Label

#48606a

ラベル「トピックス」等

Border Default

#cbd5da

CTA・カードのボーダー

Border Card

#b7c9d3

分野別カードボーダー

Footer

Footer BG

#333333

フッター背景

Footer Dark

#0f1b41

最下部ダークネイビー

02 / Typography

タイポグラフィ階層

つながるを、つくる。

Hero Display — 60px / 500 / lh 1.1 / ls 0.08emヒーロー

Create a place to connect.

Hero Catch — 19px / 400 / lh 1.0 / ls 0.04em英語サブコピー

PRODUCT — Page Title

Page Title (h1) — 42px / 700 / lh 1.2 / color #003349製品ページ

製品一覧（プロダクトカタログ）

Sub Heading (h2) — 28px / 700 / lh 1.5製品ページ

分野別ソリューション — Section Heading

Section Heading (h3) — 24px / 700 / lh 1.8 / color #003349セクション見出し

[ トピックス ]

Section Label — 14px / 400 / lh 1.75 / ls 0.06em / color #48606aラベル

本文テキスト — イトーキのオフィスを構成するチェアやデスク、ロッカーなどの製品はこちらから。「探しやすい、欲しいものが見つかる」プロダクトカタログです。働くひとを支える快適な機能と、洗練を極めたデザイン。創業130年以上の技術を込めた、イトーキの製品についてご紹介します。

Body — 16px / 400 / lh 1.8 (28.8/16) / ls normal / palt: なし本文

補足テキスト — 製品に関する重要なお知らせ。品質保証について。

Small / Caption — 14px / 400 / lh 1.75補足

ソリューション　製品・カタログ　納入事例

Nav Link — 14px / 700 / lh 1.8ナビ

個人のお客さまはこちら

Utility Link — 11px / 700 / lh 1.5 / color #003349 / bg #d3dee4ユーティリティバー

Web font: Noto Sans JP（Google Fonts）をそのまま使用。font-feature-settings: normal（palt 不使用）。

03 / Article & Product

記事・製品の組版サンプル

[ ワークプレイスコラム ]

これからのオフィスに求められる、つながる空間設計

2026.06.15 / ワークスタイル研究所 / Reading time: 5 min

リモートワークとオフィスワークのハイブリッド化が進む中、物理的なオフィスに求められる役割は大きく変わりつつあります。かつて「効率よく個人作業をする場」だったオフィスは、いまや「人と人がつながり、偶発的なコミュニケーションが生まれる場」としての価値が重視されています。

偶発的交流を生むレイアウト

イトーキが提唱する「ABW（Activity Based Working）」は、仕事の内容に応じて場所を選ぶ働き方です。集中作業のための個室ブース、チームでのディスカッションに適したオープンスペース、リラックスしながらアイデアを交わすカフェエリア——それぞれの空間を行き来することで、自然と動線が交差し、部署を超えた対話が生まれます。

快適性とウェルネス

長時間のデスクワークにおいて、チェアの座り心地は生産性に直結します。イトーキのフラッグシップチェア「vertebra03（バーテブラ03）」は、体の動きに追従するメカニズムを備え、前傾・後傾のどちらの姿勢でも均等にサポートします。

CHAIR

Office Chair

vertebra03

バーテブラ03 — 体の動きに追従する次世代チェア

NEW

DESK

Sit-Stand Desk

toiro

トイロ — 電動昇降デスクシリーズ

BOOTH

Focus Booth

ADDCELL

アドセル — 集中ブース・Web会議ブース

製品・カタログトップへ

04 / Buttons

ボタンバリエーション

ITOKI のボタンは border-radius: 100px の pill 型が主要 CTA。白背景にグレーボーダーの控えめなスタイル。影は使わず、ホバーで面色変化。

製品・カタログトップへ

Pill CTA (primary)
14px / 700 / radius 100px

ソリューションを見る

Hero Button
16px / 700 / radius 4px

お問い合わせ

Navy CTA (参考)
14px / 700 / bg #003349

医療福祉施設

Category Tag
14px / 400 / radius 4px

個人のお客さま

Utility
11px / 700 / bg #d3dee4

分野別ソリューション（カテゴリタグ群）

オフィス医療福祉施設教育施設自治体庁舎工場・物流施設図書施設文化施設

05 / Cards

カードコンポーネント

OFFICE

2026.06.08 NEW

ITOKI New Office Project — 新本社オフィスのご紹介

ABW の考え方を取り入れた新しいワークプレイス。部署を超えたコラボレーションを促進する空間設計。

詳しく見る

EVENT

2026.06.02

ORGATEC TOKYO 2026 — 出展のご案内

世界最大級のオフィス家具見本市 ORGATEC の東京開催。イトーキブースで最新ソリューションを体験。

詳しく見る

SUSTAINABILITY

2026.06.02

Econifa — 素材から考えるサステナブル家具

間伐材や廃プラスチックを活用した環境配慮型家具シリーズ。循環型社会の実現に向けた取り組み。

詳しく見る

06 / Forms

フォーム要素（3 状態）

入力欄は border-radius: 8px の角丸。検索フォームのスタイルを踏襲。フォーカス時は Corporate Navy #003349、エラーは Accent Red #e63d30。

サイト内検索

デフォルト — border: 1px solid #cbd5da / radius: 8px / height: 48px

製品名

フォーカス — border: 2px solid #003349 (Corporate Navy)

メールアドレス

エラー — border: 2px solid #e63d30 (Accent Red)

07 / Elevation

Depth & Elevation

Level 0: Flat

box-shadow: none

Level 1 (hover)

0 2px 8px rgba(0,0,0,0.06)

Level 2 (modal)

0 4px 16px rgba(0,0,0,0.08)

実測値はすべて box-shadow: none。ITOKI はボーダーと面色で階層を表現するフラットデザイン。Level 1/2 は推奨値。

08 / Layout

スペーシングとコンテナ幅

Spacing Scale（8px ベース）

8px

16px

24px

32px

48px

XXL

64px

XXXL

80px

Border Radius Scale

Square

0px

Small

4px

Medium

8px

Pill

100px

Container Widths

Container Max 1200px

Article (readable) 720px

Footer Padding 80px

Breakpoints

Mobile: ≤ 768px / Tablet: 768 - 1024px / Desktop: > 1024px
タッチターゲットは 44px x 44px 以上（WCAG 基準）。