paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

ゲーミフィケーションを超簡単に導入!ウィジェットアプリを誰でも作成できる「HoverSignal」を使ってみた!

f:id:paiza:20190515110502p:plain
どうも、まさとらん(@0310lan)です!

今回は、簡単にゲーミフィケーションを取り入れたウィジェットを作成して、ユーザーの行動を促すことができるWebサービスをご紹介します!

ブラウザ上でグラフィカルなエディタを使いながら、マウス操作だけで簡単にカスタマイズできるので、エンジニアだけでなくデザイナーやプログラミング初心者の方でもすぐに作業できるのが特徴です。

ECショップだけでなく個人ブログなどへも簡単に導入できるので、ご興味ある方はぜひ参考にしてみてください!

HoverSignal

f:id:paiza:20190515110554p:plain
 

■「HoverSignal」の使い方

それでは、まず最初にサービスの利用方法について見ていきましょう!

トップページの画面上部にあるユーザー登録用のボタンをクリックします。

f:id:paiza:20190515110623p:plain


登録用のフォームが表示されるので、メールアドレス・パスワードを設定しましょう。

f:id:paiza:20190515110642p:plain

注意点として、フォームの一番最初にWebサイトのURLを入力する項目があります。ここには今回ご紹介するHoverSignalを利用したいWebサイトを指定するようにしてください。


ユーザー登録が完了すると自分のダッシュボードが表示されるので、【Install Code】タブを選択して埋め込みコードをコピーします。

f:id:paiza:20190515111124p:plain


コピーしたコードは、HTML内のheadタグ末尾に挿入しておきましょう!

f:id:paiza:20190515111139p:plain


もう一度HoverSignalの画面に戻ると、挿入したコードが受信できていることが分かります。

f:id:paiza:20190515111151p:plain

(※受信できていない場合は対象のWebサイトを更新してみましょう)

ここまでの作業でHoverSignalを使うための準備はすべて完了です。

それでは、インタラクティブなウィジェットを次の章から作成していきましょう!

■「スクラッチくじ」風のウィジェットを作ってみよう!

実際にHoverSignalを利用したサンプル事例として、試しにスクラッチくじのようなウィジェットアプリを作ってみましょう!

マウスやタッチ操作で隠れている部分を削ってアイテムを当てるというものです。

f:id:paiza:20190515111213p:plain

当選アイテムとしてオリジナルのクーポンを作成したり、ユーザーのメールアドレスを収集する機能などもあります。


作り方としては、まず【My apps】タブから【Lucky Lottery】を選択します。

f:id:paiza:20190515111226p:plain


新規ウィジェットを作成したいので【+Add】ボタンをクリックします。

f:id:paiza:20190515111251p:plain


テンプレートが表示されるので、好きなものを選んで【Add】ボタンをクリックします。

f:id:paiza:20190515111300p:plain


次に、【Edit】ボタンをクリックしましょう。

f:id:paiza:20190515111316p:plain


ウィジェットの編集エディタが表示されます!

f:id:paiza:20190515111330p:plain

【Design】タブでは、テーマカラーを好きな色に変更することができます。


【Trigger】タブはアイコン画像を変更したり、ウィジェットをWebサイトのどのあたりに出現させたいかを決めることができます。

f:id:paiza:20190515111342p:plain


【Text】タブは、英語表記になっている部分を日本語に置き換えることができます!

f:id:paiza:20190515111352p:plain

これにより、海外サービスなのですが日本人向けのWebサイトにも活用できるでしょう。

他にも、オリジナルのクーポンを生成したり、特定のWebページのみに表示させるような細かい調整もおこなえるので便利です。


最後に、ダッシュボードに戻って【Lucky Lottery】のスイッチがONになっていることを確認しましょう。

f:id:paiza:20190515111441p:plain


自分のWebサイトを訪問してみると、さきほど作成したウィジェットが表示されるのが分かります!

f:id:paiza:20190515111508p:plain

このようにとても簡単な手順でウィジェットを作成できるので、ECショップや企業サイトだけでなく個人のブログに組み込んでみるのも面白いかもしれませんね。

■「宝探しゲーム」をWebサイトに組み込んでみよう!

今度はWebページに「宝探しゲーム」のようなウィジェットを組み込んでみましょう!

このウィジェットは、Webサイトにランダムで出現するアイコンをクリックすることで収集できるようになっており、3つ集めるとアイテムをゲットできるという仕組みになっています。

作り方は先ほどのスクラッチくじと同様で、【My apps】タブから【Easter Eggs】を選択します。

f:id:paiza:20190515111658p:plain


編集用エディタの【Design】タブでは、テンプレートを変更したりテーマカラーを好きな色に変えられます。

f:id:paiza:20190515111709p:plain


【Trigger】タブからWebページのどこにアイコンを出現させるかを設定することができます。

f:id:paiza:20190515111720p:plain

複数の場所を選択することで、ランダムな場所にアイコンが出現するようになるのでオススメです。

また、設定オプションから任意のWebページに対して、アイコンが出現する確率を調整することも可能です。


設定が完了したらWebサイトを訪問してみましょう。画面のどこかにウィジェットのアイコンが現れるはずです!

f:id:paiza:20190515111732p:plain


クリックするとコレクションできて、あと何個集めればアイテムをゲットできるのか分かるようになっています。

f:id:paiza:20190515111805p:plain

最終的に3つ集めることができたら、メールアドレスを入力してアイテムをゲットできる仕組みです。


ちなみに、ここで収集したメールアドレスはダッシュボードから確認することができます。

f:id:paiza:20190515111828p:plain

(※他のウィジェットにも同様な機能があります)

■その他、便利な機能について

HoverSignalにはウィジェットをより効果的に利用できる機能をはじめ、さまざまな便利ツールも搭載されているのでいくつかご紹介しておきます。

たとえば、通知ボックスを簡単にWebページへ組み込める機能があります。

f:id:paiza:20190515111850p:plain

ユーザーがWebページを見ているときに、任意のタイミングで通知を挿入し、何らかの行動を促すことができるわけです。テキストや数値などは自由にカスタマイズできます。


また、さまざまなWebサービスとの連携ができるのも特徴の1つでしょう。

f:id:paiza:20190515111903p:plain

たとえば、Googleアナリティクスと連携することで、コンバージョン率や細かいユーザーの行動を分析できるようになります。


開発者向けにAPIも公開されているので、独自のWebサービスにも組み込みやすいです。

f:id:paiza:20190515111917p:plain

さらにJavaScriptライブラリも公開されており、ウィジェットの挙動なども含めて通信を制御して高度なカスタマイズが可能です。

JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。


<参考リンク>

 

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、誰でも簡単にWebサイトへゲーミフィケーションを取り入れたウィジェットを組み込めるサービスをご紹介しました。

ウィジェットを組み込めるサービスはいくつかありますが、ゲーミフィケーションを取り入れた機能を無料で提供してくれるのは珍しく、他の競合サービスはあまり見たことがありません。

いずれのウィジェットもユーザーの行動を促すという点では効果的だと思いますので、ご興味ある方はぜひ試してみてください!


<参考リンク>

 




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud