NODE / 01
active · diagnostic
性癖診断コンパス
恋愛傾向と惹かれる空気を、12問の診断から静かに言語化する大人向けの自己理解サイト。
- Audience
- 大人向け診断コンテンツ利用者
- Pattern
- 設問フロー / 結果分岐
- Lesson
- 結果を終点にせず理解を深める入口にする
- Reviewed
- 2026-07-11
OBSERVATORY / 018 NOTES · 30 SITES
AIサイト制作インタラクティブ・ラボ
BUILDORBIT
AIとつくるWebの軌道を、
見て、触れて、たどる。
AIを使うWebサイト制作で、Astro・静的生成・React Islands・情報設計・品質ゲート・公開方式をどう選ぶか。30件の実Project、Pattern、Case Study、Simulatorから、採用条件と避ける条件を比較できます。
PRESS B TO REVEAL THE BLUEPRINT
OBS. 02
Project Orbit
サイトをジャンル別に並べるだけでは、次の制作へ持ち帰れる知見が見えません。ノードを選び、目的・型・学びの接続を観測してください。
RELATION: CONTENT ↔ INTERACTION / SAFETY ↔ OPERATION
Projectを一覧で読む
- 性癖診断コンパス — 恋愛傾向と惹かれる空気を、12問の診断から静かに言語化する大人向けの自己理解サイト。
- 副業地雷チェッカー — 副業の勧誘や初期費用を、申し込む前のチェックと読み物で冷静に見直す安全設計。
- 買う前に一晩寝ろ — 衝動買いを防ぐために、購入前の不安と条件を確認する診断サイト。
- Local AI Compass — WindowsでローカルAIを始める人へ、PC条件、導入、GGUF選び、トラブル解決をつなぐ診断入口。
- AI開発横丁 — Codex・Claude Code・MCP・AI個人開発を、安全な権限と実務判断へ落とし込む実践メディア。
- トークン見積所 — AI APIとAIサブスクの料金を、利用量から日本円で概算する個人開発者向け見積ツール。
- LOCAL SHIFT — AIがあなたのPCに降りてくるまでを、ローカルAIの導入と使い方から案内するサイト。
- 通所したら負けですか — A型・B型作業所の言えない本音と違和感を読み解くためのメディア。
- 中古PC購入判断ツール | ToolCompass — 中古PCを買う前に、スペック・価格・用途を照らし合わせ、見送る条件まで確認する初心者向け購入支援。
OBS. 03
完成品より、判断の軌跡。
発想から運用までを直線の手順ではなく、次の工程へ渡す判断として残します。スクロールは奪わず、通常の文書としても読めます。
- 01
発想
誰の、どの迷いを減らすか。機能ではなく変化を一文にする。
- 02
構造
読む情報と操作する情報を分け、URLとデータの形を先に決める。
- 03
体験
操作前後で増える理解を定義し、代替経路も同時に描く。
- 04
実装
静的HTMLを基盤に、状態を持つ部分だけをIslandとして載せる。
- 05
検証
見た目、キーボード、no-JS、直接URL、配信物を同じ品質ゲートで確認する。
- 06
運用
追加手順と判断理由を残し、次の更新で設計を壊さない。
DESIGN PATTERNS / REUSE THE DECISION
一つの完成品ではなく、次に使える型を読む。
30サイトの操作・導線・制約から、判断フロー、比較、安全な停止条件、静的拡張を横断して整理しました。事例を並べるだけでなく、使うとき・避けるとき・確認項目までを残しています。
Design Patternsを読む →何から決めるか迷ったら、Guidesで目的を選び、検索から設計の具体例へ進むなら、Astroの静的拡張Pattern、診断フローPattern、Local AI Compassのケーススタディを起点にできます。
OBS. 04
次のサイトは、何を中心に回すか。
目的・記事量・インタラクション密度から、静的配信で無理のない構成をルールベースで判定します。
RECOMMENDED ORBIT / balanced
Editorial Islands
検索意図の目安：編集と操作の両立（Editorial Islands）
読み物と操作を分離し、同じ情報モデルで接続する構成
完全版で品質ゲートまで見る →OBS. 05
Interactive Lab
見た目のデモではなく、設計上の問いを一つずつ操作できる実験です。
01 / visualization
Project Orbit
プロジェクトを名前順ではなく、目的と学びの関係で探索するSVGベースの星図。SVGがなくてもProject一覧と関係リンクを読めます。
static first · stable02 / navigationBuild Simulator
更新量、配信環境、重要度から、静的サイトの現実的な構成をルールで判定する。結果は採用条件と品質ゲートを考える補助で、server要件を自動確定しない。
JS island · stable03 / motionMotion Dial
System / Off / Subtle / Fullを切り替え、意味を残したまま動きの量を変える。操作結果と本文は動きなしでも残る。
JS island · stable04 / performancePerformance Observatory
この閲覧環境で取得できる表示指標だけを、外部送信せずに観測する。Lighthouseや実ユーザー全体の成果を代替しない。
JS island · prototypeOBS. 06
Build Notes
ニュース順でも人気順でもなく、いま設計を始める人が入れる三つの観測点から。
METHOD / FOUR CONSTRAINTS
軽いから、
豊かにできる。
01静的HTMLを情報の本体にする。
02動きは関係と状態だけに使う。
03記事と実験を同じデータで接続する。
04配信物までを品質ゲートに含める。