見出し画像

【完成度60%】プログラミング学習サービスbibibiの開発進捗報告 ~学習サイトデザイン編②~

Minecraft×オンライン×プログラミング学習サービスの【 bibibi 】の代表をしている”わさ”です!

オフラインの教室を3年運営した経験や1000組以上の親子相談、オンライン授業100人以上の経験を活かし、学びが喜びになる最高のプログラミング学習サービスを作るべく日々奮闘中です!

このnoteではbibibiの魅力を開発備忘録として書いていきます。

▼前回の記事はこちら

どうも、リンツのチョコにハマってるわさです!
前回の記事に引き続き、開発進捗の報告をしていきたいと思います。

また画像中心でやっていきたいと思います!

※bibibiオープン前の記事です

ー 開発中のもの

前回と同じですが、いま開発中のものをもう一度確認しておきたいと思います。

  • 学習サイトのデザイン

  • 学習サイトの学習システム

  • 保護者向けのHPデザイン

  • 会員の顧客管理システム

  • LINE公式アカウント

  • 教材コンテンツ

  • 各種資料

えーーっと、

前回完成度60%って言ってたんですが
1週間経ってどうなったかというと

61%ってとこですかね☺✨

インストール遅すぎて止まってるんちゃうか?って不安になるくらいの進み具合で悲しくなりますね。笑

オリエンテーション資料をデザインのやり直し含めて7個ほど作ったので僕的には進んでるんですけど、必要なものを想像すると終わりが見えません😇

ただとにかく頑張って行きま!!


ということで前回の続きでbibibiの学習サイトのデザインについて
ご紹介させていただきます!

bibibiには次の5つの学習スタイルがあります。

  • コース学習

  • ビルド学習

  • スキルアップ学習

  • ブロックパズル学習

  • オンラインキャンプ

マイページのデザインと合わせてコース学習のデザインも前回ご紹介させていただきました。

今回はビルド学習とブロックパズル学習のご紹介をさせていただきます。

前回の内容から見てみたい方はこちらからどうぞ!

ー ビルド学習のデザイン

さっそくビルド学習のデザインをペタペタ貼っていきます。

ビルド学習トップページ

まずはビルド学習に入ったところの画面です。

ビルド学習っていうのは、プログラミングで作れる作品を自分で選んで学ぶ学習スタイルになります。

「えんぴつ」や「木」のようなシンプルな建築物から「ばくだんゲーム」や「生き残りサバイバルゲーム」などのミニゲーム作品のような難しいものまで様々な作品の中から作ってみたいものを選んでプログラミングで作っていきます。

ビルド学習のトップページは「選ぶ」ための画面ということです。たくさんの作品から選ぶのはECサイトに近いんですが、実際にイメージしているのはゲームソフト売り場やレゴ売り場です。

子どもの頃におもちゃ売り場でワクワクしたあの感覚を目指したいなって思ってます。

「作りたいものを探すだけで1時間経ってしまった」っていう逸話を作りたいです。笑


たくさんの中から作りたいものを探す際に、1つ1つ見ていると大変なので検索機能もついてます。

ビルドの検索ウィンドウ


次はビルドそれぞれの詳細ページです。

ビルド詳細ページ

作品の完成画像があり、どんな作品なのか、どういうテクニックや気を付けるポイントがあるのか説明するテキストボックスがあります。

ビルド学習には作り方の手順書があるので、それを参考に作っていきます。プラモデルみたいなもんです。


つまづいたときのために、ヒントも用意します。

ヒント画面

基本的には手順書とヒントを見て作っていってもらいます。分からないところはレッスンやオンライン自習室で質問します。LINEで質問するのもOKです。

ー ブロックパズル学習のデザイン

続いてブロックパズルのデザインです。

ブロックパズルは決められたお題と全く同じ形を作ればクリアになるという問題です。

レベル1~順番にクリアしていくような設計になっています。

ブロックパズルトップページ

次の画像はブロックパズルの詳細ページのデザインです。

ブロックバズル詳細ページ

ブロックパズルはお題と同じ形ができればどんなプログラミングスキルを使ってもOKなのですが、コードの数だけは目標があります。

目標のブロック数をクリアすることを目指していけば自然と効率をよくする方法を考えるようになる、というのが狙いです。

ー まとめ

今回はここまでとさせていただきます!

学習ページのデザインはおおむねこんなところです。
スキルアップ学習のデザインを紹介しなかったのですが、それはビルド学習と95%同じ構成だからです。

なるべくシンプルにしたいと思いつつ、結局ちょっと小学生には難しいかなと思うところもあります。

しかしこうしてPart1、Part2の記事にしてみるとそこまで複雑な説明にならなかったので、慣れれば苦労しなさそうな気もしてきました。

あとは子どもたちに使ってもらってどんどん改善していけたらいいなって思ってます!!

ー さいごに

この記事が少しでも「役に立った!」と思っていただけた方、あるいは「よく書いたぞ!」と応援していただける方、”スキ”や”フォロー”をポチッと押していただけませんでしょうか🥺

僕の心がビビビッとなりモチベーションが爆上がりしますのでぜひよろしくお願いいたします⚡

あとポチっとすると、ちょっとうるさいと評判(?)のお礼画像を10種類の中からランダムでお届けしますのでそちらもお楽しみに!


それでは、

また次の記事でお会いしましょう!

さようなら~

=======================

すべての子どもに

心がビビビッとする

学びの喜びを。

=======================

学び  喜び  bibibi
bibibi代表 わさ



ー あなたに読んでもらいたい記事

▼わさって何者?についてはこちら

▼bibibiのサービス内容についてはこちら

▼bibibi のコンセプトについてはこちら

▼bibibi のポリシーについてはこちら

▼bibibiの名前の由来についてはこちら

▼フランチャイズ使わないよ宣言についてはこちら

▼プログラミング教材にマイクラを選んだ理由についてはこちら

▼ロゴについて記事はこちら

▼「オンラインか対面式か」について記事はこちら

▼bibibiで最も重要視するアレついて記事はこちら


この記事が気に入ったらサポートをしてみませんか?