にっぽん深海スクロール

つくりの話

1m＝2ピクセル、1mmも省略しない

深海の図解は、紙面に収めるために深いほど目盛りを詰めることがよくあります。でもそうすると、「ダイオウイカまでの遠さ」と「そこから底までの、もっと遠い道のり」が同じ大きさに見えてしまう。数字は合っていても、体感としては嘘になります。

だからこのトイは、海の1mを画面の2ピクセルに置き換えて、最後まで同じ縮尺を守っています。海面から9,780mまで、スクロールの長さはおよそ2万ピクセル。指が疲れてきたら、それがそのまま深海の深さです。

とくに長いのが後半です。1,600mのメンダコを過ぎると、次に生き物のカードが出てくるのは8,000mのシンカイクサウオのなかま。その間の6,400mには、新種ヨコヅナイワシの話、富士山の高さ、しんかい6500の限界深度という目印しかありません。この「何も現れない長い闇」は手抜きではなく、いちばん見せたかった部分です。

闇の中で迷わないための目盛り

ただ、真っ暗な画面が延々と続くと、本当に進んでいるのか不安になります。そこで左端に、測深の綱のような目盛りを500mごとに刻みました。1,000mごとは少し長い線です。カードと文字が重ならないよう、カードの前後140m以内の目盛りは省いています。

背景には、ゆっくり漂うマリンスノーの粒を150個まいてあります。1,100mより深いあたりでは、その一部が青緑にぼんやり明滅して、光る小さな生き物のように見えます。

カードがぶつかる問題

縮尺を決めると、すぐ次の問題が出てきます。1m＝2ピクセルだと、深さの近い生き物どうしのカードが重なってしまうのです。実際の海では700〜1,000mあたりに、オオグソクムシ、タカアシガニ、ラブカ、デメニギスと人気者が集まっていて、最初の版はまさにこの区間が団子になりました。

解き方は三つの合わせ技です。カードを「絵の下に文字」から「絵の横に文字」に組み替えて背を低くする。それでも詰まる所だけ、その生き物が実際にいる深さの範囲内で位置を少しずらす。最後に、カードを左右交互に置いて、多少縦に重なってもぶつからないようにする。縮尺、カードの大きさ、生き物の密度は、どれか一つだけでは決められませんでした。

一気にスクロールしても取りこぼさない

カードは近づくとふわっと浮かび上がります。最初は「画面に入った瞬間」を知らせてくれるブラウザの仕組みで作っていましたが、テストで最下部まで一気に飛んだら、ゴールのカードが出てきませんでした。一度のスクロールで素通りしたカードは、「画面に入った」と判定されないことがあったのです。スクロールバーをつかんで一気に引き下ろす人でも同じことが起きます。

いまは、スクロールのたびに「まだ出ていないカード」を見回して、画面の下のほうまで来たものも、すでに上へ通り過ぎたものも、まとめて表示済みにしています。カードは全部で24枚なので、毎回調べても負担はわずかです。動きを減らす設定にしている端末では、最初から全部のカードを表示します。

深度計は画面の上端ではなく、目線の高さを読む

左上の深度計は、画面のいちばん上ではなく、上から45%の高さが海のどの深さにあるかを表示しています。人が「いま見ている」と感じるのは画面の中ほどだからです。上端で測ると、生き物がまだ画面の下にいるうちに深度計だけが先にその深さを名乗ってしまい、体感とずれます。

計器の下の細いバーは、最深部までの進み具合です。その横に「つぎの出会いまで あと何m」と出るので、長い闇の中でも次の目印までの距離がわかります。

水温と水圧は「ざっくり、でも嘘をつかない」

水圧は理科の教科書どおり、10m潜るごとにおよそ1気圧ずつ増やしています。水温は実際の海の形をなぞった3本の折れ線です。

• 0〜200m：24℃から12℃へ。日の当たる暖かい層
• 200〜1,000m：12℃から4℃へ。水温が急に下がる層
• 1,000m〜：4℃からゆっくり下がり、およそ5,000mで1.5℃になって、そこから先はほぼ一定

表示にはすべて「約」を付けています。生き物の深さを「このあたり」と言うのと同じで、事実を扱うおもちゃは、正確さより丸め方の誠実さが大事だと考えています。

カードは最初からページに書いてある

このサイトのおもちゃはほとんどが canvas に絵を描くタイプですが、深海スクロールだけは24枚のカードを、ページを作る段階で普通の文章として書き込んであります。生き物の名前・深さ・解説がページの中に文字として存在するので、検索で「タカアシガニ 深さ」と調べた人にも届きます。

プログラムが受け持つのは、深度計の更新、カードの出現、記録の保存だけ。動く部分を小さくすると、壊れうる部分も小さくなります。

イラストの失敗と、その吸収

生き物の絵は、全部に同じ絵本調の指示を付けて画像生成AIでまとめて作りました。ところが16枚のうち2枚、チョウチンアンコウとヨコヅナイワシは、何度やり直しても平べったい図形のような絵になってしまいました。

そこでヨコヅナイワシは絵をやめて、文字だけのカードにしました。2021年に駿河湾で見つかった全長2.5mの新種という話は、絵よりも文字のほうが立つと考えたからです。チョウチンアンコウは仮の絵で公開し、あとで描き直しました。その後、シンカイクサウオ・オオグソクムシ・メンダコの3枚にも同じ失敗が紛れ込んでいたことがわかり、描き直しています。失敗した絵はファイルサイズがほかの半分以下と小さく、目で見るよりサイズを並べたほうが早く見つかりました。

記録とご褒美

自己最深の記録は、スクロールのたびには書き込まず、止まってから0.4秒後にまとめて保存します。スクロール中に何度も書き込むと動きが重くなるからです。

9,780mに初めて着いたときだけ、短いファンファーレを一度鳴らします。いちばん深い場所には、いちばん控えめなご褒美を置きました。

楽しみ方

• はじめの一回は省略なしで：スクロールバーを使わず、指だけで最深部まで。遠さを体で覚えるのがこのトイの本体です。
• 深さ当てクイズ：「ダイオウイカは何m？」と予想してから潜る。答えが出るまでの距離が、そのまま驚きの大きさになります。
• 身近なものと比べる：東京タワー（333m）、スカイツリー（634m）、富士山（3,776m）、エベレスト（8,849m）を逆さに沈めた深さに目印があります。
• 調べ学習の入口に：カードには深さと一言解説が付いているので、スクショを並べるだけで深海の生き物マップになります。数字は目安なので、気になった生き物を図鑑で調べ直すところまでやると立派な自由研究です。自由研究には、もようが育つ数式やさわれる流体もどうぞ。
• 自己最深を更新する：途中でやめても記録は残ります。今日は1,000mの「完全な闇」まで、次は最深部まで、と分けて潜るのもおすすめです。