好きなだけかりんとうを食べる人生

フロントエンドとかデザインとかバックエンドとか浅く広く。社会人3年目のうぇぶでぃれくたーです。

【レポート】面白法人カヤックのフロントエンド「面白コーポレートサイト」の演出手法!Canvas、スクロール芸、ゲーミフィケーション、etc.

これに行ってきました。 カヤックのHTMLファイ部部長による講演です。

参考になった部分を挙げていきます。

面白法人がつくるコーポレートサイト

面白コーポレートとは

従来のポートレート

  • 大量のページ
  • 堅いイメージ

カヤックの作るコーポレート

面白コーポレートを制作する際に気をつけるポイント

こだわりを徹底する たとえばMutations STUDIOであればゲーム性

法人が持つ人格「法人格」を再定義 1つのコピーから掘り下げていく

コーポレートサイトは表現の可能性が広い 会社によってKPIは様々

ワード

Q(キュー)サイトに学ぶ、演出のためのHTML5

こちらは技術的なtipsです。

なめらかで味のある線

1:マウスの各座標の中点を算出 2:各座標をハンドルに、2次ベジェ曲線で結んでいく

DOMの上でもペンで書ける

1:ドラッグ中はsection内全面にcanvas要素が広がっている 2:mouseup時に、必要なサイズにcanvasをトリミング →ページが重くなるのを回避

円の中に動画を表示する

1:mousemoveでの座標群を配列に格納しておく 2:座標群を結んだパスで動画をclip() 3:描き終わって更新不要な線は削除

スクロールに連動して文字を描く

座標をまとめた配列を持っておき、スクロール値から計算して適切な数の点を結んで描画

手書きメッセージ

1:管理画面内に専用のツール(手書きメッセージ製造機)を作成 2:ドラッグで描くことで、座標を集めた配列を生成出来る 3:新しい社員が入社しても更新できる

☆やパックマンを描いた時の処理

☆を描くと背景が夜空になり、パックマンを描くとサイトを食べ尽くす 1:表側では使わない、星形の画像(認識用)を用意 2:簡易的に画像類似度を求めて検出

メモ

リアルタイムで描画していくコンテンツは目を惹きますね。キューのHPなどは特に。 この辺りはcanvasの独壇場なんじゃないかと思います。

コンテンツが何を求めているのか、メッセージ性を追求する点はどのサービスにおいても非常に大事だと考えさせられました。 堅実なイメージが求められるコンテンツなどでは利用する機会は少ないかもしれませんが、今後何かしらのサービスを作る際の引き出しとして覚えておきたいですね。