通勤時に『すみだ水族館でLOVE推しペン総選挙を開催中』という電車中吊り広告を見つけました。一言で言うとペンギン11羽の人気投票なのですが、仕事で投票サイトを作ったばかりなのでどんなサイトなのか気になって仕方がない。さっそく見てみたところ、これがとっても素晴らしくて釘付けになってしまいました。
せっかくなので、どこが素晴らしいのか自分なりに考えたのですが、最大のポイントはマーキー表示（電光掲示板のように文字列が右から左へ移動する、なつかしの表示方法）なのではないか、という結論に達しました。
マーキーが目立つ
マーキーはIE2.0で追加された拡張HTML属性。タグが廃止された現在はCSSでマーキーのような動きをつけようと思えばできます。今はあまり使われていないので記憶で書きますが、マーキーが設置されているサイトだと、文字がチラッチラッと流れているのが視界の隅の方でわかり、本文を読むのに集中できないと思ったことも何度か。が、これって、動きがあって目立つわけですよね。だったら大事なところに使えば効果的なのだな、と逆転の発想を感じたのが、推しペン総選挙のサイトでした。
大きなフォントサイズ（100px）でウィンドウ幅一杯に広がり、視界の隅でチラッチラッではなく、どーんと「超カンタン！投票のやりかた」が目に入ると、つい興味が湧いてきます。
マーキーの多用
また、マーキーが間隔をおいて4つも使われているのですが、出てくるたびに読んじゃうんですよ。最初の投票については目立つようにという理由かもしれませんが、それ以外に何故3つも使用したのか？それを考えてみます（勝手な推測です）。
投票以外の3つが使われているのが、11羽それぞれの紹介の箇所です。11羽…割り切れませんよね。11個のサムネイルを表示させるとしたらどうしますか？私なら、PCだと3列x4行で最後の1個はグレースケールのダミー画像でも入れておこうかな、どうせスマホだと1列11行の縦積みになるし、と考えがちです（ちょっとイージーですかね）。
スマホの場合に、ペンギンの画像が11羽連続で出てきてスクロールし続けられるのはコアなペンギンファンだけではないでしょうか。多分5羽あたりで飽きると思うのですが、6羽目の前にマーキーがどーんと登場するのです。そして9羽目の前にも。1羽目の前にエントリーペンギン紹介のマーキーが登場するので、11羽の紹介の途中で離脱させないための工夫なのではないかと思いました。
マーキーに釘付けになる工夫
話は変わりますが、新幹線の電光掲示板ニュースってつい見てしまいませんか？先日乗ったときもついつい見てしまってました。で、テキストの後に長めの空白があるとニュース終わりだな、と思いますよね。推しペン総選挙の場合は、マーキーに終わり感がないんですよ。気づくまでサイトを見て最終的にわかったのは、空白の短さなんですよ。
例えば、1つ目のマーキー「超カンタン！投票のやりかた」の後に空白が1文字分しかあいていなくて、すぐに同じテキストが流れてくるのです。だからボーッと眺めている間にマーキーが3巡するので（たぶん）、頭に入ってしまい、スクロールして読み進めようという気になるのかと。
それ以外にも
マーキー以外に以下も参考になりました。
- GIF画像を効果的に使う
- ラインマーカー風にテキストを強調させる
- トリビア、ABOUT的なものは最後の方に。バナーだけ表示して、見たい人だけ詳細をモーダルウィンドウで開く
- ステートメント的なものを最後にテキストだけで表示（ラインマーカーで強調して）
- メニューは使わない
- トップに戻るボタンにもかわいい工夫が
- エントリーナンバーのサイト上の配色にペンギンそれぞれの羽につけているバンドの色を使うというペンギン愛
すみだ水族館のLOVE推しペン総選挙のサイトは以下
http://www.sumida-aquarium.com/oshipen/
ちなみに私の推しペンはエントリーナンバー5のふうりん。猫背がびーに似てるから笑（Instagramでふうりんをフォローしようと思ったらページがなかった…推せない…涙）。
余談：
タイトル中の「ロストテクノロジー」という表記はこちらの記事から拝借しました。マーキーを使用したサイトが紹介されていてますが、なかなか見つけられなかったので助かりました。
追記2018/10/12：
マーキーを試してみたので、よかったら見てみてください。