環境問題のことを「大切だ」と頭ではわかっていても、文章を読むだけではなかなか実感が湧きにくいものです。グラフや数字を並べても、どこか遠い話に感じてしまう。そんなもどかしさは、伝える側にとっても悩みどころです。
ASOBOADは、今日の気温に合わせて北極の氷とページそのものが溶けていく様子を体験できる無料Webサイト「とけるな北極ウェブサイト」を公開しました。登録もインストールも不要で、ブラウザでアクセスするだけですぐに体験できます。
どんなWebサイトか
「とけるな北極ウェブサイト」は、「もしブラウザの画面が本当に溶け出したら面白いのではないか」という思いつきから生まれた、表現の実験プロジェクトです。アクセスした場所の今日の気温を取得し、その気温が高いほど、画面の中の北極の氷が大きく溶けていきます。
もともとは、コンテンツの内容よりも「Webページがアイスのようにぐにゃりと溶けて崩れたら面白いのでは」という技術的な好奇心が出発点でした。溶ける仕組みができてから「では何を溶かせば面白いか」を考え、たどり着いたモチーフが北極の氷です。環境問題の啓蒙のために作ったというより、「溶かす」という表現のアイデアに北極というテーマが奇跡的にフィットした…というのが、制作のリアルな裏側です。
ただ眺めるだけのサイトではありません。氷が溶けるにつれて画面下から海面がじわじわと上昇し、見出しや本文といったページ全体の文字までもが気温に合わせて歪んでいきます。「温暖化が進んでいます」という文章を読むのではなく、自分の手元で氷とサイトが溶けていく様子を体験することで、感覚的に北極のことを身近に感じてもらう。それがこのサイトの狙いです。北極の氷の役割や、溶けるとどうなるのかといった解説も、やさしい言葉でまとめています。
気温に連動して「溶ける」仕掛け
このサイトの溶ける演出は、主に次のような形であらわれます。
- 今日の気温で溶ける — アクセスした場所の今日の気温を取得し、暑い日ほど氷が大きく溶けて、海面もじわじわと上昇します。
- 下から水位が上がる — 画面下部には常に海が広がっていて、氷が溶けるにつれて波が荒くなり、水面から出ている氷から雫がポタポタと落ちていきます。
- サイト全体がゆがむ — イラストの氷だけでなく、見出しや本文などのページ全体が気温に合わせて歪みます。暑い日は文字が読みにくくなることもあります。
- 団扇であおいで冷やせる — 右下の団扇（うちわ）ボタンを連打すると、一時的に熱を冷まして元の形に戻せます。手を止めると、またゆっくり溶けていきます。
画面全体が溶ける演出はPC版でより楽しめる設計で、スマートフォンでは動作を軽くするため見出しを中心に溶ける表現を適用しています。
使い方
操作はとてもシンプルです。
1. サイトにアクセスする — ブラウザで開くと、自動で気温をしらべ、その日の気温に応じて氷が溶け始めます。
2. 「現在地の気温で見る」を試す — ボタンを押すと、お使いの端末の位置情報をもとに、今いる場所の気温で溶け具合を確認できます。
3. 団扇で冷やしてみる — 右下の団扇ボタンを連打すると氷が元に戻り、手を止めるとまた溶けていく様子を観察できます。
ゲージで「とけにくい／とけやすい」の度合いも表示されるため、今日がどれくらい溶けやすい日なのかが一目でわかります。
位置情報の扱いと、溶ける仕組み
「現在地の気温で見る」では、お使いの端末の位置情報を気温データの取得にのみ使用します。位置情報をサーバーに保存することはありません。気温データには、世界中のリアルタイムな気温を扱うOpen-Meteoを利用しています。
溶ける表現は、ライブラリやフレームワークに頼らず、ブラウザが標準で備える技術だけで実装しています。氷のとろけるような質感はWebGLシェーダー、見出しや本文を含むレイアウト全体の歪みはSVGフィルター、画面下でリアルタイムに動く波と雫はHTML5 Canvasと、役割ごとに技術を使い分けています。文字には、ぬくもりのある丸ゴシック体「Zen Maru Gothic」を採用しました。外部ライブラリに頼らず、ブラウザの中だけで動く軽い仕組みです。
演出は飾りじゃない。”体験”が一番伝わる。
Webサイトをつくっていると、アニメーションやインタラクションは「あれば嬉しい飾り」として後回しにされがちです。でも、動きの演出こそコンテンツを深く印象づける手段になると考えています。このサイトで試したかったのは、まさにそこでした。「北極の氷が減っています」という一文を読むのと、自分の手元で文字や氷が実際に溶けていき、足元から水位が上がってくるのを体験するのとでは、心に残るものがまるで違います。
正論を並べて訴えるより、触って、眺めて、ちょっと心が動く。その読後感の差を、演出はつくり出せます。最初は「画面を溶かしてみたい」という純粋な好奇心から始まった実験でしたが、そこに北極の氷というモチーフが奇跡的にフィットしたとき、すべてのピースがカチッとはまった感覚がありました。伝えたいことを正面から言うだけが表現ではない。体験そのものをデザインすることで、メッセージはもっと自然に届く。そんな手応えを確かめられた一本です。
活用シーン
- 環境問題や北極の氷について、子どもと一緒にやさしく学びたいとき
- 文章だけでは伝わりにくいテーマを、体験を通じて感じてほしいとき
- Webの演出やインタラクションの表現アイデアを探しているとき
- 今日が暑い日なのか、気温を溶け具合で直感的に確かめたいとき
- ちょっとした息抜きに、画面が溶ける不思議な体験を楽しみたいとき
よくある質問
Q. 利用は無料ですか？
A. はい。登録もインストールも不要で、ブラウザでアクセスするだけで無料でご利用いただけます。
Q. 位置情報は何に使われますか？
A. 「現在地の気温で見る」を押したときに、気温データの取得にのみ使用します。位置情報をサーバーに保存することはありません。
Q. スマートフォンでも溶ける演出は見られますか？
A. はい。氷の溶けや海面の上昇、雫の演出はスマートフォンでも動きます。画面全体が溶ける演出はPC版でより楽しめる設計です。
Q. 団扇で冷やすと気温も下がりますか？
A. いいえ。団扇ボタンは溶けた画面を一時的に元の形へ戻すための演出で、気温の数値そのものは変わりません。連打をやめると、またその日の気温に応じてゆっくり溶けていきます。
Q. 表示されている溶け具合は、実際の北極の状況ですか？
A. いいえ。氷の溶け具合や水位の上昇は、今日の気温をもとにした演出・イメージです。実際の北極の氷の減少量や正確な海面の高さを示すものではありません。
ご利用にあたって
本サイトの「氷のとけ具合」や「水位の上昇」は、今日の気温を反映したあくまで演出・イメージであり、実際の北極の氷の減少量や正確な海面高度を示すものではありません。サイト内の解説は、北極の氷や環境について親しみやすく知ってもらうことを目的としたものです。「現在地の気温で見る」で使用する位置情報は気温の取得にのみ用い、サーバーに保存することはありません。
読んで終わりではなく、触って、眺めて、ちょっと心が動く。そんな体験から北極のことを感じてみてください。
▶︎ デザイン制作実績を見る / ▶︎ デザインのブログ記事一覧 / ▶︎ デザイン制作のガイド・媒体の特徴
この記事について
こんなページも読まれています
