芸術祭会期外も、島・エリア毎に開館日を設け、定期的に作品公開を行っています。
SETOUCHI
COLORS
Brand — 水色の階調
Setouchi Blue
#0068b5
主色。ボタン文字・MENU・現在地・チップの枠
Sky
#cfe9f8
ファーストビューの面色 / MENU ボタン
Sea Light
#e2f1f7
PICK UP カードの面
Sea Pale
#e9f2fc
フッターの面
Deep Sea
#227ea5
大きな導線ブロックの面
Mid Sea
#2e7c9e
PICK UP の見出し文字
Slate Sea
#3a7b98
ステータス「申込不要」
Highlight Yellow
#f5f57f
右上固定バナー。唯一の暖色
Season — 会期の 4 色（このサイト固有）
全会期
#323232
通年公開のエリア・作品
春会期
#2f837b
新緑の緑青
夏会期
#466ca6
藍
秋会期
#aa6255
枯れた赤茶
KV の図案（画像の実測ピクセル。CSS トークンではない）
空
#32a7c7
上半分。彩度の高いシアン
島影
#4091a4
空より暗く沈めたシルエット
海
#99c6e2
下半分。空より淡くする
Neutral
Ink
#323232
既定の文字色。純黒ではない
Muted
#6d7682
日付・非活性
Background
#ffffff
ページ地色
TYPOGRAPHY
組版の規則
ART SETOUCHIとは
26px / 500 / lh 1.65 (42.9px) / letter-spacing: 15.6px（0.6em） / 中央寄せセクション見出し — サイト最大の字間
PICK UP
25px / 700 / lh 1.72 (43px) / letter-spacing: 5px（0.2em）英字見出し
新着情報
25px / 500 / lh 1.72 (43px) / letter-spacing: 1.25px（0.05em）同じ 25px でも和文は 0.05em に落とす
直　島　　豊　島　　男　木　島
22px / 700 / lh 1.0 / ls normal / 全角スペースで文字を割る島名 — 正規化で全角スペースを消さない
「ART SETOUCHI」は 3 年ごとに開催される「瀬戸内国際芸術祭」と、その間に取り組まれるアートを通して地域の活力を取り戻す活動の総称です。本文は 16px / weight 500 / line-height 2.19 / letter-spacing 0.05em。行間を詰めるとこのサイトの読み心地は成立しません。
16px / 500 / lh 2.19 (35.04px) / letter-spacing: 0.8px（0.05em）本文 — 行間 2.19
みんなの手　月まで届く手袋を編もう！
18px / 700 / lh 1.667 (30px) / letter-spacing: 0.9px（0.05em）記事タイトル
新着情報一覧
16px / 700 / lh 1.4 / letter-spacing: 1.6px（0.1em）ボタン — 字間を 0.1em に上げる
直島　豊島　女木島　男木島　小豆島　大島　犬島　沙弥島　本島　高見島　粟島　伊吹島
14px / 500 / lh 1.86 (26.04px) / letter-spacing: 0.7px（0.05em）エリア一覧
2026年08月06日
13px / 500 / lh 1.0 / ls normal / #6d7682日付 — 小さい文字は字間を開かない
PICK UP

島・会場ごとの注意事項

アクセスと船の時刻表

作品鑑賞パスポート

カードの影は 0 3px 6px 0 rgba(33,56,121,.16)。影の色に青を混ぜる——水色の面の上では灰色の影が濁るため。

瀬戸内海の島々と沿岸部の全17エリア
直　島
全会期
豊　島
春会期
女木島
夏会期
本　島
秋会期
募集中 申込不要 申込開始前 映画 パフォーマンス ← ステータスは矩形（radius 0）、カテゴリだけピル（radius 30px）
アーカイブこれまでの歩み・活動報告
新着情報
2026年08月06日瀬戸内国際芸術祭2028作品公募を実施しますNEW
2026年07月22日夏会期の作品公開スケジュールを更新しました
2026年06月30日こえび隊（瀬戸内国際芸術祭サポーター）の登録受付を開始します
新着情報一覧

プライマリボタンは塗りにしない。白地 ＋ 青文字 ＋ オフセット 0 の影（0 0 6px rgba(61,77,84,.28)）で輪郭を作る。

BUTTONS
新着情報一覧
Primary — 白地 ＋ 影 / ls 0.1em
映画
Category Chip — 唯一の radius 30px
夏会期
会期ラベル — radius 0
作品公開スケジュール
固定バナー — 唯一の暖色
FORMS
デフォルト — 1px solid #6d7682 / radius 0
フォーカス — border #0068b5 ＋ ボタンと同じ影（0 0 6px rgba(61,77,84,.28)）
エラー — border #aa6255（秋会期の色を流用。新しい赤を持ち込まない）
Textarea も radius 0
ELEVATION
Level 0
none
ラベル・チップ・ブロックリンク
Level 1
0 3px 6px rgba(0,0,0,.16)
固定バナー（黄）
Level 2
0 3px 6px rgba(33,56,121,.16)
カード（影に青を混ぜる）
Level 3
0 0 6px rgba(61,77,84,.28)
ボタン（オフセット 0 の縁取り）
LAYOUT
XS 6
S 10
M 17
L 30
XL 40
XXL 80
Main Container 1200px
本文カラム 760px 目安

ボタンの padding: 17px 40px、ブロックリンクの 39px 80px と、縦:横 ≒ 1:2.3 の比率が共通する。セクションの区切りは罫線ではなく面色（#e2f1f7 / #e9f2fc）の帯で作る。

Generated from setouchi-artfest.jp DESIGN.md — awesome-design-md-jp / computed style 実測値（2026-08-15）
実サイトの書体は "Noto Sans JP", sans-serif の 1 本のみ（和欧とも）で、Google Fonts からそのまま読み込める。
ロゴタイプだけは明朝のレタリング画像で Web フォント化されていないため、ここでは Shippori Mincho で雰囲気を代替している。