高速・快適なWeb投票システムを作ったというお話

応募の仕組み：Googleフォームを活用

JIMAが主催した「インターネット・メディア・アワード」もそうであるように、Webで開催するコンテストやアワードの場合、広く作品を募集するための「応募」と、選考段階での「投票」と大きく2つの段階に分かれるのが一般的だ。

作品を募集するには何らかの形で応募フォームを用意する必要がある。世の中で広く使われているのは、誰でも容易にフォームが作れるGoogleフォームだろうし、自分としてもGoogleフォームがやはりお勧め。個人・企業問わず広く使われており、セキュリティも強い。今回の投票システム「Wonder Vote」でも応募部分には敢えて手を出さず、Googleフォームを使うことを推奨している。

ただ、Googleフォームを使う際に難点もある。それは応募ページのデザインがGoogleが作った押し着せのものになってしまい、独自性が出せない。応募数を稼ぐために、より見やすいデザインを…と気にする場合は、オリジナルの応募フォームをデザインしつつ、裏側の仕組みはGoogleフォームをそのまま活用することも可能なので、そうしたい場合はWonderwall-netにぜひご相談ください。

Googleフォームの情報から投票ページを自動生成

Googleフォームで応募されたエントリー情報は、Googleスプレッドシートに蓄積される。複数の人が同じサイトを応募した際の重複チェックなどでスプレッドシートの豊富な表計算機能が威力を発揮してくれるため、なかなか好都合だ。

Web作品の応募に当たって、どのような項目を入力してもらうかはアワードの性質によってまちまち。ただ、あまりに入力項目が多いと応募の意欲も削がれてしまうので最小限度に留めるのが良いだろう。では、投票判断や結果発表に欠かせない作品情報はどうすればよいだろう？　応募者にはサイトURLだけ入力してもらうとして、運営スタッフがいちいち手作業でサイトを調べては情報を整理するのだろうか？　いやいや、その手間は全くいらない。応募されたURLひとつあればHTMLに記述されたOGPタグやTwitterカード情報を読み取り、タイトル、説明文、サイト名、サムネイル画像までを自動取得することが可能なのだ。今回の「Wonder Vote」でもその機能を実装した。

こうしてスプレッドシート上に整理されたエントリー情報をもとにして、投票ページを生成する。アワードに部門が設定されている場合でも「Wonder Vote」は対応可能で、さらに「一部門につき3サイトまでに限る」など投票ルールがある場合も、それらをシステム内でロジック化して投票ページのUI操作に反映できる。

投票の仕組み：Gatsby JSで開発した投票システム

十分な応募作品が集まったら次は投票に向けた準備ということで、Webを介した投票システムが必要となる。作品を選考するというアワードにとって大事なフェイズなだけに、ここは心地よく投票してもらう配慮が行き届いた投票ページというのが欠かせない。

作品の数が多い場合の配慮は、さまざまなレベルで不可欠となる。応募作品数が多くなると投票ページの表示が遅くなったり、延々とスクロールが続いたりするわけだが、1）アクセスすると瞬時にページ表示されること。2）スマートフォンからでも快適に投票できること。この2つを実現すべく構築したのが「Wonder-Vote」というわけだ。

瞬時にページ生成、快適なページ表示

投票システムの開発にあたって表示するスピードも大切、開発するスピードも大切ということで、このブログで以前にも紹介した「Gatsby JS」で開発している。Gatsby JSはReactをベースにした静的サイトジェネレーターで、ちょうどこの記事を書いている日に新しいVer.3がリリースされたが、そこでも “faster for web devs”, “faster for site visitors”と謳われているように、とにかくあらゆるスピードを重視した開発環境だ。

これは余談だが、コンピュータの世界において過去から未来永劫まで「スピードが速い＝絶対的な正義」だが、普通の情報サイトやコーポレイト・サイトなどを作る際に、スピードというのは軽視されがちだ。理由は幾つかあるが、サイトを構築してページを表示するという段階の手前にある「情報そのものを作る」「ページ作成のために管理画面に登録する」といった人的作業が重く、費用も時間もかかる一方、ページを生成して表示するのは機械がやるものなので無頓着になりがち。UXにおいてスピードというのはかなりの幅を利かせているにも関わらず…だ。

「Wonder Vote」でGatsby JSを採用したのは、まさにそこを解決するためである。応募や投票のための情報の整理するという、重い人的作業を極力軽減するためにGoogleフォームとスプレッドシートを活用する。そしてGatsbyの最大の特徴だと考えている「さまざまなデータソースと接続しては、そこにあるデータを元にページ生成する」という利点を活かし、Googleスプレッドシートに溜まった応募作品の情報を瞬時に（だいたい10秒くらい）投票ページとして生成する。

スマートフォンから投票されるということは…？

さて、選考委員の方々は200以上の応募作品を前にして、じっくりと一つ一つのサイトを確認しながら何時間もかけて投票に挑むだろうか？　移動中や食事中にスマートフォンから投票ページへアクセスし「昨日はここまで見たな。昨日気に入ったサイトはどれだっけ」なんて思いながら細切れの時間の中で投票するというのが現実だろう。そうしたケースにおいて使いやすいシステムの要件を考えてみた。

まずスマートフォンやタブレットでも見やすく投票しやすいインターフェイスということで、一画面の中に必要十分な情報量だけを見せるように画面デザインを工夫した。そうすると投票ページのスクロール量が膨大になり、最後までスクロールされなくなりページの上部に掲載されたエントリーばかりが優位になるという初歩的な問題が発生する。

そこで今どこまでスクロールしたか、あとどれくらい残っているかを視覚的に把握できるユーザビリティに優れたUIを作った。技術的にはDOMの要素同士の交差（Intersection）を監視（Observe）するIntersection Observerで実現している。要はスクロールに応じて何か処理を行いたいときに便利はAPIである。

さらに、投票の途中でブラウザーを閉じても、それまで選んだ投票内容をCookieに保存して、次回アクセス時には自動で復元できるようにした。このように、ちょっと面倒な投票という行為のユーザー体験を向上させる配慮が随所に施されている。

百聞は一見に…ということで実際に触ってみよう

このブログ記事に訪れたみなさんに実際に触ってもらえる「Wonder Vote」のデモページを用意した。前述したように応募作品が一覧されているGoogleスプレッドシート、実際に使い勝手を試せる投票ページ、投票したものが蓄積されるGoogleスプレッドシートの3つを見てもらえるようになっている。

今回の「Wonder Vote」は、ラピッド開発を前提にしつつも汎用性の高いシステムになっていて、Googleフォーム連携以外でも、たとえばTwitterやInstagramのAPIと連携してSNSに投稿された写真のコンテストに「Wonder Vote」を使うといったことも可能になる。このシステムを見て何かピンと来た方は、ぜひお気軽にお問い合わせを。