面白法人カヤックが伝授！Canvasで「一度見たら忘れられない」Webサイトをつくる5つのワザ｜ヒカ☆ラボレポート<div class="report">

突然ですが、皆さんはどの企業さんのコーポレートサイトが好きですか？
コーポレートサイトはその企業の「顔」ともいえる存在。
あらゆる趣向をこらしインパクトあるサイトを運営されている企業さんもたくさんいらっしゃいますね。

先日レバレジーズ本社で行われたエンジニア向け勉強会『ヒカ☆ラボ』では、そんなユニークなサイトを数多く手がける注目企業「面白法人カヤック」のHTMLファイ部リーダー・本多大和氏による講演が行われました。
講演テーマは『面白法人カヤックのフロントエンド「面白コーポレートサイト」の演出手法！』。

当日は100名以上の方に参加いただきました。

 

今回は中でも実際に手がけたコーポレートサイトを事例に用いて展開されたパート『Q（キュー）サイトに学ぶ、演出のためのHTML5』のレポートをお送りします。
「ワクワクするものをつくりたい」と思っているフロントエンドエンジニア、UIデザイナーの方は特に必見です！

 

デザイン会社Q（キュー）のサイトから学ぶ演出のためのHTML5実装

デザイン会社Q（キュー）さんは、代々木の広告からアパレルまで多岐にわたって手がけておられるデザイン会社です。

Q（キュー）さんのコーポレートサイトは、デザインをQさんが、実装をカヤックがそれぞれ担当しました。
今回は、実際にこちらのサイトを見ながら解説させて頂きます。

◆株式会社キュー http://www.q-co.jp/

赤いペンでサイトに落書きしてみよう

まずサイトにアクセスすると、いきなり赤ペンが1本置いてあります。
この時点で既に前衛的なサイトなのですが。

この赤ペンをクリックしていただくと、マウスの代わりに赤ペンを動かすことができるようになります。
そしてそのままドラッグしていくと、サイト上で動画が現れるという演出をしています。

この赤ペンで四角を描いたりとか丸を描いたりすると、中から動画が現れるという演出をしています。
1つ動画を描くと、下にスクロールできるようになっています。

スクロールに沿っていくと、Qさんの得意とする分野を紹介するセクションや、社員の方々のセクションが表示されるようになっています。
さらにマウスオンすると、社員の方それぞれのオリジナルメッセージが出てきます。

この赤ペンの細工の面白いところは、サイト上どこにでも書けるようになっているところです。
自分で書いた動画の上にさらに重ね塗りが出来たりもします。
この点が、従来のサイトと比較するとちょっと驚きかなって思います。
自分で言うのもあれですけど。

スクロールしていくと、Googleマップ上に赤い線が引かれていて、代々木駅からデザイン会社Q（キュー）さんの会社までのアクセスについても案内してくれます。
さらに下にいくと、会社概要、リクルート、コンタクトのページが表示されます。

そして、最後までいくと赤ペンがマウスから離れて、自動的に最終メッセージが流れてくるって演出になっています。実は、このメッセージはQさんの社長直筆の文字なんです。

さらにスクロールすると、1番最初に戻るという仕様になっています。

以上、Qさんのサイトについて一通り紹介させていただいたところで、今度は具体的な技術の話をしようと思います。
今回はCanvas（キャンバス）についてです。

 

Canvasとは？

まずは、簡単に「Canvasとは何ぞや」というをお話しさせていただきます。

Canvasとは、従来のHTMLとかCSSとは違い、Canvasの要素を主体にグラフを描けたり、Canvas要素で画像処理が出来たり、その他ビジュアライズが出来たりする仕様のことを言います。

元々はグラフや図形を描くために作られましたが、最近では、他にもいろんな演出に使われていて、その演出を利用することでもはや「リッチな演出には欠かせない」ものになっています。
Canvasを知らなかったという方は、ぜひ勉強してみてください。

 

Canvasのコアな話①～サイト上にペンで描く！

次に、Canvasのコアな話についてさせていただきます。
Qさんのサイトでは、赤ペンで書く演出を紹介させていただきましたが、これはHTML5のCanvasを使っています。

線を描く演出自体は、まずmousemoveで取得するマウス座標を、move toとかline toで結んで、線を作るっていう方法を使いました。
これは、実際には厳密には滑らかな線になっていなくて、実は線ががくがくしてるんですよ。
つまり、この時点ではmousemoveの点で結んだだけなんですね。

でも、やはりもっ「味のある線」を作りたいなと思いまして、先ほどの黒い点の中点、真ん中の点を補足して、真ん中の点から黒い点を軸にした2次ベジェ曲線で点を結びました。

黒い点の真ん中にある黄色い点が中点です。
その黄色い点から、黒い点をハンドルにして、2次ベジェ曲線で結んでいくという方法でこの演出を実現しています。

 

Canvasのコアな話②～ページ上どこにでも描ける！

先ほど紹介させて頂いた通り、Qさんの赤ペンの演出は「サイト上のどこにでも描ける」という点がこだわりです。

実際この演出をどうやって実現しているか、ということなのですが、実は、赤ペンでドラッグしている最中にすごい大きなCanvasがページのセクション全面に広がっているんです。

この赤く表示しているところが、赤ペンでドラッグしている最中のCanvasなんですけど、実は見えないところでCanvasがすごい広がっているんです。
それで、どこにでも描けるようになっているんですね。

さらに、こちらの右上と左下にある通りにmouse upして出来上がった動画は、その大きさに合わせたCanvasに縮めていることで、適切なサイズに収めることが可能となっています。

このようにして、Qさんのサイトでは「Canvasはページ上のどこにでも描ける」というのを実現したのです。

 

Canvasのコアな話③～丸を描くと動画が！

続きまして、丸を描くと丸の中に動画が出る、という演出の技術について解説させていただきます。

実は、この演出は、始点と終点が近ければどんな形でも可能なんですよ。
丸や四角だけじゃなくて、例えば細い形だったりしても、ちゃんと動画が出てくる仕様になっているんです。

中身の動画自体はQさんの社員さんに日々Tumblrで投稿していただき、それがそのまま更新されるようになっています。

これは、実は1つの動画につき2つのCanvasを使っています。
具体的にどのように動画を丸の中に出しているかと言いますと、mousemoveで取得できるマウスの座標群を配列で保持しておいて、その座標を裏側で結ぶ。
そして動画をクリップするための座標をとっておいて、動画をクリップするんです。
線の方は描き終わったら更新不要なので更新を止めます。
こうすることで、描き終わった瞬間からCanvasが2つになり、さらに動画の方だけ更新を続ける、というような実装となるんです。

実はこの仕様は、Canvas1つでも可能なんですが、2つに分けたほうが低負荷だったので、2つに分けて対応しました。

 

Canvasのコアな話④～スクロールで描かれる筆跡！

続きまして、「スクロールで描かれる筆跡」についてご説明します。

スクロールしていくと、スクロールに連動して赤ペンで描かれていくという演出に入ります。
こちらもCanvasを使用しています。

配列はこのような感じです。
先ほどのマウス座標群のように、文字を書くための座標群を裏側で保持しておいて、こちらをスクロール量に合わせて適切な量を結びます。
途中まで線が描かれるという演出や、最後まで描かれる演出を実現しております。
ちなみに、この座標群は手打ちで実際に作った訳ではなくて、裏側であるツールを使っております。

「社員さんの手書きメッセージ」というサムネイルにマウスオンすると、社員さんそれぞれのメッセージが出てきましが、これはさらにクリックすると社員さんそれぞれの詳細の説明ページに入ることができるようになっています。

この演出ですが、実際に社員さんの皆様に書いてもらって、その筆跡を再現したものです。

タッチペンだったりとかiPadだとかでメッセージを書いて頂くことでそれが実際に筆跡が流れるっていう演出になるわけです。

こうしてみると、単純にプログラムなんですけど、実はJSの配列が入ってます。
つまりJSの配列を生成するツールになっているんですね。
こちらのJSの配列を、管理画面の方にコピー&ペーストしてもらって、社員さんそれぞれのメッセージを表示していくという管理体制をとっています。

こうすることで、新しい方が入社されたりとか、退社される方がいらっしゃったりした場合でも、この管理ツールを使ってもらえたら、すぐにメッセージを追加したり削除したりできるわけですね。

 

Canvasのコアな話④～スクロールで描かれる筆跡！

実は、こちらのサイトには裏要素もあります。
星とパックマンを描くと、何かが起こるんです。

例えば、星を書くと、サイトが夜空になるっていう演出になっています。
さらには、パックマンを描くと、サイトを食い尽くすっていう演出が入っております。
実際は上手く描かないと出てこなこのような「ネタ要素」も含んでいます。
そこで、この機能をどういう風に実現しているかっていうご説明をさせていただきます。

実は、裏側で、表側で使わないようなちょっと太めの線で描かれた画像を用意しています。
星を描いたマウス座標を保持しているので、こちらの座標から先ほどの黒い画像に照らし合わせます。
そうすると、その座標で画像のピクセルが取れるので、そこが黒か白かを判定し、簡易的に画像類似度を算出しているというわけです。

その中で、今回のサイトの演出では試行錯誤の結果、このような簡易的な演出をしてみました。
画像類似度を正確に求めようとすると、かなり研究・学習させたアルゴリズムが必要なので、1エンジニアが数週間で実装できる分野ではありません。
このような演出はあくまで裏要素なので、めちゃくちゃ凝ったものを作るというよりかは、 ユーザー体験に合わせてまずは実現することが重要だと思っています。
そのような体験を実現できる仕組みはないかな、と考えて今回試行錯誤してみました。

お話は以上となります。
長い時間、ありがとうございました。

---

いかがでしたか？

アッと驚くサイトの演出は、裏側でこのような仕組みになっているのですね。
コーポレートサイトに限らず、「ユニークなサイトを作りたい」をお考えの方は
ぜひ今回紹介されたCanvasの活用法を参考にしてみてくださいね！