利用APIs

楽天商品ランキングAPI(+Rakuten Web Service PHP SDK)
ケイコとマナブ.net通信講座 講座検索API
Facebook Dialogs, Facebook Social Plugins
Twitter API

担当分野

Programming & Writing … ショコシス姉
Design & Testing … ショコシス妹(design maf)

特徴

楽天市場さんの商品ランキング情報を、「商品を並び替えるというユーザー・インターラクションによって、ユーザーの商品ランキング情報に対する認知度が診断出来るツール」にしてしまうという、全く新しい視点で利用しています。ただ単に、順位を見ただけでは、脳は学習しません。が、しかし、並び替え作業を行うことで、各商品の名前や、人気ランキングの順位が、しっかりと頭に入ってきます。また、ユーザーに楽しんでもらいながら、同時に、各商品への興味や購買意欲を持ってもらうことも出来ます。
ユーザー・インターラクションをより効果的に活用する為に、Twitter及び、Facebookによる、診断結果のシェア機能も取り入れました。他にも、診断結果とは連動していないコメント投稿機能を、ページ下部に実装しています。
また、すべての応募作品に共通する特徴として、より多くのインターネットユーザーの皆さんに利用していただける様にと、PCやタブレット、スマートフォン(注…今後の課題参照)といった、画面サイズの異なるデバイスに一つのデザインで対応させる、レスポンシブデザインで作成しています。
広告例としては、検定にちなみ、資格取得の為の通信講座情報を、ランダムに表示させてみました。

使い方

DEMOページ上で、「使い方ボタン」をクリックすると、下記、説明が表示されます。
１．年代と性別を選択後、「上位5商品を表示」ボタンをクリックします。(初期画面では、全ての年齢と性別を対象としたランキングの結果が表示されています。)
２．各商品が表示されている枠をドラッグ＆ドロップして(マウスのボタンを枠内で押し、そのままの状態でマウスを移動させ、希望の場所でマウスのボタンを離して)移動させ、正しいランキングだと思う順番に並べ替えます。
３．商品列の下にある「ヒントを表示」をクリックすると、正しい順位にある商品の右端に、正解ハンコが表示されます。(なるべくヒントを使わず、正しい順番への並び替えにチャレンジしてみて下さい。)
４．「順位をチラッと」をクリックすると、正しい順位が3秒間だけ表示されます。
５．「成績チェック」ボタンをクリックすると、あなたのレベルを認定する診断結果が表示されます。また、同時に、TwitterとFacebookで診断結果をシェアする為のボタンも表示されます。
６．気が向いたら、ページ下にあるFacebookのコメントフォームやTwitterフォームから、診断結果にかかわらず、この検定の感想等を、自由に発信してみて下さい。
注意…この通販ランキング検定の結果は、特に何かに使えるワケではありません。(汗)たぶん、きっと、おそらく、高レベルの認定を受けても、誰にも自慢出来ないと思います。何の特典もありません。(謝)なので、低レベルの認定を受けたからと言って、落ち込む必要も全くありません！(励)深く考えず、気軽に、楽しみながら、今人気の通販商品について知っていただけたらなぁ～と思って作った検定なので、その旨、どうぞご理解下さいませませ。(発案者：ショコラシスターズ姉　←　ちなみに、この発案者、頻繁に、全問不正解を繰り返してます。時代に後れる浦島花子と呼んでやって下さい。笑)

拡張機能

どんなランキングAPIにも応用が可能です。(例：人気宿ランキングや、カテゴリー指定による商品ランキング等。)
広告は、診断結果に基づいて変動する広告が表示されるように設定しても、面白いかと思います。

今後の課題

スマートフォンでの利用も可能ですが、練習というか、若干、コツが必要なようです。また、小さな画面では、商品の並び替えが難しいだけでなく、3秒間だけちらっと表示されるヒントを参照するには、超高速でスクロールする必要があります。各デバイスで、スムーズな動きを実装する為には、まだまだ改良の余地がありそうです。追記：スマートフォンで並び替えを行うと、動かした枠内の商品情報が消えるというバグの報告を受けています。