瀬戸内国際芸術祭（Setouchi Triennale / ART SETOUCHI） DESIGN.md

瀬戸内国際芸術祭（https://setouchi-artfest.jp/）のデザイン仕様書。 2010 年から 3 年ごとに開催される、瀬戸内海の島々を舞台にした国際芸術祭。総合ディレクターは北川フラム。17 のエリアと 4 つの会期を 1 サイトで案内する。 配色がそのまま瀬戸内海。ファーストビューは空・島影・海の 3 層に塗り分けた図案で、その下の CSS の面色は #cfe9f8。UI の主色は #0068b5（濃い青）、面色は #e2f1f7 / #e9f2fc とすべて水色系 最大の特徴は 見出しの字間。セクション見出しは letter-spacing: 15.6px（26px に対して 0.6em）——文字の半分以上の空きを取る。日本語の見出しを一文字ずつ島のように置く組み方 会期を色で識別する（全会期 #323232 / 春 #2f837b / 夏 #466ca6 / 秋 #aa6255）。瀬戸内の四季をそのまま UI のラベル色にした、この芸術祭固有の色分け 実サイトの computed style 実測（2026-08-15 取得。トップ ＋ 作品・イベント / 作家）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 水色の階調だけで組む。地は白、面は 3 段の水色（#cfe9f8 / #e2f1f7 / #e9f2fc）、主色は濃い青 #0068b5。赤や黄は「会期」と「注目」の 2 か所にしか出さない
• 瀬戸内国際芸術祭について: 「海の復権」を掲げ、島々に作品を常設・期間展示する。サイトの主機能は「どの島の、どの作品が、いつ見られるか」の案内で、情報設計が会期と島の 2 軸で貫かれている
• 密度: 中程度。ファーストビューは図案化された瀬戸内海のイラストと最小限のナビだけ。以下は島・作品・ニュースのグリッドが続く
• キーワード: 瀬戸内ブルー #0068b5、空色 #cfe9f8、letter-spacing: 0.6em の見出し、会期 4 色、黄色の固定バナー、角丸ゼロ、明朝のロゴタイプ
• 特徴:
  • セクション見出しに letter-spacing: 15.6px（0.6em）。「ART SETOUCHIとは」「瀬戸内海の島々と沿岸部の全17エリア」が、一文字ずつ離れて並ぶ
  • 島名は全角スペースで割る（直　島 豊　島 女木島）。2 文字の島名を 3 文字幅に開いて、3 文字の島名と列を揃える——名簿組の伝統的な処理
  • 会期の 4 色（全 #323232 / 春 #2f837b / 夏 #466ca6 / 秋 #aa6255）がラベルとして全ページに散る。色が凡例そのものになっている
  • 本文の行間が 2.19（16px → 35.04px）。日本語サイトとしても相当広い。島の情報を「読ませる」ための設定
  • border-radius は原則 0px。角丸になるのはカテゴリチップ（30px のピル）だけ
  • 影を 3 段持つ。日本のサイトでは影を捨てる設計が多い中、このサイトは box-shadow を役割別に 3 種類使い分ける（バナー / カード / ボタン）
  • ロゴタイプだけが明朝（「瀬戸内国際芸術祭」＋ 欧文 Setouchi Triennale）。本文・UI は Noto Sans JP の一択
  • 右上に黄色 #f5f57f の固定バナー。水色一色の中で、黄色は「今すぐ確認すべき情報」にだけ使う

2. Color Palette & Roles

実測値。地は #ffffff。ファーストビューの支配色は #cfe9f8（pageBackground.viewportTopBySample で最頻）。 html / body ともに塗り指定を持たず、面色はセクションごとに敷かれる。

Brand（ブランド）

• Setouchi Blue (#0068b5, rgb 0,104,181): 主色。ボタンの文字、MENU の文字、ステータスラベル「募集中」の面、カテゴリチップの枠、ページトップボタン。押せるもの・現在地はすべてこの青
• Sky (#cfe9f8, rgb 207,233,248): ファーストビューの面色（CSS 側）。MENU ボタンの面。ページを開いた瞬間に見える色

KV の図案の色（画像／SVG の実測ピクセル。CSS トークンではない）:

• 図案は「空 → 島影 → 海」の 3 層を面で塗り分けるだけ。グラデーションもテクスチャも使わない
• CSS のトークン（#cfe9f8 等）と図案の色は別系統。図案の色をボタンやラベルに転用しない
• Sea Light (#e2f1f7, rgb 226,241,247): PICK UP カードの面
• Sea Pale (#e9f2fc, rgb 233,242,252): フッターの面
• Deep Sea (#227ea5, rgb 34,126,165): 「アーカイブ」等の大きな導線ブロックの面
• Mid Sea (#2e7c9e, rgb 46,124,158): PICK UP の見出し文字、注記の強調
• Slate Sea (#3a7b98, rgb 58,123,152): ステータスラベル「申込不要」の面

Season（会期の 4 色）— このサイト固有

• 4 色とも彩度を落としてある。原色を使わず、瀬戸内の風景の色に寄せている
• ラベルは角丸ゼロの矩形。白文字 14px / weight 500 / letter-spacing: 0.7px

Accent（注目）

• Highlight Yellow (#f5f57f, rgb 245,245,127): 右上の固定バナー「作品公開スケジュール」。サイトで唯一の暖色の面。文字は #323232（黒文字を乗せる）

Neutral（ニュートラル）

• Ink (#323232, rgb 50,50,50): 既定の文字色。見出し・本文・ナビ。純黒ではない
• Muted (#6d7682, rgb 109,118,130): 日付、ステータスラベル「申込開始前」の面
• Background (#ffffff): ページ地色
• Surface: 白のカード（島名ラベルの帯など）

Semantic（意味的な色）

• Danger／Error: #aa6255（秋会期の色）を流用する。新しい赤を持ち込まない
• Warning: #f5f57f（Highlight Yellow）＋ 文字 #323232
• Success: #2f837b（春会期の色）を流用する
• Info: #0068b5（Setouchi Blue）
• 非活性: 面 #6d7682 ／ 文字 #ffffff

3. Typography Rules

Noto Sans JP 一択と、見出しの極端な字間（最大 0.6em）、行間 2.19 の 3 点がこのサイトの核。

3.1 和文フォント

• 全要素: "Noto Sans JP", sans-serif
  • 和文・欧文とも Noto Sans JP で組む。欧文専用のフォントを持たない
  • フォールバックは sans-serif のみ。ヒラギノ・游ゴシック・メイリオを列挙しない。Web フォントの読み込みに全面的に依存する設計
  • ロゴタイプ（「瀬戸内国際芸術祭」/ Setouchi Triennale）は画像。明朝のレタリングで、Web フォント化されていない
• ウェイト: 400 / 500 / 700 の 3 段
  • 500 が主役。見出し・ラベル・本文の多くが 500 で組まれる
  • 700 は「タイトル」だけ（記事タイトル・島名・ナビ・ボタン）
  • 400 は器（body / li のラッパー）に残る既定値で、実際に読ませる文字にはほとんど出ない

3.2 欧文フォント

• 欧文専用フォントを持たない。ART SETOUCHI PICK UP MENU NEW もすべて Noto Sans JP
• 欧文の見出しは大文字 ＋ 大きな字間で作る（PICK UP = 25px / 700 / letter-spacing: 5px = 0.2em）
• 和欧混植の調整をしていない。Noto Sans JP は欧文グリフも持つため、混植でベースラインが揃う——このサイトが 1 書体で済ませられる理由

3.3 font-family 指定

css/* body */
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323232;
letter-spacing: normal;          /* body 自体は開かない */
font-feature-settings: normal;   /* palt を使わない */

/* 本文ブロック */
font-size: 16px;
font-weight: 500;
line-height: 35.04px;            /* 2.19 */
letter-spacing: 0.8px;           /* 0.05em */

• font-feature-settings は全要素 normal。palt も chws も使わない
• 字間は要素ごとに px で指定する（0.7px / 0.8px / 1.25px / 1.6px / 5px / 15.6px）。すべて「フォントサイズ × 0.05em」の倍数になっている（0.05 / 0.05 / 0.05 / 0.1 / 0.2 / 0.6em）

3.4 文字サイズ・ウェイト階層

• weight 500 が基準、700 がタイトル。400 は器にしか残らない
• 同じ 25px でも、英字は 0.2em、和文は 0.05em と字間を変える。大文字の欧文だけを大きく開く
• 行間は用途で 4 段: 1.0（ラベル）/ 1.4〜1.5（ボタン・ナビ）/ 1.65〜1.86（見出し・一覧）/ 2.19（本文）

3.5 行間・字間

• 本文の行間 (line-height): 2.19（16px → 35.04px）。日本語サイトの中でも広い部類
  • エリア一覧（14px）は 1.86、記事タイトル（18px）は 1.667
  • ラベルは 1.0（面の padding で高さを作る）
• 字間 (letter-spacing): 0.05em を基準に、用途で 0.1em / 0.2em / 0.6em へ拡大する

ガイドライン:

• 0.05em を既定にする。日本語本文で最も自然に効く量
• セクション見出しの 0.6em は「島を並べる」ための記号。本文・カード・ボタンに持ち込まない
• 0.6em を当てるときは行間も 1.65 以上取る。字間だけ開くと行が団子になる
• 0.6em の見出しは中央寄せにする。左寄せだと最後の 1 文字の右にだけ空きが残って行末が揃わない（letter-spacing は文字の後ろに空きを付けるため）
• ラベル・チップは normal。小さい面の中で字間を開くと窮屈になる
• palt を使わない。字間は letter-spacing だけで作る

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！

• 行末禁止: （「『【〔〈《

• 島名の全角スペースを消さない（直　島 豊　島 男　木　島）。全角スペースは字間調整であって区切りではないので、trim や正規化で潰さない

• 島名は絶対に折り返さない（white-space: nowrap）

• 会期名（「春会期」「秋会期」）は 1 行に保つ

• 作品・イベント / 作家 のスラッシュ前後の半角スペースを保つ。ナビのラベルはこの形で 1 単位

• 日付（2026年08月06日）は年月日の途中で折らない

• letter-spacing: 0.6em の見出しは <br> で改行位置を決める。自動折り返しに任せると、行末の空きが不揃いになる

• エリア名 ＋ 会期ラベルの組は縦積みにする。横に並べて折り返さない

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* 全要素。palt / chws を使わない */

• このサイトは OpenType 機能を一切使わない。約物の詰めはしない
• 代わりに letter-spacing を px で細かく指定する。「詰めてから開く」ではなく「開くだけ」の設計
• palt を足すと letter-spacing: 0.6em の見出しが崩れる（約物が詰まった上に 0.6em が乗ると、記号の前後だけ空きが変わる）。この字間設計と palt は両立しない
• 実装で約物を詰めたい場合は、見出しではなく本文ブロック（16px / 0.05em）にだけ palt を当てる

3.8 縦書き

このサイトは縦組みを使わない。ロゴタイプも含めてすべて横組み。

• 縦組みが必要になった場合（作品キャプション・展示解説など）は以下を目安にする:

csswriting-mode: vertical-rl;
text-orientation: mixed;
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 2.2;              /* 横組みの 2.19 をそのまま列間として使える */
letter-spacing: 0.8px;         /* 0.05em を維持する */

• 縦組みでも書体は Noto Sans JP のまま。明朝に切り替えない（ロゴ以外に明朝を持ち込まない）
• letter-spacing: 0.6em を縦組みに持ち込まない。縦に 0.6em を当てると 1 列の文字数が半減する
• 縦中横は 2 桁まで（text-combine-upright: all）。会期の年号（2026）は 4 桁なので縦中横にしない

4. Component Stylings

Buttons

Primary Button（白地 ＋ 影）— 一覧への遷移

• Background: #ffffff
• Text: #0068b5
• Border: なし
• Padding: 17px 40px
• Border Radius: 0px
• Shadow: 0 0 6px 0 rgba(61, 77, 84, 0.28) — 枠の代わりに影で輪郭を作る
• Font: 16px / weight 700 / lh 1.4 / letter-spacing: 1.6px（0.1em）
• 例: 「新着情報一覧」
• 塗りではなく「白地 ＋ 青文字 ＋ 影」。ボタンだけ字間を 0.1em に開く

Block Link（面の大きい導線）

• Background: #227ea5（濃い海色）／ Text: #ffffff
• Padding: 39px 80px ／ Border Radius: 0px ／ Shadow: なし
• Font: 16px / weight 400
• 例: 「アーカイブ／これまでの歩み・活動報告」
• セクション級の大きい導線だけ塗りにする

Fixed Banner（右上固定）

• Background: #f5f57f（唯一の暖色）／ Text: #323232
• Border Radius: 0px ／ Shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16)
• Font: 14px / weight 700 / letter-spacing: 0.7px
• 例: 「作品公開スケジュール」
• ヘッダーの右端に貼り付き、スクロールしても残る

MENU Button

• Background: #cfe9f8（空色）／ Text: #0068b5
• Padding: 13px 0 0 ／ Border Radius: 0px
• Font: 12px / weight 500
• 3 本線 ＋ 下に MENU の文字。面を空色にして、ページの一部として溶かす

Labels（会期・ステータス）

会期ラベル

• Background: 会期の 4 色（#323232 / #2f837b / #466ca6 / #aa6255）
• Text: #ffffff ／ Padding: 6px 0（幅は親に対して 100%）
• Border Radius: 0px ／ Font: 14px / weight 500 / letter-spacing: 0.7px
• エリアカードの上端に帯として乗る。角丸を付けない

ステータスラベル

• Border Radius: 0px ／ Font: 12px / weight 500 / ls normal

Category Chip（唯一の角丸）

• Background: #ffffff
• Text: #323232
• Border: 1px solid #0068b5
• Padding: 4px 9px
• Border Radius: 30px — サイトで唯一のピル
• Font: 13px / weight 500 / ls normal
• 例: 「映画」「パフォーマンス」
• 矩形のラベル（会期・ステータス）とピルのチップ（カテゴリ）を形で区別する

Cards

PICK UP カード

• Background: #e2f1f7（水色）
• Border Radius: 0px ／ Padding: 30px 0 0
• Shadow: 0 3px 6px 0 rgba(33, 56, 121, 0.16) — 影の色に青（33,56,121）を混ぜる。灰色の影を使わない
• 見出し: 22px / 700 / #2e7c9e

島カード

• 画像の上に白い帯を重ね、その中に島名（22px / 700 / 全角スペース割り）を置く
• Border Radius: 0px ／ 帯の Padding: 10px 0

記事カード

• Background: #ffffff ／ 区切り: 1px の横罫
• 構成: 日付（13px / #6d7682）→ タイトル（16〜18px / 700）→ NEW バッジ

Inputs

実サイトに公開フォームが少ないため、このサイトの原則（角丸ゼロ / 青の主色 / 影で輪郭）から導くと以下。

• Background: #ffffff
• Border: 1px solid #6d7682
• Border (focus): 1px solid #0068b5 ＋ 0 0 6px 0 rgba(61,77,84,0.28)（ボタンと同じ影）
• Border Radius: 0px（チップ以外に角丸を使わない）
• Padding: 12px 16px ／ Font: 16px / weight 500 / letter-spacing: 0.8px
• Text Color: #323232 ／ Placeholder: #6d7682
• Error: 1px solid #aa6255（秋会期の色を流用）

5. Layout Principles

Spacing Scale

• ボタンの padding: 17px 40px、ブロックリンクの 39px 80px と、縦:横 ≒ 1:2.3 の比率が共通する

Container

• Max Width: 1200px 目安
• ヘッダー: 全幅・白。右端に黄色の固定バナーと MENU ボタンが高さいっぱいで貼り付く
• ファーストビューは全幅ブリード。空 → 海のグラデーションに島影と航路を図案で置く
• フッター: 面 #e9f2fc

Grid

• 島・エリア一覧: 3〜4 カラム（画像 ＋ 白帯の島名 ＋ 会期ラベル）
• 記事一覧: 1 カラム（横罫で区切る）
• PICK UP: カルーセル（Swiper）。カードは #e2f1f7 の面
• Gutter: 30px 目安
• セクションの区切りは面色。罫線ではなく #e2f1f7 / #e9f2fc の帯でセクションを分ける

6. Depth & Elevation

このサイトは影を 3 段持つ。日本のサイトでは影を捨てる設計が多い中、役割別に使い分けている点が特徴。

• カードの影には青（rgb(33,56,121)）を混ぜる。水色の面の上で灰色の影は濁るため
• ボタンの影はオフセット 0（0 0 6px）。下に落とすのではなく、全周に淡く滲ませて縁取りにする
• 面色の 5 段も併用する:

7. Do's and Don'ts

Do（推奨）

• 書体は "Noto Sans JP", sans-serif の 1 本にする。和欧とも同じ書体で組む
• weight は 500 を基準に、タイトルだけ 700 にする
• 字間は 0.05em を既定にし、ボタン 0.1em / 英字見出し 0.2em / セクション見出し 0.6em と用途で拡大する
• セクション見出しの letter-spacing: 0.6em は中央寄せ ＋ line-height: 1.65 以上とセットで使う
• 本文の line-height は 2.19（16px → 35.04px）を守る
• 島名は全角スペースで割る（直　島）。全角スペースを正規化で消さない
• 会期を色で識別する（全 #323232 / 春 #2f837b / 夏 #466ca6 / 秋 #aa6255）。この 4 色を他の用途に流用しない
• 面色は水色の階調で作る（#cfe9f8 / #e2f1f7 / #e9f2fc / #227ea5）
• 黄色 #f5f57f は「今すぐ確認すべき情報」にだけ使う。サイト内で 1 箇所に限る
• border-radius: 0px を原則にし、カテゴリチップだけ 30px のピルにする
• 影は 3 段を役割で使い分ける。カードの影には青を混ぜ、ボタンの影はオフセット 0 にする
• プライマリボタンは白地 ＋ 青文字 ＋ 影。塗りにしない
• セクションの区切りは罫線ではなく面色で作る

Don't（禁止）

• font-feature-settings: "palt" を使わない。この字間設計（0.05〜0.6em）と両立しない
• セクション見出しの 0.6em を本文・カード・ボタンに持ち込まない
• 0.6em の見出しを左寄せにしない（行末の空きが不揃いになる）
• 島名の全角スペースを削らない・半角に置換しない
• 会期の 4 色を「季節以外の意味」で使わない（成功／警告などに転用しない）
• 角丸を増やさない。8px / 16px のカード角丸を持ち込まない（0px か 30px のピルの二択）
• プライマリボタンを塗りにしない（白地 ＋ 影がこのサイトの形）
• 影を灰色（rgba(0,0,0,…)）でカードに落とさない。水色の面の上で濁る
• 黄色 #f5f57f を装飾に使わない。注目の 1 箇所だけ
• 書体を増やさない。ロゴ以外に明朝を持ち込まない
• 本文の行間を 1.6 に詰めない（2.19 がこのサイトの読み心地）
• フォールバックを sans-serif だけにしたまま Web フォントの読み込み失敗を放置しない。実装では "Hiragino Sans", "Yu Gothic" 等を足して劣化を抑える

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG 基準）
• Primary Button は padding 17px 40px ＋ 16px / lh 1.4 で高さ 56.4px。基準を満たす
• 会期ラベルは padding 6px 0 ＋ 14px で高さ 26px。ラベル単体をタップ対象にせず、カード全体をタップ領域にする
• Category Chip は padding 4px 9px ＋ 13px で高さ 21px。モバイルでは padding 10px 16px に広げて 40px 以上を確保する
• 固定バナーはモバイルで画面下部へ移す。高さ 56px 以上を確保する
• 島カードはカード全体をタップ領域にする

フォントサイズの調整

• 本文 16px は据え置く（line-height: 2.19 も維持する）
• Section Head 26px → 20px。letter-spacing: 0.6em は 0.3em へ落とす（0.6em のままだとモバイル幅で 1 行に 5 文字しか入らない）
• 英字見出し 25px → 18px。letter-spacing: 0.2em は維持する
• 島名 22px → 18px。全角スペース割りは維持する
• 記事タイトル 18px → 16px。weight 700 は維持する
• 会期ラベル 14px は据え置く（これ以上小さくすると帯が読めない）
• letter-spacing: 0.05em の既定はモバイルでも維持する

9. Agent Prompt Guide

クイックリファレンス

Background:      #ffffff   （ページ地色）
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:       #f5f57f   （右上固定バナー。唯一の暖色。文字は #323232）
Season 全会期:    #323232   ／ 春 #2f837b ／ 夏 #466ca6 ／ 秋 #aa6255
Ink:             #323232   （既定の文字色。純黒ではない）
Muted:           #6d7682   （日付・非活性）
Font:            "Noto Sans JP", sans-serif  ← 和欧ともこれ 1 本。ロゴのみ明朝の画像
Weight:          500（基準）/ 700（タイトル・ナビ・ボタン）。400 は器のみ
Body:            16px / weight 500 / lh 2.19 (35.04px) / ls 0.8px (0.05em) / #323232
Line Height:     1.0（ラベル）/ 1.4〜1.5（ボタン・ナビ）/ 1.65〜1.86（見出し）/ 2.19（本文）
Letter Spacing:  0.05em（既定）/ 0.1em（ボタン）/ 0.2em（英字見出し）/ 0.6em（セクション見出し）
                 ラベル・チップ・日付は normal
Feature:         font-feature-settings: normal（palt も chws も使わない）
Radius:          0px（原則）/ 30px（カテゴリチップだけピル）
Shadow:          0 3px 6px rgba(0,0,0,.16)（固定バナー）
                 0 3px 6px rgba(33,56,121,.16)（カード。影に青を混ぜる）
                 0 0 6px rgba(61,77,84,.28)（ボタン。オフセット 0 で縁取り）
島名:             全角スペースで割る（直　島）。正規化で消さない
Container:       1200px

プロンプト例

瀬戸内国際芸術祭のデザインシステムに従って、島と作品の一覧ページを作成してください。
- 書体は "Noto Sans JP", sans-serif の 1 本だけ。和文も欧文もこれで組む
- weight は 500 を基準にし、タイトル・ナビ・ボタンだけ 700 にする
- 本文は 16px / weight 500 / line-height 2.19（35.04px）/ letter-spacing 0.8px（0.05em）
- 字間は 0.05em を既定にして、用途で拡大する：
  ボタン 0.1em（1.6px）/ 英字見出し 0.2em（5px）/ セクション見出し 0.6em（15.6px）。
  0.6em の見出しは必ず中央寄せにして line-height 1.65 以上を取る。
  ラベル・チップ・日付は letter-spacing: normal
- font-feature-settings は normal のまま。palt も chws も使わない
- 配色は水色の階調で作る：
  地 #ffffff / 空 #cfe9f8 / 海（淡）#e2f1f7 / 海（極淡）#e9f2fc / 海（濃）#227ea5、
  主色 #0068b5、文字 #323232、日付 #6d7682
- 会期は 4 色で識別する：全会期 #323232 / 春 #2f837b / 夏 #466ca6 / 秋 #aa6255。
  角丸ゼロの帯（padding 6px 0 / 白文字 14px weight 500 / ls 0.7px）でカード上端に乗せる。
  この 4 色を季節以外の意味に転用しない
- 注目情報（作品公開スケジュール）だけ黄色 #f5f57f の固定バナーにする。
  サイト内で暖色はここ 1 箇所だけ
- border-radius は 0px を原則にする。角丸にしてよいのはカテゴリチップだけで、
  白地 ＋ 1px solid #0068b5 ＋ radius 30px ＋ padding 4px 9px ＋ 13px weight 500
- プライマリボタンは塗りにしない：白地 ＋ 文字 #0068b5 ＋ padding 17px 40px ＋
  16px weight 700 ＋ ls 1.6px ＋ box-shadow: 0 0 6px 0 rgba(61,77,84,.28)（オフセット 0 の縁取り）
- カードの影には青を混ぜる：0 3px 6px 0 rgba(33,56,121,.16)。灰色の影を使わない
- 島名は全角スペースで割って表示する（直　島 / 豊　島）。白い帯の中に 22px weight 700 で置き、
  white-space: nowrap で折り返さない
- セクションの区切りは罫線ではなく面色（#e2f1f7 / #e9f2fc）の帯で作る
- コンテナ幅は 1200px、島一覧は 3〜4 カラム、記事一覧は 1 カラム＋横罫