会社の紹介ページは、読まれる前に閉じられてしまうことがあります。見て、さわって理解してもらう「体験型コンテンツ」は、その入口のひとつになります。

LEONIAは10月、自社サイトに3Dの島「LEONIA島」を公開しました。ロゴのライオンをかたどった島で、建物にふれるとLEONIAの7つの事業を紹介します。つくり方は制作ノートにまとめました。この記事では、つくりながら決めてきたことを、これから導入を考える方に向けて5つにまとめます。

1. 何を「さわって」わかってほしいのかを、一文で決める

体験型コンテンツは、面白さだけで終わりがちです。最初に「見た人に、何がわかってほしいのか」を一文で決めておくと、演出の取捨選択がぶれません。

LEONIA島の一文は、「7つの事業を、読む前にさわって知ってもらう」でした。そのため、島の主な建物を7つの事業に対応させ、ふれると説明が開き、そのまま事業のページへ進めるようにしています。島に隠した3枚のコインも、最初は事業の建物の近くに置き、探しながら建物にふれてもらえるようにしました。

反対に、この一文につながらない演出は入れていません。決めるのは「入れるもの」より「入れないもの」です。

2. 検索で読まれる文章は、3Dとは別に用意する

Googleは、ページのJavaScriptを実行し、表示後のHTMLを使って内容を検索に登録します。また、Googleがたどれるリンクは、href属性のある<a>要素で書かれたものだけです。3Dの画面の中に描いた文字やボタンは、そのままでは文章やリンクとして読まれにくいと考えておくのが安全です。

LEONIA島では、島の説明はトップページの見出しと本文に、事業の内容は各事業のページに、つくり方は制作ノートに、それぞれ文章で書いています。島は「入口」、文章は「中身」という役割分担です。

  • 体験型コンテンツのページにも、見出しと説明文を置く
  • コンテンツの中で紹介する内容は、別のページに文章でも載せる
  • 中から外のページへ進むリンクは、通常のリンクにする

3. 重くしない：読み込む・動かす・止めるを決める

3Dは、トップページを重くする原因になりやすい部分です。Googleの基準では、ページの主な内容が表示されるまで（LCP）が2.5秒未満なら「良好」とされています。

LEONIA島では、トップページで最初に表示するのは静止画（約70〜90KB）だけにしています。3Dの部品（3D表示のプログラムだけで約600KB）は、島が画面に近づいたときに初めて読み込みます。さらに、島が3割以上見えているときだけ動かし、画面の外に出たときや、ブラウザで別のタブを見ているときは止めています。

  • 最初に見せるもの（静止画など）を軽くする
  • 重い部品は、必要になったときに読み込む
  • 見えていないときは動かさない

4. 誰でも使えるように、3つの見せ方を用意する

端末の設定や性能によって、3Dが合わない人もいます。多くのスマートフォンやパソコンには、動きを減らす設定があります。アニメーションで気が散ったり、めまいや吐き気が起きたりする人がいるためです。

LEONIA島は、見る人の環境に合わせて表示を自動で切り替えます。

  • 3Dが動く端末：3Dの島
  • データ節約の設定をしている端末、回線がとても遅い端末、メモリが少ない端末、3D表示に対応していない端末：短いループ動画（約0.4〜0.5MB）
  • 「動きを減らす」設定の端末：静止画

言語は日本語・英語・韓国語に対応しています。公開後には、島の街にも手を入れました。点字ブロック、白杖を使って歩く人と盲導犬、音で知らせる歩行者用信号、手話で会話する人、旅行かばんを持った人、いろいろな言語のあいさつを加えています。画面の中の街も、「誰もが行き交う街」に近づけたいと考えました。

5. 公開後に「効いたか」を測れるようにしておく

体験型コンテンツは、つくって終わりにすると、続けるべきかどうかを判断できません。公開前に、何を測るかを決めておきます。

LEONIA島では、次の3つを記録しています。

  • トップページで島が表示されたか、3Dが読み込まれたか、全画面の島へ進んだか（Googleアナリティクスのイベント）
  • SNSのどの媒体から来たか（媒体ごとに計測用のリンクを使い分け）
  • お問い合わせフォームの「LEONIAを知ったきっかけ」に「LEONIA島」の選択肢を追加

数字がたまったら、このコラムで結果もお伝えする予定です。

おわりに

体験型コンテンツは、大がかりな3Dでなくても始められます。LEONIAでは、島に続いて、もぐと事業がわかるバナナなど、小さな試作品をおもちゃ箱に置いています。大切なのは、「何を伝えたいか」を決め、検索・重さ・誰でも使えること・計測までを一緒に設計することです。

LEONIAは、ホームページの企画から制作、公開後の改善までを一緒に進めます。自社のサイトにこうした入口をつくれるか、まだ構想の段階でも構いません。お気軽にご相談ください。

本記事のLEONIA島についての数値（ファイルの大きさ・表示の切り替えの条件）は、2026年10月時点の公開中のサイトのものです。

出典：Google 検索セントラル「JavaScript SEO の基本を理解する」／web.dev「Largest Contentful Paint（LCP）」／web.dev「prefers-reduced-motion: 動きが少ないほうがよい場合もあります」

よくある質問

3Dでないと、体験型コンテンツはつくれませんか？
いいえ。地図や図をさわって動かせるもの、質問に答えると結果が出るものなど、伝えたい内容に合わせて形は選べます。まず「何をさわってわかってほしいか」から考えます。
体験型コンテンツを入れると、サイトが重くなりませんか？
最初は軽い静止画を見せ、重い部品は必要になったときに読み込むようにすれば、表示の速さへの影響を抑えられます。見えていないときは動きを止めることも大切です。
今のホームページに追加できますか？
多くの場合は追加できます。今のサイトの作り方や、どこに置くかによって進め方が変わるので、まずはお問い合わせフォームからご相談ください。