Behind the build — Day 010
day10は、day9と同じ蓼科の宿「NOR(架空)」を、まったく別の作法でもう一度作りました。今日の主題は、小説の手法をウェブに持ち込むこと。滞在記を章で読ませる、章ごとに挿絵がスクロールに合わせて切り替わる、補助情報は画面下からせり上がるメニューに格納する。そういう構造でひとつのサイトが作れるか、試した日です。途中で動画ループの限界に当たったり、酔うアニメを作ってしまったり、いくつもの行き止まりがありました。直す前を順番に。完成形は一番下に。
01
最初に考えた構成は「八室それぞれを1章ずつ紹介する」カタログ型でした。室名(松・苔・霧・石・沢・空・燼・羽)を入口に、章ごとに別の部屋を訪ねていく。書き始めて気付いたのは、これだと滞在の物語性が立ち上がらないこと。1部屋について書ききらないうちに次の部屋に移る、というのを8回繰り返すと、読み手は「カタログを順に眺めている」状態になる。滞在の体験は、誰かが1部屋を選んで、そこに泊まる物語にしか宿らないと判断して、構成を翻案しました。8室はあくまで選択肢として全部出すけれど、章を進めていくのは「霧を選んだ私の滞在記」。道中・到着・部屋・夕食・霧の朝・別れぎわ、合わせて六章。
出した指示8室それぞれを章にすると流石に長すぎる。全部屋紹介ではなく、今回はこの部屋を選んだ、という感じでいい。八室は別の場所(=せり上がりメニューの中)で全部見せて、本文は1部屋(=霧)を選んだ人の滞在記として進めてください。
02
章ごとに挿絵と本文を分ける作りにしました。PC では左に本文・右に挿絵を並べ、スマホでは上に挿絵を貼り付け、下に本文を流す。スマホでは、スクロールしていくと挿絵が画面の上端に到達するので、その瞬間に挿絵の高さが少し縮んで本文が読みやすくなる、という動きを組みました。動かしてみると、スクロールの途中で挿絵が大きくなったり小さくなったりを繰り返して、読みながら目が回ります。判定の仕組みを変えて、挿絵のサイズが一度縮んだら、もう戻らないようにしました。さらに縮む量を控えめに保つことで、動きそのものが目を引かなくなりました。
出した指示FVからスクロールしてきた時にぐわんて拡大するし、中途半端な位置にスクロールを止めると大きくなったりしいさくなったり無限ループするしで、非常に目障りです。ジャンプ率が大き過ぎただけじゃないかなと思う。
03
章が切り替わるとき、最初は前の章の画像を「ふっと透明にして消す」動きにしていました。やってみると、消える途中で次の章のテキストが画像の上に重なって見えてしまう。画面に貼り付けて固定していた画像が透明になる、ということは、その下にある次の章のテキストが画像の上に現れる、ということ。写真と文字の上下関係が壊れて、本を読んでいる感じが消えました。動きを「次の章が下から入ってきたぶん、前の章の画像を上に押し上げる」に変えました。画像は最後まで画像のまま、本の頁がめくれていくように上に消えていきます。
出した指示FVいい感じです。FVはこれで完成でOK。sticky、もう少し画像の表示される領域を小さくして欲しい。現状の6割ぐらいがいい。その上で、画像の下に潜り込んでいくテキスト、上からグラデーションを重ねるなどして、薄く消えていくような感じにしたい。今は写真に重なった途端にブツっと切れるので。
04
章5「霧の朝」の挿絵は、最初 Midjourney で動画として作ろうとしました。霧が谷からゆっくり立ち上がる短い映像をループで流す、という狙いです。「シームレスにループする」「最初の一コマと最後の一コマが揃う」と何度も注文を入れて作り直しても、どの動画も途中でカクッとフレームがずれる。ループの継ぎ目も滑らかにならない。動画編集ソフトで継ぎ目を混ぜる試みもうまくいきません。これは Midjourney の動画機能の限界だと判断しました。動画を諦めて、CSS だけで霧の動きを作ります。半透明の白い霧の塊を3つ作って、それぞれ違う速さで、違う方向にゆっくり流すだけ。霧と霧が重なる部分は明るく、重ならない部分は薄く見える。動画より動きは大人しいけれど、ずっと予測可能で、画像も静止のままなので軽い。霧/雲/湯気のようなゆらぐ動きは、これから CSS で組むのを定番にします。
出した指示動画、「シームレスにループ」と何度指示しても、途中でカクッとフレームがズレるんですよね。(動きが小さすぎて) 流石に誰も気づかないと思う。(動きを大きくして) 酔いそう。(横方向だけだと) 動きあまりわからなかった。 js で霧の描画を作るとか、霧だけの画像を重ねて動かすとか、他の方法ないでしょうか？
05
章を進めるための本文は「読み物」として薄く保ちたい。けれど宿のサイトには、八室の一覧、体験、食事、アクセス、予約と、必要な情報がたくさんあります。本文に混ぜ込むと物語の流れが切れるし、別ページに分けると章を読みながら手の届く位置になくなる。そこで章ごとに小さなボタンを置いて、押すと画面下から全画面のメニューが競り上がる形に。スマホで地図アプリや配車アプリでお馴染みのあの動きです。さらに八室と体験のメニューは2階層にして、一覧の中からカードをタップすると個別の部屋・体験の詳細に潜り、「← 一覧へ」で戻ります。一度閉じて開き直すと必ず一覧から始まる。 PC で同じ動きを使うと「画面の下半分が常に何かに覆われる」息苦しい見え方になるので、PC 版だけは画面の右側からスライドするメニューに切り替えました。同じ機能を、画面のサイズに応じて見せ方を作り直す。
出した指示章ごとに各コンテンツをそっと開けるようにボタンを小さくおいておく。UIはもちろん下から競り上がる方式。あと、PC版のせり出しメニュー、これは横から出てくる形式がいいかもしれない。部屋の下から迫り出してくるメニュー、day9と同じく、2階層にしてください。
06
表紙 → PM:3:20 道中 → PM:4:20 八つの名 → PM:5:00 窓辺 → PM:6:30 静かな食卓 → AM:5:50 霧の朝 → AM:9:30 別れぎわ → 予約CTA。滞在の時間軸そのものがサイトの骨格です。 PC では左に本文・右に挿絵の縦2分割が章ごとに切り替わり、スマホでは上に挿絵が貼り付いて、その下に本文が流れる。章を進めるたびに、前の挿絵が上に押し上げられて消えます。章5の霧は静止画に半透明の霧を3つ重ねてゆっくり流す。補助情報はすべて画面下からせり上がるメニュー(=PC では画面の右側からスライド) に格納。本文は読ませることに専念し、機能は別の器に。 day9 が「アプリの作法をウェブに持ち込む」だったのに対し、 day10 は「小説の手法をウェブに持ち込む」。同じ宿の素材を、まったく別の作法で。
「ウェブで小説を読ませる」というのは、考えてみると珍しい体験です。文芸雑誌でもなく、 note のような縦に流れる長文でもなく、章ごとに挿絵と本文が並び、スクロールに合わせて挿絵が切り替わる。本文は薄く、機能はせり上がりメニューに格納。「動画にしたら綺麗かも」と思った瞬間に Midjourney の限界に当たり、酔うアニメを作ってしまい、結局静止画に重ねる方法に戻る。テーマに忠実であることが、サイトの魅力に勝つことはない —— day9 で気付いたこの原則は、 day10 でも形を変えて何度も顔を出しました。
サイトを見る →