Cruwが運営する塗り絵サイト「ぬりえ図鑑」で、トップページのイラストを「さわって遊べる」ものに作り変えました。色鉛筆を押すと絵の具が飛び散り、黒猫を続けて押すと隠しミニゲームが始まります。この記事では、どんな仕掛けを入れたのかと、作るときに気をつけたことを、実際の画面とあわせて紹介します。
ホームページに「見るだけではない楽しさ」を加えたい方の参考になればうれしいです。
目次
結論：トップページのイラストに「さわる楽しさ」を足しました
今回の変更をひとことで言うと、トップページの絵を「眺めるもの」から「さわって遊べるもの」にしたことです。
- いつもの動き：並木が風にゆれ、テントウムシがふわふわ飛び、ページを開くと色鉛筆が入ってきます
- さわると反応：色鉛筆・並木・車・テントウムシ・家やビル・黒猫が、それぞれ違う動きをします
- 隠しミニゲーム：黒猫を3回続けて押すと、白黒になった景色に色を戻す「塗り絵チャレンジ」が始まります
こうした仕掛けは、ぬりえ図鑑のような自社サービスだけでなく、会社やお店のホームページにも取り入れられます。後半で、取り入れるときの考え方も紹介します。
ぬりえ図鑑とは
ぬりえ図鑑は、「見て、塗って、学べる塗り絵」をコンセプトにした、無料で使える塗り絵のサイトです。虫・乗り物・恐竜・動物・花・食べ物・季節の行事など、たくさんのテーマの塗り絵を公開しています。
親子で楽しむ知育や、高齢者の方のレクリエーションなどで使っていただいています。塗り絵を探しに来た方が、トップページを開いた瞬間から「楽しそう」と感じられるように、今回のリニューアルを行いました。
さわると、いろいろなことが起こります
トップページのイラストは、場所ごとに違う反応をします。
| さわる所 | 起こること |
|---|---|
| 色鉛筆 | その色の絵の具が飛び散る |
| 並木 | 葉っぱがひらひら落ちてくる |
| 車 | 走り去って、反対側から戻ってくる |
| テントウムシ | 飛んで、別の場所にとまる |
| 家やビル | ぴょんと跳ねる |
| 黒猫 | 話しかけてくれる |
どこを押すと何が起こるかは、あえて説明しすぎないようにしています。いろいろな所を押してみて、反応を見つけること自体を楽しんでもらうためです。
隠しミニゲーム「塗り絵チャレンジ」
黒猫を3回続けて押すと、隠しミニゲーム「塗り絵チャレンジ」が始まります。
- 景色がいっせいに白黒の「塗り絵」の状態になります
- 20秒以内に、白黒になった絵をぜんぶタップして色を戻します
- クリアしたタイムは「今月のランキング」に登録されます
塗り絵のサイトらしく、「白黒の絵に色をぬる」ことそのものをゲームにしました。短い時間で気軽に遊べて、ランキングがあるので「もう一回」と繰り返し遊んでもらえる作りです。
作るときに気をつけたこと
見た目の楽しさだけでなく、「サイトとして使いやすいこと」を崩さないように、いくつか工夫をしています。
絵のある所だけ反応させる
イラストの部品は四角い画像なので、そのままだと絵のない透明な所を押しても反応してしまいます。たとえば、並木の画像の四角がビルに重なっていて、ビルを押したつもりが並木が反応する、ということが起こります。
そこで、部品ごとに「どこに絵があるか」のデータを用意し、押した点が本当に絵の上かを確かめてから反応させています。マウスのカーソルも、絵の上にあるときだけ指の形に変わります。
スマホでスクロールしようとしただけで動かない
スマホでは、イラストの上に指を置いてスクロールすることがよくあります。指が触れた瞬間に反応させると、スクロールしたいだけなのに車が走り出してしまいます。
そのため、指を離してタップが決まったとき（クリック）だけ反応するようにしています。
// 指が触れた瞬間（pointerdown）ではなく、タップが決まったとき（click）だけ反応させる
stage.addEventListener('click', (event) => {
const part = hitTest(event.clientX, event.clientY); // 押した点にある絵の部品
if (part) actions[part.role](part); // 部品ごとの動き
});
ページを重くしない
楽しい仕掛けでも、ページの表示が遅くなっては本末転倒です。
- ミニゲームのプログラムは、黒猫を3回押して遊び始めたときにだけ読み込みます。遊ばない方には、ゲームの分の読み込みが発生しません
- イラストが画面の外にあるあいだは、ゆれやふわふわの動きを止めています
動きが苦手な方への配慮
スマホやパソコンの設定で「視差効果を減らす（動きを減らす）」をオンにしている方には、並木のゆれなどのいつもの動きを止め、車が走る動きも短くしています。画面の動きで酔いやすい方もいるため、ホームページに動きを入れるときは大切にしている点です。
遊ばれ方を計測する
ミニゲームを始めた回数・クリアした回数・時間切れの回数を、アクセス解析で計測しています。どれくらい遊ばれているか、難しすぎないかを確かめて、今後の改善に活かします。
あなたのホームページにも「遊び心」を入れられます
今回のようなアニメーションやユーザーを楽しませる仕掛けは、会社やお店のホームページにも取り入れられます。たとえば、次のような使い方です。
- お店・商品のサイト：メインビジュアルの商品をタップすると、くるっと回ったり、おすすめの一言が出たりする
- 採用サイト：社員のイラストを押すと、仕事のひとことを話してくれる
- キャンペーンのページ：くじ引きや小さなゲームで、クーポンや特典を楽しく届ける
- 会社のホームページ：スクロールに合わせて、文字や写真が気持ちよく現れる
Cruwのホームページのトップでも、ヨットがマウスの動きを追いかけたり、湖の魚を釣ったりできる仕掛けを入れています。
取り入れるときは、「誰に、何を伝えるか」を先に決めることが大切です。仕掛けはあくまで、会社やサービスの魅力を伝えるための手段です。
- 伝えたいこと（サービスの特長や、会社の雰囲気）と合っているか
- 表示速度や、スマホでの操作のしやすさを損なっていないか
- 動きが苦手な方にも配慮できているか
この3つを確認しながら、ちょうどよい楽しさに仕上げていきます。
よくある質問
今あるホームページに、あとから追加できますか？
内容によりますが、多くの場合は可能です。WordPressで作られたサイトでも、メインビジュアルなど一部分だけに仕掛けを追加できます。まずは今のサイトを拝見して、無理のない方法をご提案します。
アニメーションを入れると、表示が遅くなりませんか？
作り方しだいです。ぬりえ図鑑のように、必要になったときだけ読み込む、画面の外では止める、といった工夫をすることで、表示速度への影響を抑えられます。
費用はどれくらいかかりますか？
仕掛けの内容や規模によって変わります。ご提案・お見積もりまでは無料ですので、「こんなことはできる？」という段階からお気軽にご相談ください。
まとめ
- ぬりえ図鑑のトップページのイラストを、さわると動き、隠しミニゲームも遊べるものにしました
- 絵のある所だけ反応させる、スマホのスクロールを邪魔しない、必要なときだけ読み込むなど、使いやすさを崩さない工夫をしています
- こうしたアニメーションや遊び心のある仕掛けは、会社やお店のホームページにも取り入れられます
「トップページをもっと印象に残るものにしたい」「サイトに楽しい仕掛けを入れてみたい」といったご相談も承っています。長野県上田市のCruwまで、お問い合わせからお気軽にご相談ください。ホームページ制作の進め方は、ホームページ制作のページでも紹介しています。
