始めに

この記事は『ナビつき！ つくってわかる はじめてゲームプログラミング』のチュートリアル設計やインターフェイスデザインで気付いたことのメモです。現時点で3時間ほどプレイして、レッスン3完了まで進みました。

まだ3時間ほどしか遊んでいませんが、面白くてすごく良いゲームだと思います。ゲーム内容はもちろん、世界観、キャラクター、デザイン、BGM、効果音、エフェクトなど、きめ細やかにつくり込まれていて楽しいです。

※記事にゲーム画面の画像を使用しています。画像の使用については「ネットワークサービスにおける任天堂の著作物の利用に関するガイドライン」を参考にしています。

注意点

ゲーム内容に触れているため、ゲームプレイ後（レッスン3完了後）に読んでいただいたほうがゲームをより新鮮に感じられて楽しめると思います。

ナビゲーターのボブとアリスが魅力的

ナビゲーターの元気なボブと冷静なアリスの2人がゲームプログラミングについて教えてくれます。ゲームを構成する要素はノードンと呼ばれる生き物であり、人格があります。ナビゲーターのボブとアリスはもちろん、ノードン達のキャラクターも魅力的です。

ユーザーをプログラマーと呼んでくれる

ナビゲーターのボブやアリスをはじめ、ノードン達はユーザーのことをプログラマーと呼びます。レッスン完了後にはマスターアップ画面が表示されるのですが、そこでもプログラマーと書かれていてユーザーがプログラマーであることを意識する世界観になっています。

次に何をしたら良いか丁寧にナビしてくれる

レッスン中はナビゲーターのボブが、1つ1つの動作に対して丁寧にナビしてくれます。どのタイミングでどのボタンを押し、どのノードンのどこに置くかなどわかりやすく進められます。

解決が必要な課題に気付き、段階的に進められる

ナビに従ってレッスンを進めていっても、最初のやり方だと上手くいきません。「ヒトは表示されたけどボタンを押しても何も動かない…」だったり、「ヒトは表示されたけど重力ですぐに画面外に落ちていってしまう…」など、いろいろな「足りないこと（解決が必要な課題）」に気付きます。

その足りないことをユーザー（プログラマー）が気付いて、「課題を解決するためにはどうすれば良いか」をナビしてもらいながら学んでいけるところが面白いです。

ナビの仕方がゲームの進行度で変わる

初回のナビでは「このオブジェクトを選んで、この設定値を選んで…」と、対象オブジェクトがハイライトされて視覚的にわかりやすく案内してくれます。

しかし既に扱ったことがあるオブジェクトを選ぶ際には、テキスト表示のみでオブジェクトがハイライトされなくなることがあります。

これは徐々にユーザーへのナビを減らし、ユーザーが自分で選んでいけるようにステップアップさせてくれているのだと思います。ですが急に突き放されることは無く、しっかりサポートしてくれます。自然に操作に慣れていけるよう設計されているようです。

プログラム結果をすぐに確認する習慣が身に付く

「ノードンの設定を変えた」や「ノードンとノードンをつないだ」など、ユーザー（プログラマー）が何らかのプログラミングをおこなったら、すぐにゲーム画面を確認するように促してくれます。

これにより今おこなったアクション（プログラミング）の結果として、ゲーム上で何がどう変化したのか確認できるようになっています。つまりユーザーはプログラマーとプレイヤー（デバッガー）の両方の役割を行き来しながらゲームをつくっていくことになります。

一手ごとに必ず確認するため、デバッグする習慣が自然に身に付いていくメリットもあると思いました。

つくったものをすごく褒めてくれる

ゲームづくりの途中やゲーム完成時にボブやアリス、いろんなノードン達が褒めてくれます。「できた！」という達成感があり、「早く次に進みたい！」という気持ちを高めてくれます。

レッスン終了後にパズル形式でおさらい

レッスン終了後に、ユーザーがレッスン内容を理解しているかのおさらいができるパズル形式のチェックポイントがあります。このパズル問題はノードンの設定が制限されており、限定されたノードンの設定のみを変えてパズルを解く必要があります。

ここでプログラミングの応用力が試されるのですが、このパズル自体がとても面白いです。いろいろと試行錯誤しながら進めていき、パズルが解けたときが爽快です。どんどん次に進みたくなります。このパズルが自分は特に好きです。

考え方についての深いメッセージ

ボブやアリス、ノードン達の話に考え方についての深いメッセージが込められているのではと感じました。プログラマーの考え方を学べると同時に、人の成長についても教えてくれていると思います。

プログラミングに限らず、いろいろな考え方に通じると思いました。

オブジェクト指向が身に付きそう

全体的なゲーム（プログラム）の進め方として、対象となるオブジェクトを選び、そのオブジェクトに設定値（属性）を付与するという流れになっています。これにより自然とオブジェクトベースの考え方を学べるようになっているのではと思いました。

重力の概念が序盤から出てくる

物体には重力があり、何もない空間にオブジェクトを配置すると重力によって落下して画面外に消えていくようになっています。重力によって物体がどう変化するかについても学べます。

ゲームの表現によっては無重力のほうが爽快感があり、状況に応じて重力制御を使い分けたほうが良いということも学べます。例えばシューティングゲームではプレイヤーキャラの「弾が真っすぐ飛ぶように重力の影響を受けないようにします！」と教えてくれます。

ペースト不要の「コピー」

ゲーム内の「コピー」を実行すると、コピー元のオブジェクト近くにコピー後のオブジェクトがペースト不要で複製されます。WindowsやmacOSの操作ではコピーしただけでは複製されずペースト（貼り付け）によって複製されるので、この挙動に違いがあります。

これは恐らくテンポの良さを優先しているのだと思います。キーボードによるショートカットキーが使えないことも理由の1つかもしれませんが、Nintendo Switchのコントローラーでの操作性向上にもつながっていると考えます。

実際にNintendo Switch Proコントローラーを使ってオブジェクトのコピーを何度か試してみましたが、ペースト無しで複製される挙動によってスムーズに操作できていると感じました。

定数の概念が序盤から出てくる

定数ノードンという名前で定数を扱うオブジェクトが序盤のレッスンで出てきます。プログラミングに関連度の高い用語が普通に出てくる場合もあります。定数ノードンの使用頻度は高めな印象です。

変数の概念は序盤に出てこない

定数はすぐに出てきましたが、変数の概念はまだ出てきていません。オブジェクトも一括管理するのではなく、コピーを繰り返して複製したものを配置していくことでゲームが進みます。

変数は今後出てくる可能性がありますが、一元管理やコンポーネント化については学習の優先度を低く設計しているようです。これは一元管理やコンポーネント化の概念を学ぶことよりも、まずはオブジェクトを複製してでも良いのでどんどんつくってみることを優先しているのかもしれません。

例えばJavaScriptの学習本では変数を序盤で学ぶ印象があったので、学習の優先順位付けの違いに発見があり面白いです。

比較演算は「くらべるノードン」

ある値の比較をおこない、trueかfalseかの条件分岐をするための要素が「くらべるノードン」です。比較演算だと難しい印象を受けますが、わかりやすい言葉で表現されています。

ゲーム画面領域について学べる

画面ノードンによって、画面領域の大きさ、画面領域の場所、画面領域がスクロールすることなどが学べます。画面領域によってキャラクターのサイズが相対的に大きくなったり小さくなることで、物体の大きさを相対的に表現していることも学べました。

画面の自動スクロールについて学べる

画面の自動スクロールがどんなときに必要で、速度をどのように制御しているかを学べます。定数ノードン、カウンターノードン、マッピングノードン、ゲーム画面ノードンの組み合わせで自動スクロールを表現するところに驚きと発見がありました。

自動スクロールをどのように表現すれば良いかを教えてくれます。これまでにいろいろなゲームで自動スクロールは体験してきましたが、自分が自動スクロールをつくる側になるのは初めてだったので新鮮でした。

プレイヤー視点とX軸、Y軸、Z軸の概念を学べる

ゲームのジャンルによってプレイヤーの視点を切り換えることを学べます。その際にX軸、Y軸、Z軸の概念も同時に学べました。視覚的に変化するのでわかりやすいです。

キャラクターの向きも制御が可能です。例えば横スクロールするシューティングゲームでは、プレイヤーが操作するキャラを右向きに設定するための方法を学べます。

BGMやテクスチャなど、全体的な世界観づくりも学べる

プログラミングが主軸にあると思うのですが、「誰かに楽しんでもらうためにゲームをつくる」という目的があるためか、世界観づくり、デザイン、 BGM、効果音、エフェクトなど、より広い領域のことにも触れられるようになっています。

カーソル移動速度を使い分けられる

Nintendo Switchのコントローラーで操作をしやすくするための配慮かと思いますが、Lスティック入力と十字キー入力でカーソル移動速度を使い分けられます。

• Lスティック入力：素早いカーソル移動
• 十字キー入力：ややゆっくりなカーソル移動（精密な操作がしやすい）

別途、USBマウスによる入力にも対応しているようです。

数値入力の方法が複数用意されている

数値入力はカウントアップ・ダウン式やスライダー式、電卓式など用途に応じた入力用のインターフェイスが用意されています。ピンポイントで数値を入力したいときには電卓式の入力が便利でした。

まとめ

• 親切にわかりやすくナビしてくれる。
• 優しくわかりやすい言葉で表現。
• 1つ1つの操作をハイライト表示でナビしてくれる。
• すごく褒めてくれる。
• おさらいの機会がある。
• 恐らくオブジェクト指向による設計（対象のオブジェクトを選び、属性値を指定する）。
• 入力方法が複数用意してある。
• 心地良い操作性を追求。
• ユーザーが成長できる仕組みや考え方を教えてくれる。

最後に

ここまで読んでいただき、ありがとうございました。

ゲームプレイ時に思ったことを残しておきたい気持ちで思うままに書いていたら、結構な文量になってしまいました。ですがこの記事の内容は紹介したいことの一部です。ここでは紹介していないノードンや仕組みもたくさんあります。とても面白く素晴らしいゲームだと思います。

このゲームのインターフェイスデザインやチュートリアル設計は、インターフェイスデザイナーをはじめ、アプリケーション開発に関わる多くの方の参考になると感じました。グラフィック表現はもちろん、ボブやアリスのナビの仕方や声、演出表現、導線、効果音など楽しくゲームを進められる要素に溢れています。

Webサイトやアプリケーションのインターフェイスデザインのほか、Webフロントエンド実装の考え方に通じることも多く、エンジニアリングについて知りたいデザイナーにとっても学べることが多いゲームだと思います。

ナビつき！ つくってわかる はじめてゲームプログラミング