会社のサイトは、読まれる前に閉じられてしまうことがあります。事業が7つあると、なおさらです。そこで私たちは、事業を「読む」前に「さわれる」入口をつくることにしました。それが、LEONIAのロゴのライオンをかたどった島「LEONIA島」です。
1. 島の形は、ロゴそのものから
島の海岸線は、ロゴのライオンの輪郭をそのまま使っています。似せて描くのではなく、ロゴのデータから輪郭を取り出しているので、真上から見ると島がそのままロゴになります。

開いた瞬間の演出も、この考えから生まれました。「LOADING」の線が描き続けてライオンの輪郭になり、金色の線が立ち上がり、海の下から島が浮かび上がります。約6秒で、ロゴが島になるまでを一続きで見せています。

2. 建物は、事業と実績
島の建物は、すべてLEONIAの事業に対応しています。本店と支店を光の線でつなぐ「基幹システム」、百貨店に並ぶ専門店の「新規事業」、歯車が回る「既存事業の改善」、コンテナ船が出る「貿易」。島のしっぽの先には、「ご相談」を表す灯台を置きました。ふれると説明が開き、そのまま事業のページへ進めます。
3. 街には、本当の交通ルールを
面白い仕掛けは、ちょっとした不自然さで一気に安っぽく見えます。そこで、LEONIAビルのまわりの街には、日本の交通ルールをそのまま入れました。
- 車は左側通行。横断歩道は、日本と同じ横線のしま模様です。
- 信号は1サイクル41秒。車の青16秒、黄3秒、全赤4秒のあと、歩行者の青が12秒、点滅が4秒続きます。
- 歩行者は、青信号の残り時間で渡りきれるときだけ渡ります。車は、黄信号で無理なく止まれる距離なら止まります。

このルールが守られているかは、約4分間分の街の動きをシミュレーションして確かめました。結果は、赤信号での横断、歩行者が青のときの車の進入、車どうしの重なりが、すべて0件です。検証の途中では、交差点の角の1か所で車が一瞬飛ぶ不具合も見つかり、曲がり方とブレーキをゆるやかに作り直しています。

4. 誰もが行き交う街
歩く人も、車いすの人も、自転車も、子どもも、お年寄りも。LEONIAビルのまわりでは、いろいろな人があいさつを交わしながら行き交います。屋上では5人のチームが働き、公園には誰もが立ち寄れる場所をつくりました。「一人残さず、自分らしさに忠実になれる社会を創る」というLEONIAの考えを、風景にしたものです。
季節は秋。街路樹が色づき、落ち葉が舞います。夜に切り替えると街にイルミネーションがともり、車と自転車はライトをつけて走ります。

5. 水面と、コイン探し
島のまわりの海は、なでると波紋が広がります。夜にして花火を上げると、水面に光が映ります。
そして島のどこかには、LEONIAコインが3枚隠れています。探すうちに島を回し、建物に近づき、気づけば事業のことを一通り知っている。そんな順番になるよう、コインは建物の近くに隠しています。3枚集めると、別の場所にまた3枚隠れます。
6. 見えないところで大事にしたこと
- 日本語・英語・韓国語に対応。LEONIAのご相談窓口と同じです。
- 「動きを減らす」設定の端末では、静止画に切り替わります。
- トップページを重くしません。島は、画面に近づいたときだけ読み込みます。
細部の調整は15回を超え、歩行者の曲がり方ひとつ、コインの向きひとつまで見直しました。
おわりに
LEONIA島は、「自社のことを、もっと面白く伝えられないか」という問いから生まれました。こういう「ちょっと面白い」を事業の中で一緒につくるのも、LEONIAの仕事です。会社や商品の伝え方に悩んでいることがあれば、お問い合わせフォームからお気軽にご相談ください。
島の中のLEONIAビル(2030年4月竣工予定)はイメージです。実際の建物とは異なる場合があります。
よくある質問
- LEONIA島はどこで見られますか?
- LEONIAのサイトのトップページと、https://leonia.biz/island/ で見られます。パソコンでもスマートフォンでも操作できます。
- 動きが重い端末でも見られますか?
- 3D表示に対応していない端末や、「動きを減らす」設定の端末では、自動で動画または静止画に切り替わります。
- 自社のサイトにも、こうした体験型のコンテンツを入れられますか?
- ご相談いただけます。会社や商品の伝えたいことを整理するところから、企画・制作・公開後の改善まで一緒に進めます。