「自分のホームページを、ゲームのように歩き回れる世界にできないだろうか？」
そんなアイデアから、Unityという開発ツールに興味を持ちました。
例えば、Webサイトを開くと広大な3Dワールドが現れ、キャラクターを操作して草原や森を探索できる。世界の各地にある岩やモニュメントには、自分のプロジェクトやプロフィールが刻まれている。
訪問者は情報をただ読むのではなく、世界を冒険しながら発見していく。
今回は、そんなホームページを作るための第一歩として、Unityの基本を整理してみます。
1. Unityとは？
Unityは、Unity Technologiesが開発しているゲームエンジンです。
ゲームエンジンとは、ゲームを制作するために必要な機能をまとめた開発環境のこと。
Unityには、3Dオブジェクトの配置、物理演算、キャラクターの操作、アニメーション、音声、ライティングなど、ゲーム開発に必要な仕組みが用意されています。
すべてをゼロからプログラミングする必要がないのが大きな特徴です。
Unityは主に以下のような制作に使われています。
- 2D・3Dゲーム
- スマートフォン向けゲーム
- VR・ARコンテンツ
- 建築や製品の3Dビジュアライゼーション
- インタラクティブな展示
- ブラウザで遊べるゲーム
つまり、Unityはゲームだけでなく、体験型のWebコンテンツを作るためにも活用できます。
2. Unityで覚えたい5つの基本用語
Unityを学び始めると、専門用語がたくさん登場します。
まずは以下の5つを理解すると、全体像が見えやすくなります。
① Scene（シーン）
ゲームの世界や画面を構成する単位です。
例えば、タイトル画面、草原のステージ、洞窟などを別々のシーンとして管理できます。
② GameObject（ゲームオブジェクト）
Unityの世界に配置する基本的なオブジェクトです。
キャラクター、岩、木、カメラ、ライトなどはGameObjectとして扱われます。
③ Component（コンポーネント）
GameObjectに機能を追加する仕組みです。
例えば、Transformは位置・回転・大きさを管理し、Colliderは衝突判定を担当します。
Unityでは、オブジェクトに必要なコンポーネントを組み合わせて動作を作ります。
④ Prefab（プレハブ）
繰り返し利用できるオブジェクトのテンプレートです。
例えば「プロジェクト紹介用の石碑」をPrefabにしておけば、異なる文章を持つ石碑を世界中に配置できます。
⑤ Script（スクリプト）
ゲームの動作をプログラムするためのコードです。
Unityでは主にC#を使用します。
キャラクターの移動、ボタン操作、モニュメントの情報表示などをスクリプトで制御できます。
3. Unityのエディター画面を理解する
Unity Editorには、主に次のような画面があります。
| 画面 | 役割 |
|---|---|
| Scene | 3D世界を編集する |
| Game | プレイヤーから見える画面を確認する |
| Hierarchy | シーン内のオブジェクトを一覧表示する |
| Inspector | 選択したオブジェクトの設定を変更する |
| Project | 画像、モデル、スクリプトなどを管理する |
| Console | エラーや実行ログを確認する |
最初は難しそうに見えますが、基本的な操作は「オブジェクトを配置して、設定を変更し、再生して確認する」という流れです。
4. Unityで3D世界を作る仕組み
3Dゲームの世界は、さまざまな要素の組み合わせで構成されます。
地形（Terrain）
草原、山、谷などの地形を作ります。
3Dモデル（Mesh）
岩、木、建物、キャラクターなどの形状を表現します。
マテリアル（Material）
オブジェクトの色や表面の質感を設定します。
ライト（Light）
太陽光や人工的な光を配置し、世界に明るさや陰影を与えます。
カメラ（Camera）
プレイヤーが世界を見る視点を決めます。
物理演算（Physics）
重力、衝突、落下などの挙動を実現します。
これらを組み合わせることで、プレイヤーが自由に探索できる世界を構築できます。
5. キャラクターはどうやって動くのか？
Unityでは、キーボードやゲームパッドの入力を受け取り、キャラクターを移動させる処理を作ります。
例えば、次のような操作です。
- W：前進
- A：左移動
- S：後退
- D：右移動
- Space：ジャンプ
- Shift：ダッシュ
三人称視点のゲームでは、キャラクターの後ろにカメラを配置し、プレイヤーの移動に合わせてカメラを追従させます。
UnityにはCharacter ControllerやInput Systemなどの仕組みがあり、これらを使って移動操作を実装できます。
6. UnityとC#の関係
Unityでは、ゲームの動きをC#というプログラミング言語で記述します。
例えば、次のコードはオブジェクトを回転させる簡単なスクリプトです。
using UnityEngine;
public class RotateObject : MonoBehaviour
{
void Update()
{
transform.Rotate(0, 30f * Time.deltaTime, 0);
}
}
このスクリプトをGameObjectに追加すると、オブジェクトが毎秒30度の速さでY軸を中心に回転します。
ここで重要なのがUpdate()です。
Updateは基本的に毎フレーム呼び出されるメソッドで、継続的な動作を実装する際によく使います。
Time.deltaTimeは前のフレームから経過した時間を表し、フレームレートによる動作速度の違いを抑えるために利用します。
7. Unityでホームページは作れる？
結論から言うと、作れます。
UnityにはWeb向けにゲームをビルドする機能があり、対応するブラウザ上で3Dコンテンツを実行できます。
一般的にUnity WebGLと呼ばれる技術です。
通常のホームページはHTML、CSS、JavaScriptを中心に構成されますが、Unityを組み合わせると、Webページ内に本格的な3Dゲーム体験を組み込めます。
例えば、以下のようなサイトです。
kapibarasan.love — 3D Open World Portfolio
訪問者がサイトにアクセスすると、草原の広がる3D世界に出現します。
世界には、プロフィールが刻まれた石碑、プロジェクトを紹介する遺跡、技術を紹介する森、SNSリンクが集まる山頂などが存在します。
訪問者はキャラクターを操作し、自由に探索しながら情報を発見できます。
これは、従来の「ページをスクロールするホームページ」とは違う体験です。
8. CloudflareでUnityのゲームを公開する
Unityで制作したWeb向けコンテンツは、Cloudflare PagesやWorkersを利用して公開することもできます。
基本的な流れは次のとおりです。
- Unityで3Dゲームを制作する
- Web向けにビルドする
- 生成されたHTML、JavaScript、WebAssembly、ゲームデータを準備する
- Cloudflareへデプロイする
- 独自ドメインを設定する
ただし、UnityのWebビルドはファイルサイズが大きくなることがあります。
Cloudflare PagesやWorkers Static Assetsには、静的アセットの単一ファイルサイズ制限があるため、必要に応じてCloudflare R2などのストレージを組み合わせる構成が考えられます。
また、圧縮ファイルの配信設定、ブラウザのメモリ使用量、モバイル端末での動作確認も重要です。
9. UnityとThree.jsは何が違う？
ブラウザで3D世界を作る場合、Unity以外にThree.jsという選択肢もあります。
| 比較 | Unity | Three.js |
|---|---|---|
| 主な用途 | ゲーム開発 | Web向け3D表現 |
| 開発言語 | C# | JavaScript / TypeScript |
| 3D編集 | 専用エディターが充実 | コード中心 |
| 物理演算 | 標準機能が充実 | 外部ライブラリなどを利用 |
| Webとの統合 | 工夫が必要 | 比較的容易 |
| 初期ロード | 大きくなりやすい | 軽量に設計しやすい |
ゲームそのものを作りたい場合はUnityが有力です。
一方、ホームページとしての軽さやWeb UIとの連携を重視するならThree.jsも適しています。
どちらを選ぶかは、作りたい体験によって変わります。
10. 初心者が最初に作るべきもの
いきなり広大なオープンワールドを作るのは大変です。
最初は、小さな3D空間を作ることから始めるのがよいと思います。
STEP 1：Unityをインストールする
Unity Hubを導入し、対応するUnity Editorをインストールします。
STEP 2：3Dプロジェクトを作成する
新しいプロジェクトを作り、床とライトを配置します。
STEP 3：キャラクターを配置する
最初はCapsuleなどのシンプルな形状で十分です。
STEP 4：移動を実装する
WASDでキャラクターを動かせるようにします。
STEP 5：石碑を作る
Cubeなどを組み合わせて石碑を作り、近づいたら文章が表示される仕組みを実装します。
STEP 6：ブラウザで動かす
Web向けにビルドして、実際にブラウザで動作するか確認します。
ここまでできれば、3Dオープンワールド型ホームページの基本的な仕組みが完成します。
11. Unityを学ぶ上で大切なこと
Unityは非常に多機能ですが、最初からすべてを理解する必要はありません。
まずは「オブジェクトを置く」「キャラクターを動かす」「オブジェクトを調べる」という3つの体験を作ることが大切です。
そこから地形、ライティング、アニメーション、UIなどを少しずつ追加していけば、世界は徐々に広がっていきます。
そして、Webサイトとして公開する場合は、ゲームとしての面白さだけでなく、読み込み速度や操作の分かりやすさも重要になります。
まとめ：ホームページを「訪れる世界」にする
Unityを学んで感じるのは、Webサイトの表現にはまだまだ可能性があるということです。
通常のポートフォリオでは、訪問者はページをスクロールして情報を読みます。
しかし、3Dオープンワールド型のポートフォリオなら、訪問者は世界を歩き回り、岩やモニュメントに刻まれた情報を自分で発見できます。
情報を並べるのではなく、情報そのものを世界の一部にする。
これからUnityの基本を学びながら、kapibarasan.love をそんな場所にしていきたいと思います。
まずは、小さな草原と一つの石碑から。
そこから少しずつ、自分だけの世界を作っていきます。
参考リンク
- Unity公式サイト：https://unity.com/
- Unity Learn：https://learn.unity.com/
- Unityマニュアル：https://docs.unity3d.com/
- Unity Web開発：https://docs.unity3d.com/Manual/webgl.html
- Cloudflare Pages：https://developers.cloudflare.com/pages/
- Cloudflare Workers：https://developers.cloudflare.com/workers/
#Unity #ゲーム開発 #Unity初心者 #WebGL #プログラミング #個人開発 #ポートフォリオ #Cloudflare