「時間内に何回連打できるか」ゲームを作りたいと思います。

まずはどんなゲームなのかを体験してみてください。

1.ビルド設定の変更:

Build Settings を開き、プラットフォームを WebGL に切り替える。

今回は作ったゲームを実際にWEB上でアップロードするのが目的です。

なのでプラットフォームをWEB用に変える必要があります。

これをしないと例えゲームを完成できたとしても、ネットにこのゲームをアップロードできないもしくは不具合が起こる可能性があります。

後からでも設定はできますが一番最初にやることを推奨します。

メニューバーの File をクリックし、Build Profiles（Ctrl + Shift + B）を選択してください。

左側の「Platforms」リストに「Web」があるか確認してください。

右側にある「Add Build Profile」ボタンを押します。

すると「Web用のビルド設定」が開きます。

ここは基本的になにも押さずにもう一回「Add Build Profile」を押しましょう。

するとこのような画面になります。しっかりと左下の「Build Profiles」に「Web」が追加さえていますね。

これでビルド設定は完了です。

もしうまくいかない場合

もしかするとWEBGLモジュールがこのようにインストールされていない可能性があります。

この場合は一回プロジェクトを保存してから一回終了します。

インストールの管理の部分から「WEB Build Support」にチェックを入れてインストールしましょう。

インストールが終わったらまた起動してもう一度やってみてください。これで元の手順通りに表示されるはずです。

画面比率の固定:

Game ビューの解像度を 9:16

画面比率（アスペクト比）の固定は、Webゲーム開発において「誰がどこで見ても同じ見た目になるようにする」ための非常に重要な工程です。

これを行うことによってPCの縦長画面でも、スマホのブラウザでも、「意図した通りの配置」で表示されます。

画面上部にある「Game」タブをクリックしてGameビューを表示します。

そしてGameビューの左上に「Free Aspect」と書かれたプルダウンメニューがあるので、そこをクリックしてください。

一覧の中に「9:16」があればそれを選びます。もし無ければ、一番下の 「＋」ボタン を押してください。

Type:「Fixed Resolution（固定解像度）」を選択。

Width: 1080

Height: 1920

名前を「Portrait 9:16」などにしてOKを押します。

メニューの中から今作った「Portrait 9:16」を選択します。

今回はスマホで見ている読者にも快適に遊んでほしいので、9:16（縦画面）の設定にしています。

3.UIパネル作成:

StartPanel（スタートボタン）、GamePanel（スコア/タイマー）、ResultPanel（結果表示）の3つをCanvas内に配置する。

「Canvas（キャンバス）」というUIを置くための専用の画用紙をシーンに配置します。何を言っているんだ？と思うかもしれません。なので詳しく説明していきます。

なぜ「Canvas」が必要なのか？

Unityでゲーム画面上に「ボタン」や「スコア表示」などのUIを出す場合、必ずCanvasという枠の中に配置しないと画面に正しく表示されません。

たとえば映画の世界を想像してみてください。

映画の画面に「スコア」や「ボタン」という字幕（UI）を入れたいとします。

もし、映画のセットの中に直接「スコア」という看板を置くとどうなるでしょうか？

• 俳優が走って後ろに行ったら、スコアも一緒に遠くへ行ってしまう。
• カメラを横に向けたら、スコアが見えなくなってしまう。
• 俳優にぶつかって、スコアが倒れてしまう。

これではゲームのUIとして機能しませんよね。

そこで登場するのが 「Canvas（アクリル板）」 です。 このアクリル板を、カメラのレンズの直前（一番手前）にピタッと固定して配置します。

俳優（キャラクター）がどこへ行こうが、カメラをどう振ろうが、アクリル板に書かれた字幕（スコアやボタン）は常に画面の同じ位置に固定されていて、いつでも読める状態になります。

Canvas の中にパネルを3つ作る

では実際に作っていきましょう。

「Hierarchy」上で「右クリック」→「UI(Canvas)」→「Image」

わかりやすいように名前を「StartPanel」にしましょう。

「右クリック」→「Rename」で名前を変更できる。

同様の手順で2つ作り、名前をそれぞれ「GamePanel」、「ResultPanel」にしましょう。

「StartPanel」 を右クリックし、「Duplicate（複製）」を2回行い、名前を変更するとスムーズにできる。

「Hierarchy」がこのような状態になっていれば成功です。

配置とサイズを整える

「StartPanel」 を選択。

「Inspector」の「Rect Transform」 の四角いアイコン（アンカー設定）をクリックします。

Alt (Macは Option) を押しながら、右下の「Stretch – Stretch」（四角い枠が全て広がるアイコン）をクリックします。

これでパネルがCanvas全体にぴったりフィットします。

残り2つのパネル（GamePanel, ResultPanel）にも同じ設定を行ってください。

各パネルに「必要な部品」を置く

次に各パネルの中にボタンやテキストを配置します。「Hierarchy」で各パネルを右クリックし、必要なUIを追加します。

「StartPanel」を「右クリック」→「UI 」→「 Button – TextMeshPro 」を追加（「スタート」ボタン）する。

初回のみ、「 Button – TextMeshPro」 を作成した瞬間に「Import TMP Essentials」という画面が出てきます。

「Import TMP Essentials」ボタンを押してください。 これをやらないと日本語フォントが表示されません。

下の「Import TMP Examples & Extras」は押さなくてもいいです。

これはおまけみたいなものなのでデータの節約のためにも×を押しちゃいましょう。

このように表示されたら完了です。

一様区別するために名前を「StartButton」に変更しましょう。

GamePanelの中

「右クリック」→「UI 」→「 Text – TextMeshPro 」を２つ追加（スコア用、タイマー用）する。

名前を区別するため、「ScoreText」「TimerText」とそれぞれ名前を変更しましょう。

このように表示されたら完成です。

ResultPanelの中:

右クリック」→「UI 」→「 Text – TextMeshPro 」を追加（最終スコア表）する。名前を「FinalScore」にする。

「右クリック」→「UI 」→「 Button – TextMeshPro 」を追加（「リトライ」ボタン）する。名前を「RetryButton」にする。

このように表示されたら完成です。

4.スクリプト作成:

C#スクリプトでの制御

今から「GameManager」という司令塔を作って、プログラムでパネルの表示を管理します。

＊注意点

ここから先は「なんでその操作するの？」「そのコードの意味は何？」といった疑問が何回も出てくるところです。しかしこの疑問は先にゲームを完成させないと理解できないものばかりです。

まず第一の目的は「ゲームを完成させること！」

その後から疑問の解消をしていきましょう。

「GameManager」の作成

「Hierarchy」の何もないところで右クリックし、「Create Empty」を選択。

名前を「GameManager」に変更します。

「Project」ウィンドウで右クリック→「Create」→「Scripting」→「MonoBehaviour Script」 を選択し、名前を GameFlow としてください。

今このような状態です。

下の「Project」ウィンドウに「 GameFlow 」という空のScriptが作られました。

作成した GameFlow スクリプトを、Hierarchyの「GameManager」オブジェクトにドラッグ＆ドロップしてアタッチ（取り付け）します。

「GameManager」を選択して左の「Inspector」を見てください。しっかりと「GameManager」のScriptが追加されていますね。

しかし今はScriptの中身が空っぽです。ここからScriptの中身を書いていきましょう。

スクリプトの記述①

下の「Project」ウィンドウにある先ほど作った「GameFlow 」をダブルクリックして開いてください。

このようにVisualStudioが開きました。

ここに以下のコードをコピペして貼り付けてみてください。

public class GameFlow : MonoBehaviour
{
    // [1] パネルを登録するための「枠」を用意する
    public GameObject startPanel;
    public GameObject gamePanel;
    public GameObject resultPanel;

    // [2] ゲーム開始時に最初に呼ばれる（自動実行）
    void Start()
    {
        ShowStart(); // 最初はスタート画面を表示
    }

    // [3] スタート画面を表示する（他のパネルは隠す）
    public void ShowStart()
    {
        startPanel.SetActive(true);  // 表示
        gamePanel.SetActive(false);  // 非表示
        resultPanel.SetActive(false); // 非表示
    }

    // [4] ゲーム画面を表示する
    public void ShowGame()
    {
        startPanel.SetActive(false);
        gamePanel.SetActive(true);
        resultPanel.SetActive(false);
    }

    // [5] 結果画面を表示する
    public void ShowResult()
    {
        startPanel.SetActive(false);
        gamePanel.SetActive(false);
        resultPanel.SetActive(true);
    }
}

貼り付けたら必ず「Ctrl＋S」で保存をしましょう。

では元に戻って「Hierarchy」にある「GameManager」を選択し、左側の「Inspector」を見てください。

「GameFlow」のScriptに「StartPanel」「GamePanel」「ResultPanel」の3つの枠が現れました。

今のままでは、プログラムは「どのパネルを消したり出したりすればいいのか」を知りません。

一番最初に作った「Hierarchy」にある「StartPanel」「GamePanel」「ResultPanel」をさっきの枠にドラッグ＆ドロップしてください。

これで、プログラムが「あのパネルたちのことね！」と認識できるようになります。

スタートボタンに「ShowGame()」を登録する

次に、スタートボタンを押した時の動作を決めます。

Hierarchy」で、StartPanel の中にある 「StartButton」 を選択します。

「Inspector」を一番下までスクロールし、 「On Click ()」 という項目を探します。

「＋」ボタンをクリックします。

「None (Object)」と書かれた枠に、Hierarchyから 「GameManager」 をドラッグ＆ドロップして入れます。

その右側のドロップダウン（No Function）をクリックします。

メニューから 「GameFlow」→「ShowGame()」 を探してクリックします。

この状態で、画面上部の 「▶（再生ボタン）」 を押してみてください。「StartButton」をクリックして、画面が切り替われば成功です。

↑「GamePanel」が画面いっぱいに映っていません。もし同じ状況になった人は…

スクリプトの記述②

次に「GameFlow」のScriptに以下のコードをコピーして、今のコードの上から上書きしてください。

using UnityEngine;
using TMPro; // 追加: TextMeshProを使うために必要

public class GameFlow : MonoBehaviour
{
    public GameObject startPanel;
    public GameObject gamePanel;
    public GameObject resultPanel;

    public TextMeshProUGUI scoreText; // スコア表示用の枠
    private int score = 0;            // スコアを保存する変数

　　void Start()
　　{
    // ゲーム起動時はスタート画面から
    ShowStart();
　　}

    public void ShowStart()
    {
        startPanel.SetActive(true);
        gamePanel.SetActive(false);
        resultPanel.SetActive(false);
        score = 0; // スコアをリセット
    }

    public void ShowGame()
    {
        startPanel.SetActive(false);
        gamePanel.SetActive(true);
        resultPanel.SetActive(false);
        score = 0;
        UpdateScoreText();
    }

    // ボタンを押した時に呼ぶ関数
    public void AddScore()
    {
        score++;
        UpdateScoreText();
    }

    void UpdateScoreText()
    {
        scoreText.text = "Score: " + score;
    }

    public void ShowResult()
    {
        startPanel.SetActive(false);
        gamePanel.SetActive(false);
        resultPanel.SetActive(true);
    }
}

すると「GameManager」のInspectorに新たに「Score Text」という枠ができました。

ここに「Score Text」をドラッグ＆ドロップして入れます。

連打ボタンの作成

ここで「GamePanel」に新たに「ClickButton」というボタンを追加します。これが連打のボタンになります。

「GamePanel」を「右クリック」→「UI 」→「 Button – TextMeshPro 」を追加する。

今「Hierarchy」はこんな感じになっています。

連打ボタンの配置と微調整

Hierarchyで GamePanel の中にある ClickButton を選択します。

「Scene画面」の左上のツールバーから 「Rect Tool」（キーボードの T を押すと切り替わります）を選択。

今青い点で囲まれた□が連打ボタンになっています。これを好きな場所に移動させます。

ちなみにこの画面は「StartPanel」を2回連続クリックすると全体を見通せる画面になります。

私はこんな感じにど真ん中に「ClickButton」を配置しました。

Anchor Preset を使って位置を固定する

Inspectorの 「Rect Transform」 の左上にある 「十字のアイコン（Anchor Preset）」 をクリックします。

ここで 「Center Middle（中央）」 のアイコン（ちょうどど真ん中にあるやつ）をクリックしてください。

これで「どんな画面サイズでも、このボタンは必ず中央に配置される」というルールが完成しました。

この設定をしたあと、Inspectorの 「Pos Y」 を調整して、画面下部からどれくらい上に浮かせたいか（例：50 や 100 など）を入力して微調整してください。

Score・TimerTextの配置を設定する。

「GamePanel」や「ClickButton」と同じように好きな位置に配置しましょう。

今現時点では二つとも中央に配置されているため、右上などの「ClickButton」の邪魔にならない場所に移動させましょう。

また文字の色は白になっているため、Inspectorの「Vertex Color」を黒にしましょう。

これで背景と同化するのを避けます。

「▶（再生ボタン）」 を押して確認してみましょう。（Scene画面では「StartPanel」が手前に来ているので表示されません）

「連打ボタン」への接続

Hierarchyの ClickButtonに、連打機能を紐付けます。

Hierarchy で 「ClickButton」 を選択します。

Inspector の一番下 「On Click ()」 に「＋」を押して枠を追加します。

Hierarchy から 「GameManager」 をその枠へドラッグ＆ドロップします。

右側のドロップダウンで 「GameFlow」→「AddScore()」 を選択します。

これは以前やった「StartButton」の設定と同じ工程です。

スクリプトの記述③

次に「GameFlow」のScriptに以下のコードをコピーして、今のコードの上から上書きしてください。

using UnityEngine;
using TMPro;

public class GameFlow : MonoBehaviour
{
    public GameObject startPanel;
    public GameObject gamePanel;
    public GameObject resultPanel;

    public TextMeshProUGUI scoreText;
    public TextMeshProUGUI timerText; // タイマー用テキスト

    private int score = 0;
    private float timeRemaining = 10.0f; // 制限時間
    private bool isPlaying = false;      // ゲーム中かどうか

　　　void Start()
　　{
    // ゲーム起動時はスタート画面から
    ShowStart();
　　}

    void Update()
    {
        // ゲーム中ならタイマーを減らす
        if (isPlaying)
        {
            timeRemaining -= Time.deltaTime;
            timerText.text = "Time: " + Mathf.Ceil(timeRemaining).ToString();

            if (timeRemaining <= 0)
            {
                ShowResult();
            }
        }
    }

    public void ShowStart()
    {
        isPlaying = false;
        startPanel.SetActive(true);
        gamePanel.SetActive(false);
        resultPanel.SetActive(false);
    }

    public void ShowGame()
    {
        score = 0;
        timeRemaining = 10.0f; // 10秒にリセット
        isPlaying = true;      // ゲームスタート！
        
        startPanel.SetActive(false);
        gamePanel.SetActive(true);
        resultPanel.SetActive(false);
        
        UpdateScoreText();
    }

    public void AddScore()
    {
        if (isPlaying) // ゲーム中だけスコア加算
        {
            score++;
            UpdateScoreText();
        }
    }

    void UpdateScoreText()
    {
        scoreText.text = "Score: " + score;
    }

    public void ShowResult()
    {
        isPlaying = false;
        startPanel.SetActive(false);
        gamePanel.SetActive(false);
        resultPanel.SetActive(true);
    }
}

GameManagerを選択し、Inspectorを見ると「Timer Text」という空の枠が追加されています。

Hierarchy の GamePanel にある 「TimerText」（もし作っていなければ新しく作成してください）を、その枠にドラッグ＆ドロップしてください。

これで、ゲーム開始時に「Time: 10」と表示され、自動的にカウントダウンが始まります！

「ResultPanel」の設定

結果画面用のテキストを用意する

「FinalScore」を画面中央の分かりやすい場所に配置してください。

スクリプトの記述④

以下のコードを今のコードに追加してください。

// 追加する変数
    public TextMeshProUGUI resultScoreText; 

    public void ShowResult()
    {
        isPlaying = false;
        startPanel.SetActive(false);
        gamePanel.SetActive(false);
        resultPanel.SetActive(true);

        // 結果画面にスコアを表示！
        if (resultScoreText != null)
        {
            resultScoreText.text = "Final Score: " + score;
        }
    }

Unityでの紐付け

GameManager の Inspector に Result Score Text という枠が新しく増えているはずです。

そこに、作成した「FinalScore」をドラッグ＆ドロップしてください。

1.プロジェクトの作成と準備

• Unity Hubから「新しいプロジェクト」を作成します。

• テンプレート選択: 最初は「2D」または「3D」のCoreテンプレートを選びましょう。
• 名前付け: 分かりやすい名前を付けます。

実際の手順

「＋新しいプロジェクト」をクリック

テンプレート選択

今回は練習ですので2Dを選択します。

名前付け

わかりやすいように「Practice１」という名前にします。　保存場所はあらかじめエクスプローラーで作成しておくことをお勧めします。私は「unity project」というフォルダを作成しました。

＊注意点

必ずフォルダの名前、プロジェクトの名前などは日本語を使わないようにしましょう。不具合が起きる原因になります。

作成すると、プロジェクト画面に先ほど作成した「Practice1」が表示されました。それと同時にUnity Engineが起動します。ここからゲーム作りの始まりです。

2.画面構成の基本を理解する（配置）

Unityの画面（エディタ）には主に4つの役割があります。

• Sceneビュー: ゲーム画面を編集する場所。物体を配置します。
• Hierarchy（ヒエラルキー）: シーンにあるすべてのオブジェクトの一覧。親子関係を管理します。
• Inspector（インスペクター）: 選択したオブジェクトの詳細設定（位置、色、物理挙動など）を行う場所。
• Project（プロジェクト）: 使う素材（画像、音、スクリプト）を管理するフォルダ。

こちらが一番最初の画面です。

役割を分割するとこんな感じになります。

お疲れさまでした。

この記事では、Unityでゲーム開発を始めるために必要なVisual Studioのインストール方法を解説します。すでに他の開発でVSを使っている方も、Unity用の設定だけは確認してください。ちなみこの記事はUnityを今後使っていきたい人向けなのでUnity Hubからのインストールする場合の手順しかありません。ご了承ください。

はじめに：Unity開発にVSが必須な理由

答えはシンプル

これを入れるだけで、プログラミングが驚くほど簡単になる。

Unityでプログラムを書く際、専用の辞書と翻訳機（Visual Studio）がないと、文字が真っ黒で読みにくかったり、正しい書き方を教えてもらえなかったりして非常に苦労します。なのでUnityを使う前に先にVisualStudioをインストールする必要があります。

【超重要】インストール手順

Unity Hubからインストールする場合(推奨)

1. Unity Hubを開く

Unity Hubを起動し、左側のメニューから 「インストール」 タブをクリックします。

2. Visual Studioの追加画面を開く

現在インストールされているUnityバージョンの右側にある歯車マークをクリックし、「モジュールを加える」 を選択してください。

3. Visual Studioを選択する

モジュール追加画面が表示されます。その中にある 「Visual Studio Community 20XX (最新バージョン)」 にチェックを入れます。

• ※ここが未チェックだと、後から連携設定が必要になるため、必ずチェックを入れましょう。

実際の手順

Unity Hubのインストール画面に行き、「管理」→「モジュールを加える」を押してください。

するとこのような画面が出てきます。今回はインストール済みなので開発者ツールの欄に「Visual Studio Community 2026 」が「インストール済み」として表示されています。もしできていない方は左のチェックを押してインストールしてくだい。

するとVisual Studio Installerが起動します。

私は以前2022版をインストールしていたため、このような画面が出てきました。特に理由がなければ最新のものを使うのをおすすめします。今回は一番下の「ワープロとコンポーネントを手動で選択する」を選択します。

するとこのような画面に移行します。ここで大事なのは「Unityによるゲーム開発」にチェックを入れてインストールをすることです。チェックを入れないと、Visual Studioはただの「メモ帳」としての役割になってしまいます。

下にスライドさせるとしっかりと「Unityによるゲーム開発」と書かれている場所があるのでそこにチェックを入れてインストールをしましょう。

この画面のようになったら後は待つのみです。

お疲れさまでした。

「Unityによるゲーム開発」のチェック

もし既存のVisualStudioに「Unityによるゲーム開発」のチェックがない場合の対処法です。

Visual Studio Installerを起動する

• Windowsのスタートメニューを開き、「Visual Studio Installer」と検索して起動します。

インストール済みの製品を確認する

• インストーラーが起動すると、「インストール済み」タブが表示されます。追加したいバージョンのVisual Studio（例：Visual Studio Community 2026）が表示されていることを確認します。

「変更」ボタンをクリックする

• 対象のVisual Studioタイトルの右側にある 「変更」 ボタンをクリックします。

「Unityによるゲーム開発」を選択する

• 設定画面（ワークロードタブ）が開きます。
• 一覧を下にスクロールし、「ゲーム」カテゴリにある 「Unityによるゲーム開発」 にチェックを入れます。
• 右側の「インストール詳細」で、「Visual Studio Tools for Unity」が含まれていることを確認します。

変更を適用（インストール）する

• 右下にある 「変更」 （または「インストール」）ボタンをクリックします。
• 必要なファイルがダウンロードされ、機能が追加されます。この処理には時間がかかるため、完了するまでPCをそのままにして待ちます。

完了

• 完了のメッセージが表示されたら、インストーラーを閉じます。

実際の手順

Windowsのスタートメニューを開き、「Visual Studio Installer」と検索して起動します。

対象のVisual Studioタイトルの右側にある 「変更」 ボタンをクリックします。今回であれば最新の2026。

このような画面に移動し、下にスクロールするとここに「Unityによるゲーム開発」があります。もしここにチェックが入っていなければチェックを押してインストールしてください。

あとは手順の通りです。

お疲れさまでした。

いかがでしたでしょうか。これでVisualStudioのインストールは終わりです。

＊注意点

これは2026/06/06に実際にインストールした手順です。

時期によっては全く異なるインストール手順になる可能性があります。ご了承ください。

1. Unity Hubをインストールする

Unityの複数のバージョンを管理するために必要な「Unity Hub」をダウンロードします。Unity公式サイトのダウンロードページにアクセスします。

「Unity Hubをダウンロード」ボタンをクリックし、インストーラーをダウンロードします。

ダウンロードしたファイルを開き、画面の指示に従ってインストール（Windowsの場合はダブルクリック、Macの場合はアプリケーションフォルダへドラッグ＆ドロップ）してください。

実際の手順

今回はGoogleで作成しようと思います。

このような画面に行きます。

私はWindowsを使っているので、「×64」をダウンロードします。ここは自分の機種に合わせてダウンロードしてください。

ダウンロードをして、指示された手順を踏むと下のような画面が開きます。これでUnity Hubをインストールすることができました。

2. Unity IDの作成とサインイン

（最初からサインインしている状態であればスキップ）

1. インストールした「Unity Hub」を起動します。
2. 右上のアイコンからサインイン画面を開きます。
3. Unity IDを持っていない場合は「Create account」から新規登録を行ってください（GoogleやApple IDでも連携可能です）。
4. メール認証を済ませたら、Unity Hubにサインインした状態にします。

3. Unityエディターをインストールする

1. Unity Hubのメニューから「インストール (Installs)」を選択します。
2. 右上の「エディターをインストール (Install Editor)」ボタンをクリックします。
3. インストールしたいバージョンを選択します。基本的には「LTS（長期サポート版）」と書かれている最新の安定版を選ぶのがおすすめです。
4. インストール設定画面で「Visual Studio」などの開発ツールにチェックが入っていることを確認し、「インストール」をクリックします。

実際の手順

ここに様々なUnityのインストール先があります。

基本的にLTSかつ最新のインストールを推奨します。

今回は真ん中の「Unity 6.3 LTS (6000.3.17f1)」をインストールしようと思います。

インストールを押すと以下のような画面になります。

下に様々なプラットフォームがありますが後から追加することができるので今は何も追加せず「続行」のボタンを押します。

利用規約に同意して、インストールを開始します。

このような画面が右上に表示されていればインストール成功です。このまま完了するまで待ちましょう。

もしインストール中に以下のような画面が現れたら、Visual Studioをインストール必要があります。詳しい内容はこちらから。

【Unity初心者向け】Visual Studioのインストールと初期設定の完全ガイド

インストールが完了したら以下のような画面になります。

これでUnityでゲームを作る準備運動は完了しました。

お疲れさまでした。

次に実際にゲームを作成する手順を説明します。

詳しい内容はこちら

Unityの使い方

補足

なぜUnityエディタをインストールする必要があるのか

• ゲームが作れない: ゲーム画面のデザイン、物理エンジンの設定、キャラクターの配置など、Unityでのメイン作業が一切できません。
• Unity Hubが空っぽ: 今インストールした「Unity Hub」はあくまで管理ツール（箱）なので、中身（エディター）がないと、プロジェクトを新規作成したり開いたりすることができません。

インストールしないとゲームを作る型がない状態になります。なのでUnityエディタをインストールする必要があるのです。