ここでは、ラウンドアバウトでの特長が分かり、おそらく他のソリューションでは機種毎に見え方異なるだろう、シンプルでプレーンなhtmlを提示します。製品検討時には、是非こちらを試してみてください。
①画像メニュー ... 画像を横並びにしたソースです
●HTML
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta name="disparea" content="vga" />
<title>画像メニュー</title>
</head>
<body>
<br />
<a href=""><img src="tab01.gif" alt="MEN" /></a>
<a href=""><img src="tab02.gif" alt="WOMEN" /></a>
<a href=""><img src="tab03.gif" alt="KIDS" /></a>
<a href=""><img src="tab04.gif" alt="BABY" /></a>
<a href=""><img src="tab05.gif" alt="HOME" /></a>
</body>
</html>●画像（au G9 横幅233px ）
②画像アイコンリスト ... 単純に「画像＋文字」が並んだだけのソースです
●HTML
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta name="disparea" content="vga" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>画像ｱｲｺﾝﾘｽﾄ</title>
</head>
<body>
<img class="icon" src="img01.jpg" /><a href="">ﾌﾗｲﾊﾟﾝ</a><br />
<img class="icon" src="img02.jpg" /><a href="">両手鍋</a><br />
<img class="icon" src="img03.jpg" /><a href="">調理器具</a><br />
<img class="icon" src="img04.jpg" /><a href="">やかん･ﾎﾟｯﾄ</a><br />
</body>
</html>
●CSS.icon{
margin-top:5px;
margin-left:15px;
margin-right:5px;
}
●画像（docomo N905i 横幅240px ）
③画像多用 ... 画像をいくつも並べたソースです
●HTML
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta name="disparea" content="vga" /> <title>画像多用</title> </head> <body> <img src="a.jpg" alt="a" /><br /> <img src="b.jpg" alt="b" /><img src="c.jpg" alt="c" /><br /> <img src="d.jpg" alt="d" /><img src="e.jpg" alt="e" /><img src="f.jpg" alt="f" /><br /> </body> </html>
●画像（docomo N905i 横幅240px ）
④装飾テキスト ... テキスト色や背景色、マーキー、絵文字などテキスト装飾を入れたソースです
●HTML
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>装飾ﾃｷｽﾄ</title>
</head>
<body>
<marquee>ﾏｰｷｰするﾃｷｽﾄ</marquee>
<img localsrc="44" />
<div class="contents">
<div class="heading">
見出し1
</div>
ｺﾝﾃﾝﾂ1<br />
<br />
<blink>点滅ﾃｷｽﾄ</blink><br />
©SYMM
</div>
</body>
</html>
●CSS
.contents{
background-color:#EBEBEB;
color:#000000;
}
.heading{
background-color:#5D77F2;
color:#E9EDFF;
}
●画像（softbank 932SH 横幅480px ）
どれも簡単なソースで画像も１種類しか用意していません。機種によってデザインが違っていたり、崩れたり、バランスが悪くなっていないか、容量エラーを起こさないかがポイントです。②④ではCCSが使えるので、htmlがすっきりしていることが分かると思います。画像重視のラウンドアバウトですが、④のソースのシンプルさを見れば、テキストについても大きなアドバンテージがあることが分かります。
コンテンツ開発・運用の負担を減らすには、単に３キャリアが１ソースになる、というだけでは不十分です。なぜなら、携帯コンテンツは、
- １キャリアであっても機種違いによる仕様調整が必要
- １機種であっても容量制限がある
であり、単に１ソースになっても上記の制限から開放される訳ではありません。ラウンドアバウトは、この制約を取り払い、そもそも携帯コンテンツとしてもっとも厄介な問題を取り除きます。このことから他ソリューションとは桁違いの（高い表現力を実現しながら）コスト軽減が可能なのです。
なお、こちらのソース・画像一式はホームページよりダウンロード可能にする予定です。
こちらからダウンロードできるようになりました（9/24）。
よくわかる比較コンテンツ
0 コメント:
コメントを投稿