フォトブック制作ガイド
写真のおくりもの
家族、卒業や卒園、旅行の記念に贈るフォトブックの準備を案内するサイト。用途別の構成見本から写真の選び方、商品のページ数に合わせる手順、注文前の確認事項へ進める。印刷先の公式仕様と確認日を添え、写真の編集と注文は各社のサービスで行う。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | 用途別のガイドと印刷先案内を静的HTMLに生成し、共通レイアウトで見出し、ナビゲーション、ページの正規URLをそろえる。 |
| Astro Image | アルバムの生成画像を複数幅のWebPに変換し、画面幅と掲載位置に応じた画像の候補を出力する。 |
| CSS | スマートフォンでは用途別カードを1列に並べ、横幅が必要な比較表は表の領域内でスクロールできるようにする。 |
| JavaScript / Google アナリティクス 4 | アクセス解析の許可をブラウザに記録し、本番ドメインで許可された場合だけ計測タグを読み込む。 |
| Cloudflare Workers Static Assets | 生成した静的ファイルを独自ドメインで配信し、存在しないURLには専用の404ページを返す。 |
処理の流れ
贈る場面から構成を選ぶ
家族、卒業や卒園、旅行のガイドを読み、一冊に残したい出来事と写真の並べ方を決める。団体制作では掲載の同意と確認役も整理する。
写真とページ配分を見直す
似た写真を絞り、画質や切り抜きを確認する。構成案が選ぶ商品のページ数に収まるか、表紙と本文をどう数えるかを印刷先の公式案内で確かめる。
印刷先の条件を確認する
公式仕様の比較表から編集方法、ページ数、配送条件を確認する。商品の仕様に付けた公式リンクと確認日から情報の根拠をたどれる。
注文前の確認を終える
贈る日、部数、総予算、届け先を紙や手元のメモに整理し、選んだ印刷先の編集画面で仕上がりと最終金額を確かめて注文する。
実装の工夫
画像の変換と表示条件を共通化する
共通の画像コンポーネントが4種類の場面画像を扱い、360〜1440pxの4段階のWebPを生成する。先頭の画像は優先して読み込み、ほかは遅延読み込みにする。代替テキストには生成イメージと記し、大きく載せる画像には実商品や実際の作例ではない旨を添える。
比較する商品の範囲と出典を示す
印刷先の比較表には公式リンクと確認日を記載し、商品と編集方法による条件の違いを明示する。特定の商品を扱う行とサービス全体を扱う行を区別し、実物を比較した品質ランキングにはしていない。仕様の出典リンクと広告リンクも表示を分ける。
許可と本番ホストで計測を制御する
アクセス解析の選択をブラウザ内の保存領域であるlocalStorageに記録し、許可された本番ドメインでだけ計測タグを読み込む。フッターから選択を変更でき、拒否へ切り替えると解析用Cookieを削除する。別タブでの選択変更も検知し、タグ読込み済みなら再読み込みして拒否を反映する。
構成と制約
- 写真のアップロード、会員登録、注文、決済は受け付けない。写真の編集や仕上がり確認、購入は印刷先の公式サービスで行う。
- 構成見本は商品付属のテンプレートではなく、画像も生成イメージである。実物の比較検証は行っておらず、ページ配分や納期は選んだ商品と編集方法に合わせて確認する必要がある。
実装確認：