LEARNING

「テクノロジア魔法学校」は、プログラミングの入門から基礎固めに最適なオンライン型学習教材です。
HTML/CSSやJavaScript、Processingなどを使って本格的なデジタル作品を実際に制作しながら、
プログラミング全般に通じる基礎力をしっかりと身につけることができます。

学習イメージ動画を見る

WHAT

3領域×4言語の
「クロスカテゴリー学習」

何から学び始めたらいいかなんて、悩む必要はありません。
テクノロジア魔法学校では、Webデザイン・ゲーム制作・メディアアートの3つの領域で、初心者に最適な4つの言語（HTML/CSS・JavaScript・Processing・Shader）を横断的に学ぶ「クロスカテゴリー学習」を採用。
入門編・基礎編あわせて76レッスンを収録し、週1回のプレイで約半年間（※）、たっぷり学んでいただけます。

※学習者によって学習速度は異なります。

WEB DEsign GAME Media Art ４つの言語 HTML/CSS JavaScript Processing Shader

  • WEB DESIGN

    ディズニーキャラクターをあしらったWebページをデザインしながら、HTML5とCSS3というWeb制作用言語を基礎から学んでいきます。JavaScriptを使用したワンランク上のWebデザインレッスンも。ふだん目にするWebサイトがどのようにできているのかも分かるようになるので、参考にしたり応用したりできるようにもなります。

  • GAME

    ProcessingやJavaScriptという言語を使って、アクションゲーム、レースゲームからパズルゲームまで、さまざまなジャンルのゲーム制作を学びます。プログラミング基礎、アルゴリズム基礎はもちろん、数学や物理の有用性も体験的に楽しく理解することができます。ゲームを遊ぶ側でなく「つくる側」の世界がひらけるでしょう。

  • MEDIA ART

    プログラミングとアルゴリズムでCGを生成し、動くアート作品をつくります。主にProcessingという言語を使いますが、初心者でも驚くほど豊かな表現を生み出すことができるので、達成感もひとしおです。後半ではShaderというグラフィックス処理に強い言語を使ってより高度な映像表現をつくることにも挑戦します。

LESSON

実際にどんなステップで学んでいくのか、そしてどんな本格的なものが出来上がるのか、その一部をご紹介します。

  • 第2章

    人探しサイト

    「ズートピア」で行方不明になった動物たちを探すためのWebサイトをつくろう

    学習ステップを見る
  • 第2章

    フライングカーペット

    横スクロールゲームをつくって、アラジンを洞窟から脱出させよう

    学習ステップを見る
  • 第2章

    スカイランタン

    「塔の上のラプンツェル」のランタン打ち上げをメディアアートで再現しよう

    学習ステップを見る
  • 第3章

    魔法の鏡

    さまざまなエフェクトで世界を映す魔法の鏡をつくろう

    学習ステップを見る
  • 第3章

    ダンジョンエスケープ

    ダンジョン脱出ゲームをつくって、「シュガー・ラッシュ」のラルフを救い出そう

    学習ステップを見る
  • 第4章

    スクールオブフィッシュ

    マウスを追いかける動きをつくって、魚たちのダンスをアリエルに披露しよう

    学習ステップを見る
  • 第4章

    フォトギャラリー

    本格的なフォトギャラリー付きWebサイトをつくろう

    学習ステップを見る
  • 第4章

    クイーンズカード

    「不思議の国のアリス」の神経衰弱ゲームをつくって、女王と勝負しよう

    学習ステップを見る

追加教材*に
登場するレッスン

  • 第5章

    ハニーハント

    風船に乗ったプーさんを動かしてハチミツを集めるゲームをつくろう

    学習ステップを見る
  • 第5章

    KAWARA割り

    ベイマックスを強化するために瓦割りゲームをつくろう

    学習ステップを見る
  • 第6章

    宝石パズル

    7人のこびとたちが掘りだした宝石を使って落ち物パズルをつくろう

    学習ステップを見る
  • 第6章

    シュガー・ラッシュ

    「シュガー・ラッシュ」のレースゲームをつくろう

    学習ステップを見る
  • 第7章

    スノウマジック

    「アナと雪の女王」の氷の魔法をプログラミングで再現しよう

    学習ステップを見る
  • 第7章

    ドラゴン＆ソード

    格闘ゲームをつくって、「眠れる森の美女」のドラゴンを倒そう

    学習ステップを見る
  • 応用編1

    花火

    「塔の上のラプンツェル」の花火のシーンをメディアアートで再現しよう

    学習ステップを見る
  • 応用編1

    クイーンズカード

    基礎編の「不思議の国のアリス」の神経衰弱ゲーム細かなルールが加わえよう

    学習ステップを見る
  • 応用編1

    フライングカーペット

    基礎編の横スクロールゲームにキャラクターの動きや新しい操作が加わえよう

    学習ステップを見る
  • 応用編1

    ミーミルの課外授業 （外部環境レッスン）

    ご自身のパソコンで、Webデザイン作品をつくるためのセットアップを学ぼう

    学習ステップを見る
  • 応用編1

    ミーミルの課外授業 （外部環境レッスン）

    ご自身のパソコンで、メディアアート作品をつくるためのセットアップを学ぼう

    学習ステップを見る
  • 応用編1

    ミーミルの課外授業 （外部環境レッスン）

    ご自身のパソコンで、ゲーム作品を作るための、セットアップを学ぼう

    学習ステップを見る
  • 応用編2

    スクールオブフィッシュ

    基礎編の作品に、水中のゆらぎをシェーダーで加えることで、より幻想的な表現に挑戦しよう

    学習ステップを見る
  • 応用編2

    フォトギャラリー

    基礎編で作ったフォトギャラリーにスライドアニメーションを加えよう

    学習ステップを見る
  • 応用編2

    ハニーハント

    基礎編の作品に障害物を置いたり、残り時間を追加して、何度も遊びたくなるようなゲームに挑戦しよう

    学習ステップを見る
  • 応用編3

    シュガーラッシュ

    スピードアップ機能などの加わったよりスリリングなゲームデザインに挑戦しよう

    学習ステップを見る
  • 応用編3

    魔法の鏡

    基礎編の作品にシェーダーによるエフェクトを追加しよう

    学習ステップを見る
  • 応用編3

    人探しサイト

    基礎編のWebサイトにインタビューと、ズートピアのエリアガイドを掲載しよう

    学習ステップを見る
  • 応用編4

    KAWARA割り

    カワラが補充される機能と、パワーを貯めて複数のカワラを壊す機能を追加しよう

    学習ステップを見る
  • 応用編4

    宝石パズル

    隣り合った宝石を消してスコアを増やし、高得点を目指すルールを加えよう

    学習ステップを見る
  • 応用編4

    ドラゴン＆ソード

    基礎編のゲームに王子の動きや、攻撃力のちがいで難易度を調整する方法も学ぼう

    学習ステップを見る
  • 応用編4

    ダンジョンエスケープ

    左右と上下に 移動するブロックを追加し、スリルのあるゲームに作り変えよう

    学習ステップを見る
  • 応用編4

    雪の結晶

    再帰関数・座標変換、色のブレンドなどを使って雪の結晶を作ろう

    学習ステップを見る

*本編76レッスンに加え、基礎・応用編を最大152レッスン購入可能です。

追加教材のレッスンも見る

人探しサイト

53ステップ

  1. タイトルを書こう
  2. 見出しを作ろう
  3. 画像を表示しよう
  4. 文字の見た目を変えよう
  5. 箱を作ろう
  6. 背景画像を表示しよう
  7. 高さを指定しよう
  8. divの上がわに空間を作ろう
  9. 真ん中にそろえよう
  10. <header>タグを作ろう
  11. セレクターを書きかえよう
  12. 文字を打ち込もう
  13. ２つ目の見出しを作ろう
  14. セクションを作ろう
  15. 文章をかこもう
  16. 改行をいれよう
  17. 画像を表示させよう
  18. セクションのセレクタを作ろう
  19. セクションに背景をいれよう
  20. 文字の見た目を変えよう
  21. 文字の下に空間を作ろう
  22. 画像と文章を横にならべようセレクタを書こう
  23. セクションに高さをいれよう
  24. セクションの内がわに空間を作ろう
  25. 見出しを作ろう
  26. セクションを作ろう
  27. セクションの背景を変えよう
  28. セクションのCSSを消そう
  29. セレクターを作ろう
  30. クラス名をつけよう1
  31. 高さを変えよう
  32. クラス名をつけよう2
  33. 一人目の見出しを作ろう
  34. 一人目の画像をいれよう
  35. 一人目の文章をかこもう
  36. 箱を作ろう
  37. 二人目の名前と画像に書きかえよう
  38. セレクターをふやそう
  39. 横幅（よこはば）を変えよう
  40. 横ならびにしよう
  41. 空間を作ろう
  42. 三人目の名前と画像に書きかえよう
  43. 高さを変えよう
  44. 名前の背景に色をつけよう
  45. 名前を真ん中にそろえよう
  46. 名前のまわりに空間を作ろう
  47. 文字の大きさを変えよう
  48. 文章にクラスをつけよう
  49. 文字の大きさを変えよう
  50. 文章にクラスをつけよう
  51. 文章の背景を白にしよう
  52. 文章に空間をつけよう
  53. フッターを作ろう
「ズートピア」で行方不明になった動物たちを探すためのWebサイトをつくろう！

フライング
カーペット

87ステップ

  1. キー入力で上に動かそう
  2. キー入力で下に動かそう
  3. ステージを変えよう
  4. gameSetup関数を作ろう
  5. createAladdin関数を作ろう
  6. アラジンのスプライトを作ろう
  7. アラジンのアニメーションを追加しよう
  8. createWall関数を作ろう
  9. 洞窟の壁のスプライトを作ろう
  10. createMagma関数を作ろう
  11. マグマのスプライトを作ろう
  12. アラジンを移動させよう
  13. カメラを移動させよう
  14. for文で壁をくり返し作成しよう
  15. 壁の位置をずらして作ろう
  16. for文でマグマをくり返し作成しよう
  17. マグマの位置をずらして作ろう
  18. ステージを作る関数を作ろう
  19. 岩の変数を作ろう
  20. 岩のスプライトを作ろう
  21. 岩を置く位置の変数を作ろう
  22. スプライトの横の位置を書きかえよう
  23. 岩のスプライトに画像を追加しよう
  24. for文で岩をくり返し作ろう
  25. 岩を作る位置をずらそう
  26. ステージのレイアウトを作ろう
  27. for文を書こう
  28. ステージのレイアウト配列を２行にする準備をしよう
  29. stageLayout.lengthを修正しよう
  30. 上の段と下の段の岩を区別する準備をしよう
  31. imageIndexを作ろう壁を右に移動させよう
  32. マグマを左に移動させよう
  33. スプライトの動きを止めておこう
  34. テキストを表示しよう
  35. テキストを大きくしよう
  36. テキストを中央にそろえよう
  37. 文字のフォントを変えよう
  38. マウスがクリックされたら呼ばれる関数を作ろう
  39. クリックされたらスプライトを動かそう
  40. テキストを表示する時にカメラをオフにしよう
  41. ゲームを管理する変数を作ろう
  42. ゲームモードを初期化しよう
  43. ゲームスタート時にだけテキストを表示しよう
  44. マウスがクリックされたらゲームモードを「プレイ中」に変更しよう
  45. 岩のスプライトのグループを作ろう
  46. ゲームオーバーの関数を作ろう
  47. アラジンをコントロールする関数を作ろう
  48. アラジンコントローラー関数を呼び出そう
  49. アラジンが岩と重なったらゲームオーバーになるようにしよう
  50. ゲームモードを変更しよう
  51. ゲームオーバーのテキストを表示しよう
  52. アラジンとカメラを制限しよう
  53. ゲームオーバー時に曲を再生しよう
  54. 「クリックしてスタート」のテキストを表示しよう
  55. ゲームスタートの設定をしよう
  56. ゲームをセットアップしなおそう
  57. ゲームオーバーの設定をしよう
  58. 上矢印キーを押した時にアラジンを上昇させよう
  59. 下向きの矢印キーを押した時にアラジンが下に動くようにしよう
  60. アラジンのあたり判定の形状（コライダー）を調整しよう
  61. 操作方法のテキストを追加しよう
  62. 画面の上にあたったらゲームオーバーになるようにしよう
  63. 画面の下にあたったらゲームオーバーになるようにしよう
  64. ゴール直前に出てくる岩をなくそう
  65. ゴールを作る関数を作ろう
  66. createGoal関数を呼び出そう
  67. ゴールのスプライトを作ろう
  68. ゴールの画像を追加しよう
  69. ゴールのコライダーを表示してサイズを変更しよう
  70. 出口に着いた時に呼ばれる関数を作ろう
  71. ゲームモードをフィニッシュにしよう
  72. ゲームが終わった時に曲を流そう
  73. ゴールした時にテキストを表示しよう
  74. ゴールした後マウスをクリックしたらもう一度プレイできるようにしよう
  75. ゴールのコライダーの表示を消しておこう
  76. アラジンの移動のコントロールをpositionからvelocityに変えよう
  77. アラジンを進行方向に向かって回転させよう
  78. コインのスプライトを作ろう
  79. コインのグループを作ろう
  80. コインを拾う時に呼ばれる関数を作ろう
  81. コインと重なったら拾うようにしよう
  82. コインのコライダーを見えるようにしよう
  83. コインのコライダーを調整しよう
  84. コインの位置にエフェクトを作ろう
  85. スコアの初期値を設定しよう
  86. 画面の右上にスコアを表示しよう
  87. コインを拾った時にスコアの値を増やそう
横スクロールゲームをつくって、アラジンを洞窟から脱出させよう

※応用編1の内容を含む

スカイランタン

8ステップ

  1. キャンバスをつくろう
  2. お城の画像を表示しよう
  3. ランタンを表示しよう
  4. 　　 ランタンを増やそう
  5. for文でランタンをくり返し表示しよう
  6. ランタンを下から上に動かそう
  7. ランタンの上昇速度を書きかえよう
  8. ランタンの数をさらに増やそう
「塔の上のラプンツェル」のランタン打ち上げをメディアアートで再現しよう

魔法の鏡

34ステップ

  1. ピクセルのRGBを取り出そう
  2. ピクセルにRGBAを入れよう
  3. 赤の成分を反転させよう
  4. 緑の成分を反転させよう
  5. 青の成分を反転させよう
  6. グレースケールフィルターの関数を呼び出そう
  7. ピクセルのRGB成分を取り出そう
  8. グレースケールを計算しよう
  9. ピクセルの色をグレースケールに変えよう
  10. セピア調フィルターを作ろう
  11. 白黒フィルターの関数を呼び出そう
  12. ピクセルから赤の成分を取り出そう
  13. 赤の成分を分けるif文を書こう
  14. if文で判定されたピクセルを白く塗りつぶそう
  15. elseを使って残りのピクセルを判定しよう
  16. 白以外の色を黒く塗りつぶそう
  17. mosaic関数を呼び出そう
  18. stepSize変数を用意しよう
  19. y方向にくり返しの魔法を使おう
  20. x方向にくり返しの魔法を使おう
  21. インデックス計算をしよう
  22. ピクセルのRGB成分を取り出そう
  23. 色を指定しよう
  24. モザイクの四角を描こう
  25. マウスで四角の大きさを変えよう
  26. gray関数を呼び出そう
  27. sepia関数を呼び出そう
  28. blackAndWhite関数を呼び出そう
  29. mosaic関数を呼び出そう
  30. フィルターの変数を作ろう
  31. フィルターの変数を初期化しよう
  32. フィルター変数を変えて判定しよう
  33. マウスクリック関数でfilter関数を変化させよう
  34. filter変数の数字の上限を作ろう
さまざまなエフェクトで世界を映す魔法の鏡をつくろう

ダンジョン
エスケープ

41ステップ

  1. 右に歩けるようにしよう
  2. 左に歩けるようにしよう
  3. キーが押されていない時は動かさないようにしよう
  4. ラルフが右向きという情報を代入しよう
  5. ラルフが左向きという情報を代入しよう
  6. ラルフが右を向いている判定をして右向きのアニメーションに切りかえよう
  7. ラルフが左を向いている判定をして左向きのアニメーションに切りかえよう
  8. 接地している時の縦の速度をゼロにしよう
  9. 重力をかけよう
  10. 上キーを押した時にジャンプしよう
  11. 上キーが押されていない時だけ縦の速度をゼロにしよう
  12. ラルフが落下中の時だけジャンプできるようにしよう
  13. ジャンプ音を鳴らそう
  14. ラルフとカギが重なったらpickup関数を呼ぼう
  15. カギを消そう
  16. カギを拾った時の音を鳴らそう
  17. ステージの形を変えて大きな穴を渡ろう
  18. ステージの形を変えてカギを取れるようにしよう
  19. パンチのアニメーションを出そう
  20. 右向きの条件をつけよう
  21. 左向きのパンチアニメーションを入れよう
  22. パンチモードに切りかえよう
  23. 移動モードに切りかえよう
  24. パンチ中は横移動しないようにしよう
  25. パンチの音を鳴らそう
  26. パンチの変数を作ろう
  27. 右パンチのスプライトを作ろう
  28. 左パンチのスプライトも作ろう
  29. パンチとブロックが重なったらcrash関数を呼ぼう
  30. ブロックが壊れた時の音を鳴らそう
  31. 判定が終わったらパンチを消そう
  32. ブロックの位置に破片のスプライトを作ろう
  33. 破片のブロックにアニメーションを作ろう
  34. ブロックを消そう
  35. トゲのタイミングを変更しよう
  36. カギの数をカウントしよう
  37. ドアの画像を変えよう
  38. ドアが開く音を鳴らそう
  39. ドアが開いているかどうかを確認しよう
  40. 開いたドアに重なったらescape関数を呼ぼう
  41. ダンジョンから脱出しよう
ダンジョン脱出ゲームをつくって、「シュガー・ラッシュ」のラルフを救い出そう

スクールオブ
フィッシュ

36ステップ

  1. 背景の画像を表示しよう
  2. 魚のクラスを作ろう
  3. 魚を入れる配列を用意しよう
  4. 魚のクラスから、新しい魚を作ろう
  5. 魚を一匹表示しよう
  6. 魚の座標をランダムに初期化しよう
  7. this.positionを使おう
  8. 魚の数の変数を作ろう
  9. 魚のクラスを使ってたくさんの新しい魚を作ろう
  10. 魚の数だけクラスを処理しよう
  11. move関数を使って魚を移動させよう
  12. 魚の速度をゼロで初期化しよう
  13. 魚が向かう先となる目標座標を作って初期化しよう
  14. 魚が泳ぐ時の力の向きを計算しよう
  15. 力の向きを整えよう
  16. directionに力の大きさを掛けて加速度にしよう
  17. 加速度を使って速度を変化させよう
  18. 速度を使って位置を変化させよう
  19. 速度で左右の向きを判定しよう
  20. 速度にリミッターを入れよう
  21. 最高速度をランダムで初期化しよう
  22. リミッターに最高速度を読みこもう
  23. 泳ぎの力をランダムで初期化しよう
  24. 力の向きにランダムな力を読みこもう
  25. 魚がマウスカーソルについてくるようにしよう
  26. 魚の数を増やしてみよう
  27. 泡のクラスを作ろう
  28. 泡の座標を初期化しよう
  29. 泡を1つ表示しよう
  30. 泡の配列と泡の数を用意しよう
  31. 泡のクラスを元に新しい泡をたくさん作ろう
  32. 泡の表示をしよう
  33. 泡の縦の移動速度を初期化しよう
  34. 泡１つを移動させる関数を作ろう
  35. 全ての泡を移動させよう
  36. 泡の大きさをランダムで初期化しよう
マウスを追いかける動きをつくって、魚たちのダンスをアリエルに披露しよう

フォトギャラリー

40ステップ

  1. 写真を表示しよう
  2. divタグで囲もう
  3. 背景色を指定しよう
  4. divの高さを指定しよう
  5. 背景画像を表示しよう
  6. 画像を真ん中にそろえよう
  7. 上にだけ余白をつけよう
  8. クラスをつけよう
  9. 枠線をつけよう
  10. 写真に影をつけよう
  11. photo変数をつくろう
  12. 写真を切りかえる関数を作ろう
  13. クリックで関数を呼び出そう
  14. ボタンの画像を表示しよう
  15. 画像がクリックされたら写真を変えよう
  16. ボタンの下方向に余白をつけよう
  17. 写真の順番を変える変数を作ろう
  18. 写真の順番を１増やそう
  19. 写真の順番によって写真を変えよう
  20. ２枚目の写真の条件を追加しよう
  21. 写真の番号が3以上になったら0に戻そう
  22. 写真の番号が0の時の画像を追加しよう
  23. クラスを使って画像を表示させよう
  24. 呼び出す関数の名前を変えよう
  25. 写真を戻す関数を作ろう
  26. アラートを表示しよう
  27. クリックで関数を呼び出そう
  28. alertを消そう
  29. next関数の中身をコピペしよう
  30. photoNumberをへらそう
  31. photoNumberの変数をリセットしよう
  32. setPhoto関数を作ろう
  33. setPhotoを呼び出そう
  34. 表示する写真の枚数を増やそう
  35. nextPhoto関数の条件を直そう
  36. backPhoto関数の条件を直そう
  37. 4枚目の画像を追加しよう
  38. 写真をくり返す条件を直そう
  39. 画像にホバーした時にサイズを大きくしよう
  40. だんだん大きくなるようにしよう
本格的なフォトギャラリー付きWebサイトをつくろう

クイーンズ
カード

48ステップ

  1. 背景を表示しよう
  2. スプライトを作ろう
  3. スプライトにオモテの絵を追加しよう
  4. カードの絵を変えてみよう
  5. 絵をヨコに並べる準備をしよう
  6. 変数xを変えてみよう
  7. for文を使ってくり返そう
  8. 絵をタテに並べる準備をしよう
  9. 変数yを変えてみよう
  10. for文を使ってカードをタテに並べよう
  11. カードの絵を変えてみよう
  12. １２枚のカードのタイプを配列で表そう
  13. カードのタイプを配列から持ってこよう
  14. 配列の数字を変えてみよう
  15. 変数を使って並べよう
  16. カードがクリックされた時に呼ばれる関数を作ろう
  17. スプライトがクリックされた時に呼び出される関数をセットしよう
  18. スプライトの絵をオモテ面に変えよう
  19. カードをめくった時の音を再生しよう
  20. クリックされた時にカードのオモテとウラを入れかえよう
  21. ウラ面を追加しているコードをコメントアウトしよう
  22. カードをシャッフル関数を作ろう
  23. カードをシャッフルする関数を呼び出そう
  24. カードをシャッフルする処理を書こう
  25. コメントアウトを戻そう
  26. スコア数を入れる変数を作ろう
  27. スコアをテキストで表示しよう
  28. テキストの設定をしよう
  29. スコアにゲットした宝石の数を足そう
  30. ゲーム終了の処理を行う関数を作ろう
  31. 100点を超えたらゲームを終了させよう
  32. クリックしたカードがオモテだった時に何もしないようにしよう
  33. else文を削除しようめくられたカードの枚数を数えよう
  34. カードが2枚めくられたときを判定しよう
  35. めくられたカードを保存する変数を作ろう
  36. 1回目にめくったカードを変数に保存しよう
  37. 2回目にめくったカードを変数に保存しよう
  38. 2枚目をめくった時にペアがそろった時のを鳴らしてflippedCountもゼロにしよう
  39. カウントダウンタイマーを作ろう
  40. カードをウラ面に戻そう
  41. ウラ面に戻すときに音楽を再生して、めくった枚数をリセットしよう
  42. カードのタイプをカードの中に保存しよう
  43. 1枚目と2枚目のカードが一緒だった時の条件を書こう
  44. else文を追加しよう
  45. 変数pairCountを作ろう
  46. ペアの数を数えよう
  47. ペアが全てそろった時に音楽を鳴らそう
  48. ゲーム終了時の画像を表示しよう
「不思議の国のアリス」の神経衰弱ゲームをつくって、女王と勝負しよう

ハニーハント

47ステップ

  1. キャンバスを作ろう
  2. 背景の色を指定しよう
  3. 木のスプライトを作ろう
  4. スプライトを表示しよう
  5. 木の画像を追加しよう
  6. プーさんのスプライトを作ろう
  7. 風船のスプライトを作ろう
  8. 風船の位置を調整しよう
  9. BGMを流そう
  10. gamePlaying関数を作ろう
  11. プーさんを上に移動させよう
  12. 風船をプーさんの位置に合わせよう
  13. カメラを移動させよう
  14. for文で木をくり返し作成しよう
  15. 木の位置をずらして作ろう
  16. プーさんをマウスで移動できるようにしよう
  17. 風船をプーさんの位置に合わせよう
  18. プーさんの速さを調節しよう
  19. プーさんが画面の左端を越えないようにしよう
  20. プーさんが画面の右端を越えないようにしよう
  21. ハチミツのスプライトを作ろう
  22. ハチミツをたくさん作ろう
  23. ハチミツのスプライトのグループを作ろう
  24. ハチミツのグループを追加しよう
  25. ハチミツのスプライトを消そう
  26. プーさんとハチミツの当たり判定をしよう
  27. ハチミツを拾った時に曲を再生しよう
  28. ハチミツの数を表示する背景画像を表示しよう
  29. カウンターはカメラに影響されないようにしよう
  30. ハチミツを拾った数を入れる変数を作ろう
  31. ハチミツの数を初期化しよう
  32. ハチミツの数をテキストで表示しよう
  33. 文字の大きさや位置を調整しよう
  34. ハチミツの数に１を足そう
  35. 文字の色を変えてみよう
  36. フォントを変えてみよう
  37. フォントを太字にしよう
  38. gameMode変数を作ろう
  39. ゲームモードを初期化しよう
  40. gameCompleted関数を作ろう
  41. if文でゲームモードをgamePlayingに切り替えよう
  42. ゲームモードにgameCompletedを追加しよう
  43. ハチミツを５つ集めたらゲームを完了させよう
  44. ゲームをコンプリートしたら音楽を鳴らそう
  45. ゲームをコンプリートしたら文字を表示しよう
  46. 文字を大きくして、真ん中に寄せよう
  47. ゲームモードの切り替えをswitch-case文に書き換えよう
風船に乗ったプーさんを動かしてハチミツを集めるゲームをつくろう

KAWARA割り

47ステップ

  1. 背景画像を表示しよう
  2. 曲を再生しよう
  3. ベイマックスのスプライトを作ろう
  4. スプライトを全て表示しよう
  5. ベイマックスのスプライトに手を上げている画像を追加しよう
  6. ベイマックスのスプライトに手を下げている画像を追加しよう
  7. 手を下げている画像に変えてみよう
  8. マウスが押されたら画像を変えよう
  9. マウスが放されたら画像を変えよう
  10. 破壊音を再生しよう
  11. 瓦のスプライトを作ろう
  12. createKawaras関数を呼び出そう
  13. kawaraImagesの配列から画像を追加しよう
  14. 変数iの数字を変えてみよう
  15. for文を使ってaddImageをくり返そう
  16. 瓦の画像を切り替えよう
  17. 瓦の枚数をランダムで決めよう
  18. 瓦の枚数によって画像を変えよう
  19. マウスを放した時に瓦の画像を切り替えよう
  20. 瓦の枚数を１枚ずつ減らそう
  21. 瓦の画像を枚数に合わせて変えよう
  22. 新しくfor文を作ってみよう
  23. 瓦のスプライトを作るコードに変数jを組み合わせよう
  24. mousePressed関数をbaymaxMove関数に書き換えよう
  25. mouseReleased関数をbaymaxChop関数に書き換えよう
  26. 瓦の上でマウスが押された時に関数を呼び出そう
  27. ベイマックスのX座標を変えよう
  28. 瓦の上でマウスを放した時に関数を呼び出そう
  29. gamePlaying関数を作り、文字を表示するコードを書こう
  30. gamePlaying関数を呼び出そう
  31. 文字をスタイリングしよう
  32. タイマー表示の準備をしよう
  33. スコアとタイマー表示に必要な変数を作ろう
  34. 変数を初期化しよう
  35. スコアとタイマーをテキスト表示しよう
  36. スコアが１ずつ増えるようにしよう
  37. タイマーを表示しよう
  38. if文でタイマーを減らす条件を作ろう
  39. タイマーがゼロになったら何もしない処理を書こう
  40. ゲームモードの変数を追加しよう
  41. ゲームモードを初期化しよう
  42. switch-case文でゲームモードを管理しよう
  43. gameFinished関数を作ろう
  44. switch-case文にゲーム終了の条件を追加しよう
  45. タイマーが０になったらゲーム終了にしよう
  46. ゲームが終了したらスコアを大きく表示しよう
  47. ゲームが終了したら音を鳴らそう
ベイマックスを強化するために瓦割りゲームをつくろう

宝石パズル

89ステップ

  1. キャンバスを作ろう
  2. 背景に画像を表示しよう
  3. スコアボードの画像を表示しよう
  4. BGMをループ再生させよう
  5. ボードを作る関数を作ろう
  6. 宝石のスプライトを作ろう
  7. スプライトを表示しよう
  8. 宝石の画像を追加しよう
  9. 宝石をくり返し作成しよう
  10. 宝石の画像をくり返し追加しよう
  11. 宝石の色をランダムに設定しよう
  12. 5色の宝石を表示しよう
  13. 宝石の位置情報を保存しよう
  14. セルの位置を計算する関数を作ろう
  15. セルの位置を計算する関数を使おう
  16. 宝石のスプライトを配列に保存してみよう
  17. 宝石をクリックしたときに呼ばれる関数を作ろう
  18. 宝石の大きさを変えよう
  19. 宝石の情報を設定する関数を作ろう
  20. クリックした時表示される宝石の種類を変えよう
  21. ゲーム管理の変数を作ろう
  22. 条件判定しよう
  23. ゲームモードを変更しよう
  24. コードを消してみよう
  25. 宝石の色を入れる変数を作ろう
  26. 宝石を入れ替えよう
  27. ゲームモードの関数を作ろう
  28. それぞれのモードをコントロールしよう
  29. 宝石が移動している時間を数える変数を作ろう
  30. タイマーに時間をセットしよう
  31. 宝石がクリックされたらゲームモードを切り替えるようにしよう
  32. タイマーをカウントダウンしよう
  33. タイマーがゼロになったらゲームモードを変更しよう
  34. 宝石のスプライトに色の情報を保存しよう
  35. 関数の引数を増やそう
  36. 宝石のスプライトに速度を指定しよう
  37. 宝石の座標を書き換えよう
  38. 宝石の動きをストップさせる関数を作ろう
  39. 宝石の動きを止める関数を呼び出そう
  40. ２重for文を作ろう
  41. 宝石のスプライトの速度をゼロにセットしよう
  42. 宝石の位置をそろえよう
  43. 宝石が揃った時の関数を作ろう
  44. 宝石をゲットした時の関数を呼び出そう
  45. 宝石をゲットした時に音を再生しよう
  46. エフェクトのスプライトを作ろう
  47. エフェクトのアニメーションを追加しよう
  48. エフェクトに表示時間を設定しよう
  49. エフェクトをくり返そう
  50. 宝石がそろった判定をするif文を書こう
  51. 宝石が３つ並んでいる判定をする関数を作ろう
  52. 宝石が光るか確認してみよう
  53. 全ての宝石に対して判定させよう
  54. 宝石が横に３つ並んでいるかどうかを判定しよう
  55. 横に並んだ宝石の色がそろっているかをチェックしよう
  56. trueをfalseにかきかえよう
  57. 宝石が横に二つ並んでいる判定をしよう
  58. 宝石が三つ光るようにしよう
  59. 全てのisCollectedをfalseにしよう
  60. 宝石が縦に３つ並んでいるかどうかを判定しよう
  61. 集めた宝石の数を計算する関数を作ろう
  62. count変数を作ろう
  63. 同じ色が三つ並んだ宝石の数を数えよう
  64. ゲットした宝石の数を数える関数を使ってみよう
  65. ゲットした宝石があるかどうか判定しよう
  66. 色の揃った宝石を消して並べなおす関数を作ろう
  67. 左から処理を行うためのfor文を追加しよう
  68. 色の並んだ宝石を下から数えよう
  69. 消えた宝石の数の分だけ移動させる処理を書こう
  70. 画面の外側に新しく宝石を並べ直そう
  71. 宝石を落とす関数を呼び出そう
  72. movingTimerをセットし直そう
  73. 宝石が隣同士か判定しよう
  74. 隣り合う宝石がクリックされたかチェックしよう
  75. 隣り合う宝石ではなかった場合の処理を設定しよう
  76. 宝石が縦に並んでいるか判定しよう
  77. 宝石が連続して縦に並んでいるか判定しよう
  78. 宝石が連続して横に並んでいるか判定しよう
  79. angle変数を作ろう
  80. 角度を変えてみよう
  81. クリックした宝石の大きさを変えよう
  82. angleの増えかたを変えよう
  83. 宝石の大きさを戻そう
  84. スコア数を入れる変数を作ろう
  85. スコアをテキストで表示しよう
  86. テキストの設定をしよう
  87. スコアにゲットした宝石の数を足そう
  88. ゲーム終了の処理を行う関数を作ろう
  89. 100点を超えたらゲームを終了させよう
7人のこびとたちが掘りだした宝石を使って落ち物パズルをつくろう

シュガー・
ラッシュ

52ステップ

  1. キャンバスを作ろう
  2. ゲーム全体の初期化を行う関数を作ろう
  3. ゲーム全体の初期化を行う関数を呼び出そう
  4. 道路のスプライトを作ろう
  5. スプライトを表示しよう
  6. 道路の画像を追加しよう
  7. ヴァネロペのスプライトを作ろう
  8. ヴァネロペのアニメーションを追加しよう
  9. BGMを流そうBGMと一緒に、走行音を流そう
  10. ヴァネロペを下に移動させよう
  11. ゲームプレイの処理をする関数を作ろう
  12. ゲームプレイの処理をする関数を呼び出そう
  13. カメラを移動させよう
  14. 道路をくり返し作成しよう
  15. 道路のスプライトのグループを作り、道路スプライトを追加しよう
  16. ヴァネロペをキーで移動させよう
  17. ヴァネロペがコースの端を越えないようにしよう
  18. ライバルを作成する関数を作ろう
  19. ライバルを作成する関数を呼び出そう
  20. ライバルのスプライトを作成しよう
  21. ライバルの配置を変えてみよう
  22. ライバルをレーンにそって、ランダムに配置しよう
  23. ライバルにアニメーションを追加しよう
  24. アニメーションをランダムに変えよう
  25. ライバルの速度を設定しよう
  26. ライバルの数を入れる変数を作ろう
  27. ライバルを増やそう
  28. ライバルのグループを作ろう
  29. ヴァネロペがライバルにぶつかった時の関数を作ろう
  30. ゲームオーバーでサウンドを停止させよう
  31. ゲームオーバーでスプライトの動きを止めよう
  32. ヴァネロペに当たり判定をつけよう
  33. ヴァネロペにコライダーを追加しよう
  34. ゴールのスプライトを作り、画像を追加しよう
  35. ゴールの縦の位置を調整しよう
  36. ゲーム終了の処理をする関数を作ろう
  37. サウンドを停止させよう
  38. 全てのスプライトの動きを止めよう
  39. ヴァネロペがゴールしたときのコードを書こう
  40. ゴールした時の関数を呼び出そう
  41. ゲームモードの変数を作ろう
  42. ゲームモードを変えてみよう
  43. ゲームモードを切り替えよう
  44. ゲームプレイ中の処理を書こう
  45. ゲームオーバーの時の処理を書こう
  46. ゲームモードをゲームオーバーに切り替えよう
  47. ゲームオーバーのサウンドを流そう
  48. ゲームをゴールしたら文字を表示しよう
  49. ゴールしたときにゲームモードを切り替えよう
  50. テキストの設定をしよう
  51. 文字に縁を追加しよう
  52. ゴールのサウンドを再生しよう
「シュガー・ラッシュ」のレースゲームをつくろう

スノウマジック

16ステップ

  1. 雪の粒のクラスを作ろう
  2. クリックで雪の粒を作ろう
  3. 雪の粒を動かそう
  4. 雪の粒を消そう
  5. 雪の粒の速度を変えよう
  6. 雪の粒をクルンと回転させよう
  7. 雪の粒の軌道を変えよう
  8. 雪の粒ごとに動きを変えよう
  9. 軌跡を表現しよう
  10. 雪の粒を増やそう
  11. 雪の粒１つ１つを変化させよう
  12. 空気抵抗を大きくしよう
  13. 雪の粒の速さを変えよう
  14. 背景の透明度を変えよう
  15. 雪の粒が表示される時間を変えよう
  16. 雪の粒の動きに変化を出そう
「アナと雪の女王」の氷の魔法をプログラミングで再現しよう

ドラゴン＆
ソード

10ステップ

  1. 前に歩くアニメーションに切り替えよう
  2. 後ろに歩くアニメーションに切り替えよう
  3. ガードのアニメーションに切り替えよう
  4. 炎を上むきにはね返そう
  5. 王子を後ずさりさせよう
  6. 攻撃のアニメーションに切り替えよう
  7. 剣を振る音を再生しよう
  8. 通常モードに切り替えよう
  9. アニメーションのコマを巻き戻そう
  10. 剣の当たり判定を作ろう
格闘ゲームをつくって、「眠れる森の美女」のドラゴンを倒そう

ミーミルの
課外授業
（外部環境レッスン）

32ステップ

  1. ブラウザを使おう
  2. Bracketsを検索しよう
  3. Bracketsをダウンロードしよう
  4. Bracketsをインストールしよう
  5. Bracketsを使おう
  6. ミーミルからのプレゼントを受け取ろう
  7. zipを展開しよう
  8. フォルダをBracketsで読み込もう
  9. プレビューしてみよう
  10. 画面を左右に並べよう
  11. DOCTYPEを宣言しよう
  12. htmlタグを書こう
  13. インデントしよう
  14. headタグを書こう
  15. bodyタグを書こう
  16. 文字化けを防ごう
  17. titleタグを書こう
  18. h1タグを書こう
  19. h2タグを書こう
  20. 画像を表示しよう
  21. 画像の場所を指定しよう
  22. 段落を作って文章を書こう
  23. htmlファイルを保存しよう
  24. h1の色を変えよう
  25. HTMLとCSSをつなげよう
  26. h1の大きさを変えよう
  27. h1のフォントを変えよう
  28. h2の色を変えよう
  29. divタグを書こう
  30. 文字と画像を真ん中に移動しよう
  31. 画像に枠をつけよう
  32. 画像の角を丸くしよう
ご自身のパソコンで、Webデザイン作品をつくるためのセットアップを学ぼう

ミーミルの
課外授業
（外部環境レッスン）

21ステップ

  1. ミーミルの課外授業
  2. メディアアート 編
  3. Bracketsを開こう
  4. ミーミルからのプレゼントを受け取ろう
  5. zipを展開しよう
  6. フォルダをBracketsで読み込もう
  7. プレビュー画面を用意しよう
  8. HTMLとlibraryをつなげよう
  9. HTMLとJavaScriptをつなげよう
  10. htmlファイルを保存しよう
  11. JavaScriptファイルをクリックしよう
  12. setup関数を作ろう
  13. キャンバスを作ろう
  14. draw関数を作ろう
  15. 背景をぬりつぶそう
  16. 円を描こう
  17. 輪郭（りんかく）を消そう
  18. 背景の色を変えよう
  19. 小さな円を書こう
  20. 真ん中の座標をマウスの位置に置き換えよう
  21. 色をぬろう
  22. 背景に透明度をつけよう
  23. 別の作品を作る方法
ご自身のパソコンで、メディアアート作品をつくるためのセットアップを学ぼう

レッスン目次 花火

20ステップ

  1. シェーダーを使う準備をしよう
  2. 変数textureFromJSを作ろう
  3. シェーダー同士で座標データを連携しよう
  4. ピクセルの色を設定しよう
  5. VertexShaderで座標を調整しよう
  6. モザイクの細かさを決めよう
  7. モザイクを表現する計算式を書こう
  8. モザイクの細かさを変えてみよう
  9. mosaic関数を作ろう
  10. mosaic関数を呼び出そう
  11. 計算した結果を入れる変数を作ろう
  12. 計算した結果を返そう
  13. 関数の中でモザイクエフェクトを計算しよう
  14. モザイクの細かさを変えよう
  15. mirror関数を作って呼び出そう
  16. 計算した結果を入れる変数を作ろう
  17. 計算した結果を返そう
  18. 映像が左右対象に映るように計算しよう
  19. 映像が上下対象に映るように計算しよう
  20. ripple関数を作って呼び出そう
  21. 計算した結果を入れる変数を作ろう
  22. 計算した結果を返そう
  23. distance関数を使って距離を計算しよう
  24. sin関数を使って波紋の形を作ろう
  25. 波紋に動きをつける準備をしよう
  26. 波紋の動きを調整しよう
  27. 波紋の動きをアレンジしてみよう 28.これまでに作ったエフェクトを表示しよう
  28. エフェクトの関数を2つ組み合わせてみよう
  29. エフェクトの関数を3つ組み合わせてみよう
  30. 自由に書きかえよう
「塔の上のラプンツェル」の花火のシーンをメディアアートで再現しよう

レッスン目次 クイーンズカード（応用篇）

51ステップ

  1. 背景の画像を新しくしよう
  2. カードを左にずらそう
  3. Roundの数字を表示しよう
  4. 残りの数字を表示しよう
  5. 新しい関数を追加しよう
  6. image関数をdrawNumber関数に変えよう
  7. drawNumberのnumber引数の数字を変えよう
  8. 一番右側の桁の数字が表示されるようにしよう
  9. 数字を５つ並べる準備をしよう
  10. 数字を文字列に変えて数字の文字の数を数えよう
  11. sizeの間隔で数字が並ぶようにコードを書きかえよう
  12. Roundの数字を表示するdrawNumberのsize引数の部分に数字を追加しよう
  13. 全ての桁が正しく表示されるようにしよう
  14. 数字を変数で用意しよう
  15. scoreNumberをカウントアップしよう
  16. 変数の初期化の数字を変えよう
  17. トランプのペアがそろったらスコアが100点入るようにしよう
  18. 1combo変数を使って点数計算をしよう
  19. コンボのテーブルを用意しよう
  20. コンボのテーブルをつかって点数計算をしよう
  21. roundPlayという関数を作ろう
  22. 「START!」を表示する関数を作ろう
  23. roundStart関数を呼び出そう
  24. gameMode変数を初期化しよう
  25. timerに時間をセットしよう
  26. タイマーが0になったらプレイ開始しよう
  27. プレイ中以外はトランプをクリックできないようにしよう
  28. 「Completed!」を表示する関数を作ろう
  29. トランプのペアが６つ全部そろった時にgameModeをroundCompletedに変えよう
  30. コンプリートした時に楽曲を鳴らすコードを書こう
  31. addPoints関数を作ろう
  32. pointsXとpointsYの変数を追加しよう
  33. pointsXとpointsYにマウスの座標を代入しよう
  34. else if文を追加しよう
  35. ポイント表示用のタイマーとgameModeをセットしよう
  36. タイマーが０になったらgameModeを'roundPlay'に変えよう
  37. ポイントの表示をコンボに対応させよう
  38. addPoints関数の中でpointsY--と書こう
  39. 「GAMEOVER」を表示する関数を作ろう
  40. gameOver関数を呼び出そう
  41. gameOverの表示の制御をしよう
  42. ミスをしたらlastNumberを１つ減らそう
  43. ゲームオーバーの判定をしよう
  44. roundSetup関数を作ろう
  45. gameModeを'roundSetup'に設定しよう
  46. タイマーをセットしよう
  47. 数秒「Completed!」を表示してからgameModeを'roundSetup'に設定しよう
  48. ペアの数を０にリセットしよう
  49. 残り回数をリセットするための変数を追加しよう
  50. 新しいラウンドを始める前にスプライトを全て消そう
  51. 残り回数の初期化が5より小さくならないようにしよう
基礎編の「不思議の国のアリス」の神経衰弱ゲーム細かなルールが加わえよう

レッスン目次 フライングカーペット（応用篇）

85ステップ

  1. gameSetup関数を作ろう
  2. createAladdin関数を作ろう
  3. アラジンのスプライトを作ろう
  4. アラジンのアニメーションを追加しよう
  5. createWall関数を作ろう
  6. 洞窟の壁のスプライトを作ろう
  7. createMagma関数を作ろう
  8. マグマのスプライトを作ろう
  9. アラジンを移動させよう
  10. カメラを移動させよう
  11. for文で壁をくり返し作成しよう
  12. 壁の位置をずらして作ろう
  13. for文でマグマをくり返し作成しよう
  14. マグマの位置をずらして作ろう
  15. ステージを作る関数を作ろう
  16. 岩の変数を作ろう
  17. 岩のスプライトを作ろう
  18. 岩を置く位置の変数を作ろう
  19. スプライトの横の位置を書きかえよう
  20. 岩のスプライトに画像を追加しよう
  21. for文で岩をくり返し作ろう
  22. 岩を作る位置をずらそう
  23. ステージのレイアウトを作ろう
  24. for文を書こう
  25. ステージのレイアウト配列を２行にする準備をしよう
  26. stageLayout.lengthを修正しよう
  27. 上の段と下の段の岩を区別する準備をしよう
  28. imageIndexを作ろう
  29. 壁を右に移動させよう
  30. マグマを左に移動させよう
  31. スプライトの動きを止めておこう
  32. テキストを表示しよう
  33. テキストを大きくしよう
  34. テキストを中央にそろえよう
  35. 文字のフォントを変えよう
  36. マウスがクリックされたら呼ばれる関数を作ろう
  37. クリックされたらスプライトを動かそう
  38. テキストを表示する時にカメラをオフにしよう
  39. ゲームを管理する変数を作ろう
  40. ゲームモードを初期化しよう
  41. ゲームスタート時にだけテキストを表示しよう
  42. マウスがクリックされたらゲームモードを「プレイ中」に変更しよう
  43. 岩のスプライトのグループを作ろう
  44. ゲームオーバーの関数を作ろう
  45. アラジンをコントロールする関数を作ろう
  46. アラジンコントローラー関数を呼び出そう
  47. アラジンが岩と重なったらゲームオーバーになるようにしよう
  48. ゲームモードを変更しよう
  49. ゲームオーバーのテキストを表示しよう
  50. アラジンとカメラを制限しよう
  51. ゲームオーバー時に曲を再生しよう
  52. 「クリックしてスタート」のテキストを表示しよう
  53. ゲームスタートの設定をしよう
  54. ゲームをセットアップしなおそう
  55. ゲームオーバーの設定をしよう
  56. 上矢印キーを押した時にアラジンを上昇させよう
  57. 下向きの矢印キーを押した時にアラジンが下に動くようにしよう
  58. アラジンのあたり判定の形状（コライダー）を調整しよう
  59. 操作方法のテキストを追加しよう
  60. 画面の上にあたったらゲームオーバーになるようにしよう
  61. 画面の下にあたったらゲームオーバーになるようにしよう
  62. ゴール直前に出てくる岩をなくそう
  63. ゴールを作る関数を作ろう
  64. createGoal関数を呼び出そう
  65. ゴールのスプライトを作ろう
  66. ゴールの画像を追加しよう
  67. ゴールのコライダーを表示してサイズを変更しよう
  68. 出口に着いた時に呼ばれる関数を作ろう
  69. ゲームモードをフィニッシュにしよう
  70. ゲームが終わった時に曲を流そう
  71. ゴールした時にテキストを表示しよう
  72. ゴールした後マウスをクリックしたらもう一度プレイでき73.るようにしよう
  73. ゴールのコライダーの表示を消しておこう
  74. アラジンの移動のコントロールをpositionからvelocityに変えよう
  75. アラジンを進行方向に向かって回転させよう
  76. コインのスプライトを作ろう
  77. コインのグループを作ろう
  78. コインを拾う時に呼ばれる関数を作ろう
  79. コインと重なったら拾うようにしよう
  80. コインのコライダーを見えるようにしよう
  81. コインのコライダーを調整しよう
  82. コインの位置にエフェクトを作ろう
  83. スコアの初期値を設定しよう
  84. 画面の右上にスコアを表示しよう
  85. コインを拾った時にスコアの値を増やそう
基礎編の横スクロールゲームにキャラクターの動きや新しい操作が加わえよう

レッスン目次 スクールオブフィッシュ（応用篇）

8ステップ

  1. シェーダーを使う準備をしよう
  2. 変数textureFromJSを作ろう
  3. シェーダー同士で座標データを連携しよう
  4. ピクセルの色を設定しよう
  5. 座標の位置を調整してWEBGLに渡そう
  6. 新しい座標の変数を作ろう
  7. 変数newTexCoord.xを計算しよう
  8. 変数newTexCoord.yを計算しよう
基礎編の作品に、水中のゆらぎをシェーダーで加えることで、より幻想的な表現に挑戦しよう

レッスン目次 フォトギャラリー（応用篇）

34ステップ

  1. 写真を表示しよう
  2. absoluteを使って配置しよう
  3. 写真用の箱を作ろう
  4. 写真を装飾しよう
  5. 背景を表示しよう
  6. 写真を増やそう
  7. absoluteを使って配置しよう
  8. 変数を作ろう
  9. 写真を横に並べよう
  10. 写真を５枚に増やそう
  11. for文を使って並べよう
  12. 背景の箱を横にのばそう
  13. 変数を作ろう
  14. 関数を作ろう
  15. 関数を呼び出そう
  16. 写真をスライドさせよう
  17. 写真のインデックスを作ろう
  18. スライドをループさせよう
  19. ボタンを作ろう
  20. ボタン用の箱を配置しよう
  21. 戻るボタンを配置しよう
  22. 進むボタンを配置しよう
  23. clickNextButton関数を作ろう
  24. clickBacktButton関数を作ろう
  25. 背景にCSSを整理しよう
  26. 背景を増やそう
  27. 背景を動かす準備をしよう
  28. 背景を動かそう
  29. サムネイルを表示しよう
  30. サムネイルを配置しよう
  31. clickThumbnail関数を作ろう
  32. サムネイルに触れた時のCSSを作ろう
  33. サムネイルが選ばれた時用のCSSを作ろう
  34. selectThumbnail関数を作ろう
基礎編で作ったフォトギャラリーにスライドアニメーションを加えよう

レッスン目次 ハニーハント（応用篇）

37ステップ

  1. ハチのプライトを作ろう
  2. ハチのスプライトに画像を追加しよう
  3. ハチを移動させよう
  4. ハチをバラバラに動かそう
  5. ハチをバラバラに動かそう
  6. ハチの画像を切りかえよう
  7. ハチのスプライトを消そう
  8. 風船にあたり判定をつけよう
  9. ゲームモードをgameOverに切り替えよう
  10. gameEnd関数を作ろう
  11. ハチのあたり判定を調整しよう
  12. 風船のスプライトに画像を追加しよう
  13. balloonNumberを設定しよう
  14. beeAttack関数と組み合わせよう
  15. 地上を作ろう
  16. 地上を移動させよう
  17. 雲を作ろう
  18. 雲を移動させよう
  19. gameSetup関数を作ろう
  20. mouseClicked関数を作ろう
  21. ゲームモードを判定する条件文を書こう
  22. テキストを表示しよう
  23. 風船アイテムを作ろう
  24. 風船アイテムを動かそう
  25. balloonCatch関数を作ろう
  26. ハチミツのカウンターを動かそう
  27. のこり時間を表示しよう
  28. タイマーの処理を作ろう
  29. テキストを表示しよう
  30. 風船の個数によってプーさんの速度を変えてみよう
  31. プーさんの横移動の速度を調整しよう
  32. ハチミツの位置を調整しよう
  33. ハチミツの数を増やそう
  34. ハチの数を増やそう
  35. ハチの速度を調整しよう
  36. 風船アイテムの位置を調整しよう
  37. ハチミツを拾った時に増える時間を調整しよう
基礎編の作品に障害物を置いたり、残り時間を追加して、何度も遊びたくなるようなゲームに挑戦しよう

レッスン目次 シュガーラッシュ（応用篇）

136ステップ

  1. キャンディ変数を作ろう
  2. キャンディのスプライトを作成しよう
  3. キャンディに画像を追加しよう
  4. キャンディを配置する処理を作ろう
  5. スプライトを作成する処理を移そう
  6. 画像を追加する処理を移そう
  7. キャンディを生成する処理を消そう
  8. キャンディ配置の処理を呼び出そう
  9. キャンディをグループに変えよう
  10. 新しくキャンディスプライトを作成しよう
  11. キャンディグループを作成しよう
  12. キャンディをグループに追加しよう
  13. キャンディ数を設定しよう
  14. キャンディをたくさん出そう
  15. ループ処理でキャンディの位置を設定しよう
  16. キャンディの位置をランダムにしよう
  17. キャンディの見た目をランダムで変えよう
  18. キャンディ取得の処理を作ろう
  19. ヴァネロペのスピードを増やそう
  20. キャンディ取得の処理を呼び出そう
  21. キャンディを消そう
  22. アイテム取得のサウンドを作ろう
  23. アイテム取得のサウンドを再生しよう
  24. 時間を計る変数を作ろう
  25. フレーム数を設定しよう
  26. フレーム数を増やそう
  27. 関数の名前を書き換えよう
  28. ゴールしたときの処理を書き換えよう
  29. ゲームおわりの処理を新しく作ろう
  30. ゲームおわりの処理で時間を表示しよう
  31. 「GOAL」の文字を表示しよう
  32. ゴールできたときの処理を書き換えよう
  33. 時間表示の変数を作ろう
  34. フレーム数を「秒」になおそう
  35. 時間を「秒」で表示しよう
  36. 「秒」の小数部分を表示しないようにしよう
  37. ゲーム結果の装飾を表示しよう
  38. ゴール結果の表示を設定しよう
  39. ラップ時間の表示を設定しよう
  40. ラップ時間を表示する位置を変更しよう
  41. 時間表示の処理を作ろう
  42. 時間の「分」を表示する.変数を作ろう
  43. 時間の「分」の部分を計算しよう
  44. 時間の「秒」を表示する変数を作ろう
  45. 時間から「分」を引いて秒数を計算しよう
  46. 「100分の1秒」を表示する処理に書き換えよう
  47. 「100分の1秒」を表示する変数を作ろう
  48. 「100分の1秒」を計算しよう
  49. 時間を単位で分ける処理を呼び出そう
  50. 時間を「分 : 秒.100分の1秒」と表示しよう
  51. 最大ラップ数を設定しよう
  52. ライバルを表示する回数を変更しよう
  53. キャンディを表示する回数を変更しよう
  54. 道路を表示する回数を変更しよう
  55. ゴール変数をゴールグループに書き換えよう
  56. ゴールのグループを作ろう
  57. ゴールを作るためのループ処理を作ろう
  58. スプライトの変数を作ろう
  59. ゴールグループにスプライトを追加しよう
  60. ゴール判定の位置を新しく作ろう
  61. ゴール判定の位置を変更しよう
  62. スプライトを生成する位置を変更しよう
  63. ゴールのスプライトを3回生成しよう
  64. ゴール判定の位置を設定しよう
  65. ラップ数を数える変数を作ろう
  66. はじめのラップ数を設定しよう
  67. ゴール判定の条件を変更しよう
  68. ゴールする条件を分岐しよう
  69. ラップ数を増やそう
  70. ラップ時間を保存する配列を作ろう
  71. 配列にラップ時間を保存しよう
  72. フレームを元に戻そう
  73. 時間を表示する回数を設定しよう
  74. ラップ時間を配列から取り出そう
  75. 時間表示の処理を呼び出そう
  76. ラップごとの時間を表示しよう
  77. 時間を表示する位置を変更しよう
  78. 「TOTAL TIME」の文字を表示しよう
  79. 合計時間の表示を設定しよう
  80. 合計時間を初期化しよう
  81. 合計時間を計算するループ処理を作ろう
  82. 合計時間を計算しよう
  83. 装飾の表示を整えよう
  84. 合計時間の表示を整えよう
  85. 時間表示の処理を呼びだそう
  86. 時間を表示しよう
  87. 単位で分けた時間を表示しよう
  88. カメラの影響をなくそう
  89. 時間の装飾を表示しよう
  90. 装飾を表示する位置を変更しよう
  91. ゴール結果の表示を設定しよう
  92. 「LAP TIME」を表示する位置を変更しよう
  93. 「TOTAL TIME」を表示する位置を変更しよう
  94. ラップごとの時間を表示する位置を変更しよう
  95. 合計時間を表示する位置を変更しよう
  96. ゲームオーバーの処理を作ろう
  97. テキストの表示を設定しよう
  98. ゲームオーバーの文字を表示しよう
  99. ライバルと当たった時の処理を呼び出そう
  100. 「LAP」の文字を表示しよう
  101. 現在のラップ数を表示しよう
  102. ラップ数の装飾を表示しよう
  103. ポップアップ表示を設定しよう
  104. ラップ数の表示を設定しよう
  105. ポップアップ表示用のタイマーを作ろう
  106. ポップアップ表示のタイマーを設定しよう
  107. タイマーをセットしよう
  108. タイマーを減らす条件を書こう
  109. ポップアップ表示のタイマーを減らそう
  110. ラップ数で処理を変える条件を書こう
  111. ゲームスタートの処理を作ろう
  112. ゲームモードによって処理を変えよう
  113. ゲームスタートの処理を作ろう
  114. ゲームモードを「gameStart」にしよう
  115. 全てのスプライトの動きを止めよう
  116. マウスクリックの処理を作ろう
  117. マウスクリックの処理でゲームモードを変えよう
  118. マウスクリックの処理でスプライトを動かそう
  119. 「Click to Start」の文字を表示しよう
  120. ゲームスタートのテキスト表示を設定をしよう
  121. ゲームモードがゲームオーバーの時という条件を作ろう
  122. 全てのスプライトを消そう
  123. ゲームをセットアップしなおそう
  124. カメラをヴァネロペといっしょに移動しよう
  125. リスタート出来るゲームモードの条件を変えよう
  126. ゴールの処理を新しく作ろう
  127. サウンドを再生するプログラムを消そう
  128. ゴールの処理でサウンドの再生をしよう
  129. ゲーム終わりの処理を呼び出そう
  130. ゲームモードを変えるプログラムを消そう
  131. ゲームモードを「ゲーム終わり」に変更しよう
  132. ゴールの処理を呼び出そう
  133. ゲーム終わりの処理と同じ部分を消そう
  134. ゲーム終わりの処理を呼び出そう
  135. 「Click to Restart」の文字を表示しよう
  136. 1テキスト表示の設定をしてゲームを完成しよう
スピードアップ機能などの加わったよりスリリングなゲームデザインに挑戦しよう

レッスン目次 魔法の鏡（応用篇）

31ステップ

  1. シェーダーを使う準備をしよう
  2. 変数textureFromJSを作ろう
  3. シェーダー同士で座標データを連携しよう
  4. ピクセルの色を設定しよう
  5. VertexShaderで座標を調整しよう
  6. モザイクの細かさを決めよう
  7. モザイクを表現する計算式を書こう
  8. モザイクの細かさを変えてみよう
  9. mosaic関数を作ろう
  10. mosaic関数を呼び出そう
  11. 計算した結果を入れる変数を作ろう
  12. 計算した結果を返そう
  13. 関数の中でモザイクエフェクトを計算しよう
  14. モザイクの細かさを変えよう
  15. mirror関数を作って呼び出そう
  16. 計算した結果を入れる変数を作ろう
  17. 計算した結果を返そう
  18. 映像が左右対象に映るように計算しよう
  19. 映像が上下対象に映るように計算しよう
  20. ripple関数を作って呼び出そう
  21. 計算した結果を入れる変数を作ろう
  22. 計算した結果を返そう
  23. distance関数を使って距離を計算しよう
  24. sin関数を使って波紋の形を作ろう
  25. 波紋に動きをつける準備をしよう
  26. 波紋の動きを調整しよう
  27. 波紋の動きをアレンジしてみよう 28.これまでに作ったエフェクトを表示しよう
  28. エフェクトの関数を2つ組み合わせてみよう
  29. エフェクトの関数を3つ組み合わせてみよう
  30. 自由に書きかえよう
基礎編の作品にシェーダーによるエフェクトを追加しよう

レッスン目次 人探しサイト（応用篇）

46ステップ

  1. クラス名を変えよう
  2. 箱を作ろう
  3. テキストを用意しよう
  4. リストを作ろう
  5. リストに線をつけよう
  6. リストを並べよう
  7. リストを整えよう
  8. 変数を作ろう
  9. コンテンツをかくそう
  10. コンテンツを表示しよう
  11. 関数を作ろう
  12. コンテンツを指定しよう
  13. コンテンツを指定しよう
  14. タブのCSSを整えよう
  15. 変数を作ろう
  16. 変数を作ろう
  17. JavaScriptでクラスを外そう
  18. JavaScriptでクラスを追加しよう
  19. セクションを作ろう
  20. 見出しを作ろう
  21. 段落を作ろう
  22. 箱を作ろう
  23. 箱のCSSを整えよう
  24. 写真のCSSを整えよう
  25. 写真をレイアウトしよう
  26. コンテンツの箱を作ろう
  27. テキストを整えよう
  28. 変数を作ろう
  29. コンテンツをかくそう
  30. 関数を作ろう
  31. idをつけよう
  32. コンテンツを指定しよう
  33. さわった時のCSSを整えよう
  34. コンテンツをレイアウトしよう
  35. 閉じるボタンを表示しよう
  36. 関数を作ろう
  37. コンテンツをかくそう
  38. さわった時のCSSを整えよう
  39. 箱を作ろう
  40. 箱をレイアウトしよう
  41. 変数を作ろう
  42. 箱をかくそう
  43. 箱を表示しよう
  44. 箱の表示の順番を変えよう
  45. 関数を呼び出そう
  46. JavaScriptを整理しよう
基礎編のWebサイトにインタビューと、ズートピアのエリアガイドを掲載しよう

レッスン目次 KAWARA割り（応用篇）

31ステップ

  1. 「瓦がある時」を判定しよう
  2. 「瓦が０枚の時」を判定しよう
  3. 瓦が消える寿命を設定しよう
  4. gamePlaying関数の中で瓦を作ろう
  5. 瓦のY座標を増やしてみよう
  6. 瓦に上方向の速度をあたえよう
  7. 瓦のY座標を判定しよう
  8. 瓦の速度を０にしよう
  9. 「瓦の列が５より少ない時」を判定しよう
  10. 瓦のX座標をランダムに決めよう
  11. 瓦の順番を取得する関数を作ろう
  12. 新しい変数を作ろう
  13. ５回処理を繰り返す準備をしよう
  14. 瓦の番号に順番のデータを設定しよう
  15. 「スペースキーを押している時」を判定しよう
  16. パワーアタックの音を再生しよう
  17. パワーアタックでもらえるスコアを増やそう
  18. テキスト「POWER」を表示しよう
  19. パワーゲージとなる長方形を描こう
  20. 「パワーが１より大きい時」を判定しよう
  21. 「瓦の数がパワーより大きい時」を判定しよう
  22. 「瓦の枚数がパワーより少ない時」を判定しよう
  23. スコアテーブルを用意しよう
  24. スコアテーブルからスコアを計算してみよう
  25. 「スペースを押していて、パワーが１の時」を判定しよう
  26. パワーが足りない時に音を鳴らそう
  27. パワーが足りない時にアニメーションを変更しよう
  28. マウスに関数を設定するコードをコメントにしよう
  29. 右矢印キーを判定しよう
  30. 左矢印キーを押したら実行されるコードを書こう
  31. 下矢印キーを判定しよう
カワラが補充される機能と、パワーを貯めて複数のカワラを壊す機能を追加しよう

レッスン目次 宝石パズル（応用篇）

39ステップ

  1. 宝石がそろった判定をするif文を書こう
  2. 宝石が３つ並んでいる判定をする関数を作ろう
  3. 宝石が光るか確認してみよう
  4. 全ての宝石に対して判定させよう
  5. 宝石が横に３つ並んでいるかどうかを判定しよう
  6. 横に並んだ宝石の色がそろっているかをチェックしよう
  7. trueをfalseにかきかえよう
  8. 宝石が横に二つ並んでいる判定をしよう
  9. 宝石が三つ光るようにしよう
  10. 全てのisCollectedをfalseにしよう
  11. 宝石が縦に３つ並んでいるかどうかを判定しよう
  12. 集めた宝石の数を計算する関数を作ろう
  13. count変数を作ろう
  14. 同じ色が三つ並んだ宝石の数を数えよう
  15. ゲットした宝石の数を数える関数を使ってみよう
  16. ゲットした宝石があるかどうか判定しよう
  17. 色の揃った宝石を消して並べなおす関数を作ろう
  18. 左から処理を行うためのfor文を追加しよう
  19. 色の並んだ宝石を下から数えよう
  20. 消えた宝石の数の分だけ移動させる処理を書こう
  21. 画面の外側に新しく宝石を並べ直そう
  22. 宝石を落とす関数を呼び出そう
  23. movingTimerをセットし直そう
  24. 宝石が隣同士か判定しよう
  25. 隣り合う宝石がクリックされたかチェックしよう
  26. 隣り合う宝石ではなかった場合の処理を設定しよう
  27. 宝石が縦に並んでいるか判定しよう
  28. 宝石が連続して縦に並んでいるか判定しよう
  29. 宝石が連続して横に並んでいるか判定しよう
  30. 角度を変えてみよう
  31. クリックした宝石の大きさを変えよう
  32. angleの増えかたを変えよう
  33. 宝石の大きさを戻そう
  34. スコア数を入れる変数を作ろう
  35. スコアをテキストで表示しよう
  36. テキストの設定をしよう
  37. スコアにゲットした宝石の数を足そう
  38. ゲーム終了の処理を行う関数を作ろう
  39. 100点を超えたらゲームを終了させよう
隣り合った宝石を消してスコアを増やし、高得点を目指すルールを加えよう

レッスン目次 ドラゴン＆ソード（応用篇）

45ステップ

  1. ドラゴンのモードを追加しよう
  2. アニメーションを追加しよう
  3. ドラゴンが反撃してくるように条件を書こう
  4. 炎を吐く時間をランダムに決めよう
  5. 関数の中にドラゴンの「炎を吐く」モードを追加しよう
  6. ドラゴンが炎を吐く関数を作ろう
  7. 炎のスプライトを作ろう
  8. 炎の速度を設定しよう
  9. 炎のグループにスプライトを追加しよう
  10. 待機モードのアニメーションに戻そう
  11. ドラゴンのモードを変えるタイマーを減らそう
  12. 炎をチャージしてから攻撃するようにしよう
  13. 炎をチャージするアニメーションを入れる変数を作ろう
  14. 炎をチャージする時間をランダムに決めよう
  15. 炎をチャージする音を入れる変数を作ろう
  16. ドラゴンと劍の当たり判定の条件を変えよう
  17. 炎をチャージするモードに切り替えよう
  18. 上下にも動くようにしよう
  19. 炎をランダムに回転させよう
  20. 炎の大きさをランダムにしよう
  21. 炎が消えるまでの時間を決めよう
  22. 炎の速度をだんだんゆっくりにしよう
  23. 炎を吐く音を入れる変数を作ろう
  24. 炎にコライダーをつけよう
  25. 炎が王子に当たったときの処理を作ろう
  26. 王子が盾でガードしているときの処理を作ろう
  27. 炎を上むきにはね返そう
  28. 王子が後ずさるようにしよう
  29. 盾でガードしていないときの処理を作ろう
  30. タイマーをリセットしよう
  31. 王子のモードをダメージモードに切り替えよう
  32. 王子の体力を減らそう
  33. 王子の体力を0にしよう
  34. ゲームオーバーモードに切り替えよう
  35. ダメージ音を入れる変数を作ろう
  36. ダメージを受けているときの処理を作ろう
  37. 待機のアニメーションに切り替えよう
  38. 王子の剣のダメージ量を増やそう
  39. 炎のチャージ時間を短くしよう
  40. 王子の剣のダメージを設定しよう
  41. 王子の移動速度を上げよう
  42. 王子が「後ずさり」する距離を短くしよう
  43. ドラゴンが炎を吐く頻度を下げよう
  44. 王子の移動速度を設定しよう
  45. 自由に書きかえてみよう
基礎編のゲームに王子の動きや、攻撃力のちがいで難易度を調整する方法も学ぼう

レッスン目次 ダンジョンエスケープ（応用篇）

43ステップ

  1. 移動するブロックを作ろう
  2. 移動するブロックに画像を入れよう
  3. ラルフと移動するブロックの判定を取ろう
  4. 毎フレームの値を戻そう
  5. 横に移動するブロックのグループを作ろう
  6. 移動する速度を変えよう
  7. 関数を呼び出そう
  8. タイマーが180のときの処理を作ろう
  9. ブロックの移動する速度を変更しよう
  10. タイマーを0に戻そう
  11. 移動ブロックに乗っているときの処理を作ろう
  12. カギを1つ取ればドアが開くようにしておこう
  13. ステージクリアしたときの処理をつくろう
  14. クリアサウンドを再生しよう
  15. ステージクリア画面に文字を表示しよう
  16. ステージクリア画面からもう一度遊べるようにしよう
  17. ステージ1の変数名を変えよう
  18. 配列にステージ1のレイアウトを保存しよう
  19. stageNumberが2のときの条件を分岐しよう
  20. ステージ2から始められるようにしておこう
  21. 移動するブロックを配置する処理を書こう
  22. 上に移動するブロックのグループをつくろう
  23. ブロックを移動する処理をつくろう
  24. ブロックが画面の上に来たときの処理をつくろう
  25. ステージ2から始められるようにしておこう
  26. 移動するブロックを作ろう
  27. ブロックを移動させる処理を作ろう
  28. ブロックを移動する処理を呼び出そう
  29. ステージ2から始められるようにしておこう
  30. ゴールを作ろう
  31. ゴールの変数に開いた扉の画像を入れよう
  32. ラルフとゴールの当たり判定を作ろう
  33. ステージ2にいるかを判定しよう
  34. ラルフがゴールに重なっているかを判定しよう
  35. ステージ1から始まるように戻そう
  36. トゲ岩の変数をコピーしてペーストしよう
  37. タイマー機能をコピーしてペーストしよう
  38. トゲ岩の移動速度をセットする機能を消そう
  39. カギが集まったときの条件を消そう
  40. ブロックが壊れる処理の機能を消そう
  41. 当たり判定のグループとサウンドの変数を消そう
  42. 自由に書きかえてみよう
左右と上下に 移動するブロックを追加し、スリルのあるゲームに作り変えよう

レッスン目次 雪の結晶

28ステップ

  1. 色のモードをHSBに設定しよう
  2. キャンバス全体の座標の基点を移動させよう
  3. 線を描く関数を作ろう
  4. 線を描こう
  5. 変数を管理する関数を作ろう
  6. 線の長さの引数を設定しよう
  7. 関数を再帰的に呼び出そう1
  8. 再帰する回数を変数で管理しよう
  9. 線に角度をつけよう
  10. 角度の引数を設定しよう
  11. 関数を再帰的に呼び出そう2
  12. push関数・pop関数を使おう
  13. 再帰する回数を変えよう
  14. 線の長さを計算しよう
  15. 線の角度を変数で管理しよう
  16. 関数を再帰的に呼び出そう3
  17. 線の太さを変えよう
  18. 枝の数を変数で管理しよう
  19. 枝を並べて結晶の形を作ろう
  20. 結晶を作る枝の数を変えてみよう
  21. 結晶の大きさを変えよう
  22. マウスクリックで変数を初期化しよう
  23. 結晶の形を変えよう
  24. 枝を並べて小さい結晶の形を作ろう
  25. 小さい結晶の枝の数を変数で管理しよう
  26. 結晶が少しずつ大きくなるようにしよう
  27. 速度の度合いを計算しよう
  28. 自由に書き換えよう
再帰関数・座標変換、色のブレンドなどを使って雪の結晶を作ろう

レッスン目次 ミーミルの課外授業(外部環境レッスン)

9ステップ

  1. Visual Studio Codeを立ち上げよう
  2. ミーミルからのプレゼントを受け取ろう
  3. zipを展開しよう
  4. フォルダをVisual Studio Codeで読み込もう
  5. プレビュー画面を用意しよう
  6. 画面を左右に並べよう
  7. ライブラリの確認
  8. code.jsの確認
  9. ゲームを完成させよう
ご自身のパソコンで、ゲーム作品を作るための、セットアップを学ぼう

HOW

参考書や動画での学習は、途中で飽きてしまったり、難しくて付いていけなくなったり、
なかなか長続きしないもの。
でも、「テクノロジア魔法学校」なら大丈夫。
ストーリーや謎解きを交えた「飽きさせない」教材設計と、ライフイズテック独自の学習システム「MOZER®︎」により、より集中して、より速く、より深く学べる学習体験を実現しました。

教材アイテムを見る

POINT1

エンターテインメントと
学習が融合する体験

ストーリー・ゲームとレッスンとが一体化した、
「テクノロジア魔法学校」だけの特別な学習体験。
その具体例として、第2章「塔の上のラプンツェル」の進めかたをご紹介します。

クリックでpdfが表示されます。

POINT2

世界で評価される学習システム
「MOZER®︎」

MOZER®︎の最大の特徴は、難解さを徹底して取り除いたレッスン構造。1画面に詰め込む情報量が適切にコントロールされているので、文字の多さに「うわっ」となることがありません。また、長くて複雑なプログラムでも、パーツごとに細かくステップ分けしてレッスン化してあるので、1つ1つ着実に理解しながら進むことができます。

  • 適切な学習情報量で学びやすい画面構成

  • 会話形式の丁寧なナビゲーション。新しい知識は図解で説明

  • 時にはクイズ形式で理解度を確認！

  • レッスンのホーム画面。繰り返し復習できるREPLAY機能も

適切な学習情報量で学びやすい画面構成

会話形式の丁寧なナビゲーション。
新しい知識は図解で説明

時にはクイズ形式で理解度を確認！

レッスンのホーム画面。
繰り返し復習できるREPLAY機能も

LEARN MORE?

より本格的なアルゴリズムやコード設計、
外部環境構築など、
もっと学びたい方向けの追加教材も。

追加教材の詳細はこちら

SKILL

Webデザインでもゲームでもメディアアートでも、 作品づくりを楽しみながら繰り返しコードを書くうちに、 プログラミング全般に通じるスキルや感覚が身について行きます。

MESSAGE

橋本善久

橋本善久（ライフイズテック株式会社取締役CTO）

東京大学工学部卒業後、セガ、スクウェア・エニックスでエンジニア、技術ディレクター、ゲームディレクター、CTOなどを務め、家庭用ゲームソフトやゲームエンジンの開発を17年行う。
2014年12月よりライフイズテック株式会社 取締役CTOに就任し、オンラインプログラミング学習サービスの開発及び教材開発の責任者を務めている。


【 代表作 】

「ソニック・ワールドアドベンチャー」（セガ / ゲームディレクター兼技術ディレクター）「FINAL FANTASY XIV 新生エオルゼア」(スクウェア・エニックス / 技術ディレクター)「オンラインプログラミング学習システム MOZER」（ライフイズテック/開発責任者）

プログラミングは現代の魔法

「ディズニー ・テクノロジア魔法学校」は
「夢中になってプレイしていたら本格的なプログラミングの力がいつのまにか身についてしまっていた。
世の中や将来に対しての見つめ方が少しだけ変わった。少しだけ自分に自信がついた。
そして人生の転機になった。」
という出来事が老若男女問わず一人でも多くの方に起きて欲しいと願い制作されています。

本作は、Life is Tech! CAMP/SCHOOLのフェイス・トゥ・フェイスサービスの魅力や
ワクワクを産み出し牽引しているCOO小森の経験と、
私のゲーム開発やエンジニアリングの経験のそれぞれの持ち味を活かして、
アナログの良さとデジタルの良さをどちらも大切にした、新しい考え方のプログラミング学習教材として設計しました。
・ディズニーの魅力的な物語へダイブできる
・大人も驚く本格的・実践的なプログラミング制作テーマ
・デジタルとアナログを融合させたワクワク謎解きアドベンチャー
・続きが気になるメインストーリーやキャラクター達との会話
・レッスンクリアで送られてくる美しい絵葉書のコレクション
・クロスカテゴリー型カリキュラムで総合学習
・「3秒ステップ・バイ・ステップ式」学習システムで「速く・深く・大量に」学ぶ
・入念に設計された繰り返し学習サイクル
など、「続けたくなる」「理解を促す」為の工夫が幾重にも施されています。

その結果、
プログラミング教材として見ても未だかつてない教材になり、
ゲームとして見ても未だかつてないゲームになり、
本として見ても未だかつてない本になり、
物語体験として見ても未だかつてない体験になりました。

Scratchの次はこれ

日本では小学校、中学校、高校の授業におけるプログラミングの必修化が始まりつつあり、 プログラミング学習熱も高まっています。
そして米国を中心に「STEM」または「STEAM」と呼ばれる、コンピュータサイエンスやエンジニアリングや
アートなどを軸に学びを広げ深めていく考え方も広まって来ています。

現在、小学生向けのプログラミング教育で非常に人気があるのが、
MITが開発したビジュアルプログラミング言語「Scratch」です。
プログラミング初心者でもなるべく抵抗感が少なくプログラミングに取り組める、素晴らしい学習環境です。

しかし現時点では「Scratchの次」に課題が残されています。
「Scratchでプログラミングに慣れた後にどのような教材でプログラミングを学び続ければ良いのか？」
「中高生や大人にとってちょうど良い、ゼロからしっかりとプログラミングを学べる本格的な学習環境は無いのか？」
というご質問やご相談も多く耳にします。

その課題への最善の答えの１つが「ディズニー・テクノロジア魔法学校」になると私たちは考えています。
幾重もの工夫により全くのプログラミング初心者でも安心して本格的なプログラミング学習に
取り組んで頂くことが出来ますので、必ずやご満足頂けると信じています。

世の中が大きく変化する時代と向き合うために

人工知能、IoT、ドローン、ロボット、自動運転、VR/AR、バーチャルキャラクター、3Dプリンター、 宇宙技術、遺伝子や細胞操作技術、など、
一昔前ならSFの中の出来事だったテクノロジーが日進月歩どころか秒進分歩で発展しています。
人類史上最大級の変化が私たちの生活の中にもこれから訪れることになります。

これからテクノロジーの進化によって起きる世の中や生活の変化に対して前向きに積極的に向き合うためにも、
一人ひとりがプログラミングを「経験」「体験」する事が大切だと考えています。
聞きかじった知識ではなく、実際に自分の手でプログラミングを組み、
画面の中で何かが動き、反応するという「小さな感動体験」を繰り返し経験する事で、
プログラミングやテクノロジーと向き合うことが楽しいと思えるようになってくるでしょうし、
新しい事を学ぶのもこわくなくなる事でしょう。

たとえ将来プログラマーになるつもりが無くても、
プログラミングやアルゴリズムという概念を体験を伴った指先感覚で理解しておく事で、
自分の将来に対して自分で考えて自分で答えを見つけて行く力を身につける一助となります。

「ディズニー・テクノロジア魔法学校」を通じて、
ティーンのお子さんであれば将来どんな仕事をしたいのかをより広い視野で考えるきっかけになるでしょうし、
数学や物理への興味を持つきっかけにもなるかもしれません。
大人の方であれば現在の仕事との向き合い方を変えるきっかけ、
新しい仕事に挑戦するきっかけにもなって貰えれば本望です。

プログラミングを身につける事で誰もが現代の魔法使いになる事が出来ます。
それでは、ディズニーの世界でプログラミングアドベンチャーをお楽しみください。

ディズニー・テクノロジア魔法学校
ゲームデザイン・システム開発・カリキュラム開発責任者
ライフイズテック株式会社