開封ナイトツアーWebサイトデザイン

5つの章で描く開封ナイトツアーWebサイトデザイン

「Bianjing After Dark」は、想像上の都市を夜の絵巻物として構成しています。冒頭では、左側に特大の中国語文字を配し、灯籠に照らされた川、木造建築、反射を組み合わせています。濃い青色の舞台を背景に、金色のアクセントと明るい窓が際立ちます。主な誘導はシーケンスへ入ることであり、目的地を検索したりツアーを予約したりすることではありません。

後の章でも、同じ河畔都市の世界が背景として続きます。スクロールに合わせてカメラと前景のテキストが同時に変化する一方、上部のナビゲーションと番号付きの章レールは引き続き利用できます。これにより、各立ち寄り地点に別ページを用意することなく、城門、橋、市場、詩、締めくくりの灯籠シーンに連続性が生まれます。

01

シーンの一部としてのタイポグラフィ

大きな中国語見出しを縦方向のまとまりとしてコンパクトに配置し、画面の広い部分を川と建物のために空けています。冒頭の見出しの下には、より小さな英語のブランド表記が置かれています。異なる言語を同じ空間で同等の表示サイズにしようとせず、サイズの違いによって読む順序を確立しています。

02

現在地を把握する2つの方法

上部のナビゲーションはアクティビティ名を示し、右側のレールは5つの章に番号を付けています。名称は各地点の内容を説明し、番号はシーケンス内の位置を示します。視覚的な背景が連続しているため、章の境界が分かりにくくなりがちですが、位置情報を繰り返し示すことで把握しやすくなっています。

03

繰り返される視覚的モチーフとしての光

格子状の窓、吊り下げられた灯籠、反射によって、温かな光の点がシーン全体に繰り返し現れます。最後の灯籠を放つアクションでは、冒頭から見えていた同じオブジェクトが使われます。そのため、最後に追加された無関係なエフェクトではなく、確立された視覚的な物語の結末として感じられます。

選択した詩を灯籠のシーンへ引き継ぐ

詩の章では、参加のあり方が変化します。訪問者は市場の新たな演出を起動する代わりに、詩を選び、次にその一節を選択します。選ばれた一節は独立したメモ領域に繰り返し表示され、締めくくりのシーンへ引き継がれます。この小さな状態情報が2つの章を結び、読むという行為が後のツアーに目に見える結果をもたらします。

出典情報では、作者名と背景説明をクレジットページだけでなく、詩の横にも配置しています。そこでは、南宋の詩が汴京の史実として提示されているのではなく、灯籠がともる夜の情景を表すために引用されていることが説明されています。この区別により、芸術的な連想を記録資料の証拠に見せかけることなく、情趣に富んだ文章を体験に活用できます。

1. 範囲を絞った読書の選択肢を提示する

   詩のタブを2つに絞ることで、一目で理解できる選択肢の数に抑えています。それぞれの詩には、固有の作者名と背景説明があります。訪問者は、この短い体験に意味のある選択をするために、アーカイブを検索したり、別の読書ページを開いたりする必要がありません。

2. 先へ進む前に選択した一節を再表示する

   メモ領域では、詩の下に選択した一節を再表示します。クリック可能な行自体はほかの詩句に囲まれたままなので、これは有用な確認になります。その後、続行アクションによって、特定のテキストがすでに選択された状態で灯籠の章へ進めます。

3. 結末に関連する2つのアクションを用意する

   最後の章では、引き継がれたメモの横に、空へ放つ灯籠と川へ流す灯籠を用意しています。どちらも確立された世界観に適合しながら、進む方向が異なるため、明確に異なる選択肢となっています。リプレイのアクションは独立しているので、都市の旅を繰り返すことと、もう1つ灯籠を放つことが混同されません。

夜市、詩、締めくくりのシーンのペース設計

市場の章は、最も動きのある立ち寄り地点です。鉄花と花火のエフェクト、街頭の呼び声を再生するコントロール、茶、絹、舟にまつわる短い物語が用意されています。これらはすべて同種のインタラクションではありません。雰囲気を変えるものもあれば、テキストを変えるものもあります。市場という枠組みの下にまとめることで、多様な要素に分かりやすい舞台を与えています。

歴史的復元ではなく、芸術的なナイトツアー

これは、河畔都市の情景、詩、現代の想像力から着想を得た架空のデジタル体験です。都市のシーンは精密な復元ではなく、出典情報ではイラストがAIによって作成されたことも明記されています。プレビューは提供されたローカルインタラクションを維持しており、チケット販売、実在する旅程、検証済みの歴史地図は追加していません。ギャラリーは、一般的な1枚の全ドキュメントスクリーンショットではなく、レンダリングされたスクロールシーンを順番に並べたものです。