muneto.murakami.biz Weblog

2009年は携帯サイト制作案件がドッと広がり、ビジュアルのしっかりしたサイトが当たり前になる感。
ビジュアル訴求といえばオールフラッシュサイトですが、、、はよっぽど考え抜いて作らないと、ユーザビリティ的に難しくなってしまうので、XHTML&CSSでどれだけビジュアル訴求できるかというところで・・・。

ざっくりとですが、最近見かけるようになった手法についてまとめます。

1. ここに架空のサイト「待カレ！」があります。トップページヘッダ部分はこのようになっていて、一枚の画像だとします。
   

   img1

2. 「待カレ！」オリジナルカレンダーが限定予約受付中だそうで、リンク先に申込みフォームがあるようです。この場合、一枚の画像全てにリンクのフォーカスがあたりますよね。
   

   img2

3. でも、解りやすく、「限定予約受付中！」の部分だけリンクフォーカスさせたいんです。
   

   img3

4. そんな時は以下のように画像を分けてXHTMLとCSSでガチコンします。
   

   img4

   

   img5

   上の画像（img4.gif width:250px height:230px)を背景に指定して、下の画像（img5.gif width:135px height:25px)をピクセル指定で配置することで[3]のような見せ方が可能になります。
   ソースは以下の通りです。

   <div style=" url(img4.gif) fixed no-repeat;width:250px;height:230px;">
<div style="text-align:center;padding-top:180px;padding-bottom:25px;">
<img src="img5.gif" width="135" height="25" alt="予約受付中だお！" / >
</div>
</div>

   内容はこんな感じです。

   • 最初のdivで背景となる画像を縦横サイズを指定して一個だけ配置します。
   • その中に、リンクさせたい画像を「padding-topとbottomと画像自体の縦サイズの合計ピクセル」が「背景画像の縦サイズとぴったりになるように調整」します。

これでauとsoftbankのQVGA端末では[3]のような見せ方が可能になります。
VGA端末やdocomoの件はまた後ほど・・・。

▼関連記事も是非ご覧くださいませー

• 【携帯サイト制作】第十回 ケータイサイトの検索フォームユーザビリティ
• 【携帯サイト制作】第十一回モバイルサイトの見出しを調整する。
• モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。
• 【携帯サイト制作】第十三回続ケータイサイトの検索フォームの件
• 16WEEK
• 【携帯サイト制作】第七回 auのソフトキーラベルについて
• 結婚祝い・誕生祝い・新居祝いにオーダーメイドほっこりギフト-ほっこ。
• Moleskine Sketchbook Large