Cupに応募した「エルモのだいぼうけん」が、セサミワークショップのセサミキャラクターを活かした、子供向けのインタラクティブな絵本賞を受賞しました。広告この作品はnobuさんとjunkoさんと私の3人で作りました。「タブレットで読む絵本」をコンセプトにして、あえてページの概念は無くし、巻物風にしました。講評部分を抜粋させていただくと、<受賞理由>絵本というコンセプトをまさか「縦」に使うとは思いませんでした。大人も十分に楽しめ、子供にも見せたいという気持ちになります。映像もとても可愛く、アニメーションもシンプルでありながら効果的に使用されていました。こちらの狙いをちゃんと汲み取ってもらえたのは嬉しいです。下にスクロールすると、エルモが海を潜ります。潜って行くと、海の生き物や、セサミストリートのキャラクターなどが現れます。必要な操作は下へ下へのスワイプ(スクロール)のみ。実は画面をクリックすると、位置に応じて文章やナビが表示されますが、これらは隠し要素として発見してもらうお楽しみとして、特に明示していません。「タブレットで読む絵本」にしたかったのですが、iOSだとネイティブスクロール中のアニメーションがキャンセルされるため、結果としてはスクラッチパッド搭載のノートPCで見るのが一番楽しいです。chromeの最新版がおすすめ。構成は、縦スクロール1ページのhtmlで、画像はインラインsvgとcssのみ。外部参照の画像はありません。アニメーションはcssで実装。一部、パスの変形アニメーションなどではsvgのアニメーションであるSMILを使っています。javascriptによるアニメーションは無し。javascriptでは、スクロール位置の検出と、html要素のclassのaddとremove。それと音声のコントロールを行っています。文字は今回の為に手書きで作ったwebフォント。talk大会で最も頭が良さそうだったのは小学6年生のシュン君。すばらしい!セサミワークショップの方が当日ご欠席だったので、具体的な講評が聞けず残念。同時に「お楽しみ」となっていた副賞が謎のまま。賞状を頂くのは中学校の軟式テニス部以来だなあ。当日の動画もあります。受賞の瞬間は15:30辺りです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。designerのKSKです。このサイトのコンテンツはhtml5やCSS3の情報や実装で構成しているので、これらをサポートしているブラウザ(FirefoxやChrome)で閲覧することを推奨します。WordPress.。