http://bmkids.kayac.com/kids-present/
※iPhoneをお持ちの方は是非iPhoneでご覧下さい。
同じHTML5を使っておりますが、iPhone用にカスタマイズしております。

【OTONATIC】(おとなちっく)とは一言で言うと
子どもが背伸びするプレゼントまとめサイトです。

しかし！！
ただの商品一覧ページの
サイトではございません！！
その説明は後ほど。
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
子どもが大人に憧れて背伸びしたくなる気持ち...
背伸びをすることで少しずつ子どもは大人の階段を上ります。
それを叶えてくれるアイテムを集めたサイトが
「OTONATIC（おとなちっく）」です。
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

ポイントは以下です！

＜技術的な見所＞
技術的なチャレンジとして最新のHTML5で本サイトは作成しております。
そのためPCとiPhoneとでは同じデータで見せ方を変えています。

同じアドレスを
PCで見た場合は「大人用」の商品一覧サイト。
シンプルでスムーズにサイトが閲覧出来るように整理されています。



一方、iPhoneで見た場合は
「子ども用」運試しサイトになります。
商品をいきなり見せずに、お絵描きした絵や図柄によって「ゲット」ボタンを押すとプレゼントが登場します。
その時にちょっとした仕掛けがあり。おもちゃが出る場合、お手伝いの指示が出る場合があります。
是非、親子で見て「ごほうび」か「お手伝い」かドキドキ運試ししてみてください。



このお絵描き機能も驚きのHTML5で作成しております。HTML5って色々できちゃうんですね！


その他の見所）
・iPhoneを振ると鉛筆の色が変わります。
・iPhoneを傾けるとサイトが居眠りしちゃいます。



＜運試しiPhone使い方＞
1)iPhoneでサイトのURLを開きます
↓
2)サイトが立ち上がったら、画面に子どもに絵を描かせます


↓

3)絵を描いたらGETボタンを押します
ポヨン！って画像が飛び出してきます！
たまにお手伝いカードも入っているので、それが出たら子どもにお手伝いしてもらいます。

↓
4)"プレゼント"もしくは"お手伝い指令"が結果としてGET出来ます
↓
5)絵を描いた結果を見て、お子さんと楽しみましょう
↓
6)GETしたプレゼントは一覧フォルダに蓄積されます

※iPhone上にデータを保存しているため、見る端末を変えるとデータは引き継がれません。
↓
7)プレゼントを買ってあげる場合はそのままリンク先のamazonで購入する事が可能です

 

CSS Nite LP, Disk 13

この件は監督（別名：えど）がCSS niteで詳しく語ってくれるよ！