これからアプリが増えていくので、まとめて選べるページがあればと思い、Chrono Works Labのトップページを作ってみました。
アプリのアイコンを貼った立方体が、ゆっくりと輪の上を回っています。気になるものを選ぶと、そこへ近づいて説明が出る。そんな3Dのメニューにしました。
その下には、カテゴリやアプリ名から選べる、普通の一覧も置いてあります。
2026年9月29日に公開したので、作っている途中で試したことも含めて、少し書き残しておこうと思います。
アプリをまとめて選べる入口を作る
最初に載せたのは、TimeWipeとChrono Sculptureの2つです。
それぞれのアプリは、これまでどおり別のページで動いています。今回作ったトップページで選ぶと、そのアプリのページへ移動できます。
立方体を選ぶと近づくメニュー
画面を上下左右へドラッグすると、立方体が並んだ輪をくるくる回して眺められます。
立方体を一つ選ぶと、そこへ視点が近づいて、アイコンの面がこちらを向きます。あわせてアプリの名前と説明、「アプリを開く」ボタンが出てきます。
ただ、作っている途中では、選んだものの手前に別の立方体が重なって、アイコンが隠れてしまうことがありました。そこで、選んだ立方体を手前に表示するように変えています。
輪は、ゆるい楕円の形にしました。立方体はだいたい同じ間隔で並び、約3分かけて一周します。
このときは、2種類のアイコンを交互に並べて、全部で24個の立方体に貼りました。同じアプリのアイコンが、輪の中に何度も出てきます。
ドラッグをやめた後も、少しだけ動きが続くようにしました。近づいた後は、「全体へ戻る」を押すと、また輪全体を眺められます。
下には普通のアプリ一覧も置く
アプリが増えてきたときの探し方も考えて、下にはカテゴリと名前の一覧を置きました。こちらからもアプリを選べます。
裏側では、アプリの名前や説明、移動先などを一つのデータにまとめています。3Dメニューと下の一覧は、どちらもそこから情報を読んで表示する形です。
このデータを書くのには、名前と内容を組にしてまとめられるJSONという形式を使いました。
TimeWipeの登録から、名前や説明などの部分を抜き出すと、こんな感じです。
{
"name": "TimeWipe",
"url": "https://chrono-lab.tech/timewipe/",
"categories": ["カメラ", "タイムスキャン"],
"description": "カメラ映像を細い帯として時間順に重ね、ひとつの画像に異なる瞬間を写すタイムスキャンカメラです。",
"icon": "icons/timewipe.svg"
}name：画面に出すアプリの名前url：アプリの移動先categories：アプリのカテゴリdescription：紹介文icon：使うアイコン画像
この内容を読んで、立方体に貼るアイコンや、選んだときに出る説明、下の一覧を表示しています。
公開したときは、まだ2アプリだけです。
公開して見えたこととこれから
公開するときには、パソコン向けの幅と、390pxまで狭めた幅で画面を確認しました。立方体を回したり、アプリを選んだり、カテゴリで絞ったりして、2つのアプリへ移動できるところまで確かめています。
公開したときには、こんなところも残っていました。狭い画面では、上のメニューが途中で改行されていました。下の一覧からアプリを選んでも、上に出る説明のところまでは自動でスクロールしません。
完成した画面を見て、ちょっと変わったメニューができたかな、という感じです。
アプリが増えていくにつれて、この3Dの中のメニューも、少しずつ変えていければなと思っています。どんな形にするかは、またこれから考えていきます。
立方体を回したり、気になるアイコンを選んだりして、試してもらえたらと思います。
今回使ったもの
| 使ったもの | 今回使ったところ |
|---|---|
| Three.js | ブラウザ上で立方体を表示し、回したり、選んだものへ視点を近づけたりする部分 |
| Canvas | アイコンを一度平面へ描き、立方体に貼る画像を用意する部分 |
| TypeScript | メニューの操作や表示を動かす処理を書くところ |
| Vite | 制作中の表示確認と、公開用ファイルをまとめるところ |
| JSON | アプリの名前、URL、カテゴリ、説明、アイコンを登録するデータ |
