携帯電話向けサイトでのデザイン。

最近増えてきている凝ったデザインの携帯電話向けサイトを作る上で注意すべき事とHTMLのマークアップの方法について解説します。

初めにお断りしておきますが、デザインありきのマークアップと言う発想そのものが、HTMLの理念やマークアップ作法と言う観点からは好ましくないものです。

PC向けサイトでしたらCSSを用いれば造作ない事でも、端末の制約などから面倒且つ一見無意味なマークアップになってしまう事も多くなるでしょう。

携帯電話向けサイトを作るに当たって注意すべき点。

まだCSS非対応端末が多い事。

日本に於いて、携帯電話は最大手のエヌ・ティ・ティ・ドコモを除く全社がCSS対応端末のみ或いは殆どの端末をCSS対応端末としております。

しかし、最大手のドコモは平成21年 5月までCSS非対応端末(ｉモードブラウザ 1.0)のみ出しておりました。

  • 現行端末でなら、条件付きでXHTMLを使った場合には限定された状況でCSSが使えますが、使用出来るCSSは極めて小さな範囲に限定され、通常の使い方は先ず出来ません。詳しくはドコモ端末のXHTMLについてをご覧ください。

今日ではドコモからもCSS対応端末(ｉモードブラウザ 2.0)がリリースされておりますが、まだ並行してCSS非対応端末もリリースされ続けている事から、ドコモもCSS対応端末に完全に置き換わるのはまだまだ先の事と思われます。

このような理由から、CSSに対応していない端末がまだまだ多い事を忘れないでください。

  • 最も良い方法はCSSに対応していない端末でのデザインをすっぱり諦める事ですが、それでは要求する側(クライアント)はまず許してくれないでしょう。

CSSの実装に問題がある事。

携帯電話向けのブラウザでのCSSの実装には、まだまだ問題があります。

このため、余り木目細かなデザインを実現しようとすると崩れて大変な事になります。

  • 表示関連のスペックは端末毎に異なるため、余り細かな事はしない方が安全でしょう。下手に細かい事にこだわり過ぎると、ある端末では満足な表示となっても別の端末では不満が生じるかも知れませんから。

テーブル(表)のサポートの問題。

ドコモの携帯端末では横スクロールが出来ない事から、長く<table>要素を公式にはサポートしておりませんでした。

ですが、実は一番初めのｉモード端末(501iシリーズ)で既に<table>要素に対応はしていたのです。

ただ、横スクロール出来ない仕様のため、幅が大きくなり過ぎるとはみ出した部分が絶対に読めなくなってしまうため使えない事とされていただけなのです。

今日のドコモ端末では幅が大きくなり過ぎた場合には適宜縮小するなどしてはみ出さないように出来るようになったので<table>要素などがサポートされるようになりましたが、それはつい最近の事で、今もまだテーブル非対応端末が少なくなりつつあるとは言え残っております。

テーブルに対応していない端末では<table>要素などのタグは無視されると公式には言われておりますが、このように実は認識する端末も多いため、テーブル未サポートとされる端末でおかしな事になる恐れは否定出来ません。

  • 勿論、全くテーブルのタグを認識しない端末もあり得ます。

また、KDDI/沖縄セルラー端末では、テーブルの横幅が大きくなり過ぎると、テーブル関連のタグを無効にして表示しようとします。

そうすると、また問題が生じる事となるでしょう。

以上より、テーブル(表)を用いる場合には充分注意する必要があります。

  • このため、CSSの代わりにテーブルを用いる事は危険であると言えます。

尚、ドコモ端末でテーブルに対応していない事とされている端末は、ムーヴァ全機種, 2000番台のフォーマ全機種, 901iシリーズ, 701シリーズ及び一部の702シリーズです。

これらのユーザは平成21年11月現在もまだ意外に多いので注意してください。

フォントの問題。

携帯電話ではフォントの実装がまちまちであり、当然フォント名でフォントを指定すると言う訳にはいきません。

また、フォントのサイズはせいぜい三段階しかない事も忘れてはいけません。

加えて、ドコモのｉモードブラウザ 1.0端末など、斜体や太字での表示が出来ない端末も少なくありません。

言うまでもない事ですが…。

言うまでもない事ですが、ウェブサイト制作の理想的な形態は、

  1. HTMLでは文書構造のみに沿ってマークアップする
  2. デザインはHTMLのマークアップに合わせて適切にCSSで指定する

と言うものです。この方法ならマークアップもスムーズに出来るからです。

しかも、この方法で作ったサイトは、仮令CSSに対応していない端末で見ても、デザインこそ淡白ではあるものの可読性は充分に保証されたものとなります。

ですが、携帯電話ではCSS非対応端末のシェアがまだ高い現状から、このスマートな方法を採る事を依頼する側(クライアント)が認めてくれない場合もあるでしょう。

このため、一昔前の無理矢理表示方法をHTMLで縛るマークアップを使わざるを得ないと言う事もあります。

  • 個人的にはそのようなレガシィな手法を用いる場合であっても、CSSはやはり使えるなら使うべきだと思います。但しその場合、HTMLでのマークアップで実現したスタイルについても、CSSできちんと定義する必要があります。

ブラウザの実装を考慮してデザインするには。(平成21年11月11日 更新)

初めにお断りしておきますが、この項目で紹介している方法はどれもこれも好ましいものと言えません。

  • そもそも、デザインありきのマークアップ自体、好ましい事と言えません。

ですが、「どうしてもこのデザインでやってくれ」と要求された際にそれを実現せざるを得ない場合には已むを得ないかも知れません。

画像のマークアップ。(平成21年11月11日)

HTMLではしばしば行内に組込まれない<img>要素はリスト形式にしてマークアップします:

<ul class="images">
			    <li><img alt="堀北真希ちゃん&#xE68D;" src="Horikita.JPG" width="240" height="320" /></li>
			    </ul>

ですが、携帯電話の場合、CSSに対応している端末でさえCSSの実装が余り良くないため、表示位置の調整が巧く行きません。

このため、携帯電話向けサイトの場合は、無理にリスト形式にするよりも素直に<div>要素や(トランジッショナルHTMLでなら)<center>要素とした方がデザイン上は良いでしょう。

<div class="images" align="center">
			    <img alt="堀北真希ちゃん&#xE68D;" src="Horikita.JPG" width="240" height="320" />
			    </div>

背景画像。

ドコモのｉモードブラウザ 1.0端末でテーブル(表)に対応していない端末では<body>要素のbackground属性やCSSでのbackground-imageプロパティ(或いはbackgroundプロパティの画像に関連する値)が無効になりますので、可読性を損ねないような背景色を必ず指定してください。

  • この事は該当する端末が絶滅しても行うべき事です。

罫線として画像を用いる場合。(平成21年11月11日)

CSSが使える端末であれば、罫線に画像を用いる事は比較的簡単です。

ですが、まだCSS非対応端末が多い携帯電話に対応するには画像を<img>要素で埋め込むしか無いでしょう。

<center class="imageRule"><img alt="" src="Marguerite.GIF" width="100%" /></center>

ここで注意すべきなのは、携帯電話は画面の横ピクセル数が機種に依り様々である事です。

このため、<img>要素のwidth属性のみ 100% としておきます。

  • 勿論、左右に余白を与えたいのであればもう少し小さなパーセンテージにします。
  • HTMLの正確な仕様では定められておりませんが、width属性とheight属性のうち片方のみを指定している場合、<img>要素での画像埋め込みに対応しているウェブブラウザでは必ずと言って良いほどもう片方の値もそれに合わせて拡大縮小します。

画像とテキストを並べる場合。

いわゆるサムネールのような事をするには、以下の点に注意します。

CSSでもフローティングは出来ません
KDDI/沖縄セルラー端末に実装されているブラウザでは、floatプロパティがサポートされておりません。

ですから、<img>要素のalign属性で対処するしかありません。

HTMLでのフローティングにも制限があります
KDDI/沖縄セルラーでは、以下のような場合にはテキストの廻り込みはしません。
画像と後続テキストが異なるブロックレヴェル要素またはリスト項目要素にある場合
例えば、サムネールとして画像を<dt>要素, テキストを<dd>要素とした<dl>要素とした場合、<dd>要素のテキストは廻り込みせず画像の下に配置されてしまいます。
画像がリスト要素内にある場合
<ul>要素, <ol>要素或いは<dl>要素内にあると、<img>要素に与えたalign属性が無効になってしまいます。つまり、通常のテキスト行内に画像があるような表示となってしまいます。

詳しくは<img>要素のalign属性について(旧オープンウェーヴ社のXHTML モバイル・プロファイル)をご覧ください。

画像とテキストを完全に横に並べる事は無理です
フローティングの場合、後続テキストが長いと画像の下に入り切らなかった分が廻り込む事があります。

画像とテキストを完全に分離するには、テーブルレイアウトを使うしかありませんが、そうするとテーブル非対応機種で不具合が起こり得ます。

  • CSSのフローティングが使えれば、テーブル無しでそのような表示も可能なのですが、フローティングが使えない機種ではそれも出来ません。

ですから、画像とテキストを完全に横に並べるのは無理と諦めましょう。

以上を考慮すると、サムネールを実現するには以下のようにする必要があります。

リストにしない
リストにすると、KDDI/沖縄セルラー端末で画像に続くテキストの廻り込みをしなくなります。
画像とテキストは同じブロックに入れる
異なるブロックではやはりKDDI/沖縄セルラー端末で後続テキストの廻り込みをしてくれません。
<img>要素にalign属性を当てる
ドコモのCSS非対応端末は勿論、KDDI/沖縄セルラー端末もCSSではフローティングさせる事が出来ません。

HTMLとしては余りにも好ましくない代物ですが、以下のような形になるでしょう。

<div class="thumbnail">
			    <p>
			        <img alt="" src="Horikita.JPG" width="60" height="60" align="left" />
			        <a href="shop/Horikita.html">堀北真希</a><br />
			        DVD・写真集の他、非売品お宝も豊富！　お支払いは代引きまたはカードで！
			        <br clear="left"/>
			        </p>
			    <hr color="#cccccc" />
			    …
			    </div>

画像をマーカを用いたリスト。

CSSが使えれば、list-style-imageプロパティでマーカに画像を指定する事も出来るのですが、CSS非対応端末がある事実を考慮すると、リスト形式でのマークアップを諦めるか、CSS非対応端末でのマーカ画像表示を諦めるかの二つに一つしか無いでしょう。

出来れば後者が望ましいのですが、「CSS非対応端末でもマーカに画像を出せ」と言われた場合には以下のように<li>要素の代わりに冒頭にマーカを埋め込む<img>要素を内容にした<dt>要素から成る<dl>要素にでもせざるを得ないでしょう。

<dl>
			    <dt><img alt="" src="Note.GIF" width="16" height="16" /><a href="Notice.html">お知らせ</a></dt>
			    …
			    </dl>

尚、この場合、マーカがテキスト領域の左にはみ出すような表示にはなりません(list-style-position: inside に近い形になる)ので、その事も忘れないでおいてください。

テキスト左右への余白。

CSSが使えれば、marginプロパティを指定するだけですから造作でもありませんが、CSSに対応していないのであればどうしようもありません。

  • 流石に余白を取るのに<blockquote>要素とするのは問題がありすぎます。また、仮にそうしたとしても、適切な余白幅になっているかどうかも分かりません。

最もマシな対応策があるとすれば、width属性を与えた<table>要素としてそれを<center>要素の内容にするくらいでしょうか(テーブル非対応機種で不具合が起こるかも知れませんが)。

一番望ましいのは左右の余白はドコモ端末では出ないかも知れない事を依頼者側(クライアント)に理解していただく事です。

つまり、CSSに対応したKDDI/沖縄セルラーやソフトバンクなどではCSSで左右に余白を与え、ドコモのｉモードブラウザ 1.0端末では左右の余白は諦めると言う事です。

どうしてもと言うのであれば、以下のようにします。

<center>
			    <table width="220" border="0">
			        <tr>
			            <td>
			                (ここに本文を入れる)
			                </td>
			            </tr>
			        </table>
			    </center>

尚、今日の携帯電話は幅240ピクセルが主流なので幅220ピクセルにしておりますが、VGA液晶端末の場合はCSSのwidthプロパティで強制的に横幅を変更すればよいでしょう。

  • VGA液晶端末は全端末がCSS対応です。

枠線の扱い。(平成22年 1月11日 更新)

CSS非対応端末での枠線。

これもCSSが使えれば造作ない事ですが、どうしてもCSS非対応端末にも枠線をと言うのであればリスクはありますがテーブルを用いざるを得ないでしょう。

  • 当然ブロックレヴェル表示に限られます。

また、上下だけで良いのであれば、<hr>要素を擬似的に枠線ぽく見せると言う手もあります。この場合、以下のように枠線を引きたい要素の前後に記述する事となります。

<hr noshade="noshade" color="#ffdd00" size="2" />
				<h1 align="center"><font color="#009900">山吹色の擬似枠線を上下に引いた緑色の見出し</font></h1>
				<hr noshade="noshade" color="#ffdd00" size="2" />

実際問題としては、<hr>を用いる方法は、左右に枠線が引かれないと言う欠点があるものの、noshade属性を与える事で綺麗な枠線になるため、個人的にはこちらをお奨めしたいと思います。

  • テーブルの枠線は立体的に濃淡が付くため、そのようなデザインを意図しているのでない限り余り綺麗なものとなりません。
  • この方法はPCだと上下の罫線と要素の間の余白が離れ過ぎて見えるかも知れませんが、携帯電話の場合は程良く近付いたスタイルとなります。

尚、携帯電話向けのブラウザの場合、CSSの実装が甘くてCSSを用いてもインライン要素に枠線を引けない場合がありますので、ブロックレヴェル要素以外での枠線は期待しない方が良いでしょう。

枠線と背景色を双方使う場合。(平成22年 1月11日)

また、XHTMLで背景色を併用する場合は、余り綺麗な表示にならない場合があります。

例えば、

<div style="background: #fee; color: #c09; ">
				    <hr style="border: #907 solid; background: #907; "/>
				    <h1 style="text-align: center; ">見出し</h1>
				    <hr style="border: #907 solid; background: #907; "/>
				    </div>

と言うように、背景色を指定する<div>要素内に枠線となる<hr>要素を入れると、枠線の外にまで背景色が及んでしまいます。

逆に、

<hr style="border: #907 solid; background: #907; "/>
				<div style="background: #fee; color: #c09; ">
				    <h1 style="text-align: center; ">見出し</h1>
				    </div>
				<hr style="border: #907 solid; background: #907; "/>

と言うように、背景色を指定する<div>要素の前後に枠線となる<hr>要素を入れると、枠線の内側に背景色が及ばない隙間ができてしまいます。

ドコモのｉモードブラウザ 1.0端末ではこれも已むを得ないかも知れませんが、他社端末やドコモのブラウザ 2.0端末のようにCSSをきちんと扱える端末に対しては、CSSで、

div {
				    background: #fee;
				    color: #c09;
				    }

				div hr {
				    display: none;
				    }

				div h1 {
				    text-align: center;
				    border-top: solid 2px #907;
				    border-bottom: solid 2px #907;
				    }

と言うように枠線目的の<hr>要素を非表示にしてCSSで枠線を引いた方が良いでしょう。

  • 実際には style属性でのスタイル指定は、詳細度が高くなるため、外部CSSでのスタイル指定でプロパティの上書きが出来ない場合があります(端末が実装しているCSSの準拠規格がCSS第二水準(CSS 2)か、CSS第二水準第一改訂版(CSS 2.1)かで異なります)。ここでは、色などはHTMLでの指定と全く同じプロパティ値になっておりますが、この事から実際には効果は無いでしょう。

局所的な背景色変更。

これもCSSが使えれば造作ない事ですが、どうしてもCSS非対応端末でも背景色をと言うのであればリスクはありますがテーブルを用いざるを得ないでしょう。

  • 当然ブロックレヴェル表示に限られます。

また、XHTMLを用いれば、ドコモのｉモードブラウザ 1.0端末でも背景色を局所的に変えられますが、それには沢山の条件と制約があります。

フォント関連。

フォントに関しては端末の仕様のため、CSSでも無理な場合があります。

初めに述べた通り、

  • 大きさは三段階など限定されている事
  • 一部端末で太字や斜体の表示が出来ない事

から、諦めざるを得ないでしょう。

また、CSS対応端末でもインライン要素の枠線やパディングが効かない場合が多いので、余り凝った事はしない方が良いでしょう。

注意事項。

ここで述べた方法でマークアップした場合、XHTML モバイル・プロファイルの文書型を逸脱してしまう場合があります。

その場合でもXHTML 1.0 トランジッショナルの文書型には適合するでしょうが、.mobi ドメインの必須条件を満たさないため、問題が起こる恐れがあります。

  • 平成21年11月現在、XHTML モバイル・プロファイルに従っていないサイト用に運用している .mobi ドメインが剥奪されたと言う話は聞きませんが、違反したら剥奪される場合がある旨を表明している以上、リスクとして捉えておくべきでしょう。

まとめ。

CSSを使わないで強引にデザインを実現する方法は、CSSが普及するまではPC向けのサイトでも当たり前に用いられていたものですが、今日ではCSSの普及に依りそのような事をする者は殆どいなくなりました。

そもそも、HTMLでは表示の指定は原則として出来ない事としており、HTMLと別に表示を専門に扱う言語としてCSSが発案されたものです。

制作者もCSSでやった方がいろいろな面で良いと思うのですが、携帯電話は相変わらずCSS非対応端末が多くのシェアを持ち、その一方で凝ったデザインを求める方も増えて来ている事から、このような時代遅れの方法を採るのは已むを得ない事かも知れません。

もし、サイトをPHPやASPなどのサーヴァサイドウェブプログラムで配信しているのであれば、ドコモ端末だけHTMLを一部書換えて配信すると言うのも手でしょう。

  • また、XHTMLはXML応用言語ですので、サーヴァ側でXSLTが使えれば、ドコモ端末に対してはそれを用いてコンテンツを最適化すると言う手もあります。
  • 更に、サイトの配信サーヴァがアパッチサーヴァであれば、mod_rewrite を用いてドコモ端末に対してはHTMLを最適化するウェブプログラムで処理して配信する方法も考えられます。
  • ここだけの話しですが、ストリクトなHTMLを主張する向き(かつてW3C信者とかHTML原理主義者などと自称したり揶揄された向き)の中にはプロのウェブデザイナは殆どいません。実際、彼らがプロのウェブデザイナになったとしたら、お客と喧嘩ばかりになって商売にならないでしょう。
  • それにしても、とほほマークアップなんて何年振りにやっただろうか…。

しらぎくのウェブサイト作成入門サイトマップ