他のケータイサイトのHTMLを参考にする際に便利な裏技
Tweet
本日は、ケータイサイトのHTMLを作成する際に便利な、Tips的なものをご紹介します。
ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。
たとえPCのブラウザから見たとしても、大手サイトはIPアドレスによる制限がかけられていて、ソースが見れるケースはまずありません。
ですので、HTMLがどのように作られているのかは、よくわからないことが多いと思います。
ご存じ「モバゲーTOWN」を例にご説明します。
例えば中央の点線や、「楽しもう」の上下の細い黒線は、どうやって書いているんでしょうか?
画面上から見ただけでは、正直よくわかりません。
そんな時に役立つのが、「画像を保存」機能です。
これを使えば、CSSで書かれているのか、画像なのかがわかります。
点線は画像でした
またスペーサー画像の位置もバッチリわかります。
中央にある緑のカーソルがあたった部分がスペーサー画像
モバゲーTOWNでは、トップページだけでも、10ヶ所以上ものスペーサー画像が使われていることがわかります。
(おそらくドコモ端末で、marginやpaddingが、効かないためだと思われます)
他ケータイサイトのデザインを参考にする際には、ぜひ活用してみてください。
関連:
- フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う!携帯サイトのフォーム設計ポイントとは」
- モバゲーのフレームワークがオープンソースとして公開されました
- ブックレビュー: 勝手サイト – 先駆者が明かすケータイビジネスの新機軸
最近の記事