ランドセル選び
ランドセルの決めかた
ランドセルを選ぶ保護者が、12ブランドの公式情報を同じ項目で確認するサイト。価格、重さ、収納、購入方法、修理保証の5問から候補を絞り、条件に合う理由と未確認の項目を読める。比較表やテーマ別ガイドで違いを確認し、出典と確認日をたどって購入するモデルの仕様を確かめる。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | 公開対象のブランド確認表とガイドを静的に生成する。共通の仕様表と出典一覧を各ブランドのページで使う。 |
| TypeScript | ブランドデータと診断の回答の型を定義し、画面操作で扱う要素の型を確認する。JSONの値は実行時にも検証する。 |
| JavaScript | ブラウザ内で5問の診断と比較表の絞り込みを行う。診断では各選択肢を選んだ場合の残り件数を計算する。 |
| JSON | モデル年度、価格帯、重さ、保証、購入方法と公式の出典をブランドごとに管理する。比較表とテーマ別ガイドは同じデータから組み立てる。 |
| Cloudflare Workers Static Assets | 生成した静的ファイルを独自ドメインで配信し、存在しないページには404ページを返す。 |
処理の流れ
希望する条件を選ぶ
予算、重さ、A4フラットファイルの収納、購入方法、修理保証の5問に答える。A4フラットファイルは紙をとじる背表紙付きの文具である。各選択肢には選んだ後の候補数を表示する。
候補と未確認の項目を読む
条件に合うブランドを先に、判断に必要な情報が未確認のブランドを後に表示する。候補ごとに条件に合う理由と、公式で確かめる項目を添える。前の質問へ戻って選び直すこともできる。
比較表とガイドで見比べる
比較表を価格、重さ、収納、購入方法で絞り込む。重さ、値段、メーカー、保証、製造の記載、カタログと素材のガイドでもブランドを横断して情報を確認する。
購入するモデルを公式で確かめる
ブランド確認表でモデル年度、仕様、保証、購入方法と出典の確認日を読む。公式サイトやカタログ請求先へ進み、選んだモデルの最新情報と実物を確かめる。
実装の工夫
診断では未確認の候補を残す
判定を「条件に合う」「要確認」「条件外」に分ける。選んだ条件に反する情報があれば除き、判定に必要な情報がなければ要確認として残す。価格と重さはブランド内の最小値で判定し、同じモデルがすべての条件を満たすとは限らないことを画面に明記する。
比較表をJavaScriptなしでも読める
比較表の行は静的HTMLで出力し、JavaScriptが動くと絞り込み操作を表示する。条件を指定した項目が未確認のブランドは表から除くため、診断の要確認の扱いとは区別する。診断もJavaScriptが無効なら比較表へのリンクを表示する。
公式情報の不備をビルド時に検出する
ブランドデータの年度、数値の範囲、HTTPSのURL、実在する確認日を検証する。公開ブランドには年度、公式URL、出典を必須とし、カタログ請求先にも同じURLの出典を求める。価格や重さのガイドはこのデータから集計し、確認できない値は未確認として扱う。
構成と制約
- 掲載値は出典の確認日時点の公式情報で、仕様はモデルによって異なる。診断はブランドの候補を絞るもので、個別モデルの全条件への適合や、背負ったときの感じかたを判定しない。購入前に公式の最新情報と実物を確認する。
- 比較表は指定した項目が未確認のブランドを除き、診断は要確認として残す。JavaScriptが無効な場合は診断と動的な絞り込みを使えないが、ブランドの比較表と確認表は読める。
実装確認：