ITコラム

スキルアップ

2017.04.03

MOZER 評判/評価は？無料で学べるプログラミングマザーの使い方から感想まで

MOZERとは、2011年のスタートからのべ15000人もの中高生が参加したプログラミング・ITキャンプおよびスクールを運営する「Life is Tech!」が提供する、オンラインで参加できるプログラミング学習サイトです。
2016年には、ロンドンで開催された教育とテクノロジーの祭典であるEdTechXEurope2016グローバル・オールスターズ・アワードのグロース部門にて、日本企業として初めての優勝を飾りました。

またソニック・ワールドアドベンチャーやFINAL FANTASYシリーズの開発にも携わった元スクウェア・エニックスCTOの橋本善久氏が開発を担当され、本格的な学習カリキュラムながら「楽しい」「嬉しい」を重視したコンテンツとなっています。

正式版では有料化が予定されていますが、現在体験できるWebデザインコースは全て無料で受講することができます。今後SNS機能の追加が予定されているなど、正式版のリリースが待ち遠しいサイトです。

MOZER（マザー）とは？
Webプログラミングとデザインが学べる
SNS機能つき正式版のリリースはいつ？料金は？
MOZERのユーザ登録とログインの方法
MOZERの基本的な使い方
体験版ではどこまで学べる？
MOZERの口コミや評価は？
正式版のリリースが待ち遠しい！

１．MOZER（マザー）とは？

サイトURL	https://mozer.io/
対応する言語やスキル	Webデザイン（HTML、CSS、デザイン理論など）
利用料金	体験版無料
教材タイプ	ブラウザ入力
対応レベル	プログラミング初級者
備考	日本語対応

▲目次へ戻る

２．Webプログラミングとデザインが学べる

MOZERで現在リリースされている「デイジーと秘密のメッセージ」は、Webデザインコースの体験版となっています。オンライン学習ならではの動きのあるインタラクティブ教材で、紙の教科書よりもぐっと個別の需要を満たせる内容となっており、学習効率がアップするシステムとなっています。

Webデザインと銘打っているだけあり、学習内容はHTML＆CSSのプログラミングだけでなく、色の選び方などデザインについてのレッスンもあります。

column_image3729_01

▲目次へ戻る

３．SNS機能つき正式版のリリースはいつ？料金は？

正式版の開始時期は当初2016年内、月額利用料金は1500円の予定と発表されていましたが、2017年4月現在、リリースはまだのようです。

正式版では体験版のWebデザインコースだけでなく、ゲーム開発、スマホアプリ開発、Webサービス開発、人工知能、3DCG、VR、IoTなどが順次拡充される予定です。

さらに正式版ではSNS機能の完備が予定されており、プログラミングを学ぶ仲間たちとコミュニケーションをとったり作品をシェアしたりできる環境が整えられるとのことで、SNS好きの方や仲間がいると頑張れるタイプの方には特におすすめの学習サイトとなりそうです。

▲目次へ戻る

４．MOZERのユーザ登録とログインの方法

メールアドレスとパスワードを指定して登録する方法のほかに、twitter、facebook、instagramのアカウントと連携してログインすることが可能となっています。

column_image3729_02

▲目次へ戻る

５．MOZERの基本的な使い方

初めてログインすると、まずアバターやニックネームなどのユーザ情報を入力します。

column_image3729_03

情報を入力すると、ムービーが流れてオープニングが始まります。BGMが流れるので、音量に注意して進んで下さい。

column_image3729_04

ゲームはチャプターごとに、アドベンチャーパートとレッスンパートで交互に進みます。エピソード１は、ネコのデイジーに頼まれてパン屋さんのウェブサイト作りを頼まれるストーリーに沿ってウェブサイトのコーディングを学んでいきます。

なおアドベンチャーパートでは、画面下に表示されるキャラクターの吹き出しをクリックすると先に進みます。

column_image3729_05

こちらはレッスンパートです。画面左側がブラウザ表示のプレビュー画面である「ブラウザビュー」、右下がHTMLやCSSなどのコードを入力するための「コードビュー」となっており、右上にヒントが表示されます。なお講義は、基本的にデイジーの吹き出しをクリックすることで進みます。

column_image3729_06

説明を受けつつ、その都度コードを書き換えて進みます。実際に個人授業を受けているような、そんな対話型の講義になっています。

column_image3729_07

レッスン中には入力画面だけでなくこのように参考書のような画面が表示されることもあり、とても分かりやすく授業を進めていくことができます。

column_image3729_08

最後におさらいがクイズ形式で表示され、チャプタークリアです。クイズはチャプターの最後だけでなく、レッスンの途中にこれまでの復習として表示されることもあります。

column_image3729_09

真っ白のページから始まって、立派ながコンテンツ出来上がりました！

▲目次へ戻る

６．体験版ではどこまで学べる？

体験版エピソード１の構成は、次のようになっています。

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：レオンシュタイン教授のテスト
　・ここまでのおさらい

まず最初のエピソード１はチャプター８まであり、立派なパン屋さんのホームページをイチから完成させることができるようになります。

さらにエピソード２以降では、カラーコーディネートや写真のセレクトなどデザイン面にまで踏み込んで学ぶことができます。体験版はチャプター１２まで続き、ラストにこれまでのストーリー内にちりばめられてきた暗号を解読して答えを入力すると体験版クリアです。
体験版とはいえ途中でストップするのではなく、きちんと切りのいいところで完結するようになっていますので、続きはぜひご自身の目で確かめてみて下さい。

column_image3729_10

▲目次へ戻る

７．MOZERの口コミや評価は？

Webデザインを少し経験したことのある方が書かれた、MOZERの感想を見つけましたのでご紹介致します。

https://mozer.io/ (マザー) の無料トライアルのおかげで、WordPress に移行してからのカスタマイズ中に、いままで理由を知らずにただ書いていたコードに付いて「ああ、そういえばそういうことだったわね！」と楽しんでいる自分発見！
どうせやるなら楽しい方がいいでもんね。
というわけで、マザーのトライアルをもう一周ぐらいやって、CSSの初歩の初歩を頭に叩き込もうと思っています。次はjavascriptとか、JAVAとかがあったら無料じゃなくても申し込んでしまいそう。

（出典：ゲーム感覚で HTML,CSS 学習 MOZER を体験してみた）

MOZERはタグの由来（どんな単語の省略形か）なども教えてくれるので、これまでただコピペで書いていたコードが「そういうことだったのか！」という発見にもつながります。全くの未経験の方だけでなく、ちょっとやったことあるけどよく分かってないという方へ、おさらいという意味でもおすすめです。

▲目次へ戻る