ゲームの投稿方法
CraftNova（クラフトノバ）では、AIに作ってもらったゲームを投稿して、みんなに遊んでもらうことができます。プログラミングができなくても大丈夫です。
このページでは、実際に「ネオンピンボール」というゲームを作って投稿したときの画面を使って、手順を順番に説明します。スマホでもPCでも投稿できます。
用意するもの
- CraftNovaのアカウント（無料）
投稿にはログインが必要です。まだの人はログイン / 新規登録から作れます。 - AIチャットサービス
ChatGPT・Claude・Geminiなど。無料プランでもゲームを作れます。
画面の見た目が少しちがうだけで、手順はスマホもPCも同じです。
投稿ページを開く
まずはCraftNovaにログインして、ゲームの投稿ページを開きます。
画面右上の「⋮」ボタンをタップしてメニューを開き、「ゲームを投稿する」を選びます。
ガイドラインをコピーする
投稿ページの一番上にある「ゲーム作成ガイドライン」を開きます。ガイドラインは、CraftNovaでちゃんと動くゲームを作るための「AIへの注意書き」です。これを最初にAIへ渡すと、ゲームが画面からはみ出したり、スマホで操作できなかったりする失敗がぐっと減ります。
遊ぶ画面に合わせて「スマホ縦型」「スマホ横型」「PCブラウザ」のどれかを選び、コピーボタンを押します。「コピーしました！」と表示されればOKです。
今回はスマホを縦に持って遊ぶゲームにしたいので、「スマホ縦型」を選びました。
AIにゲームを作ってもらう
AIチャット（ChatGPT・Claude・Geminiなど）を開き、コピーしたガイドラインを貼り付けます。その下に、作りたいゲームの内容を書き足して送信します。
AIから「ファイルは1つにしますか？ HTML・CSS・JavaScriptの3つに分けますか？」と聞かれたら、はじめての方は「1ファイル」と答えるのがおすすめです。3ファイルに分けると、あとで見た目（CSS）や動き（JavaScript）だけを直しやすくなります。
AIが返してくれる「<!DOCTYPE html>」から「</html>」までの長い文字のかたまりが、ゲームの本体（HTMLコード）です。AIの画面にあるコピーボタンなどを使って、全部コピーしておきましょう。ファイルとしてダウンロードできる場合は、保存しておいてもOKです。
例：今回AIに送った文章（ガイドラインの下に書き足した部分）
ネオンが光るピンボールゲームを作ってください。左右のフリッパーでボールを打ち返し、バンパーや星に当てると点数が入るようにしてください。ボールは3個で、すべて落としたらゲームオーバーです。スマホは画面の左半分・右半分のタッチ、PCは ← → キーでフリッパーを動かせるようにしてください。
「どんなゲームか」「どうやって操作するか」「どうなったら終わりか」を書くと、思いどおりのゲームになりやすいです。
返事が途中で止まってしまったときは、「続きを書いて」または「1つのHTMLファイルにまとめて、最初から全部出して」と頼んでみましょう。
3ファイルに分けた場合は、index.html・style.css・script.js の3つをそれぞれコピー（または保存）しておきます。
タイトルと説明を入力する
「タイトル」（必須・50文字まで）と「ゲーム概要・操作説明」（任意・200文字まで）を入力します。
操作説明は、ゲーム画面の本のアイコンから見られます。遊び方を書いておくと、はじめて遊ぶ人にやさしいゲームになります。
その下の「言語」では、どのサイトに表示するかを選びます。「日本語」は日本語版サイトだけ、「英語」は英語版サイトだけ、「世界共通」は両方のサイトに表示されます。「世界共通」を選ぶと、タイトルと説明文はAIが英語に翻訳して英語版サイトに表示します。
サムネイル画像を選ぶ（任意）
サムネイルは、ゲーム一覧に表示される画像です。ゲーム画面のスクリーンショットなどを選ぶと、表示する範囲を選ぶ画面が出ます。枠を動かして「決定」を押しましょう（横長の 16:9 で表示されます）。
サムネイルがあると、一覧で目にとまりやすくなります。まだゲームの画像がないときは、いったん「非公開」で投稿して遊び、スクリーンショットを撮ってから、マイページの「編集する」で追加する方法もあります。
画面サイズ・ジャンル・推奨環境を選ぶ
「画面サイズ」（必須）は、スマホを縦に持って遊ぶゲームなら「縦型」、スマホを横にして遊ぶゲームやPC向けのゲームなら「横型」を選びます。
「ジャンル」と「推奨環境」（どちらも任意）は、近いものを選んでおくと、遊ぶ人がゲームを見つけやすくなります。今回はジャンルを「カジュアル」、推奨環境を「スマホ・PC推奨」にしました。
今回はスマホの縦持ちで遊ぶので「縦型」を選びました。
ゲームのコードを添付する
STEP 3でできたゲームのコードを、「ゲームのコード」の「HTML」の欄に入れます。入れ方は「貼り付け」「ファイルを選択」「ドラッグ＆ドロップ」のどれでもOKです。
入れると、コードの中身のかわりにファイルのアイコンが表示されます。アイコンの右のボタンで、ダウンロード・差し替え・削除ができます。右下の数字はコードの大きさで、合計10MBまで投稿できます。
CSS・JavaScriptを別のファイルに分けた場合は、それぞれ「CSS」「JavaScript」の欄に入れます。3つのファイルをまとめて選んだりドロップしたりすると、自動でそれぞれの欄に振り分けられます。1ファイルで作った場合、CSS・JavaScriptの欄は空のままで大丈夫です。
コピーしたコードを貼り付けるときは、HTMLの欄を長押しして「ペースト」を選びます。保存したファイルを使うときは「ファイルを選択」を押します。
最初の「<!DOCTYPE html>」から最後の「</html>」まで、全部そろっているか確かめましょう。途中が欠けていると、ゲームが真っ白になってしまいます。アイコンの下の「行数」が極端に少ないときは、コピーしきれていないかもしれません。
公開設定を選んで投稿する
「公開設定」では、だれに遊んでもらうかを選べます。
・公開：だれでも遊べて、ゲーム一覧にも表示されます。
・限定公開：URL（リンク）を知っている人だけが遊べます。友だちだけに見せたいときに便利です。
・非公開：自分だけが見られます。
選んだら「投稿する」ボタンを押します。
マイページで確かめて遊ぶ
投稿が終わるとマイページに移動して、ゲームが追加されています。「プレイ」を押すと、すぐに遊べます。
うまく動かないところがあったら、「編集する」からゲームのコードを差し替えられます。AIに直してほしいところを伝えて、新しいコードをもらいましょう。3ファイルに分けている場合は、直したファイルだけを差し替えればOKです。
うまくいかないときは
- ゲームが思ったとおりに動かない
- AIもまちがえることがあります。「ボールが壁をすり抜ける」「スタートボタンを押しても始まらない」のように、どこがどうおかしいのかをAIに伝えて、ゲームを直してもらいましょう。直してもらったコードは、マイページの「編集する」から差し替えられます。
- ゲームが画面からはみ出す・小さすぎる
- ガイドラインを貼らずに作った可能性があります。ガイドラインを最初に貼って作り直すか、AIに「ガイドラインの【画面サイズ】のとおりに直して」と頼んでみましょう。
- 画面が真っ白で、何も表示されない
- コードが途中で切れているか、AIの説明文までいっしょに貼り付けている可能性があります。「<!DOCTYPE html>」から「</html>」までだけを貼り付けましょう。3ファイルに分けた場合は、CSSとJavaScriptをそれぞれ正しい欄に入れたかも確かめましょう。
- スマホで操作できない
- スマホで遊ぶゲームには「スマホ縦型」か「スマホ横型」のガイドラインを使います。PCブラウザ用のガイドラインで作ると、タッチ操作に対応していないことがあります。
- 画像や音のファイルが読み込まれない
- CraftNovaに投稿できるのはHTML・CSS・JavaScriptのファイルだけで、画像や音声のファイル、インターネット上の画像・音声は読み込めません。AIに「画像や音はファイルを使わず、コードの中だけで作って」と頼みましょう。
それでも困ったときは、お問い合わせか、X（@craftnovagame）のDMから気軽に連絡してください。