文字が動く! MARQUEEを効果的に使ったウェブサイトまとめ

文字が動く! MARQUEEを効果的に使ったウェブサイトまとめ

菊池良

菊池良

みなさん、こんにちは。菊池です。今年でインターネット歴15年になりました。

ずっと流行っては消えていくウェブサイトのトレンドを見てきたわけですが、今回は最近……どころか10年以上見ていない「MARQUEE」を使っているサイトをまとめてみました。

MARQUEEとは?
HTMLタグの一つ。このタグを指定すれば、ウェブサイト上で文章を右から左へとスクロールさせることができる。そのため、視点の位置を移動させずに読むことができて、とても便利でスタイリッシュ。かつモダーン。
しかし、悲しい哉、今ではほとんど使われていないロストテクノロジーの一種。

 

それではMARQUEEの世界を探訪してみましょう。

速読ウェブサービス

速読ウェブサービス

https://hitode909.appspot.com/speed_reading/

宮沢賢治の短編小説「ポラーノの広場」の冒頭が高速で流れてくるウェブサイト。何と今月公開されたばかりのサイトで、久々に見たMARQUEEに感動しました。

この早さで流れてくる文章を理解ができるようになれば、速読ができていることになります。

しかし、タイトルから想像するに、ポラーノという地方にある広場で何かが起こるのでしょう。小説で「何かが起こる」といえば、殺人事件。雨にも負けずやってきた風の又三郎が、注文の多い料理店に寄ったりしながら、「飛雄馬よ、あれが『よだかの星』だ」って感じなのでしょう。

MBSラジオ

MBSラジオ

https://www.mbs1179.com/

大阪のMBSラジオのウェブサイト。

右上の「聴くニュース」の部分がスクロールしており、最新ニュースをMARQUEEでキャッチすることができます。電光ニュースのような趣を再現していて、「そこにMARQUEEがあるから使った」ではなく、「目的から逆算してMARQUEEに至った」という稀有な例といえるでしょう。

少ないスペースに大量の情報を圧縮。それがMARQUEE。エコロジー時代のHTML。

三菱UFJ銀行

三菱東京UFJ銀行
https://www.bk.mufg.jp/

三菱東京UFJ銀行の公式サイト。「重要なお知らせ」の部分がスクロールしています。

ソースを確認したところ、正確にはMARQUEEではないのですが、文字が右から左に流れるという点において、MARQUEEの精神を継承していると言えます。

フィッシング詐欺への注意を換気する内容で、MARQUEEすることで訴求力がアップ。人は動いているものに自然と目が行ってしまうのです。夜空を通り過ぎる流れ星に魅入ってしまうように。

これからは犯罪抑止といえばMARQUEEです。

TVアニメ「健全ロボ ダイミダラー」

TVアニメ「健全ロボ ダイミダラー」

http://penguin-empire.com/

2014年4月から放映されるTVアニメ『健全ロボ ダイミダラー』のウェブサイト。様々な箇所がMARQUEEしております。

かつてネットに存在した「愛生会病院」のウェブサイトをオマージュしており、MARQUEEだけでなくアクセスカウンターや右クリック禁止、現在時刻の表示など多くのロストテクノロジーを再現。

どんなアニメなのかさっぱりわかりませんが、これが公式サイトだという事実に心が温まります。

愛の妖精ぷりんてぃん 公式ホームページ

愛の妖精ぷりんてぃん 公式ホームページ

http://www.takamagahara.com/printin/

未女子日女という方が作る「ぷりんてぃん」というキャラクターをメディア展開しているサイト。歌、アニメ、どきどきスマートフォンノベルなど、メディアミックスしています。

サイトを開くと自動でメッセージと音楽が流れ始め、増築に増築を重ねて果てしなく縦に長いウェブデザインはさながら九龍城かウィンチェスター・ミステリー・ハウスか。

その中でもやはりMARQUEEは使用されており、ここでは画像がスクロールしております。次々と新たな画像が登場する鮮やかな演出。まさに愛のMARQUEE。LOVE IS MARQUEE。

まとめ

いかがだったでしょうか? どれも良いMARQUEEしていましたね。

今では動きのあるウェブサイトは当たり前ですが、昔はMARQUEEしかありませんでした。

「こいつ……動くぞ!」

あのときの感動は永遠です。

ALL YOU NEED IS MARQUEE.

見えては消えていくMARQUEEたち。

時の流れが儚いように、MARQUEEの流れも儚い。

※本記事は2014年3月時点のものです。ご紹介したデザインと現在のデザインで異なる場合がございます。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

ここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入りますここにテキストが入ります

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL