面白法人カヤック本多大和

Q（キュー）サイトに学ぶ、

演出のためのHTML5

本多大和ほんだやまと

面白法人カヤック所属

HTMLファイ部リーダー

@calmbooks

http://calmbooks.tumblr.com/

HTML5 / WebGL / Unity

自己紹介

最近つくったもの

PIXEL LAND @ 東京デザイナーズウィーク2014

ユーザーがマグネットを組み合わせてつくったピクセルアートをWebサイト

上に集め、デジタルの空間内にピクセルアートの街をつくる作品。

WebGLにより、3Dでビジュアライズ。

http://www.tdwa.com/2014/exhibitors/details/005754.html

FONTA 一人一文字みんなでつくるフォント

サイト上でユーザに1人1文字書いてもら

い、約7000人で1つのフォントをつくる

サイト。

つくったフォントはダウンロードできた

り、Webフォントとして使えたりする。

http://fonta.kayac.com/

紹介させていただく事例

Q co.,ltd.株式会社キューコーポレートサイト

広告からアパレルまで、多岐にわたる

デザインを手がけるデザイン会社Q（キュー）

赤ペンで◯を書くと動画がでるなど、

前衛的な表現を取り入れたコーポレートサイト

http://www.q-co.jp/

Canvas？

<canvas></canvas>

グラフ、画像処理、ビジュアライズ、etc.

サイト上にペンで描く！

・HTML5 Canvas 使用（ペン自体はDOM）

・mousemoveイベント時のマウス座標を利用して描画

moveTo、lineToで結ぶだけだと滑らかな線にならない...

● mousemoveのマウス座標

1. マウスの通った各座標（黒い点）の中点を算出（黄色い点）

2. 各座標（黒い点）をハンドルに、2次ベジェ曲線で結んでいく

→ 味のある滑らかな線に！

ページ上どこにでも描ける！

DOMの上にも、動画の上にも、どこにでも描ける

ドラッグ中は、Canvasがページブロック

（セクション）全面に広がっている

mouseup時に、必要なサイズにCanvasをトリミング

◯を描くと◯の中に動画！

・始点と終点が近ければどんな形でもいける

・Tumblrで社員さんが日々投稿している

・1つの動画につき2つのCanvas

1. mousemoveでの座標群を配列に保持しておく

2. 座標群を結んだパスで、動画をclip() ！（マスクみたいな）

3. 線のほうは描き終わったら更新不要なので、更新が必要な

動画とはCanvasを分けた（そのほうが軽かった

スクロールで描かれる筆跡！

・スクロールに連動して描かれていく

・社長直筆の手書き文字

こんな感じの座標をまとめた配列を持っておき、

スクロール値から計算して適切な数の点を結んで描画

社員さんの手書きメッセージ

・社員さん一人一人オリジナルの手書きメッセージ

・メンバーページ（/member）にいくと、筆跡アニ

メーションが描かれる

・管理画面内に専用のツールを作成

・ドラッグで描くことで、座標を集めた配列を生成できる

・新しく社員さんが入社してもこのツールで追加できる！

☆やパックマンを描くと・・？

☆を描くと・・？

パックマンを描くと・・？

何かが起こる？

表側では使わない、上のような画像を用意

/img/common/other/check_star.png

簡易的に画像類似度を求めて検出

Thank you !!