※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22)
こんにちは、『プチペット』を担当している吉沢です。
Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。
そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。
それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。
携帯サイト年鑑2010
著者：津田 武
MdN(2010-07-01)
おすすめ度：
販売元：Amazon.co.jp
クチコミを見る
ケータイサイト解体新書 デザインパターンから理解する実装テクニック
著者：ホシナカズキ
ワークスコーポレーション(2010-06-26)
おすすめ度：
販売元：Amazon.co.jp
クチコミを見る
今回は、キャリアによって特徴のあるtableタグをうまく使って、画像を多用しなくても華やかに魅せる方法を紹介していきたいと思います。
まずは3キャリア、1ソース、XHTMLをベースに
＜Aタイプ＞
左カラムの「livedoorメニュー」の画像は、横幅を30pxで作っているのでtdのwidthに30pxを指定、右カラムはテキストが全角11文字が折り返されて表示されないように、tdのwidthは指定していません。
＜Bタイプ＞
１件の情報量が多いため、tableの横幅は100％で指定します。情報量が動的な場合は、それぞれのtdにvalignを指定して、要素の高さがそろうようにしてください。このサムネイルは横40pxで作っています。
＜Cタイプ＞
背景色のやまぶき色がポイントになるデザインでもあり、やまぶき色の範囲が多くなると目がチカチカする色でもあるので、tableのwidthを96%、cellspacingも多くとっています。
左カラムの画像は45pxで作成、右カラムのテキストは全角8文字程度でレイアウトしています。
＜Dタイプ＞
1pxの枠線は、Docomoでcellspacingが1px固定で空くことを生かした枠線なので、borderをゼロ以上に指定すると立体的な枠線で表示されてしまうのでご注意ください。
＜Eタイプ＞
こう見るとtableは制約が多く敷居が高そうに見えますが、特徴さえ覚えれば難しいことはありません。また、Docomoでtable非対応の端末があるのに、使うべきかどうかの判断も悩みどころですよね。
サイトのコンセプトやどこまでこだわるかによりますが、参考までに、月間12億PVあるケータイ livedoor調べでは、table対応端末の割合は99.2％、非対応の割合は0.8％と、ほぼtable対応端末で閲覧されているので、いろいろなサイトで利用しています。
開発やコーディングの工数軽減が期待できるiモードブラウザ2.0対応端末も、日々シェアが増えてきています。これもケータイ livedoor調べではありますが、iモードブラウザ1.0は74.5％、iモードブラウザ2.0は25.4％と、3割近くまで増えてきており、このまま増加し続けるとより精密なデザインでケータイサイトを作る日も近そうですね！
いかがでしたか？ ライブドアではモバイル業界の急速な流れこそワクワクを感じるディレクターを募集しています。
こんにちは、『プチペット』を担当している吉沢です。
Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。
そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。
それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。
携帯サイト年鑑2010著者：津田 武
MdN(2010-07-01)
おすすめ度：
販売元：Amazon.co.jp
クチコミを見る
ケータイサイト解体新書 デザインパターンから理解する実装テクニック著者：ホシナカズキ
ワークスコーポレーション(2010-06-26)
おすすめ度：
販売元：Amazon.co.jp
クチコミを見る
今回は、キャリアによって特徴のあるtableタグをうまく使って、画像を多用しなくても華やかに魅せる方法を紹介していきたいと思います。
まずは3キャリア、1ソース、XHTMLをベースに
tableの特徴を覚えましょう
- Docomoでtableが非対応の機種がある。900i、901i、700i、701iシリーズが非対応。非対応機種はtdで改行して表示される
- Docomo（iモードブラウザ1.0）はcellpaddingとcellspacingが1pxで固定される
- Docomoでフォントサイズをtableの外で指定すると反映されない。フォントサイズはtableの中で指定する
- tableタグを入れ子にすると入れ子にしたtableがauで表示されない端末がある。主にKCPが表示されない。KCP+とKCP3は表示されている感じ
- tableより大きい画像は、tableのサイズに合わせて縮小される端末や画像の大きさに合わせてtableが大きくなる端末があり、ケータイ画面より大きくなることはない
- tableのwidthは特に指定がなければ％で指定する。％で指定すると、VGA端末でもQVGA端末と同じ比率で表示することができるので、表示差異を軽減することができる
- table全体を任意の位置に寄せるとき、tableの外をalignで囲うとSoftBankで寄らない端末がある。tableにalignを指定し、tdがその影響を受ける端末もあるのでtdにもalignを指定する
- backgroundはDocomo (iモードブラウザ2.0) とauしか表示されない感じ
※iモードブラウザ2.0は2009年5月以降から発売された端末で、どの端末がiモードブラウザ1.0か2.0かを判別するには、こちらのUAのキャッシュが100か500かで判別することができます
tableの特徴以外で覚えておくと便利なこと
- tableを使わず、横70px以下の画像にテキストを回り込ませたとき、フォントサイズ小で全角10文字以内なら改行されずに表示される
- cellpaddingやcellspacingを２以上に指定したときは、上記を基準にして文字数を調整する
- 基本的に横240px×縦320〜350pxでデザイン＆レイアウトを考える。しかし、スクロールバーが表示される端末があるため、横-10px程度小さくしたときも気にしてあげると、クオリティの高いサイトを作ることができる
- フォントサイズは端末側で変更可能なため、絶対指定ができない。なのでフォントサイズを変更したとき、tableを使う使わないに限らず表示が崩れてしまう場合がある
※ケータイ livedoor調べでは、端末を買ってからフォントサイズを変更しない人が70％以上いるようです - 実機で表示確認するときは、フォントサイズをデフォルトにしてから確認する
- Docomoで、iモードブラウザ2.0に対応している端末は、application/xhtml+xml にしなくてもCSSが反映され、au・SoftBankと同等のCSSが使える
＜Aタイプ＞
左カラムより右カラムの情報量が多いときのレイアウト
◆ソース
<table border="0" cellpadding="1" cellspacing="1" width="95%" bgcolor="#ffffff" align="center">
<tr>
<td rowspan="10" valign="top" bgcolor="#d22326" width="30px"><img src="/img/ldmenu.gif" /></td>
<td bgcolor="#f6eaea" align="left"><a href=" "><span style="color:#2d89c3;">></span></a><span style="color:#d22326;">プロフ</span> Blogと連携しよ</td>
</tr>
<tr>
<td bgcolor="#f6eaea" align="left"><a href=" "><span style="color:#2d89c3;">></span></a><span style="color:#d22326;">小説</span> 17歳シングルマザー</td>
</tr>
・
・
・
</table>
※フォントサイズの指定はキャリアによって異なるのでここでは割愛<tr>
<td rowspan="10" valign="top" bgcolor="#d22326" width="30px"><img src="/img/ldmenu.gif" /></td>
<td bgcolor="#f6eaea" align="left"><a href=" "><span style="color:#2d89c3;">></span></a><span style="color:#d22326;">プロフ</span> Blogと連携しよ</td>
</tr>
<tr>
<td bgcolor="#f6eaea" align="left"><a href=" "><span style="color:#2d89c3;">></span></a><span style="color:#d22326;">小説</span> 17歳シングルマザー</td>
</tr>
・
・
・
</table>
◆デザイン＆コーディングのポイント
tableのwidthを95%で指定すると、QVGAでは画面の両サイドがそれぞれ7px前後空くのですっきり見え、上下にある情報と区別することができます。左カラムの「livedoorメニュー」の画像は、横幅を30pxで作っているのでtdのwidthに30pxを指定、右カラムはテキストが全角11文字が折り返されて表示されないように、tdのwidthは指定していません。
＜Bタイプ＞
タイトルと本文、画像などの情報があるときのレイアウト
◆ソース
<table width="100%" border="0" cellspacing="0" cellpadding="2px">
<tr>
<td width="20%" bgcolor="#b1ddf1" valign="top" rowspan="2">
2007<br />
04.04<br />
12:10<br />
<div style="text-align:center;"><img src=" " width="45" height="60" /></div>
</td>
<td bgcolor="#ffe62d">
<span style="color:#000000">今日は冷やし中華</span><br />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top">
今日から週ｲﾁで冷やし中華を食べよーっ。<br />
作るの簡単やし、野菜をいっぱい食べてる気もするから、なかなか健康的な感じとちゃうかしら。<br />
ﾀｸﾞ:<a href="">冷やし中華</a> <a href="">夏</a> <a href="">そうめん</a> <a href="">日記</a> <a href="">好きな食べ物</a><br />
<div style="text-align:right;">ｺﾒﾝﾄ[<a href=" ">2</a>]|<a href=" ">投稿</a></div>
</td>
</tr>
</table>
※フォントサイズの指定はキャリアによって異なるのでここでは割愛<tr>
<td width="20%" bgcolor="#b1ddf1" valign="top" rowspan="2">
2007<br />
04.04<br />
12:10<br />
<div style="text-align:center;"><img src=" " width="45" height="60" /></div>
</td>
<td bgcolor="#ffe62d">
<span style="color:#000000">今日は冷やし中華</span><br />
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top">
今日から週ｲﾁで冷やし中華を食べよーっ。<br />
作るの簡単やし、野菜をいっぱい食べてる気もするから、なかなか健康的な感じとちゃうかしら。<br />
ﾀｸﾞ:<a href="">冷やし中華</a> <a href="">夏</a> <a href="">そうめん</a> <a href="">日記</a> <a href="">好きな食べ物</a><br />
<div style="text-align:right;">ｺﾒﾝﾄ[<a href=" ">2</a>]|<a href=" ">投稿</a></div>
</td>
</tr>
</table>
◆デザイン＆コーディングのポイント
ブログや記事系の情報は、ケータイ画面の大きさから、画像にテキストを回り込ませるレイアウトが多く、どうしても単調になりがちです。ちょっと他とは違う魅せ方をしたいときに、こんなレイアウトはいかがでしょうか。１件の情報量が多いため、tableの横幅は100％で指定します。情報量が動的な場合は、それぞれのtdにvalignを指定して、要素の高さがそろうようにしてください。このサムネイルは横40pxで作っています。
＜Cタイプ＞
プロフィールや様々なステータス情報があるときのレイアウト
◆ソース
<table border="0" cellpadding="1" cellspacing="4" width="96%" bgcolor="#ffffff" align="center">
<tr>
<td rowspan="4" valign="top" width="45" bgcolor="#ffffff">
<img src=" " width="45" height="45" /><br />
<div style="text-align:right; background-color:#afafaf; color:#ffffff;">25</div>
<div style="text-align:right;">ﾀｯﾁ</div>
</td>
<td align="left" bgcolor="#ffed9b">
<span style="color:#999900;"></span><a href=" ">シール</a> 4<br />
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffed9b">
<span style="color:#1e81df;">★</span><a href=" ">リーダー</a> 0<br />
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffed9b">
<span style="color:#ff3300;"></span><a href=" ">ﾌｫﾛｰしてる</a> 32</span><br />
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffed9b">
<span style="color:#ff6666;"></span><a href=" ">ﾌｫﾛｰされてる</a> 25<br />
</td>
</tr>
<tr>
<td colspan="2" align="left" bgcolor="#ffffff">
<div style="text-align:center; color:#999999;">････････････････････</div>
<span style="color:#ff9900;"></span><a href=" ">自分のステータスをみる</a><br />
</td>
</tr>
</table>
※フォントサイズの指定はキャリアによって異なるのでここでは割愛<tr>
<td rowspan="4" valign="top" width="45" bgcolor="#ffffff">
<img src=" " width="45" height="45" /><br />
<div style="text-align:right; background-color:#afafaf; color:#ffffff;">25</div>
<div style="text-align:right;">ﾀｯﾁ</div>
</td>
<td align="left" bgcolor="#ffed9b">
<span style="color:#999900;"></span><a href=" ">シール</a> 4<br />
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffed9b">
<span style="color:#1e81df;">★</span><a href=" ">リーダー</a> 0<br />
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffed9b">
<span style="color:#ff3300;"></span><a href=" ">ﾌｫﾛｰしてる</a> 32</span><br />
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffed9b">
<span style="color:#ff6666;"></span><a href=" ">ﾌｫﾛｰされてる</a> 25<br />
</td>
</tr>
<tr>
<td colspan="2" align="left" bgcolor="#ffffff">
<div style="text-align:center; color:#999999;">････････････････････</div>
<span style="color:#ff9900;"></span><a href=" ">自分のステータスをみる</a><br />
</td>
</tr>
</table>
◆デザイン＆コーディングのポイント
プロフィール系の情報も、画像にテキストを回り込ませるレイアウトが多いため、名刺っぽいレイアウトに、罫線やtdで色分けして情報を分類しつつ、にぎやかに見えるようにしています。背景色のやまぶき色がポイントになるデザインでもあり、やまぶき色の範囲が多くなると目がチカチカする色でもあるので、tableのwidthを96%、cellspacingも多くとっています。
左カラムの画像は45pxで作成、右カラムのテキストは全角8文字程度でレイアウトしています。
＜Dタイプ＞
枠やボタン風で目立たせたいときのレイアウト
◆ソース (枠)
<table border="0" cellpadding="1" cellspacing="1" width="95%" bgcolor="#cc0000" align="center">
<tr bgcolor="#ffffff">
<td>
<form action="." method="GET">
<input type="text" name="q" size="12" value=" " /><input type="submit" value="検索" /><br />
</form>
<div style="text-align:center;">
TVで紹介!話題の注目ﾜｰﾄﾞ<br />
<a href=" ">ﾎﾀﾙﾉﾋｶﾘ2</a>|<a href=" ">舘ひろし</a>|<a href=" ">ｲﾁﾛｰ</a>|<a href=" ">ｳｫｰｸﾏﾝ</a><br />
</div>
<div style="text-align:center; background-color:#cc0000;"><a href=""><span style="color:#ffffff;">ﾌﾞﾛｸﾞ</span></a> <a href=""><span style="color:#ffffff;">画像</span></a> <a href=""><span style="color:#ffffff;">動画</span></a> <a href=""><span style="color:#ffffff;">うた</span></a> <a href=""><span style="color:#ffffff;">ｶﾃｺﾞﾘ</span></a></div>
</td>
</tr>
</table>
<tr bgcolor="#ffffff">
<td>
<form action="." method="GET">
<input type="text" name="q" size="12" value=" " /><input type="submit" value="検索" /><br />
</form>
<div style="text-align:center;">
TVで紹介!話題の注目ﾜｰﾄﾞ<br />
<a href=" ">ﾎﾀﾙﾉﾋｶﾘ2</a>|<a href=" ">舘ひろし</a>|<a href=" ">ｲﾁﾛｰ</a>|<a href=" ">ｳｫｰｸﾏﾝ</a><br />
</div>
<div style="text-align:center; background-color:#cc0000;"><a href=""><span style="color:#ffffff;">ﾌﾞﾛｸﾞ</span></a> <a href=""><span style="color:#ffffff;">画像</span></a> <a href=""><span style="color:#ffffff;">動画</span></a> <a href=""><span style="color:#ffffff;">うた</span></a> <a href=""><span style="color:#ffffff;">ｶﾃｺﾞﾘ</span></a></div>
</td>
</tr>
</table>
◆ソース (ボタン風)
<table border="0" cellpadding="2" cellspacing="2" width="96%" bgcolor="#e25100" align="center">
<tr bgcolor="#ffffff">
<td valign="middle" align="center" bgcolor="#ff5a00">
<a href=""><span style="color:#ffffff;"><span style="color:#ffcc00;"></span>タッチ/ｽﾎﾟｯﾄ検索</a></span><br />
</td>
</tr>
</table>
※フォントサイズの指定はキャリアによって異なるのでここでは割愛<tr bgcolor="#ffffff">
<td valign="middle" align="center" bgcolor="#ff5a00">
<a href=""><span style="color:#ffffff;"><span style="color:#ffcc00;"></span>タッチ/ｽﾎﾟｯﾄ検索</a></span><br />
</td>
</tr>
</table>
◆デザイン＆コーディングのポイント
目立たせたいリンクや上下の情報と差別化したいとき、１ページの容量を軽くするため、画像を使って装飾できないときにオススメです。1pxの枠線は、Docomoでcellspacingが1px固定で空くことを生かした枠線なので、borderをゼロ以上に指定すると立体的な枠線で表示されてしまうのでご注意ください。
＜Eタイプ＞
Docomo (iモードブラウザ1.0) でcellpaddingを1以上空けたり、枠線のmarginをピクセルでとりたいときのレイアウト
◆ソース
プログラムの記述が必要なのとソースが複雑になるため、ソースは割愛させていただきますが、tableで指定するときの考え方として、下記のようにtableを3つ入れ子にし、透過gifのサイズとtdのwidthまたはheightのサイズをピクセル指定して、cellpaddingが1以上空いてる風に表示することができます。tableのwidthはすべて100％で指定します。◆実装するための補足や注意点など
- 3キャリア1ソースで再現することは難しい
- iモードブラウザ1.0対応機種のみに表示、それ以外のキャリアに表示 (iモードブラウザ2.0とauとSoftBank) と切り分けて表示できるようなプログラムが必要
- iモードブラウザ1.0にはtableで指定し、それ以外にはCSSのボックスで指定する
- cellpaddingが1px固定で指定されてしまうことから、ピクセル指定するときの値に下記のような工夫が必要
- 内側の余白を5px以上にしたいとき、透過gifのサイズを1pxずつ増やしていく
- 内側の余白を3〜4pxにしたいとき、2つめのtableを表示する
- 内側の余白を0〜2pxにしたいとき、2つめのtableを削除して3つめのtableに枠線を指定する
- 外側の余白も内側と同じように指定する
◆デザイン＆コーディングのポイント
余白を好む若年層向けサイト、余白までデザインにこだわったサイトにオススメですが、ソースが複雑になるため運用に向きませんが、こういうこともできますよということでご紹介させていただきました。こう見るとtableは制約が多く敷居が高そうに見えますが、特徴さえ覚えれば難しいことはありません。また、Docomoでtable非対応の端末があるのに、使うべきかどうかの判断も悩みどころですよね。
サイトのコンセプトやどこまでこだわるかによりますが、参考までに、月間12億PVあるケータイ livedoor調べでは、table対応端末の割合は99.2％、非対応の割合は0.8％と、ほぼtable対応端末で閲覧されているので、いろいろなサイトで利用しています。
開発やコーディングの工数軽減が期待できるiモードブラウザ2.0対応端末も、日々シェアが増えてきています。これもケータイ livedoor調べではありますが、iモードブラウザ1.0は74.5％、iモードブラウザ2.0は25.4％と、3割近くまで増えてきており、このまま増加し続けるとより精密なデザインでケータイサイトを作る日も近そうですね！
いかがでしたか？ ライブドアではモバイル業界の急速な流れこそワクワクを感じるディレクターを募集しています。
コメント
コメント一覧 (1)
及ばずながら、記事からリンクさせていただきました。