MOZERとは、2011年のスタートからのべ15000人もの中高生が参加したプログラミング・ITキャンプおよびスクールを運営する「Life is Tech!」が提供する、オンラインで参加できるプログラミング学習サイトです。
2016年には、ロンドンで開催された教育とテクノロジーの祭典であるEdTechXEurope2016グローバル・オールスターズ・アワードのグロース部門にて、日本企業として初めての優勝を飾りました。
またソニック・ワールドアドベンチャーやFINAL FANTASYシリーズの開発にも携わった元スクウェア・エニックスCTOの橋本善久氏が開発を担当され、本格的な学習カリキュラムながら「楽しい」「嬉しい」を重視したコンテンツとなっています。
正式版では有料化が予定されていますが、現在体験できるWebデザインコースは全て無料で受講することができます。今後SNS機能の追加が予定されているなど、正式版のリリースが待ち遠しいサイトです。
目次
サイトURL | https://mozer.io/ |
---|---|
対応する言語やスキル | Webデザイン(HTML、CSS、デザイン理論など) |
利用料金 | 体験版無料 |
教材タイプ | ブラウザ入力 |
対応レベル | プログラミング初級者 |
備考 | 日本語対応 |
MOZERで現在リリースされている「デイジーと秘密のメッセージ」は、Webデザインコースの体験版となっています。オンライン学習ならではの動きのあるインタラクティブ教材で、紙の教科書よりもぐっと個別の需要を満たせる内容となっており、学習効率がアップするシステムとなっています。
Webデザインと銘打っているだけあり、学習内容はHTML&CSSのプログラミングだけでなく、色の選び方などデザインについてのレッスンもあります。
正式版の開始時期は当初2016年内、月額利用料金は1500円の予定と発表されていましたが、2017年4月現在、リリースはまだのようです。
正式版では体験版のWebデザインコースだけでなく、ゲーム開発、スマホアプリ開発、Webサービス開発、人工知能、3DCG、VR、IoTなどが順次拡充される予定です。
さらに正式版ではSNS機能の完備が予定されており、プログラミングを学ぶ仲間たちとコミュニケーションをとったり作品をシェアしたりできる環境が整えられるとのことで、SNS好きの方や仲間がいると頑張れるタイプの方には特におすすめの学習サイトとなりそうです。
メールアドレスとパスワードを指定して登録する方法のほかに、twitter、facebook、instagramのアカウントと連携してログインすることが可能となっています。
初めてログインすると、まずアバターやニックネームなどのユーザ情報を入力します。
情報を入力すると、ムービーが流れてオープニングが始まります。BGMが流れるので、音量に注意して進んで下さい。
ゲームはチャプターごとに、アドベンチャーパートとレッスンパートで交互に進みます。エピソード1は、ネコのデイジーに頼まれてパン屋さんのウェブサイト作りを頼まれるストーリーに沿ってウェブサイトのコーディングを学んでいきます。
なおアドベンチャーパートでは、画面下に表示されるキャラクターの吹き出しをクリックすると先に進みます。
こちらはレッスンパートです。画面左側がブラウザ表示のプレビュー画面である「ブラウザビュー」、右下がHTMLやCSSなどのコードを入力するための「コードビュー」となっており、右上にヒントが表示されます。なお講義は、基本的にデイジーの吹き出しをクリックすることで進みます。
説明を受けつつ、その都度コードを書き換えて進みます。実際に個人授業を受けているような、そんな対話型の講義になっています。
レッスン中には入力画面だけでなくこのように参考書のような画面が表示されることもあり、とても分かりやすく授業を進めていくことができます。
最後におさらいがクイズ形式で表示され、チャプタークリアです。クイズはチャプターの最後だけでなく、レッスンの途中にこれまでの復習として表示されることもあります。
真っ白のページから始まって、立派ながコンテンツ出来上がりました!
体験版エピソード1の構成は、次のようになっています。
1-1:はじめてのWeb
・HTMLの基本(見出し、段落、画像追加)
1-2:カンバンをつくろう
・ヘッダー、CSSの基本
1-3:お店紹介をつくろう
・クラス、セレクタ
1-4-1:パンの紹介をしよう
・divタグ、floatとclear
1-4-2:パンを目立たせよう
・レイアウトの調整
1-5:商品メニューをつくろう
・テーブルの作成、border
1-6:アクセスマップをつくろう
・リストの作成、フッター、特殊文字
1-7:Webサイトを仕上げよう
・ナビゲーションメニューの作成、リンク、id属性
1-8:レオンシュタイン教授のテスト
・ここまでのおさらい
まず最初のエピソード1はチャプター8まであり、立派なパン屋さんのホームページをイチから完成させることができるようになります。
さらにエピソード2以降では、カラーコーディネートや写真のセレクトなどデザイン面にまで踏み込んで学ぶことができます。体験版はチャプター12まで続き、ラストにこれまでのストーリー内にちりばめられてきた暗号を解読して答えを入力すると体験版クリアです。
体験版とはいえ途中でストップするのではなく、きちんと切りのいいところで完結するようになっていますので、続きはぜひご自身の目で確かめてみて下さい。
Webデザインを少し経験したことのある方が書かれた、MOZERの感想を見つけましたのでご紹介致します。
https://mozer.io/ (マザー) の無料トライアルのおかげで、WordPress に移行してからのカスタマイズ中に、いままで理由を知らずにただ書いていたコードに付いて「ああ、そういえばそういうことだったわね!」と楽しんでいる自分発見!
どうせやるなら楽しい方がいいでもんね。
というわけで、マザーのトライアルをもう一周ぐらいやって、CSSの初歩の初歩を頭に叩き込もうと思っています。次はjavascriptとか、JAVAとかがあったら無料じゃなくても申し込んでしまいそう。
(出典:ゲーム感覚で HTML,CSS 学習 MOZER を体験してみた)
MOZERはタグの由来(どんな単語の省略形か)なども教えてくれるので、これまでただコピペで書いていたコードが「そういうことだったのか!」という発見にもつながります。全くの未経験の方だけでなく、ちょっとやったことあるけどよく分かってないという方へ、おさらいという意味でもおすすめです。
今回プレイした「デイジーと秘密のメッセージ」では、Webデザインコースと銘打っているだけあり、ただコーディングを学ぶだけでなく短時間で見栄えのするウェブサイトが作れるノウハウが詰まっていて、とても実践的なサイトになっているという印象を受けました。
正式版ではWebデザインだけでなくゲーム開発やアプリケーション開発などのコースも予定されているとのことで、興味のある方はぜひ体験してみて下さい。
INTERNOUS,inc. All rights reserved.