プログラミング教室

【保存版】ビジュアルプログラミングってなに?をSEが解説しました

こんにちは。子だくさんエンジニアのにしがきです。

子供をプログラミング教室に通わせているとよくビジュアルプログラミングについて質問を受けます。

  • ビジュアルプログラミングって聞くけどよくわからない。。。
  • 何が出来るようになるの?
  • どこから手を付ければ良い?
にしがき
にしがき
たしかにビジュアルプログラミングってよくわかりませんよね。

普通のプログラミングは知っていましたが、ビジュアルプログラミングは全く知りませんでした。

子供をプログラミング教室に通わせることでビジュアルプログラミングを子供と一緒に経験しました。
また、教室とは別にビジュアルプログラミングプログラミングを勉強しました。

勉強を通じて理解した、

  • ビジュアルプログラミングとは何か
  • ビジュアルプログラミングの効果
  • ビジュアルプログラミングの進め方
  • ビジュアルプログラミングの代表的なアプリ

を解説していきます。

これを読めばビジュアルプログラミングがどんなものか理解できるようになります。

2020年から小学校でプログラミング必修化になりますので、小学生の子供をお子さんがいる家庭は必見です!

\プログラミング教室最大手/
こどもプログラミング教室公式サイト

目次

ビジュアルプログラミングとは

ビジュアルプログラミングとは
よくプログラミングでイメージされるのは、キーボードで入力するものだと思います。

ビジュアルプログラミングは全く違います!
基本的に画面操作だけでプログラムをつくれるプログラミングの方法です。

実際に作る動画を用意しました!
見てもらえればほぼマウスだけで作っていることがわかります!

にしがき
にしがき
うちの妻もプログラミングといって想像するのはキーボードで入力することでした。

ビジュアルプログラミングはテキストプログラミングと違ってマウスだけ

ビジュアルプログラミングはマウスのみ
ビジュアルプログラミングと比較されることが多いのが「テキストプログラミング」です。

テキストプログラミングはキーボードで入力して作っていくプログラミングです。

にしがき
にしがき
みんなが想像しやすい、画面に文字をキーボードで入力する形式です

ビジュアルプログラミングの特徴

ビジュアルプログラミング特徴
ビジュアルプログラミングとテキストプログラミングはそれぞれ特徴があります。

比較 ビジュアル テキスト
代表的なもの スクラッチ、タイルズ、ビスケット Java、Ruby、Python
対象年齢 小学生~大人 中学生~大人
入力方法 マウス キーボード
作りやすさ 簡単 慣れが必要
間違いやすさ 少ない 多い
複雑な動き できない できる
作るスピード
(慣れた上で)
時間かかる 早い

ビジュアルプログラミングのメリット

ビジュアルプログラミングのメリット
ビジュアルプログラミングは本当に多くのメリットがあります。
そのメリットのおかげでどんどん広がりを見せています。

ビジュアルプログラミングのメリット:①入力が簡単

ビジュアルプログラミングのメリット
ビジュアルプログラミングは基本的にマウス操作だけで作ることが出来ます。

そのため、

  • ひらがなが読める
  • マウスが動かせる

ができれば、ビジュアルプログラミングは出来ます。

にしがき
にしがき
独特な書き方(文法)を覚えなくて良いので簡単!

ビジュアルプログラミングのメリット:②作るのが簡単

ビジュアルプログラミングのメリット
入力が簡単にも近いですが、どの処理を組み込んでいくかをマウスで選ぶだけ作れちゃいます。

そのマウスで選ぶのも工夫がされていて、

  • やりたいことをパーツから選ぶだけ
  • 前後関係でつなげれないものは選べない

という親切な作りになっているので迷うこともありません。

にしがき
にしがき
プログラミングはエラーで動かないことが一番困るから助かります

ビジュアルプログラミングの利点:③馴染みやすい

ビジュアルプログラミングのメリット
ビジュアルプログラミングは大体のソフトでキャラクターがいます。
そのキャラクターを動かしたりするため、馴染みやすいです。

にしがき
にしがき
子供がとっかかるには大事な要素ですね

ビジュアルプログラミングの利点:④実用性が高い

ビジュアルプログラミングのメリット
ビジュアルプログラミングは子供だけでなく、大人の世界でも使われています。

本当に様々なところで使われていて、

  • 音楽作成
  • AIなどの機械学習
  • デザイン
  • ロボット制御
  • ゲーム作成

などの分野で使われています。

にしがき
にしがき
大人でも使うほどビジュアルプログラミングは実用性があります

ビジュアルプログラミングのデメリット

ビジュアルプログラミングのデメリット
簡単に作れる、馴染みやすいという一方でデメリットもあります。

ビジュアルプログラミングのデメリット:①簡単な処理でも工夫がいる

ビジュアルプログラミングのデメリット
出来ることを限定しているためやれることが限られます。
そのため簡単に思えることでも作るのに工夫が必要になります。


「右に90度回転する」という処理しかない場合、
反対方向に向きたいときは「右に90度回転する」を2回使う必要があります。

にしがき
にしがき
反対に向くなんて簡単なのに手間だなー

ビジュアルプログラミングのデメリット:②前作ったものをコピーするのが手間

ビジュアルプログラミングのデメリット
ビジュアルプログラミングで前作ったものを使いまわしたい時、少し手間がかかります。

パソコンで文字をコピーするときは「右クリック→コピー→貼り付け」で出来ます。
ビジュアルプログラミングの場合は、

  1. コピーしたい処理を一度ファイル保存する
  2. 保存したファイルをプログラムから開く

という作業を行う必要があります。

簡単にコピーができないのが多少手間ですね。

ビジュアルプログラミングのデメリット:③変更するのが大変

ビジュアルプログラミングのデメリット
4秒動くとか、3秒止まるとかなどをそれぞれ入力していきます。
作ったあとで直したいと思ったときに、一括で修正ができず一つずつ修正が必要です。

にしがき
にしがき
とても長いプログラムで一つずつ直すって考えると恐ろしい。。。

ビジュアルプログラミングは子供に本当におすすめ

ビジュアルプログラミングは子供におすすめ
子供にプログラミングは本当におすすめで、私の子供にもプログラミングを習わせています。
ビジュアルプログラミングを通じて学べることは大きく分けて3つあります。

  • 論理的思考力
  • 創造力
  • 見てマネする力

ビジュアルプログラミングを子供が行うメリット:①論理的思考力

ビジュアルプログラミングは子供におすすめ
プログラミングは処理をつなげて1つの動作を作っていきます。

例えば「リビングから玄関を通って外に出る」までの動作を考えてみます。

①立ち上がる
②リビングの玄関まで歩く
③リビングの扉を開く
④靴まで歩く
⑤靴を履く
⑥玄関のドアまで歩く
⑦玄関のドアを開ける
⑧玄関の外へ歩く

普段の動作も、一つずつ書き出していくと意外とたくさんのことをしています。
書き出した動きのどれか1つでも足りないと思った通りにいきません。

1つの動きを分解して、処理のつながりを考える力が論理的思考力です。

ビジュアルプログラミングを子どもが行うメリット:②創造力

ビジュアルプログラミングは子供におすすめ
ビジュアルプログラミングでは自分らしく自由に作っていくことができます。

  • 魚と自分の絵を動かして絵日記を作る
  • 動きをつなげてピタゴラスイッチを作る
  • ボタンを押したら動くびっくり箱を作る

自分が発想して考えたものを自分で作るという、ものづくりを通じて「創造力」を伸ばします。

にしがき
にしがき
プログラムをどんどん作れるビジュアルプログラミングならたくさん経験がつめます

ビジュアルプログラミングを子どもが行うメリット:③見てマネする力

ビジュアルプログラミングは子供におすすめ
プログラミングを進めていると「見てすごいと思うけど、やり方がわからない」ということにぶつかることが多いです。

そういう時にみんながするのは「たくさん見てやり方を考える」というやり方です。

「そりゃそうでしょ」と思いますが、見てやり方を考えるというのはとても効果があります。

動きをマネするためには

  • よく見て分析する観察力
  • 同じ動きにするための考える力
  • 何度も試行錯誤する粘り強さ

ということが必要で、これを身につけれます!

にしがき
にしがき
見てマネする力はスポーツでも応用できます!

ビジュアルプログラミングを子供に習わせる順番

ビジュアルプログラムをこれから初めて勉強する子供は、

ビジュアルプログラミングでプログラミングになれる、楽しむ!

テキストプログラミングで難しいことへチャレンジ

と進めていくのがオススメです!!

にしがき
にしがき
好きなことには没頭するので、まずは楽しめるように!

ビジュアルプログラミングで子供が作ったサンプル

ビジュアルプログラミングで作ったものがここで公開されています。
どんなものを作ることが出来るようになるのか見てみてください。

にしがき
にしがき
ビジュアルプログラミングと言っても、作り方次第でびっくりするレベルのも作れる!

ビジュアルプログラミング言語の種類は多くある

ビジュアルプログラミングの種類
ビジュアルプログラミング言語で世の中に出回っているのは数多くあります。
どのビジュアルプログラミング言語もかわいいキャラクターが多く、子供がとっつきやすいものになってます。

にしがき
にしがき
にしがきのオススメは下5つです!
  • スクラッチ
  • タイルズ
  • ビスケット
  • Code Studio
  • プログラミン

ビジュアルプログラミングソフトは他にもたくさんあるので別の記事でもまとめます!

ビジュアルプログラミングのアプリ:1.スクラッチ

ビジュアルプログラミングの種類
スクラッチ プログラミング

スクラッチはビジュアルプログラミングで一番有名なアプリです。

スクラッチはアメリカのマサチューセッツ工科大学(MIT)が2006年に開発しました。

子供が簡単にプログラミング出来ることを目的と作られています。
そのため、小学生でも簡単にプログラミングができるソフトです。

一番普及しているビジュアルプログラミングアプリで、関連するサイトや本がたくさんあることも特徴です。

にしがき
にしがき
何もわからない人が最初にやってみるなら、スクラッチが一番おすすめです。

スクラッチ公式サイト

ビジュアルプログラミングのアプリ:2.タイルズ

ビジュアルプログラミングの種類
タイルズ プログラミング
タイルズは最近急激に注目を浴びているビジュアルプログラミングです。

タイルズの最も特徴的な部分は「6コの命令のみ準備されている」というところです。

にしがき
にしがき
6コの命令だけで出来るの!?

ということが心配になると思いますが、心配いりません。

プログラミングは基本的な命令である6コがあれば、大体の動きが作れます。

基本機能だけ準備して、あとは工夫して動きを作ることを大事にしているのがタイルズです。

タイルズ公式サイト

ビジュアルプログラミングのアプリ:3.ビスケット

ビジュアルプログラミングの種類
ビスケット プログラミング
スクラッチなどのビジュアルプログラミングとはすこし違います。

ビスケットは「動かす条件」と「動かした後の状態」を準備します。
言葉よりも動きを見た方がわかりやすいのでまずは動画を見てみてください!

虫眼鏡の左側が動かす条件
虫眼鏡の右側が動いた後の状態です。

このように魚などを直感的に動かすことが出来るので勉強しなくても使えるようになります!

ビスケット公式サイト

ビジュアルプログラミングのアプリ:4.Code Studio

ビジュアルプログラミングの種類
code studio サンプル
アメリカ発のビジュアルプログラミングのアプリです。

ブラウザからそのまま起動できるので、すぐに出来るようになります!

code studioはキャラクタとのコラボレーションがとっても多いです。

  • アナと雪の女王
  • マインクラフト
  • アングリーバード

子供に身近なキャラクターを使うことで親近感をもって進めることができます

code studio公式サイト

ビジュアルプログラミングのアプリ:5.プログラミン

ビジュアルプログラミングの種類
プログラミン サンプル
文部科学省が作ったプログラミングアプリです。
2020年のプログラミング必修化に向けて政府が独自で作りだしたものです。

子供が主体的に勉強できることを重要視しているため、プログラミングが簡単にできるようになっています。

28種類の処理を使って1つの動きを作っていくようなつくりになっています。

プログラミン公式サイト

ビジュアルプログラミングのアプリはスクラッチがおすすめ

5つ紹介しましたが、私がオススメするのはスクラッチです。

おすすめする理由は3つあります。

  • 世界的に一番普及している
  • 勉強するための本やサイトが多い
  • 操作感が一番わかりやすい

とはいえ、自分が一番楽しみやすいものを選ぶのが良いと思うので、
それぞれ試してみると良いと思います!

ビジュアルプログラミングの勉強方法は3通り

ビジュアルプログラミングの勉強方法
ビジュアルプログラミングはわかりやすいと言ったものの、最初は動かし方を勉強する必要があります。

勉強するための方法は

  • 本を買う
  • インターネットの情報を見る
  • プログラミング教室に通う

と3種類の方法ががあります。

それぞれ長所短所があるので家庭に合う勉強方法を見つけてください!

にしがき
にしがき
一番伸びておすすめするのはプログラミング教室へ通うことです!
比較 プログラミング教室 インターネット
理解しやすさ 文字+動画+質疑 文字だけ 文字+動画
教材の質 プログラミング教室独自 有識者がまとめている 誰が作ったかわからない
質問 先生に質問し放題 質問できない 質問相手の質が不明
継続しやすさ 良くも悪くも強制力 自分だけでは続けにくい 自分だけでは続けにくい
お金 毎月10,000円程度 1,000~3,000円 0円

ビジュアルプログラミングの勉強方法:①プログラミング教室に通う

ビジュアルプログラミングの勉強方法:プログラミング教室
最近はプログラミング教室も増えてきています。
ロボットを使ったプログラミングや、アプリを作るプログラミングなど様々なスタイルでプログラミングを教えてくれます。

ビジュアルプログラミング勉強方法:プログラミング教室のメリット①本人の理解度に合わせた勉強

これまでの経験上わかることですが、プログラミングはつまづくポイントがみんな違います。
プログラミング教室では個別対応で教えてくれるため、つまづいたところを個別に教えてくれます。

ビジュアルプログラミング勉強方法:プログラミング教室のメリット②理解するまで質問できる

プログラミングを勉強して1つ覚えると、派生して色々なことが知りたくなります。
プログラミング教室の先生は教えるプロで質問にわかりやすく回答してくれます。

また、何度質問してもちゃんと答えてくれるので本人が続けるモチベーションになりやすいです!

ビジュアルプログラミング勉強方法:プログラミング教室のメリット③理解が早くグングン成長する

個別対応で教えてくれて、派生した質問にも回答してくれるというサイクルを回すことで出来ることが増えてきます。
「出来ることが増える」という体験が子供をグングン成長させてくれます!

ビジュアルプログラミング勉強方法:プログラミング教室のメリット④競争相手が見える

勉強内容だけでなく、周りに同じことを勉強している仲間も大事です。

一緒に勉強する仲間がいることで、

  • 負けないぞという気持ち
  • こういうやりかたもあるんだという発見
  • 人に見せて面白がる

ということを必ず意識するようになります。

にしがき
にしがき
勉強する仲間がいるといないでは、成長スピードが大きく違います!

ビジュアルプログラミング勉強方法:プログラミング教室のデメリット①お金がかかる

教室に通うことになるのでどうしてもお金がかかります。
プログラミング教室はスポーツなどの習い事よりも、多少お金がかかります。

2019年版ロボット教室金額ランキング
【2019年版】ロボット教室の金額ランキング!ロボット教室の金額ランキングを紹介しています!ロボット教室にかかる学費を分類すると4種類あります。ロボット教室にかかる学費のうち初期費用はお得になりやすい。ロボット教室別の費用は1位~3位まで紹介。...

ただ、成長スピードは明らかに教室に通わせる方が早いので、通わせることが良いと考えます!

ビジュアルプログラミングの勉強方法:②本を買う

ビジュアルプログラミングの勉強方法:本
勉強方法として本が一番スタンダードな勉強方法だと思います。

2020年のプログラミング授業必修化が決まったこともあり、最近本が増えてきています。
プログラミング言語別で本があるので、興味があるものを選んでみると良いと思います。


この本は「Kindle Unlimited」の対象なので入っている人は無料で読めます!

ビジュアルプログラミング勉強方法:本のメリット①順序立てて書いてあるため理解しやすい

勉強する内容が順番に書かれています。
一つずつ順番にやっていくことで徐々に出来ることが増えてきます。

また、書かれている内容も基礎的なことからが多いため、初心者におすすめです。

ビジュアルプログラミング勉強方法:本のメリット②自分のペースで勉強できる

自分が勉強するスピードにあわせて進めることができます。

理解に時間がかかる子:じっくり時間かけて読み込む
理解が早い子:自分のスピードでサクサク進める

ビジュアルプログラミング勉強方法:本のメリット③お金があまりかからない

プログラミングの本は、基本的な内容を網羅的に書かれています。

本1冊をやりこむことで基礎的な勉強し、その後は自分で応用してプログラミングを身に着けていけます。

ビジュアルプログラミング勉強方法:本のデメリット①質問ができない

プログラミングで一番困るのは、エラーが起きたときの対応です。

本の通り作ったとしても、何かがたりないことがよく起きます
(実際は何かが足りない/多いことがほとんどですが)

プログラミング初心者はエラー解消に時間がかかり、プログラミングが難しいと思い込んじゃうケースが多いです。

手助けするのは親がほとんどで、その時の親の負担はかなり労力を使います。

ビジュアルプログラミング勉強方法:本のデメリット②継続しずらい

プログラミングが出来るようになると楽しくなってきます。
ただ、最初は慣れないためなかなか大変です。

大変なことはなかなか続かず、継続出来ないことが多いです。

ビジュアルプログラミング勉強方法:本のデメリット③ソフトと本で絵が違うことがある

ソフトは機能が追加されていくため、日々進歩しています。
それに伴い画面が多少変わることがあります。

本はどこかのバージョンで止まっていて画面が違うことが多々あります。
その時混乱して進める事ができないということがどうしても発生します。

ビジュアルプログラミングの勉強方法:③インターネットの情報を見る

ビジュアルプログラミングの勉強方法:動画
最近はプログラミング情報をまとめているサイトも出てきています。
その情報を見ながらプログラミングを進めることも最近は増えてきています。

おすすめサイト

ビジュアルプログラミング勉強方法:インターネットのメリット①お金がかからない

インターネットの情報なので基本的に無料です。
その情報だけで進めることができれば無料でプログラミングの勉強が出来ます。

ビジュアルプログラミング勉強方法:インターネットのメリット②動画で動きがあるため理解しやすい

まとめているサイトによりますが、勉強する教材として動画も増えてきています。
動画で勉強資料がまとまっていると文字だけよりも理解がしやすくなります。

ビジュアルプログラミング勉強方法:インターネットのメリット③有識者へ質問できる

サイトへの投稿やSNSなどで質問をすると、知っている人が回答をくれることがあります。
詳しい人が悩みに乗ってくれることで、自分だけで悩む状態を防ぐことができます。

ビジュアルプログラミング勉強方法:インターネットのデメリット①教材がまとまっていない

各サイトに情報があるだけで、順序立てられていません。
そのため勉強する順番が定まらず理解するのに時間がかかります。

ビジュアルプログラミング勉強方法:インターネットのデメリット②継続しずらい

本と同じですが、自分一人で進めることになり継続が難しいです。

にしがき
にしがき
慣れるまでは親と一緒に頑張るなどの工夫が必要です!

ビジュアルプログラミングの勉強はプログラミング教室がオススメ

プログラミングがおすすめ
成長スピードを考えるとプログラミング教室がオススメですが、プログラミング教室にも種類があります。

プログラミングの種類:ロボットを動かす or パソコンの中で動かす
勉強携帯:教室へ通学する or 家でオンライン勉強する

プログラミング教室には教える内容、通う回数など様々です。
自分の子供にあったプログラミング教室を探してください。

私の子供はロボット教室の自考力キッズに通っています。
理由は簡単でプログラミングを小学校1年生から教えてくれる教室は自考力キッズのみだったためです。

【徹底解説】自考力キッズの口コミ・授業内容を全部見せちゃいますアーテックが運営している自考力キッズで学べる内容です。自考力キッズはパズル、ロボット、プログラミングの授業から構成されています。自考力キッズに通った経験に基づく口コミや、自考力キッズの評判や、自考力キッズの料金もまとめています。...

ビジュアルプログラミングを始める時期

ビジュアルプログラミングを始める時期
ビジュアルプログラミングは、ひらがなを読むことができれば作れます。
また、プログラミングの力は作りながらつけていくので、早ければ早いほど伸びると思っています!

そのため可能であれば早めからやらせてあげましょう!

小さい頃は、作ったものが目の前で見れる方が小さな頃はわかりやすいです。
小学校1~3年生はロボットを使ったプログラミングをオススメします。

小学校4年生以降はどちらでも良いので、

  • ロボット好きならロボットプログラミングを続ける
  • アプリを作りたいなら画面でのプログラミングを始める

が良いと思います。

にしがき
にしがき
子供の好みで進める方は決めてあげてください。

ビジュアルプログラミングは大人がやっても効果あり

ビジュアルプログラミングは大人でも効果がある
子供がプログラミングをするので一緒にやってみたいという親さんが多くいます。
自考力キッズに通っていることを知った親さんから

  • 大人でもプログラミングの勉強ってできる?
  • プログラミングの勉強って難しい?
  • 大人がプログラミングやって効果あるの?

ということをよく聞かれます。

にしがき
にしがき
大丈夫です。
大人でも出来ますし、大人にもちゃんと効果があります。

ビジュアルプログラミングを大人がやる効果:①プログラミングへ苦手意識が減る

ビジュアルプログラミングは大人でも効果がある
今の30~40代の親さんはプログラミングに馴染みがないと思います。
そのためプログラミングって難しい。。。という苦手意識があります。

プログラミングを体験し、「意外と簡単」と理解することで意識が変わります。

にしがき
にしがき
自分が出来るようになれば子供へ大きく言えます(笑)

ビジュアルプログラミングを大人がやる効果:②子供と楽しく学べる

ビジュアルプログラミングは大人でも効果がある
今から始める親さんであれば子供と一緒に学べます。

親と子でそれぞれ作ったものを持ち寄って、それぞれ発表すると

  • なにそれー(笑)
  • すごい!
  • くやしいー!

などという感想を言い合う時間になって、意外と楽しくなります。

にしがき
にしがき
一緒の時間を過ごすと親子のつながりが深くなります

ビジュアルプログラミングを大人がやる効果:③頭が柔らかくなる

ビジュアルプログラミングは大人でも効果がある
新しいことを学ぶということと、自由に発想して作るということを通じて、頭が柔らかくなります。

普段生活しているだけでは自由に発想することが少ないため、とても良い刺激になります。

にしがき
にしがき
誰にも邪魔されず自由に作るのは、意外とストレス発散にもなりますよ

ビジュアルプログラミングまとめ

ビジュアルプログラミングまとめ
  • ビジュアルプログラミングはマウスだけ操作できる
  • 論理的思考力、マネする力など身につけれる
  • ソフトはたくさんあるので色々触ってみると良い
  • 勉強方法はプログラミング教室がオススメ

プログラミング必修化に伴い、学校や社会でプログラミング能力が求められます。
プログラミング教室へ先駆けて通い、まわりの人より一歩先に進んでおくと安心ですね!

\まわりより一歩先に有利に/
こどもプログラミング教室公式サイト