NO SETUP · JUST CREATE

アイデアを、
そのままアプリへ。

貼り付けて、動かして、持ち帰る。
専門知識がなくても、アイデアをその場で形にできます。

やりたいことを1つ選んでください。

✓ HTML自動抽出✓ 安全プレビュー✓ ZIP保存
HOW IT WORKS

やることは、4つだけ。

この順番どおりに進めば完成します。今どこにいるかは、画面上部に必ず表示されます。

そのほかの機能を見るサンプル・例文集・使い方ガイド
講師・研修運営の方はこちら参加者はこの中を開かなくても進められます
✓
PRIVACY FIRST入力したコードは、この端末内に保存されます

運営者へ自動送信されることはありません。広告・アクセス解析・トラッキングも使用しません。

STEP 2 / 4 · コードを貼る

コードを貼り付ける

AIから返ってきた回答を、下の枠にそのまま貼ってOKです。

うまく貼れないときは、下の入力欄を長押しして「ペースト」を選んでください。
安全モード
編集ツールコピー・整形・検索・元に戻す・文字サイズ
1行0文字✓ 自動保存済み端末内のみ

貼り終わったら 「動かして確認」 を押してください。次は STEP 3 です。

STEP 3 / 4 · 動かす

動かして確認する

名称未設定のアプリ

実際に触って確かめたら、次はどれですか？

表示オプション端末切替・縦横・再読込・全画面
▶

まだ動かしていません

先に STEP 2 でコードを貼り付けてください。

REPAIR · 修正する

このアプリを修正する

直したいことを1つだけ選びます。まとめて頼まないほうが成功します。

  1. 1直す所を選ぶ
  2. 2文章をコピー
  3. 3AIへ送る
  4. 4新しいコードを貼る
STEP 1

何を修正したいですか？

STEP 2

AIへ渡す文章

1回に1点だけ

          
          コピーしたら、ChatGPTなどの同じ会話へ貼り付けて送信してください。
        


        

          
STEP 3
新しいコードを受け取ったら

          
AIの新しい回答をコピーして、コード画面へ貼り替えます。うまくいかなければ、いつでも元へ戻せます。

          

            
            
            
          

        


        

          よく使う修正メニューをすべて見るそのままコピーできる依頼文
          

        

      


      

        
STEP 4 / 4 · 保存
作品を持ち帰る
迷ったら「ZIPで保存」を選んでください。それだけで大丈夫です。

        

          
          
現在のプロジェクト
名称未設定のアプリ
index.html

          
        


        

        

          おすすめ
          

            
ZIPで保存する

            
Cloudflare Pagesへそのままアップロードできます。展開するとすぐに index.html が入っています。

          

          
          まずはこれ1つで大丈夫です。他の形式は下から選べます。
        


        

          ほかの保存方法を見るHTML単体・コードのコピー・共有・TXT
          

            
HTML
index.html
完成コードを1つのHTMLファイルとして保存します。

            
COPY
コードをコピー
別のAIやエディターへ貼り付けるため、全コードをコピーします。

            
SHARE
共有・テキスト
対応端末では共有メニュー、非対応時はテキスト保存を利用できます。

          

        

        

          
端末別の保存ヒント

          
iPhone / iPad（Safari）
保存後に共有画面やダウンロード一覧が開く場合があります。「ファイルに保存」を選ぶと、ファイルアプリから確認できます。

          
Android / Chromebook（Chrome）
通常はダウンロードフォルダへ保存されます。通知または「ファイル」アプリから開いてください。

          
Windows / Mac
ブラウザのダウンロード先へ保存されます。ZIPは展開すると直下にindex.htmlがあります。

        

        
端末内のプロジェクト

      


      

        
サンプルアプリ
完成イメージを見るか、コードを読み込んで自由に改造できます。

        

      


      

        
STEP 1 / 4 · AIにお願い
アプリの例文集
作りたいものに近いものを選び、そのままコピーしてChatGPTなどへ送ります。

        

        

        
コピーしたら、AIへ送って返ってきたコードを STEP 2「コードを貼る」 へ貼り付けます。

        

      



      

        
講師・研修運営むけ
研修当日ツール
進行の確認、共通指示のコピー、メモをまとめた運営用の画面です。参加者はホームの3つの入口だけで最後まで進められます。

        
参加者の方へ：この画面を使う必要はありません。ホーム から「はじめてアプリを作る」を押してください。

        

          
READY FOR TRAININGSTEP 1 / 7
最初に「端末チェック」から。
約30秒で参加準備を確認します。判定できない機能は、代わりの操作も案内します。

          

            
            
            
            
            
            
            
            
          

        

        

          
✓
端末チェック
ネット、端末内保存、コピー、ダウンロード、PWAなどを自動判定。

          
✦
AIにお願いする文章を作る
無料枠を消費しにくい、短く1回完結の制作依頼文を自動生成します。

          
⚡
困った・動かない
AI制限、コードエラー、保存失敗でも完成コードから即座に復帰。

        

        
QUICK ACCESS
生成AIを開く
新しいタブで開きます

        
QUICK COPY
講師用クイックコピー
詰まった人への共通指示に

        
LOCAL NOTE
研修メモ
この端末だけに保存
リアルタイム共有はZoomチャット等を使用してください。このメモはサーバーへ送信されません。

      


      

        
PRE-FLIGHT CHECK
端末チェック
研修前に、この端末で必要な基本機能が使えるか約30秒で確認します。ブラウザだけでは断定できない項目は「実操作で確認」と表示します。

        
?
STATUS
まだチェックしていません
「チェック開始」を押してください。端末内で判定し、個人情報は送信しません。

        

        
チェック後のおすすめ

      


      

        
STEP 1 / 4 · AIにお願い
AIに作ってもらう文章を作る
下の項目を選ぶだけで、AIへ送る文章ができます。作りたいものが決まっていなければ、例文集からでもOKです。

        

          

            
            
            
            
            
            
            
          

          
AIへ送る文章
この文章をAIへ送ります
無料枠向け
1. 最初は小さく2. 機能は1〜2個3. 直すのは1か所ずつ
コピーした文章を、ChatGPTなどへ貼り付けて送信してください。

        

        
AIからコードが返ってきたら、STEP 2「コードを貼る」 へ進みます。

        

      


      

        
困ったとき
困った・動かない
AIの無料枠、通信、コードのエラーで止まっても、ここから研修を続けられます。

        
QUICK RECOVERY
何に困っていますか？
近い項目を選ぶと、最短の復帰手順を表示します。

        
⚡
FAST RECOVERY
AIが使えなくても「アプリを動かす体験」は続けられます。
下の完成コードを読み込み、タイトル・色・文章などを自分用に改造してください。

        

        
今ある作品を救出する

      


      

        
初心者向け使い方ガイド
AIへ頼むところから保存まで、迷わない11ステップ。

        

        
希望者向け：Cloudflare Pagesで公開
  1. Pages用ZIPを保存する
  2. Cloudflareへログイン
  3. Workers & Pagesから「作成」を開く
  4. Pagesの「ドラッグ＆ドロップ」を選ぶ
  5. プロジェクト名を入力してZIPを追加する
  6. 「サイトをデプロイ」を押す
  7. 発行されたpages.devのURLを開いて確認する
この研修ラボは、ビルド不要のCloudflare Pages Direct Uploadで運用できます。更新時は同じPagesプロジェクトの「新しいデプロイを作成」を利用します。

      


      

        

        
AI APP TRAINING LABAIアプリ研修ラボ

        

          
TRAINING ACCESS
スマートフォンで
読み取ってください
QRコードを読み取り、AIアプリ研修ラボを開きます。
1AIに作ってもらう2コードを貼る3動かす

          
URLを取得中…

        

      


      

        
設定・ヘルプ
編集環境、安全モード、端末内データを管理します。

        

          
表示と編集

          
プレビュー安全設定

          
復元とデータ

          
ヘルプ
AI APP TRAINING LAB v2.3.1 · WORKSHOP EDITION

        

        
研修中の注意事項
会社の機密情報、顧客・社員の個人情報、パスワードを生成AIへ入力しないでください。
APIキーや秘密情報をコードへ直接書かないでください。
AIが作ったコードは必ず自分で動作確認し、公開前に著作権・利用規約・安全性を確認してください。
貼り付けたコードは基本的に端末内で処理されますが、コード自身が外部通信する場合があります。
AIの回答が常に正しいとは限りません。重要な業務システムは専門家の確認が必要です。