このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。
「現地を知り尽くした日本語ガイドと、まだ見ぬ絶景へ。」をコンセプトに、紙色×墨×オリーブ×バフ×橙の5色と、破れ紙のエッジ・手描きの下線・写真のバフ枠という手仕事のモチーフで組んだ旅行会社のブランドサイト。ファーストビューは森・氷河湖・雪の稜線・外洋の映像4本を5秒ごとにクロスフェードし、右下の01〜04と進行バーで現在地を示す。TOP/ツアー一覧(エリア・季節・アクティビティ・所要時間・並び替えの5軸絞り込み)/ツアー詳細3本(sticky申込カード・タブ3面・含まれるもの/含まれないもの・縦タイムラインの日程表・人数帯×時期の料金表・非対称ギャラリー・地図・FAQ・関連ツアー)/モデルコース3本(2泊3日・4泊5日・7泊8日の日別タイムライン)/よくある質問(4分類13問)/会社概要/お問い合わせ(入力→確認→完了)/プライバシー/404の全11ページ。
ツアー9本のデータを1本のJSに集約し、一覧・絞り込み・並び替え・関連ツアー・TOPの人気枠をすべて同じデータから描画する構造にした。データと表示を分けたことで、静的サイトのままCMSやノーコードへ移植できる形を保っている。ファーストビューの映像は、重ね置きした4本をopacityだけで交差させ、2本目以降は順番が近づくまで読み込まない。画面外とタブ非表示では再生を止め、自動再生が拒否された場合はポスター画像が残る。写真51枚と映像4本は原寸のコンタクトシートで全数を検品し、実在事業者の船名と電話番号が判読できる素材など4点を差し替えた。橙の文字は紙色地で4.1:1しか出ないため文字用の橙を別に用意してWCAG AAを満たし、iOS向けにvw不使用・100svhの二段指定・aspect-ratioはimg直の3点を徹底した。
同じデザインを STUDIO で再構築
この作品は HTML / CSS / JavaScript で書いた静的サイトである。同じデザインがノーコードでも成立するかを確かめるため、静的版の実測値(配色・余白・文字サイズ・動きの秒数)をそのまま基準にして、STUDIO 上で同じ画面を組み直した。完全な複製ではなく、下に挙げた差は残っている。
- 移植元:静的 HTML / CSS / JavaScript・全11ページ(GitHub Pages で公開)
- 移植した範囲:TOP とツアー一覧の2ページ(全11ページ中)
- STUDIO 版の構成:1,302ノード
- ファーストビューの動画4本ローテーション(5秒ごとに1.4秒かけてクロスフェード)も再現
- ページ全体の高さの差:PC −1.68% / SP +1.19%