PATTERN / 01
選択を減らす診断フロー
最初の不安や条件を受け止め、分岐に効く少ない質問で次の一手へつなぐ入口の型。
解く問題
- 選択肢が多すぎて始められない
- 読者ごとの入口が一つでは足りない
- 結果は出ても、その理由や次の読み先が分からない
使うとき
- 判断に必要な条件を段階的に聞ける
- 結果の後に理由と具体的な行動を渡せる
- 診断を使わない静的ガイドも同じ主題で用意できる
避けるとき
- 回答が結果に影響しない
- 質問だけで目的が終わってしまう
- 医療・法律・金融の結論を少数回答だけで断定する
DESIGN PATTERNS / 5 REUSABLE MOVES
次の制作へ、判断の型を持ち帰る。
Atlasは個別の事例を、All Projectsは全体を読ませます。ここでは30サイトに散らばる操作・導線・制約を、いつ使うか、何を避けるか、どう検証するかまで一つの型として整理します。
30 ProjectsStatic HTML firstNo new runtime JS
HOW TO READ
事例を真似る前に、使う条件を確認する。
各パターンはProjectデータの実在する操作・内容・技術から事例を自動で拾います。説明は「正解」ではなく、採用条件・避ける条件・品質確認を先に置くための実務用メモです。
設計パターン一覧
PATTERN / 02
比較と停止条件を同じ視界に置く
比較の便利さを、前提・更新日・見送る条件の明示で安全な判断へ変える型。
解く問題
- 数字やスペックだけでは決められない
- 急いだ判断で前提を見落とす
- 比較表が購入や採用の押し付けに変わる
使うとき
- 候補を共通の軸で比べられる
- 見送る条件や不確実性を言語化できる
- 価格・仕様・判定の確認日と対象範囲を示せる
避けるとき
- 唯一の正解を断定したい
- 根拠や更新日を示せない
- 最新在庫や口コミを静的な比較表だけで保証する
PATTERN / 03
答えを終点にしないコンテンツ導線
診断結果や一記事を、理由を補う次の読み物・ガイドへ接続し、理解を終点にしない型。
解く問題
- 結果ページで体験が終わる
- 長い解説の入口が見つからない
- 関連記事が同じ役割を繰り返して選べない
使うとき
- 次に読む内容が結果や状況で変わる
- 記事群に明確な役割分担がある
- リンク先で得られる判断材料をリンク文の近くで説明できる
避けるとき
- 関連先が主題と無関係
- リンク数だけを増やす
- 同じ結論を複数URLへコピーして更新責任が曖昧になる
PATTERN / 04
前提が見える即時計算
数値の答えだけでなく、内訳・前提・比較対象を一緒に示して判断を支える型。
解く問題
- 総額や負荷を頭の中で見積もれない
- 計算結果だけが独り歩きする
- 入力単位や既定値が分からず再計算できない
使うとき
- 入力と結果の関係を説明できる
- 誤差や前提を本文に残せる
- 外部データの更新責任を切り分け、静的な基準を保てる
避けるとき
- 最新の外部価格を保証する必要がある
- 計算式を説明できない
- 入力値に個人情報や秘密情報を含める必要がある
PATTERN / 05
静的な本体に操作だけを重ねる
情報、導線、判断基準をHTMLに残し、検索・状態共有・視覚化だけを軽く拡張する型。
解く問題
- JS停止時に主要情報が消える
- 操作のために読み物まで重くなる
- 生成物と実行時の表示がずれて、直接URLの意味が薄くなる
使うとき
- 静的な一覧や説明だけでも目的を果たせる
- 状態を持つ部分を狭く切り出せる
- 初期HTML、fallback、配信物を同じ品質ゲートで確認できる
避けるとき
- 操作なしでは内容が成立しない
- 静的fallbackを検証できない
- 認証・決済・最新在庫などserver側の責任が主目的である
NEXT OBSERVATION
型を選んだら、事例と品質工程へ戻る。
個別の目的・利用者・最終確認日はAll Projectsで、静的HTMLから配信物までの確認順はMethodで確認できます。