携帯電話向けサイトでの<marquee>要素。
携帯電話向けウェブサイトで多用される<marquee>要素について、効果的な使い方と、実際の記述についての解説をします。
- <marquee>要素は本来は絶対に好ましくない要素とされており、携帯電話向けサイトでない限り使うべきものではありません。
<marquee>要素とは。
<marquee>要素の概要。
<marquee>要素とは、マイクロソフトがインターネットエクスプローラに実装した私的な要素で、内容のテキストが自動的にスクロールするブロックです。
- 私的な要素なのでブロックレヴェル要素かインライン要素かは決められておりませんが、ブロックレヴェル要素と同じような振る舞いをするのでここではブロックレヴェル要素と見なします。
好ましくない要素とされている<marquee>要素。
HTMLに於いては、<marquee>要素は同様にネットスケープ社がネットスケープ・ナヴィゲータに実装した<blink>要素(点滅テキストと言うインライン要素)とともに、絶対に好ましくない要素と非難されております。
その理由として、
- 動きのあるテキストを読めない閲覧者もいる
- 文字の流れが速過ぎて認識出来なくなる場合もある
- それなのに、文字の流れを止める方法が存在しない
と、アクセシビリティ上重大な問題を孕んでいると言うのが挙げられます。
- このため、PC向けのサイトでは<marquee>要素は絶対に使うべきではありません。
携帯電話向けサイトで多用される<marquee>要素。
しかし、日本の携帯電話向けサイトに於いては、<marquee>要素はしばしば多用されております。
その理由は以下のようなものでしょう。
- スクロールを自動的にしてくれるので、閲覧者の負担が軽減する
- 携帯端末でスクロール操作をするのは結構骨が折れるものです。
<marquee>要素なら自動的に文字がスクロールしてくれるので、閲覧者は面倒な操作をしないで済みます。
- その結果、ページ内の情報量を増やす事が出来る
- 「テキストが入り切らなければスクロールさせればいいじゃない」などと言う発想は携帯端末の閲覧者の事を却って配慮していないとさえ言えるでしょう。
- 実際、スクロールなしで見られる範囲だけで、スクロールして続きを読もうと思うか、そのページを見限って他のページに行こうとするかが決まります。
限られた領域で最大限に情報を詰め込むためには効果的な方策とも言えます。
加えて、日本の携帯電話は殆どがパケット通信を採用しており、時間単位で課金されるサーヴィスは今では存在しません。
そのような事からも、携帯電話向けのサイトでは<marquee>要素は便利な要素として用いられる事になるのです。
- こう言った事から、日本の携帯電話向けウェブ技術は、通常のそれとかけ離れたものとなりつつあります。
<marquee>要素を効果的に使うために。
<marquee>要素は、HTMLでは使ってはいけない要素とされているにも拘らず、携帯電話向けサイトでは有効な記述方法として使われております。
ですが、使い方を誤るとやはり逆効果になり兼ねません。
そこで、制作者が気付いた範囲で、拙い使い方を考えてみました。
- この辺りは制作者の感覚を基に書いているので、人に依っては違うと思われるかも知れません。
<marquee>要素を幾つも使わない。
<marquee>要素を何箇所にも用いていると、閲覧者の視点が混乱する事があります。
特に<marquee>要素が連続していると、それらの行が全て並んでスクロールしていくため、視点がぶれて閲覧者を混乱させてしまう恐れがあります。
- 端末に依ってはスクロールの時間を内容に合わせて調整するものもあるようで、その場合文字の流れがバラバラになって更にややこしい事になります。
<marquee>要素は一画面に見える範囲(十五行前後)に一箇所くらいに留めておくと良いでしょう。
内容は長くなり過ぎないようにする。
幾らスクロールなしで流れて行くとは言え、ダラダラと表示されていると閲覧者にストレスを与え、ひいては途中で逃げられてしまう恐れがあります。
どの程度の長さが良いかは具体的にはちょっと言えませんが、せいぜい二、三行くらいの長さに留めておいた方が良いでしょう。
また、<marquee>要素内に於いて、特に見てもらいたい重要なテキストは一行分の字数(十字前後)目くらいから始まるようにすると良いでしょう。
そうする事で、重要なテキストが右から現われると言うタイミングとなり、目を引き易くなるでしょう。
本文の途中では使わない。
目を引かせたいために文章の途中で<marquee>要素を用いる事もあるかも知れませんが、これも閲覧者の目を混乱させる恐れがあります。
或いは、スクロールして閲覧するような長めの本文の途中に<marquee>要素が入ると、そこでスクロールを止めさせられる事にストレスを感じる閲覧者も現われるかも知れません。或いはそこがスクロールしている事に気付かずにスクロールを続けてしまい、特に見てもらいたい箇所が読み落とされてしまう恐れもあります(特に流し読みをしている場合)。
<marquee>要素は見出しの前後などに用いると効果的でしょう。
<marquee>要素内にアンカーを入れない。
アンカーが勝手に動くと、選択したくても選択出来なくなる恐れがあります。
また、アンカーが途中から現われるようにした場合には、アンカーが現われるまで待ってもらえない場合もあります。
特に商品の申し込みページなど、制作者側にとっての最終目標となるページへのリンクは、クリックの可能性を大きく落とすリスクがあるので、絶対に<marquee>要素内に入れないようにしましょう。
<marquee>要素のマークアップに於ける技術的な注意点。
ドコモiモード向けXHTMLでは<marquee>要素の代わりにCSSで実現します。
エヌ・ティ・ティ・ドコモのiモードブラウザ 1.0端末で利用出来るiモード向けXHTMLでは、<marquee>要素を使う事が出来ません。
代わりに、style="display: -wap-marquee; " 属性を与えた<div>要素としなければなりません。
このプロパティは、KDDI/沖縄セルラーの端末に実装されている旧オープンウェーヴ社のモバイルブラウザでもサポートされております。
一方、ソフトバンクではこのプロパティは公式にはサポートされておりませんが、実際には問題なくスクロールしてくれます。
- 現在、ソフトバンク端末の大半はブラウザにドコモと同じネットフロントを採用しているため、動作するのは実は当然なのかも知れません。
- ウィルコムは正式に表明していませんが、やはりブラウザはネットフロントかオペラなので、同様に動作するでしょう(オペラも
display: -wap-marquee;をサポートしております)。 - イー・モバイルも非公式ですが、現在携帯電話型の端末はネットフロントを搭載しているので、やはり動作するでしょう。
具体的には、以下のようになります。
<div style="display: -wap-marquee; ">携帯端末やオペラではこの文字がスクロールします。</div>