東京スカイツリーといえば、高さ634mで世界一の高さを誇る自立式電波塔。2012年5月22日に開業して以来、東京の新しいシンボルとしてすっかり定着しました。634mという数字が「む（6）さ（3）し（4）」、つまりこの一帯がかつて含まれていた旧国名「武蔵国」にちなんでいるのは、知っている方も多いと思います。
そんなスカイツリーですが、開業前後の話題は塔そのものだけではありませんでした。当時の公式ホームページが、まるでスカイツリーそのもののように縦へ縦へと長く伸びる、とんでもなく「高い」サイトだったのです。私はWeb制作を仕事にしているので、塔の高さより先にサイトの作りに目が釘付けになってしまいました。
もう10年以上前の話なので「そんなサイトあったかな?」という方も多いと思います。私はこれまで数えきれないほどのサイトを眺めてきましたが、見た瞬間に「うまいことやったな」と思わずニヤリとさせられたサイトは、そう多くありません。当時のスカイツリー公式サイトは、その数少ないうちの一つでした。理屈ではなく、構成そのものでテーマを伝えてくる潔さがあったのです。
この記事では、その縦長サイトがどんなものだったのかという昔話から始めて、いまのスカイツリー公式サイトの様子、そして「Webデザインにおける遊び心」という少し技術寄りの話まで広げていきます。スカイツリーのちょっとした雑学と、サイト作りの裏側、両方を気軽に楽しんでもらえる内容です。難しい専門知識がなくても読めるように書いたので、塔の雑学が目当ての方は前半を、サイトの作りが気になる方は後半を読んでもらえれば、それぞれ楽しめるはずです。
そもそも東京スカイツリーってどんな塔？高さ634mの由来
本題のサイトの話に入る前に、スカイツリーの基礎をおさらいしておきます。古い記事なので、改めて事実を確認しながら書き直しました。
東京スカイツリーは東京都墨田区押上に建つ電波塔で、2012年2月29日に完成し、同年5月22日に観光施設・電波塔として開業しました。高さは634mで、タワーとしては世界一。建設中の2011年11月17日には、世界一高いタワーとしてギネス世界記録にも認定されています。
面白いのが、この634mという中途半端に見える数字が、実は語呂合わせから来ているところです。「6・3・4」で「むさし」、つまりこの地域がかつて属していた旧国名「武蔵国」を表しています。覚えやすい数字にしたいという狙いで決まったそうです。
ちなみに当初の計画では高さは約610mとされていました。ところが当時、中国で建設が進んでいた広州タワーが約600mとほぼ同じ高さだったため、世界一を狙って634mまで引き上げたという経緯があります。語呂合わせと世界一争いが両立した、なかなか欲張りな数字というわけですね。
参考リンク：東京スカイツリー スペック（公式） / 東京スカイツリー（Wikipedia）
開業当時の公式サイトは「縦に高すぎる」デザインだった
さて、ここからが当時のWeb制作者として一番テンションが上がった話です。
2012年の開業前後、東京スカイツリーの公式ホームページは、画面をスクロールしてもしてもなかなか終わらない、とにかく縦に長いつくりでした。展望デッキや回廊といった各施設の紹介が、上から下へずらりと一本道で並んでいて、スクロールすればするほど塔をてっぺんから足元まで眺めているような気分になる。サイトの「縦の長さ」で、塔の「高さ」そのものを表現していたわけです。
当時の私のメモには「長い……いや、スカイツリーだから“高い”か」と書いてあって、我ながら気の利いたことを言おうとして失敗している感じが残っていました。実際、下までスクロールするのは正直それなりに面倒です。それでも、縦に長いという一見デメリットになりそうな要素を、テーマと結びつけて「らしさ」に変えてしまうアイデアには素直に唸りました。
ちゃんと使いやすさにも配慮されていた
ただ長いだけのサイトなら、ユーザーはすぐ迷子になります。当時のサイトはそこも工夫されていて、スクロールに追従してついてくるメニューが用意されていました。今でこそ「追従ナビ」「固定ヘッダー」は当たり前ですが、2012年当時の日本のサイトではまだ珍しめの作りで、長いページの弱点をうまく補っていたんです。
こういう縦長一枚もの＋演出という構成は、海外サイトでは早くから見かけました。一方で当時の国内サイトは、ヘッダーがあってメニューがあって……という無難な箱型レイアウトが主流。だからこそ、公式という堅そうな立場であえて攻めた構成を採ったスカイツリーのサイトは新鮮でした。私自身、気を抜くとつい無難なレイアウトに落ち着けてしまうタイプなので、当時は「こういう振り切ったデザインを臆せず提案できる人になりたい」と思ったものです。
なお、スカイツリーの公式サイトはその後リニューアルを重ねていて、今は当時のような極端な縦長デザインではありません。スマホで見ることが前提の時代になり、施設ごとにページが分かれた、情報を探しやすい一般的な構成になっています。あの縦長サイトを直接見られなくなったのは少し寂しいですが、これはこれで時代に合った正解だと思います。
関連記事：【jQuery】固定ヘッダによるページ内リンク位置ずれの解消方法
Webデザインの「遊び心」とスクロール演出の話
スカイツリーの縦長サイトは、いま振り返ると「スクロールそのものを体験に変える」表現の早めの一例でした。ここからは、そのあたりのWebデザインの技法を、なるべくかみ砕いて紹介します。
パララックスとスクロールテリング
スクロールを使った演出の代表格がパララックス（視差効果）です。背景と前景の要素を違う速度で動かすことで、平面の画面に奥行きや立体感を生み出す手法のこと。スクロールするだけで画面に動きが出るので、静的なページよりぐっと印象に残ります。
もう一つよく語られるのがスクロールテリングです。これは「スクロール」と「ストーリーテリング（物語を語ること）」を合わせた造語で、スクロールに合わせて画像やアニメーションが切り替わり、まるで物語が進んでいくように情報を見せていく演出を指します。スカイツリーの縦長サイトを「足元から展望台まで順番にのぼっていく物語」と捉えると、発想としてはこのスクロールテリングにかなり近いものがあります。
仕組みのイメージとしては、スクロール位置に応じて要素を動かすだけ。たとえばJavaScriptで「どこまでスクロールしたか」を取って、その値で表示を変えるといった具合です。
// スクロール量に応じて背景をゆっくり動かす簡単な例
window.addEventListener('scroll', function () {
const y = window.scrollY;
document.querySelector('.bg').style.transform =
'translateY(' + (y * 0.5) + 'px)';
});たったこれだけでも、背景が本文よりゆっくり動いて奥行きが生まれます。最近はCSSだけでも近いことができるようになってきましたが、考え方の根っこはずっと「スクロール量を見て、見せ方を変える」です。
参考リンク：Webデザインのトレンド「スクロールテリング」とは / パララックスの効果的な使い方（Adobe）
遊び心は「諸刃の剣」でもある
こうした演出は楽しい反面、Web制作の現場では扱いに気をつかう存在でもあります。長年この仕事をしてきて、派手な演出で失敗する例も成功する例も両方見てきました。
まず表示速度。動きをリッチにするほどブラウザの処理は重くなり、ページの読み込みや操作への反応が遅くなりがちです。せっかくの演出も、表示される前にユーザーが離脱してしまっては本末転倒です。
次にSEOとの相性。スクロール演出を主役にしたサイトは画像中心になりやすく、テキスト情報が薄くなりがちです。検索エンジンは文字を手がかりにページの内容を理解するので、見た目が派手でも内容が伝わらず、評価が上がらないことがあります。縦に全部を詰め込んだ一枚ものは「結局このページは何の話?」とテーマがぼやけてしまう弱点もあります。
現実的な落としどころとしては、PCでは演出を効かせてスマホでは控えめにする、演出はあくまで内容を引き立てる脇役に徹する、といったあたり。遊び心は大事ですが、見てくれる人のことを忘れた瞬間にただの自己満足になってしまう。このバランス感覚こそが、プロとアマの分かれ目なのかなと思います。
参考リンク：パララックスのデザインはSEOに悪影響か / パララックスとは?メリット・注意点を解説
関連記事：JavaScriptのasyncとdeferの違い｜読み込みを最適化して表示速度を改善
まとめ：高さを「サイトの長さ」で表したアイデアに学ぶ
2012年の東京スカイツリー公式サイトは、塔の高さを縦に長いページで表現するという、シンプルだけど効いている遊び心が詰まったデザインでした。今ではリニューアルされて見られなくなりましたが、「そのモノらしさ」をサイトの構造そのもので語るという発想は、スクロール演出が当たり前になった今でもまったく古びていません。
パララックスにしてもスクロールテリングにしても、技法そのものより「何を伝えたくてその動きを使うのか」が肝心です。スカイツリーのサイトは、高さ634mという主役を最後まで主役のまま見せきった。だからこそ、面倒なほど縦に長くても「なるほど」と思わせる力があったのだと思います。逆に言えば、伝えたいことが定まっていないまま演出だけを盛り込むと、表示は重く、内容は伝わらず、ただ動くだけのサイトになってしまう。派手さと中身のバランスは、これだけ長くやってきた今でも私自身が毎回悩むテーマです。
遊び心と使いやすさは、よく対立するものだと思われがちですが、本当に良いサイトはその両方を成立させています。スカイツリーの縦長サイトが新鮮だったのは、ただ攻めていたからではなく、追従メニューのような地味な配慮で攻めを支えていたからでした。アイデアと丁寧さは、どちらか一方ではなく両輪なのだと改めて感じます。
普段なにげなく眺めているサイトも、「なぜこの見せ方なのか」という目線で見ると、作り手の意図が透けて見えて意外と面白いものです。次にどこかの公式サイトを開いたら、スクロールしながらその裏側のアイデアを想像してみると、ちょっとした発見があるかもしれません。
