MORITOKI TSUDOI

想定した制作上の課題

実在ブランドの改修事例ではなく、家具ブランドサイトで起こりやすい情報設計と演出上の課題を想定しています。

• 素材や職人の工程を説明するだけでなく、一本の木が家具となり、暮らしへ届くまでの価値を一続きの体験として伝える必要がある。
• スクロールと映像を連動させながら、文章の読みやすさと通常の縦スクロール操作を維持する必要がある。
• 架空ブランドであることが曖昧だと、実在する家具ブランドや商品、工房見学の受付と誤認される可能性がある。

対応方針

• 森、選木、成形、仕上げ、暮らしの5章を、素材から家族の時間へつながる縦の物語として構成する。
• 5章を1本の連続動画の区間へ割り当て、動画の準備中や読み込み失敗時にも各章の静的posterと文章を表示する。
• ネイティブスクロールを維持し、順方向と逆方向で同じ章へ戻れるようにする。スマートフォンと動きを減らす設定では読みやすさを優先する。
• 画面上部に架空ブランド表示を置き、最終CTAも外部送信を行わない相談UIデモとして明示する。

公開画面

制作範囲

• 架空家具ブランドと商品ストーリーの設定
• 日本語コピー作成
• 木、光、時間を軸にしたアートディレクション
• React / TypeScript / CSSによる1ページ実装
• 連続マスター動画と5章のスクロール同期
• 静的posterによる読み込み・動画欠落フォールバック
• PC・タブレット・スマートフォン対応
• reduced-motionと通常スクロールへの配慮
• 外部送信を行わない相談UIデモ
• 自主制作デモ・架空家具ブランド告知

確認した内容

• 1440×900、768×900、390×844で主要コピーと章表示を確認できる。
• 順方向01→05、逆方向05→01で章と動画時刻が対応し、最終位置で動画末尾へ到達する。
• 各画面幅で横方向のはみ出しがなく、スマートフォンでは操作要素を利用できる。
• 低速回線、動画の読み込み失敗、動画ファイル欠落時にもposterと文章を利用できる。
• 動きを減らす設定では動画リクエストを行わず、全内容を静止状態で読める。
• 相談UIの操作から個人情報保存・外部送信が発生しない。
• 公開画面で関連するコンソールエラーや警告が発生しない。