贈答診断
お取り寄せの目利き
お取り寄せの目利きは、贈る相手、予算、受け取り条件から商品を探す静的サイトである。楽天の商品検索APIは候補集めに使い、掲載する商品には目利きコメントと温度帯、日持ち、個包装などを付けて管理する。診断は掲載済み商品の属性で候補を絞る。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | 記事と商品をコンテンツコレクションから読み込み、商品カードを含む紹介ページと診断画面を静的に生成する。 |
| Content Collections | 記事の公開日や分類と、商品のコメント、配送温度、日持ち、個包装などの属性をスキーマでまとめて管理する。 |
| 楽天商品検索API | 制作時のスクリプトが検索結果を候補JSONとして保存する。候補の取得とサイトへの掲載は別工程にする。 |
| TypeScript | ブラウザ上のギフト診断で回答に合う商品を絞り、残った商品に応じて次の質問と選択肢を画面上で構成する。 |
処理の流れ
商品候補を取得
制作時に楽天の商品検索APIから候補を取得し、価格、画像、店舗、レビュー情報を整えたJSONを保存する。
掲載商品を管理
選んだ商品をYAMLに登録し、目利きコメントと温度帯、日持ち、個包装、のし、贈る相手などを持たせる。
回答で候補を絞る
静的ページに埋め込んだ商品属性をブラウザで照合し、残った候補から次の質問を作り、結果カードを表示する。
実装の工夫
取得と掲載を分離
楽天APIの取得スクリプトが出力するのは候補JSONである。公開用の商品コレクションには別途登録したデータを使い、スキーマで目利きコメントを必須にしている。取得件数がそのまま掲載件数になる構造ではない。
贈答条件を商品属性に保存
商品ごとに温度帯、日持ち、個包装、のし、価格帯、向く相手や避けたい場面を持てる。記事と診断が同じ商品コレクションを参照するため、用途ごとに商品説明や条件を重複して定義せずに済んでいる。
残り候補から質問を生成
診断では回答のたびに商品集合を絞り、選択可能な条件を残り候補から計算する。該当商品がない選択肢を表示しないため、回答を進めた結果だけが空になる組み合わせを診断画面上で避けられる構成である。
構成と制約
- ギフト診断の絞り込みにはブラウザのJavaScriptが必要である。無効時はジャンル別の記事リンクを表示する。
- 商品候補のAPI取得は制作時のスクリプトで行い、閲覧時に楽天APIへ問い合わせる構成ではない。
実装確認：