9月くらいから構想していた、ゲームを通してHTML5を覚えるというコンセプトから作られたHTML5KARUTAを作成、公開しました。まだイメージしていたものの80％程度の出来ですが、どうぞご覧ください★

HTML5KARUTAとは

http://roadstohtml5.com/html5karuta/

HTML5KARUTAは、日本の遊びカルタというゲームを通してHTML5のタグを覚えようという主旨のゲームです。

読み札にはHTML5の各タグの説明が書いてあります。絵札にはタグの名前自体があるだけです。タグの説明を聞いて、それが何のことかわかったら札を取る。日本人にはおなじみのルールですね！最近の若い人が知っているのかは知りませんけど…ｗ

HTML5KARUTAを作った動機

まずなぜこれを作ったかですが、webcre8は常々「遊びと学習が同時に出来るもの」の良さを説いているんですね。ゲームやレクリエーションをして楽しみつつ、気付けば知識や経験が増えている。これは最高の形だと思います。遊びと言うのはどうしても後から「時間を無駄にした感」が生まれてしまいます。…そんなこと無いですかね。というか、逆の人もいると思います。勉強ばっかしてて何が楽しい生活だ、と。まあ、そう言う人にも対応できるのが、勉強だけじゃなく遊んで楽しめもするものでもあるわけですね！

そして今webcre8が学習しているものと言えばずばり、HTML5です。これを自分自身楽しみながら勉強出来、かつ他の人にも楽しんでもらうにはと考えたわけです。

何より、これを作ることでwebcre8自身が勉強できます。…本音を言うとこれを作ること自体が一番勉強になりますｗ

HTML5KARUTAのプロトタイプを作る

まずカルタのプロトタイプを作りました。遊んでみないと感触が掴めないですからね！

108つのタグを調べる

このコンテンツの為に、まずはHTML5108つのタグをちゃんと調べました。実際、普通にサイトを作っていると、これらのうちせいぜい30個くらいしか使わないんですね。まあ当然なんですけど…。HTML5は通常のサイトのマークアップの為だけではなく、アプリケーション開発をも視野に入れている為、どう考えても普通のサイトが使わないタグがあるわけです。て言うかまだどのブラウザにも実装されてないタグまでありますからね。

プロトタイプを作る

この調べた内容をもって素のHTML5とCSS3、jQueryを用いたサイトを作ってみました。マウスオーバーするとカードがめくれるようになっています。デザインはまだほとんどなし。これを印刷して適当なカードに貼りつければとりあえず遊べますね！

テストプレイ

さてテストプレイです。まだ実際のカードには印刷できないので、試しにコピー用紙に刷ったものをトレーディングカードのカードスリーブに差し込んで、とりあえず遊べるようにします。この様子はまた別の時にでも公開しますｗ

• 下北沢オープンソースカフェ
• コワーキングスペースタネマキ
• 株式会社ウサギィ
• 友人宅
• 株式会社チームラボ会議室

とりあえず以上の様な所で遊んでみました。

問題点を見つけ、ブラッシュアップする

一通り遊んだ結果、以下のような問題点が。

• HTML5の説明が複雑すぎて意味が分かりづらい(HTML5の用語をどの程度使うか)
• HTML5をこれから覚える人には全く分からない(HTMLの初心者に向けるかHTML5の初心者に向けるか)
• 単なる説明だとテンポが悪い(五・七・五にしては？)
• タグ札(絵札)がセリフ体(Times New Roman)だと読みづらい
• 黒地に白は読みづらい
• 天地がわかりづらい

問題点が出る出るｗ

HTML5KARUTA完成まで

タグを108つ使ったソースを書く

実は全てのタグを説明できるようになったのはつい最近です。bdiとか書いたことある人います？ｗ 最初の段階ではまだタグの名前を調べた位でしたけど、やっとここまで来ました。

再制作する

そして何度も札を制作。

テストプレイ

当初上がっていた問題の解決策として

• 極力HTML5特有の専門用語を排し、代わりに補足をつける
• 全て語尾に「タグ」とつけ、読み終わりを分かりやすくする
• 絵札にSource Code Proを採用。わかりやすさとコードらしさを出す
• 背景にうっすらとコードを書き、雰囲気で天地が分かるようにする

上記のような対策を行い、今の形が出来ました(絵札のデザインは公開時点で未実装ですが、すぐに追加します)。

当初はトレーディングカードサイズのカードでしたが、名刺サイズに変更。まあ、正直まだ詰めのたらない部分もあるんですけど、時期的にタイムアップと言ったところ…。

HTML5KARUTA公開

と言う事で、晴れてサイトが公開できました。ぱちぱち！！

HTML5KARUTA

これで出来あがり、となればいいんですけど、後はこのカードの印刷が残っています。そうです、HTML5KARUTAはサイトからのデータダウンロードでプロトタイプの時にwebcre8がやっていたように、自分で印刷して遊ぶ方法のほかに、ちゃんと発注して作ったものを販売しようと考えているんですねー。

データの無料配布と販売を行います

サイトの下部の購入またはダウンロードで、サイトで公開中のPDF版セット(36枚)が無料でダウンロードできますので、工作が好きな人はPDFを印刷して、切って厚紙に貼ったりして遊んでみてください。めんどくさいって人はその下購入ボタンから注文申請してください。

…っと、まだ購入ページが出来ていないので、近日中に買えるようになります。お正月には皆さんの手元に届くよう努力していますが、間に合わないかもしれません…。 購入を押してもダウンロードのところに移動します。

ただ、現時点でどの程度の注文があるかわからないので、発注数はそれ次第で加減しようと思ってます、すみません貧乏なのでｗ

Roads to HTML5は？

このコンテンツはURLを見るとわかる通り、先月の記事で宣言した「Roads to HTML5」というサイトのサブコンテンツです。まだ親サイトの方が出来てないですけど…ｗ ある事情の為、このコンテンツの公開と販売の開始が必要だったんですよね。

「新春!!HTML5KARUTA大会」を1月6日に各地で同時開催します!!

2013年1月6日の日曜日、東京近郊のコワーキングスペースを中心に、このHTML5KARUTAを使ったゲーム大会を行いたいと思います。

内容は、HTML5についての軽い解説の後、カルタ大会をやりましょう。と言うだけのものですｗ まあそれだけだとなんか寂しい気もするので、カルタで遊んだ後はついでに他のゲームを持ち寄ったりして遊んでもいいんじゃないかと思います！

そしてHTML5KARUTAのページでも触れてはいますが、この日は是非！お正月ということで着物で来場いただけると良いんじゃないかと思います！イベント自体はコワーキングスペースの利用料込みで参加費がかかりますが、着物で来てくれた人には割引があります★是非初詣の帰りにでも遊びに来てくれると嬉しいですねー！

HTML5KARUTAイベント場所をチェックする

ウェビメモで紹介されてたこちらなんかで借りてくるという手もありますよー。

http://webimemo.com/other/2889

せっかくの大会なので、商品も用意しています。各コワーキングスペースさんの御好意もあり、HTML5やweb制作関連の書籍等(あ、こちらは企業様や著者様の提供もお待ちしております！)がゲット出来ます。

更によくwebcre8もメーリングリストでお世話になっているHTML5のコミュニティ、html5j.orgの白石さんからHTML5のイベントに参加しないと手に入らない(？)HTML5Tシャツやバッグ、ステッカー等をご提供頂きました！

と言う感じになってますので、皆さん最寄りの渋谷、高円寺、下北沢、大宮、横浜等のいずれかの場所でHTML5KARUTAを遊び、そして皆さんがこの先勉強するHTML5について、ちょっとでもとっかかりになればいいなと思っています★

東京から離れた地域でこれで遊びたいという人はWEBCRE8.jpのお問い合わせか、この記事へのコメント、または@webcre8にリプライをください★

協力者へのお礼

HTML5KARUTAの制作に際して、下北沢のコワーキングスペース、「下北沢オープンソースカフェ」のマスターでありデザイナーでもある河村さん( @cognitom )、先日行われたPHPカンファレンスの実行委員長であり、オープンソースカフェの常連でも安藤さん( @yando )には多大なご協力を頂きました。カルタをどのように遊ぶかの提案等、積極的に協力して頂きました。この場を借りてお礼申し上げます！

また、そもそもこの企画を気に入ってくれ、面白そうなものを作っていると河村さんに紹介してくれた横浜のコワーキングスペース「タネマキ」のマスタ、ウエツハラさん(@uetsuhara)にも感謝です！テストプレイにも付き合って頂きました。

更にそもそもこのカルタを実際に作るきっかけになった飲み会のはるかなさん( @halcana )、そぷさん( @sophide0822 )、序盤テストプレイにわざわざ付き合ってくれたみぞれさん( @xxmiz0rexx )、だいさん( @daiend )、あやちさん( @smilelx_xl )。

どのように制作を進めていくか、更にこれからを相談させて頂いたかずさん( @kazu_u )、大川さん( @ryumagazine )、あきおさん( @akio0911 )、たけさん( @take_it02 )。

うおー挙げるときりがないｗ 本当にたくさんの方に協力的にして頂きました。実制作でお世話になった方々についてはカルタのページで紹介させて頂いております…みなさん本当にどうもありがとうございました。

終わりに

さて、カルタの販売やイベントまではまだ日がありますが、ゲーム自体はもう遊べますし、サイトだけでも楽しめる作りになっているので…どうぞいじくり倒してみてくださいっ★

追記：スポンサー協力

今回、このHTML5KARUTAと言う取り組みにつきまして、エンジニアとクリエイターがスキルを軸に、仲間や仕事に出会うためのサービスForkwell様からのスポンサー協力を頂けることになりました！（ワーパチパチ！！）

他にももしこの取り組みにご協力頂ける企業様、団体様等ありましたらぜひお問い合わせかTwitter公式アカウント@webcre8までご連絡ください！その分だけ多くのカルタが作れ、またクオリティの高いものが作れるかもしれませんｗ