ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > キャリア > プログラミング学習 > 【2024年秋】プログラミングを学べる無料ゲーム20選!子供向けから社会人向けまで完全網羅

【2024年秋】プログラミングを学べる無料ゲーム20選!子供向けから社会人向けまで完全網羅

キャリア

2023/05/29

2024/09/27

プログラミングを上達させるためには「楽しさ」を見つけることが先決です。

しかし最初から「学習」のかたちでプログラミングに取り組むと、文字の羅列と無理に向き合わされる感覚が強まり、つまらないと感じてしまうかもしれません。一方、ゲームを通じてプログラミングに触れると「面白さ」を見出しやすくなります。

お子さんにプログラミングに触れてもらう場合も「ゲーム」から取り組ませるほうが楽しんでもらえるものです。そこで本記事ではプログラミングを学習できる無料ゲームを、4つの分類で計20種類紹介します。

  • 子供向け
  • 初心者・中級者向け
  • 上級者向け
  • HTML/CSS学習中の人向け

ぜひ興味のあるゲームを見つけてみてくださいね。

この記事はこんな人に向けて書きました
  • ゲームを通じてプログラミングに挑戦したい人
  • 子どもにプログラミングを始めさせたい人
  • 遊びながら自分のプログラミングスキルを伸ばしたい人

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

    ビジュアルプログラミング言語の無料ゲーム5選

    お子さんにプログラミングを始めてもらうなら「ビジュアルプログラミング」がおすすめです。難しいコードを読んだり書いたりする必要もなく、直感的にプログラミングに触れられます。この章ではビジュアルプログラミングのゲームを5つ紹介します。

    ビジュアルプログラミング言語のおすすめ無料ゲーム

    ビジュアルプログラミング言語のおすすめ無料ゲーム
    • Scratch
    • Springin’
    • Code.org
    • Viscuit
    • MOONBlock

    「え、そんなことも知らないの?」お子さんに言われる前に、
    こっそり学びません?大人もプログラミング

    ZeroPlus Gateの詳細を見る

    賢いパパ・ママは始めてます

     

    Scratch

    Scratch

    引用:Scratch

    Scratchは、アメリカのマサチューセッツ工科大学(MIT)が開発したビジュアルプログラミングアプリです。多くの教育現場で教材として使用されています。

    Scratchの特徴

    • 対象年齢は8歳
    • ブロック遊びのように直感的に楽しめる
    • SNSの機能を備えており、作品をオンライン上に公開できる

    通常のプログラミングでは難解なコードを書いてプログラムを作りますが、Scratchではブロック遊びの要領でプログラムを作成できます。慣れてくるとアニメーションやゲームを作れるため、お子さんの創造力を刺激してくれます。

    ただしブロックには漢字を交えたテキストで指示が書かれており、小学校3年生以上でないと、一人での取り組みは難しいかもしれません。

    またSNSの機能を兼ねており、オンライン上に作品を公開できるのも楽しみのひとつです。他のユーザーが自分の作品で何回遊んでくれたかが数字で可視化されます。そのため作品に人気が出るように面白いゲームを作ろうと、夢中で取り組むお子さんもいます。

    一方で、SNSの機能を持つScratchをお子さんに使わせることに、抵抗を感じる場合もあるのではないでしょうか?その点、Scratchでは作品を非公開にして、他のユーザーとつながりを持たず楽しむ使い方もできます。

    また、他のSNSと比べて利用上のガイドラインが厳しく、NGワードや個人情報を書き込めないように設定されています。そのため単なるプログラミング教材としてだけでなく、ネットリテラシーを学ぶ場としても活用できるツールです。

    Scratchをプレイする

     

    Springin’

    Springin'

    引用:Springin'

    Springin’は、直感的な操作で絵本やゲームを作れる学習アプリです。スマホやタブレットにアプリをインストールするだけで簡単に始めることができます。

    Springin’の特徴

    • 絵日記感覚で学習できるビジュアルプログラミング言語
    • マーケティングの感覚を養える
    • オブジェクト指向やコンポーネント指向などの考え方も学べる

    Springin’は、お絵描きしながらプログラミングを楽しめるアプリです。自分の描いたイラストにアイコンで指示を与えて、ゲームや絵本などを簡単に作れます。

    ブロックを使ってプログラムを組み立てるScratchと比較して、より直感的に楽しめるため、未就学児でも取り組めます。

    またSpringin’ではアプリ内のコインを使って、他のユーザーの作品を購入したり、自分の作品を販売したりできます。自分の作品がダウンロードされるほど、コインが手に入る仕組みです。コインを稼ぐためには、どんな作品を作れば人気が出やすいのか考える必要があります。

    これにより、豊かな発想力を養えるようになります。もちろん作品の売買へ参加するかしないかはあくまで自由です。自分のイラストを楽しく動かすだけでも純粋に楽しめるため、初めてのプログラミング体験の機会として、安心してお子さんに使わせられます。

    Springin'をプレイする

     

    Code.org

    Code.org

    引用:Code.org

    Code.orgはMicrosoftやAmazon、Googleなどの大手企業から支援を受けて運用されているプログラミング学習アプリです。Scratch同様、ブロック遊びの要領でプログラミング学習に取り組めます。

    Code.orgの特徴

    • 対象年齢が4〜18歳まで幅広い
    • やるべきことが1時間ほどのチュートリアルにまとめられている
    • 「マイクラ 」「アナ雪」などをテーマにした教材がある

    「マインクラフト」「アナと雪の女王」などがテーマに使われた教材があり、お子さんがプログラミングへの興味を持ちやすいように設計されているのが特徴です。

    はじめてプログラミングに触れる場合におすすめなのは、1時間のチュートリアルカリキュラムである「Hour of Code」コースです。次にやるべきことの指示を逐一受けながらプログラミング学習に取り組めます。Scratchのように、初めからできることの自由度が高すぎて、何を始めて良いかわからなくなることはありません。

    もし「Hour of Code」でCode.orgを気に入れば、発展コースである「20時間コース」へ進み、さらにプログラミングへの理解を深められます。

    Code.orgをプレイする

     

    Viscuit

    Viscuit

    引用:Viscuit

    ViscuitはSpringin’と同様に、お絵描きしながらプログラミングを楽しめるアプリです。

    Viscuitの特徴

    • 小学校のプログラミング教育でも使われている教材
    • イラストを描画するだけでプログラミングを学習できる
    • 定期的にワークショップイベントも開催している

    「めがね」と呼ばれる独自のツールを駆使して、プログラムを作れます。めがねの左(実行前)と右(実行後)にそれぞれイラストを配置することで、アニメーションを付けられます。

    文字情報が一切使われていないため、字が読めなくてもお絵描きのできるお子さんなら十分楽しめるアプリです。

    また運営会社のデジタルポケットでは、定期的にワークショップイベントを開催しています。オンラインで参加できるイベントも多数開催されており、親子でプログラミングを学ぶ機会を作れます。

    Viscuitをプレイする

     

    MOONBlock

    MOONBlock

    引用:MOONBlock

    MOONBlockは、ゲーム作りに特化したビジュアルプログラミング言語です。ブロックを並べるだけでプログラムを作成できるので、コーディングの知識は必要ありません

    MOONBlockの特徴

    • 推定の対象年齢は8歳以上
    • ゲーム開発に特化したビジュアルプログラミング言語
    • パズルゲームとしても楽しめる
    • JavaScriptのソースコードを確認できる

    MOONBlockは、ゲーム作りに特化したビジュアルプログラミングアプリです。Scratchと同様にブロックを繋げてプログラムを組めます。

    Scratchはできることが多いがゆえに、慣れるまでに段階を踏む必要があります。具体的には「アニメーション作り」でプログラミングに慣れてから「ゲーム作り」に取り掛かる流れが一般的です。しかし、ゲーム作りにたどり着く前に飽きてしまうお子さんも少なくありません。

    一方でMOONblockは「HPを増やす」「ゲームオーバー」など、ブロックはゲーム作りに関連するコマンドに限られています。すぐにゲーム作りに取り組めるため、ゲーム好きのお子さんならかなり楽しめるはずです。

    ただし公式サイトにチュートリアルがないため、YouTubeを視聴したり書籍を購入したりして自分で情報を集めなければなりません。またコマンドには漢字がたくさん使われています。対象年齢は公表されていないものの、小学校3年生以上を対象としたアプリと考えてよいでしょう。

    MOONBlockをプレイする

    子育てにはお金がかかるもの。チャレンジしてみませんか?
    プログラミングの副業に

    ZeroPlus Gateの詳細を見る

    完全無料のプログラミングスクールです

    初心者向けのプログラミング無料ゲーム5選

    ここからは、実際にコードを書くプログラミングゲームを紹介します。ビジュアルプログラミング言語を扱うゲームに比べて難易度はかなり上がりますが、エンジニアとしての転職や副業をしたいなどの目標がある人はぜひチャレンジしてみてください。

    初心者におすすめのプログラミング無料ゲーム
    • ぷよぷよプログラミング
    • 推しと学べるプログラミング
    • コードガールこれくしょん
    • Untrusted
    • CodeCombat

    ぷよぷよプログラミング

    ぷよぷよプログラミング

    引用:ぷよぷよプログラミング

    ぷよぷよプログラミングは、セガが提供するプログラミング学習コンテンツです。公式サイトのソースコードを写経(コードを丸写しすること)すると、セガの代表的なゲームソフトの「ぷよぷよ」を再現できます。ぷよぷよをプレイしたことのある人は楽しみながらプログラミングを学習できるでしょう。

    ぷよぷよプログラミングの特徴

    • セガが提供するプログラミング学習サービス
    • 写経でぷよぷよを再現できる
    • 4つの難易度を選択できる

    公式サイトには、「学習内容」と「用意するもの」が記載されています。指示にしたがって準備すれば、「何から始めたらよいか分からない」という人もスムーズに学習を始められます。

    ゲームの難易度は「基礎コース」「初級コース」「中級コース」「上級コース」の4つに分かれており、コースが上がるほど入力行が増えていきます。
    ぷよぷよといえば「同じ色を4つくっつけると消える」というルールが有名ですが、ゲームを作り始めるとそれ以外の操作にもルールが必要なことがわかります。例えば、十字キーの操作で落下するぷよぷよをマス移動させたり、ぷよぷよが消える時のアニメーションなどです。これらの動きを論理的に理解して実装することで、プログラミングスキルが上がっていきます。

    ぷよぷよプログラミングをプレイする

     

    推しと学べるプログラミング

    推しと学べるプログラミング

    引用:推しと学べるプログラミング

    「推しと学べるプログラミング」は、プログラミングが学べる乙女ゲームです。

    推しと学べるプログラミングの特徴

    • イケメンと一緒にプログラミングを学習できる
    • 全9つのプログラミング言語を選べる
    • ストーリーを楽しみつつ開発の練習にもなる

    プログラミング学習サービスのpaizaがリリースしているゲームで、PythonやJava、PHPなど全9プログラミング言語を学習できます。マイページにログインしたら、「バトル」のタブを選択すればゲームができるようになります。

    プログラミングの問題をクリアすることでストーリーが進んでいきます。キャラクターがセリフで学習を応援してくれるので、モチベーションも維持しやすいです。開発に即した問題が多いので、基礎的な学習はもちろん、実務的な学習がしたい人にも適しています。

    推しと学べるプログラミングをプレイする

    「ゲームで遊ぶだけじゃちょっと不安……」なら、
    始めてみませんか?気軽にプログラミング学習

    ZeroPlus Gateの詳細を見る

    費用は一切かからないサービスです

     

    コードガールこれくしょん

    コードガールこれくしょん

    引用:コードガールこれくしょん

    コードガールこれくしょんは、ソシャゲ感覚で楽しめるプログラミング学習サービスです。

    コードガールこれくしょんの特徴

    • ソーシャルゲームでプログラミングを学習できる
    • プログラミングを初めてやってみる人でも挑戦できる難易度

    初めてプログラミングに触れる人でも学習できるくらいの難易度の問題ばかりなので、初心者でもつまずかずに学習することができます。

    ガチャを回して女の子のキャラクターを集めたり、シナリオパートではキャラクターとの親密度を高めたりと、ソシャゲ特有の要素も盛り込まれていて、ゲームとして楽しめます。

    コードガールこれくしょんをプレイする

     

    Untrusted

    Untrusted

    引用:Untruted

    Untrustedは、JavaScriptを用いてクリアを目指す脱出ゲームです。

    Untrutedの特徴

    • JavaScriptを書いて操作する脱出ゲーム
    • ソースコードの指定された部分を正しく書き換えることでクリアとなる
    • Githubのオープンソースとしても公開されている

    プレイヤーは、画面中の枠の中に閉じ込められた状態でゲームがスタートします。枠内は自由に移動でき、ステージ中に落ちているコンピュータをゲットすることでソースコードを書き換えられるようになります。

    ソースコードは書き換えられる範囲が限定されているため、すべての部分を読む必要はありません。その中からどのようにコードを書き換えればよいのかを考え、実行することでゲームを攻略していきます。

    既存のソースコードを読み取り、実装したい機能を表現するスキルを身につけるのにはぴったりです。コードを正確に読む力と実装する力の両方を遊びながら磨いていくことができます。

    Untrustedをプレイする

     

    CodeCombat

    CodeCombat

    引用:CodeCombat

    CodeCombatは、RPGを楽しみながらプログラミングの学習ができる無料ゲームです。ホームページは英語で表示されていますが、日本語に設定することもできます。

    CodeCombatの特徴

    • RPGでプログラミングを学習できるサービス
    • 300以上のステージで少しずつ学習できる
    • 「コンピュータサイエンス」「ゲーム開発」「Web開発」の3セクション

    ページにアクセスして「I’m a Student(私は学生です)」をクリックし、「今すぐプレイ」を選択してゲームをスタートします。PythonやJavaScriptなどのメジャーな言語に加え、CoffeeScriptやゲーム開発でよく使用されるLuaといった言語も学べるのが特徴です。

    全300以上のステージがあり、少しずつ学習をステップアップしていけるので、着実に実力をつけていくことができます。ソースコードを入力してキャラクターを動かし、ゲームを進めていきます。ステージ中の問題はコードが表示されるので、いくつかの選択肢の中から正解を選べばOKです。

    また、CodeCombatは3つのカリキュラムが用意されています。

    • コンピュータサイエンス
    • ゲーム開発
    • Web開発

    ゲームを進めていくと上記の領域すべてに触れられるようになっています。まだプログラミングで何がやりたいのか決まっていない人にもおすすめです。

    CodeCombatをプレイする

    ゲームに飽きたら腕試し、無料から始めるプログラミング学習

    ZeroPlus Gateの詳細を見る

    毎月人数限定のサービス、今すぐチャレンジ

    中級者向けのプログラミング無料ゲーム5選

    ここからは、さらに上のステップを目指したい人におすすめのプログラミング学習ゲームを紹介します。
    問題の難易度も一段階上がりますが、やり切ればかなりの実力を身につけられるでしょう。遊びながらスキルをブラッシュアップしていくのに最適です。

    上級者向けのプログラミング無料ゲーム
    • code.9leap
    • novoc studio
    • CodinGame
    • ロジックサマナー
    • エンジニア騎士とクエリの魔女

    code.9leap

    code.9leap

    引用:code.9leap

    code.9leapは、オリジナルゲームの開発を体験できる学習サービスです。

    code.9leapの特徴

    • enchant.jsを用いるプログラミング学習サービス
    • 課題のソースコードを書き換えるとゲームを開発できる
    • ランキング上位を狙うゲーム性も

    ゲームエンジンの「enchant.js」を用いてゲームを開発していく学習サービスです。基本は課題のソースコードを書き換えてゲームを作っていきますが、自分でアレンジを加えることもできます。

    作成したゲームはサイト内で投稿できます。ランキング機能もあり、他のユーザーが作ったゲームを遊ぶ、自分が作ったゲームで遊んでもらうこともできます。

    code.9leapをプレイする

     

    novoc studio

    novoc studio

    引用:novoc studio

    プログラミングの中でも、特にPythonを学習したいと考えている人には、novoc studioがおすすめです。

    novoc studioの特徴

    • Pythonを学習できるゲーム
    • マルチプレイのゲームを作れる
    • パソコンのみでなくスマホ、タブレットでも利用できる

    ゲームAIを作りながら学習することができます。Pythonの書き方は事前に学習しておく必要がありますが、基本的な知識があればゲームを楽しめます

    マルチプレイのゲームを作って、ユーザー同士で遊べるのがnovoc studioの特徴です。コンテストに近い感覚でスキルを比べ合えるので、切磋琢磨する相手も見つけられるかもしれません。

    パソコンだけでなく、タブレットやスマートフォンでもプレイできます。

    novoc studioをプレイする

     

    CodinGame

    CodinGame

    引用:CodinGame

    CodinGameは、デバッグしながらゲームを開発していくプログラミング学習サービスです。

    CodinGameの特徴

    • ゲーム開発を通してプログラミングを学習できる
    • 23言語から選べる
    • コーディングに加え、デバッグ作業もできる

    学習する言語は23言語から好きなものを選ぶことができます。プレイするたびに言語を選べるので、他の言語に変えたくなったらいつでも変更できます。

    ゲームは既存プログラムのデバッグが中心です。実装の指示とともに誤ったソースコードが表示され、指定通りの動作をするプログラムに修正できたら次に進めます。

    CodinGameをプレイする

     

    ロジックサマナー

    ロジックサマナー

    引用:ロジックサマナー 

    ロジックサマナーの大きな特徴は、転職活動にも活かせることです。

    転職に強いpaizaの提供するプログラミングスキルチェック」によって、客観的に判断しづらい「自分がどれだけプログラミングスキルを持っているか」を可視化できるようになっています。企業が求めるレベルもスキルチェックのランクで明示されているので、転職後のミスマッチを防ぐのにも役立ちます。

    ロジックサマナーの特徴

    • 独特な世界観のRPG
    • コードを正しく書くことでゲームクリアになる
    • 難易度は簡単なものから難しいものまで選べる
    • 転職活動にも活かせる

    ITエンジニアが異世界に迷い込んだという設定で、ストーリーを進めていきます。プログラミングコードが詠唱魔法として使われている世界で、正しくコードを入力すると召喚獣を召喚できます。

    ゲームでは全24の言語を選択でき、難易度は低めから高めまで設定できます。ゲームの難易度はスキルチェックのランクと連動しており、ソースコードを提出する速さやクオリティもランクに影響します。間違いのないコードを素早く書けるようになれれば、転職活動でも大きな武器になります。

    ロジックサマナーをプレイする

     

    エンジニア騎士とクエリの魔女

    エンジニア騎士とクエリの魔女

    引用:エンジニア騎士とクエリの魔女

    エンジニア騎士とクエリの魔女は、プログラミングだけでなくデータベース(SQL)についても学習できるゲームです。

    エンジニア騎士とクエリの魔女の特徴

    • レベルの高いプログラミングの問題に挑戦できる
    • ゲームの進み具合は転職にも活かせる
    • 主要28のプログラミング言語に加えて、SQLも学習できる

    このゲームの最大の特徴は、データベース言語であるSQLを学習できることです。

    データベースはAIや機械学習とともに需要の高まっている分野であり、スキルのある人材は市場価値が高い傾向にあります。paizaのゲームの中でもSQLを学習できるのは「エンジニア騎士とクエリの魔女」だけなので、データベースエンジニアやデータサイエンティストに興味がある人はぜひ試してみてください。難易度は調節できるので、難しい問題に挑戦したい人は高難易度、初心者の場合は低い難易度に設定できます。

    イラストが綺麗で、世界観も「異世界に召喚されたITエンジニアが、剣(コード)と魔法(SQL)が支配する世界で生き抜く」という面白い設定となっており、ゲーム性も高いです。

    エンジニア騎士とクエリの魔女をプレイする

    エンジニアに質問できる環境をあなたのお部屋に

    無料のプログラミング学習サービス「ZeroPlus Gate」
    プログラミング学習のスタートに最適なHTML/CSSを学んで
    Webサイトを作れるようになります!
    疑問はプロのエンジニアに質問し放題

     

    HTML/CSSを学習できる無料ゲーム5選

    プログラミングを学習する際、入門としてHTML/CSSから始める人も多くいます。

    HTML/CSSは、それぞれ「マークアップ言語」「スタイルシート言語」という分類になります。そのため厳密にはプログラミング言語とは少し異なりますが、プログラミングの感覚を学ぶのには最適な言語として位置づけられています。

    ここではHTML/CSSを学習できるゲームを紹介するので、気になるものがあれば試してみてください。

    HTML/CSSを学習できるおすすめの無料ゲーム
    • CSS battle
    • Flex Froggy
    • GRID GARDEN
    • CSS Diner
    • CSS ANIMATIONS

    CSS battle

    CSS battle

    引用:CSS battle

    CSS battleは、HTMLとCSSを駆使してお題を再現し、世界のユーザーと競い合う対戦型のゲームです。コードの記述量が少ないほど得点が高くなり、どちらの得点が高いかを競い合うゲームシステムとなっています。

    CSS battleの特徴

    • 全世界のユーザーとHTML/CSSで対戦できる
    • 見本をいかに短いコードで書いて再現するかというゲーム性
    • コーディングの練習としておすすめ

    ゲームとして高得点を取ることを追求するなら、「いかに短くHTML/CSSを書くか」を考えなくてはなりません。これを実現するためには、幅広いHTMLとCSSの知識が必要です。このため、ゲームを攻略していくとHTML/CSSの知見がどんどん深まっていきます。

    高得点を目指さなくても、自分なりにお題を表現していくことはスキルアップにつながります。ゲームとして楽しみつつ、コーディングの練習として活用するのがおすすめです。

    CSS battleをプレイする

     

    Flex Froggy

    Flex Froggy

    引用:Flex Froggy

    Flex Froggyは、CSSのレイアウトモデルのひとつ「Flexbox」を学習できるゲームです。画面上のカエルをFlexboxプロパティで動かし、助けてあげるという内容です。

    Flex Froggyの特徴

    • Flexboxでカエルを助けるゲーム
    • 数多くあるFlexboxプロパティの使い方を学べる
    • CSSを学習し始めたばかりの初心者におすすめ

    FlexboxはCSSの基礎的な知識ですが、プロパティの数が多く覚えきれずに悩む初心者も少なくありません。そのようなときに、Flex Froggyを使って遊んでみるのは非常におすすめです。カエルを動かすためにはどのプロパティを当てればよいのかを理解できるので、初心者でもわかりやすくなっています。

    Flex Froggyをプレイする

     

    GRID GARDEN

    GRID GARDEN

    引用:GRID GARDEN

    GEID GARDENは、CSSのレイアウトモジュール「Grid」を学習できるゲームです。Flex Froggyとよく似ていて、こちらはにんじんを育てるゲームとなっています。

    GRID GAREDENの特徴

    • Gridを使ってにんじんを育てるゲーム
    • 全28問、終盤は難易度高め
    • 初心者の人や入門編としておすすめ

    画面内にはにんじんと、ステージによって異なる障害が用意されています。にんじんに水を与えたり、毒を撒いて雑草を枯らしたりして、にんじんが成長するようにしていきましょう。全28問あり、ステージが進むにしたがって難易度が上がっていきます。

    Gridは少し難しい概念ですが、GRID GAREDENで遊ぶことで理解しやすくなります。ブラウザ上でコードを出力できるので、リアルタイムで書いたコードの動き方を確認することができます。直感的に理解しやすいので、初心者の学習におすすめです。

    GRID GARDENをプレイする

    「ゲームで遊ぶだけじゃちょっと不安……」なら、
    始めてみませんか?気軽にプログラミング学習

    ZeroPlus Gateの詳細を見る

    費用は一切かからないサービスです

     

    CSS Dinner

    CSS Dinner

    引用:CSS DInner

    CSS Dinnerは、夕食を題材にしたCSS学習ゲームです。内容は、指示にしたがって特定の要素のセレクタを指定するというもの。HTMLをしっかり読み取る力とCSSのセレクタの指定方法を学習できます。

    CSS Dinnerの特徴

    • 夕食を題材にした学習ゲーム
    • CSSのセレクタ指定について学べる
    • 基礎学習には最適

    画面上には、様々な食器や食材が表示されます。左右に揺れている要素を指定するセレクタを記述できればクリアです。全26問あり、最後までやりきればCSSの基礎を固められます。英語版のゲームなので少しやりづらいかもしれませんが、難しい単語は出てこないので安心してプレイできます。

    CSS Dinnerをプレイする

     

    CSS ANIMATIONS

    CSS ANIMATIONS

    引用:CSS ANIMATIONS

    CSS ANIMATIONSは、CSSアニメーションを学習できるゲームです。CSSアニメーションといえば、Webサイト制作で使用する機会の多い技術です。

    CSS ANIMATIONSの特徴

    • CSSアニメーションを学習できる
    • 基礎から応用まで身につく

    CSS ANIMATIONSは、ステージごとの指示にしたがって、表示している要素にアニメーションを付与していく形で進めていきます。指示は英語となっており、それほど難しくはありませんが、慣れていない人は翻訳を使いながら進めましょう。

    最初は基礎的な技術から学び、レベルが上がるにつれて応用的な技術をマスターできるようになっていきます。CSSアニメーションはやや難しい技術でもあるので、ゲーム感覚で学習できるのはありがたいですね。

    CSS ANIMATIONSをプレイする

     

    まとめ:ゲームで楽しくプログラミングを学習しよう

    この記事では、プログラミングの学習ができる無料ゲームを、学習のレベルごとに分けて紹介しました。

    ビジュアルプログラミング言語のゲーム

    • Scratch
    • Springin’
    • Code.org
    • Viscuit
    • MOONBlock

    初心者・中級者向けのプログラミング学習ゲーム

    • ぷよぷよプログラミング
    • 推しと学べるプログラミング
    • コードガールこれくしょん
    • Untrusted
    • Codecombat

    上級者向けのプログラミング学習ゲーム

    • code.9leap
    • novoc studio
    • CodinGame
    • ロジックサマナー
    • エンジニア騎士とクエリの魔女

    HTML/CSSを学習できるゲーム

    • CSS battle
    • Flex Froggy
    • GRID GARDEN
    • CSS Diner
    • CSS ANIMATIONS

    プログラミングに一切触れたことがない人は、子ども向けのゲームから入るのもおすすめです。大人でもプログラミング的思考を養うのに役立ちます。プログラミングの学習ができるゲームは数多くあるので、自分のレベルや好みに合っているものを選びましょう。

    しかし、ゲームだけで実務的なスキルを身につけるのは現実的ではありません。本格的にエンジニアへの転職や副業で稼げるようになることを考えているなら、ゲームではなく学習サイトを活用するのがおすすめです。こちらの記事でプログラミング学習サイトを紹介しているので、こちらもぜひ参考にしてください。

    また、最短でスキルを身につけるならプログラミングスクールも選択肢です。ZeroPlus Gateでは、完全無料ながら1ヶ月でWebサイト制作に関するプログラミングスキルを身につけられます。まずはお気軽にご相談くださいね。

    ZeroPlus Gateはこちら

    \ 学んだことをSNSでシェアしよう /

    この記事の執筆者

    ZeroPlus Media変種部

    ZeroPlus Media編集部

    ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

    質問について

    ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

    選べる2つの質問方法

    1

    Google Foam(テキスト)で質問

    mail

    フォーム送信

    メールで解答

    formで質問
    2

    Google meet(オンラインmtg)で質問

    meet

    日時選択

    メールを受け取る

    メールからmtgに参加

    meetで質問
    ZeroPlus Gateについて

    あなたの目的に合わせた2つのサービス

    あなたの目的に合わせたZeroPlusの2つのサービス
    基礎からフリーランスレベルまで本質的な学びを提供しています

    完全無料!30日間で学びきれる
    プログラミンスクールZeroPlus Gate

    • お金をかけずに、学習を進めたい
    • Webサイトを作れるようになりたい
    • メンターや講師に質問しながら学習したい

    詳しくはこちらから

    フリーランス特化型
    プログラミングスクール ZeroPlus

    • プログラミング学習で悩んでいる
    • 仲間と一緒に学習したい
    • フリーランスとしての総合的な力を養いたい

    詳しくはこちらから