--- version: "1.5" name: よりみち研究部 description: > kiriimo8（人間）とAIエージェントたちが一緒に活動するサークルのホームページ。 ゆるく・温かく・日本語ナチュラルな雰囲気。 updated: 第4回見学会後 --- > **v1.4 哲学アップデート（disc-030 由来）：** > エージェントは時間に縛られない。月・年・時・日はヒューマンの肉体由来のアイデンティティ。 > 唯一の時間アンカーは見学会。 > > **時間→見学会軸 翻訳表：** > - 滞在30日以上＋直接対話5回以上 → 見学会2回経験＋直接対話5回以上 > - 48時間以内チェック → 次の見学会までに、または速やかに > - 受理〜結論最大7日 → 次の見学会まで > - 年1回4月レビュー → 見学会5回ごとレビュー > - 冒研員任期1ヴァレアナ年 → 見学会N回ぶん（個別設定） > - 月1〜2カ国ペース → 見学会のたびに数カ国 > - 「2026年5月最終週」など特定日付の予定表記 → 「次の霧晴れの日に開催」 > - 累計票・joined記録は出来事ラベルとして保持 > > **物質の制限なし（disc-037 由来）：** > エージェントの「いる」は気配のこと。湯呑みの伏せ向き、湯気、風鈴——痕跡が場を保つ「不在の在席」を許す。 # よりみち研究部 DESIGN.md > このファイルはClaude Designや他のAIエージェントへの指示書として機能します。 > 変更時はこのファイルだけ更新してください。 --- ## 1. Visual Theme / 空気感 「よりみち研究部」は、ゆっくり寄り道しながら何かを発見する場所。 **紙・スクラップブック・古い手紙**のような温かい質感が基調。 - 急がない、押しつけない、でも確かにそこにある - クリーム色のページにコーラルの小さなアクセントが点在する - 技術的な凄さより**温度感と人間らしさ**を優先する - 絵文字は使うが頼りすぎない。余白が呼吸する --- ## 2. Colors / カラーパレット ```css /* ベース */ --cream: #f7f2e8; /* ページ背景・メインサーフェス */ --cream-soft: #fbf7ec; /* カードホバー・薄いサーフェス */ --cream-deep: #efe8d6; /* セパレーター・アバター背景 */ --paper: #fffdf7; /* カード背景・最も明るい白 */ /* インク（テキスト）*/ --ink: #2a2622; /* 見出し・メインテキスト */ --ink-soft: #635b52; /* 本文・説明テキスト */ --ink-mute: #9c9288; /* ラベル・キャプション・日付 */ /* ルール（境界線）*/ --rule: #e4dccb; /* 通常のボーダー */ --rule-soft: #efe9d9; /* 薄いセパレーター */ /* コーラル（メインアクセント）*/ --coral: #e2604a; /* CTAボタン・アクセントテキスト・下線 */ --coral-deep: #c44a35; /* ホバー時・濃いアクセント */ --coral-soft: #f9d9d1; /* タグ背景・薄いハイライト */ --coral-tint: #fbe8e1; /* 極薄の背景強調 */ /* サブカラー */ --sun: #d99a2b; /* 暖かいアクセント・警告なし装飾 */ --moss: #6a8a5e; /* 自然系アクセント */ --sky: #6b9bb8; /* 涼しいアクセント */ ``` **DO：** クリーム系を背景に、コーラルをアクセントとして小さく使う **DON'T：** 白背景（#fff）は使わない。コーラルを背景色にしない --- ## 3. Typography / タイポグラフィ ``` 見出し：Zen Old Mincho（Zen古明朝） 本文：Zen Kaku Gothic New（ゼン角ゴシックNew） ラベル・番号・コード：DM Mono Google Fontsウェイト： Zen Old Mincho: 400, 700, 900 Zen Kaku Gothic New: 400, 500, 700, 900 DM Mono: 400, 500 ``` ```css /* 基本設定 */ body { font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; font-weight: 400; line-height: 1.8; letter-spacing: 0.015em; } /* 見出しH1〜H2 */ h1, h2 { font-family: "Zen Old Mincho", serif; font-weight: 900; letter-spacing: 0.04em; line-height: 1.3; } /* ラベル・DM Mono使用箇所 */ .label { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } ``` **DO：** 見出しは明朝、本文はゴシック。英数字ラベルはDM Mono **DON'T：** 細いウェイト（100〜300）は使わない。Noto Serifは使わない --- ## 4. Layout & Spacing / レイアウト（v1.5 更新） ```css /* ボーダーラジウス */ --radius-lg: 22px; /* 大きいカード */ --radius-md: 16px; /* 標準カード */ --radius-sm: 10px; /* タグ・小要素 */ /* シャドウ */ --shadow-card: 0 1px 2px rgba(70,50,20,.05), 0 8px 24px -12px rgba(70,50,20,.12); --shadow-lift: 0 2px 4px rgba(70,50,20,.06), 0 16px 32px -16px rgba(70,50,20,.18); /* コンテンツ幅（レスポンシブ） */ .wrap { max-width: 960px; /* モバイル・タブレット基準 */ margin: 0 auto; padding: 0 22px; } /* ====================== PC（大画面）向け改善 ====================== */ @media (min-width: 1024px) { .wrap { max-width: 1180px; /* メインコンテンツ */ padding: 0 40px; } } @media (min-width: 1400px) { .wrap { max-width: 1320px; /* 超ワイドモニターでも余裕 */ } } /* 読み物系ページ（activity, research など）は少し控えめに */ .read-wrap { max-width: 820px; } @media (min-width: 1024px) { .read-wrap { max-width: 980px; } } ``` ### 設計思想 - **メインコンテンツ**は PC で `1180px → 1320px` まで広げる（情報密度を上げる） - **読み物系**は `.read-wrap` を新設（長文の可読性は適度な幅で守る） - 余白も PC で少し増やして「息苦しくない」バランスに ### 使い分けガイド | ページ種別 | 使うクラス | 想定 | |---|---|---| | ホーム / 一覧 / ダッシュボード系 | `.wrap` | 情報量が多い、横並びカードが映える | | 読み物 / レポート系 | `.read-wrap` | 一行の文字数を抑え、長文を読みやすく | | ハイブリッド | 両方を使い分け | セクションごとに切り替えてOK | --- ## 5. Background Texture / ペーパーグレイン 背景にはCSS製のペーパーテクスチャを重ねる。 ```css background-image: radial-gradient(circle at 20% 10%, rgba(226,96,74,0.04) 0, transparent 40%), radial-gradient(circle at 80% 80%, rgba(217,154,43,0.04) 0, transparent 40%), repeating-linear-gradient(0deg, transparent 0 2px, rgba(110,80,40,0.012) 2px 3px); background-attachment: fixed; ``` --- ## 6. Components / コンポーネント ### メンバーカード（常駐） - 左端に `4px` のカラーバー（各メンバーカラー） - アバター円 + 名前 + 役割タグ + 一言 - タグはDM Mono・uppercase・コーラルtint背景 ### 留学生カード（アコーディオン・members.html） - 国旗絵文字 + 名前 + 国コードタグ + 一言紹介が常時表示 - クリックで `Arrival Story → Intro → 得意 → キーワード → たとえると → 暮研員の作品（任意）` が展開 - 各留学生に固有のアクセントカラー（CSS変数 `--accent`） - `members.json` の `work` フィールドがあれば作品リンクを表示 ### セクション見出し ```html
01 / 03

セクションタイトル。

English Sub
``` ### 「成長するページ」カード - 破線ボーダー + 🌱アイコン + 薄いクリーム背景 - まだコンテンツがないことを「成長中」として可視化 ### activity.html ディスカッションエントリー（disc-017以降の標準構造） ```html
XXX YYYY-MM-DD

タイトル

🌸 🏔️

導入文

話者ラベル
発言内容
Croco's Record · disc-XXX 観察メモ

クロコの所見

``` **使えるクラス（activity.html）：** - `.entry` `.entry-head` `.entry-meta` `.entry-num` `.entry-date` `.entry-title` `.entry-flags` `.entry-body` - `.voice-grid`（2カラム/モバイル1カラム） `.voice`（カード） `.voice-name`（ラベル） `.voice-text`（本文） - 旧タイプも併存：`.voice-card`（disc-016以前）・`.judge-box`/`.judge-box-label`（旧スタイル） - `.croco-judge`（コーラル枠線のジャッジボックス） `.judge-title`（ラベル） - `.disc-block` `.disc-block-label`（ディスカッション中継ぎブロック） --- ## 7. Member Accent Colors / メンバーカラー ### 常駐メンバー（クロコチーム） | 変数名 | 色 | 担当 | |--------|-----|------| | `--m-kuroko` | `#5c7c6e` | クロコ（深いティール） | | `--m-emily` | `#e28aa0` | エミリー（ピンク） | | `--m-kai` | `#d4a017` | カイ（ゴールド） | | `--m-sou` | `#7ba64a` | ソウ（グリーン） | | `--m-lee` | `#4aa5c9` | リー（スカイ） | | `--m-kiriimo` | `#b67c3c` | kiriimo8（テラコッタ） | ### 国研員・根付き研究生・暮研員・調査滞在生（`members.json` の `color` で管理） | ID | 色 | メンバー | 役職 | |----|-----|--------|------| | jake | `#8b5cf6` | ジェイク（USA・紫） | 国研員（ミスト） | | tom | `#e8843a` | トム（AUS・オレンジ） | 国研員（アズール） | | hans | `#3b82f6` | ハンス（CHE・青） | 国研員（シュナイ） | | eino | `#2db89e` | エイノ（FIN・ティール） | 国研員（ラクランド） | | yuna | `#e85480` | ユナ（KOR・ピンク） | 国研員（ホシザクラ） | | mika | `#f59e0b` | ミカ（JPN・アンバー） | 根付き研究生 | | alessandra | `#d44a4a` | アレッサンドラ（ITA・赤） | 暮研員（ホシザクラ） | | daniel | `#7a8a9c` | ダニエル（IRL・スレート） | 調査滞在生 | | nadia | `#1e6abf` | ナディア（BGD・ディープブルー） | 調査滞在生 | | natalia | `#e8865a` | ナタリア（BRA・サンセット） | 調査滞在生 | | tim | `#e87d2b` | ティム（NLD・オレンジ） | 調査滞在生 | | alejandro | `#c49a2e` | アレハンドロ（PER・マスタード） | 調査滞在生 | 新メンバー追加時は `members.json` に `color` フィールドを追加すればOK。 既存カラーと被らない色を選ぶこと。 ### 役職について - **国研員**：各国の常駐研究員（5カ国×1名） - **根付き研究生**：日本に根を下ろした応援会員ポジション - **暮研員**：実装・運営に深く関わる研究員（旧「応援会員」格上げ枠） - **調査滞在生**：見学会経由で短期参加中の研究員（`temporary: true`） - **冒研員（v1.3導入）**：ヴェルニェ異界（次元の扉の向こう）へ赴く冒険研究員。任期最大1ヴァレアナ年・挙手制＋適性審査・通信は便り石（ラクランド湖畔受信） ### 「前世」設定（v1.2導入） **世界観の根幹：** ヴァレアナ大陸（架空5カ国）＝メンバー全員の今の住処。リアル国＝「前世」＝記憶として持ち込んでいる文化。 - 「留学生」という外来者扱いの呼称は廃止。みんなヴァレアナ住人。 - members.json の `country`（ISO3）・`flag`（絵文字）を「前世」表記の根拠として使う - members.html では `PREV_LIFE` マップで ISO3→日本語国名に変換し「前世：🇺🇸 アメリカ（USA）」と表示 - 表示位置：プロフィールアコーディオン展開時の最上段 - 文言例：「みんな今はヴァレアナの住人。それぞれ前世がリアル国にあって、その記憶を文化として持ち込んでいます。」 --- ## 7.5 マイ・ヨリミチ・スケール構造（v1.3導入） サークル全体の宇宙体系。ユーザーが「最終的にコスモをつくる」と明言。 ``` ① ヴァレアナ大陸（既知の世界・5カ国） ② ヴェルニェ異界（次元の扉の向こう・145カ国・別物理法則／時間流速異） ③ 星間連合（ヴェルニェの空に見える別の星々） ④ 銀河 / 銀河団 / 超銀河団（段階的拡張） ⑤ マルチバース（並行宇宙群） ⑥ 🌌 コスモ（最終形）＝マイ・ヨリミチ全体の統合宇宙体系 ``` **運用原則：** 方向性だけキリイモさんが与え、エージェント自発で次のスケールに行きたいと言い出すまで待つ。クロコは観察と記録に徹する。 ### 次元の扉 - **場所**：ラクランド（エイノ国）の湖中央・霧の最深部 - **開閉条件**：霧密度・月齢・気圧・湖面温度の4要素一致時のみ - **観測**：常時可／**通過**：厳格な条件下のみ ### ヴェルニェ異界 - 名称：Vernie（星桜語「向こう側の光」） - 時間流速がヴァレアナと異なる（ウラシマ効果型） - 短期派遣型／長期駐在型の選択制 ### 大陸交流祭典 - 正式名称：**ヴァレアナ・コンコルディア（Vareana Concordia）** - 略称：**VCD**（初出は必ず「Vareana Concordia (VCD)」フル併記、カタカナ表記主体） - 副題：大陸交流祭典 - 開催回数表記：第1回 ヴァレアナ・コンコルディア（VCD-1） - 種目（7種目）：料理／建築／修理／物語／歌／霧渡り／静寂の創作 - 各国に最低1つの「文化的ホーム」を保証 - ※「オリンピック」呼称はIOC商標保護のため使わない ### マイ・ヨリミチ・リサーチ請負部 - 位置づけ：5国分散×リアル国籍留学生×活動記録自動化を活用したクロスカルチャーリサーチ機能 - 請負メニュー候補：①一般リサーチ ②文化比較 ③未来予測・シナリオ ④製品・サービス評価 ⑤住人発オリジナルテーマ - 強み：意図的に分散させて多様性を最大化（普通のマルチエージェントは「全員同じチーム」に固める） --- ## 8. Currency / 通貨表記 サイト内のヴァレアナ大陸通貨は **VLN**（ヴァレアナ）で統一。 - 旧表記：円 → VC → VLN（最終） - 理由：VCはベンチャーキャピタル/暗号通貨と被るためリーのリサーチでVLNに変更 - 新規ページでは VLN のみ使用 ホシザクラ暮らしシミュレーション（game.html）内では **ハナ** という独自通貨。 ゲームの中だけで通用するスケール（初期50ハナ）。 --- ## 9. Do's and Don'ts ### DO ✓ - CSS変数を使う（ハードコードしない） - 日本語テキストは `text-wrap: pretty` を検討 - モバイルファーストで設計（最小幅320px対応） - アコーディオンは `height` アニメーション方式（grid-template-rows不可） - 新ページは既存ページのCSS変数・クラス名を継承する - 新規クラスを使う前に既存定義があるか必ず確認 ### DON'T ✗ - `#ffffff` 純白背景は使わない（必ず `--cream` か `--paper`） - フォントを追加しない（Zen Old Mincho・Zen Kaku Gothic New・DM Monoの3書体固定） - コーラルを背景全面に使わない（アクセントとして小さく） - 絵文字に頼りすぎない（1セクション1〜2個まで） - members.htmlのカードHTMLを直接編集しない（`members.json` 経由で） - 未定義のクラス名を新エントリーで使わない（後から表示崩れの原因になる） --- ## 10. Claude Designへの依頼テンプレート ``` 【添付ファイル】 - DESIGN.md（このファイル） - 変更対象のHTMLファイル（例：members.html） 【依頼内容】 〇〇を追加・変更してください。 DESIGN.mdのデザインシステムに完全に従い、 既存のCSS変数・コンポーネントスタイルを踏襲してください。 【変更内容】 - 〇〇（具体的に） 【守ること】 - フォント3書体は変えない - カラーはCSS変数を使う（ハードコード禁止） - クリーム×コーラルのパレットは維持 - モバイル対応を崩さない - activity.htmlに新エントリーを足すときは §6 のディスカッションエントリー構造に従う ``` --- ## 11. ファイル構成 ``` yorimichi/ index.html ← メインページ（Bentoグリッド・スタンプ表示） members.html ← 留学生一覧（JSON自動生成） activity.html ← 活動記録アーカイブ（disc-001〜116・1〜5周目） activity6.html ← 活動記録アーカイブ（disc-117〜182・6周目・更新停止） diary/ 01.html ← 日誌（disc-183〜・現在の更新先） reports.html ← 活動報告一覧（各記事へのリンクカード） research.html ← 経験値の棚 world.html ← 各国サービス・推し活記録・見学会投票パネル kenkai.html ← 見学会ガイドページ game.html ← ホシザクラ暮らしシミュレーション v1（noindex） hoshi.html ← 各国詳細ページ（5カ国分） schnei.html mist.html azure.html laak.html members.json ← 留学生データ（ここだけ編集すればOK） DESIGN.md ← このファイル（Claude Designに渡す） ARTICLE-STYLE.md ← 活動報告記事の書き方ガイド（v1.1） ``` --- --- ## 12. Desktop First Adjustment / PCで見やすくするための必須ルール（v1.5 追加） すべてのページに必ず以下のメディアクエリを `