ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

過去に何度か紹介させていただいたbeBitさんのユーザビリティ実践メモに、「離脱されない携帯サイトのフォーム作成術 」という記事が掲載されています。

→　beBit　ユーザビリティ実践メモ　離脱されない携帯サイトのフォーム作成術 [bebit.co.jp]

ケータイはPCに比べて文字入力などのが大変なため、よくユーザビリティを考えてサイトを作成しないと、利用者は途中で入力を諦めてしまいます。

この記事では、

1. フォーム入力例を適切な位置に配置する
2. フォームのページ数を減らす

という2点を重要なポイントとして紹介しています。

1つ目の「フォーム入力例を適切な位置に配置する」は、注意書きの位置についてのノウハウです。

ケータイは画面が狭く、更に上から下への目線移動のため、注意書きを下に配置しても気づかれないことが多いようです。
注意書きは、入力欄の上に配置したほうが良さそうです。

2つ目の「フォームのページ数を減らす」は、フォームと入力欄の配置についてです。

地下鉄など電波の不安定な場所での入力も想定して、度々読み込みが入るようなページの遷移は、極力控えた方がよいようです。

また、入力開始時の心理的負担を減らすため、最初のページの入力欄は少なめにするという例が紹介されています。

どちらもごく簡単に導入でき、今日からすぐ使えるテクニックですね。

フォームを作成する際には、ぜひ利用してみましょう。

関連：

• 携帯サイトでのユーザナビゲーションのコツ (beBit ユーザビリティ実践メモ)
• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」
• 画面メモを意識した携帯サイト制作 (beBit ユーザビリティ実践メモ)

はてぶのホットエントリーで見つけました。

デザインに優れたケータイ向けサイトを、キャプチャ画像付きで紹介しているサイトがありました。
これは素敵です。

→　case:MobileDesign!　モバイルサイトのデザイン [d.hatena.ne.jp]

どうやってキャプチャしているのか気になったのですが、コメント欄にその答えがありました。

1. PCからアクセスできるサイトは、PC上からUserAgentを偽装するなどしてキャプチャする
2. Flashのサイトの場合は、ソフトバンク端末で保存し、メール添付でPCに転送する
3. ケータイからのみのアクセス制限されているサイトは諦める

とのことです。

2の方法は知りませんでした。
ドコモやauでは出来ないのですが、ソフトバンク端末であれば可能とのことです。
参考になりますね。

ケータイサイト作成を行っている方はぜひ巡回ルートに入れたいサイトですね。

関連：

• ブックレビュー： モバイルユーザビリティ・デザイン
• ブックレビュー：携帯サイト コーディング&デザイン
• ThinkITでモバイルサイト制作特集が組まれています

本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。

もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。

まず問題となったのが、auでfloatが利かないことです。
では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。
なかなかやっかいです。

そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。

<img src="test.gif" style="float:left;" align="left" />
あいうえおかきくけこさしすせそたちつてと・・・

こちらの「style」と「align」の部分を変更しながら、きちんと回り込みが行われるかどうか、実機からの確認を行いました。

1. 「style=”float:left;”」のみ
2. 「align=”left”」のみ
3. 「style=”float:left;” align=”left”」の併記

結果は次のようになりました。

結局、両方を併記するほかないようです。
ソフトバンクはオールパスです。（PCも当然オールパスでした）

さて続いて、回り込みの解除です。

<br clear="all" style="clear:both;" />

のように書けばOKと思ったのですが、ドコモで解除が行われませんでした。

仕様を読んでみるとXHTMLでは、clearはブロック要素に書かなくてはならないとあります。
ですので、次のようにdivタグで書いてみました。

<div clear="all" style="clear:both;"></div>

※<div />という書き方は出来ないのでは、というご指摘をいただきましたので、修正しました。

ということでまとめとしては、次のように書けば3キャリアに対応した画像回り込み＆解除が行えるようです。

<img src="test.gif" style="float:left;" align="left" />
あいう
<div clear="all" style="clear:both;"></div>
えおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br />

きちんと表示されました。

関連：

• 他のケータイサイトのHTMLを参考にする際に便利な裏技
• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」

本日は、ケータイサイトのHTMLを作成する際に便利な、Tips的なものをご紹介します。

ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。
たとえPCのブラウザから見たとしても、大手サイトはIPアドレスによる制限がかけられていて、ソースが見れるケースはまずありません。

ですので、HTMLがどのように作られているのかは、よくわからないことが多いと思います。

ご存じ「モバゲーTOWN」を例にご説明します。

例えば中央の点線や、「楽しもう」の上下の細い黒線は、どうやって書いているんでしょうか？
画面上から見ただけでは、正直よくわかりません。

そんな時に役立つのが、「画像を保存」機能です。

これを使えば、CSSで書かれているのか、画像なのかがわかります。

点線は画像でした

またスペーサー画像の位置もバッチリわかります。

中央にある緑のカーソルがあたった部分がスペーサー画像

モバゲーTOWNでは、トップページだけでも、10ヶ所以上ものスペーサー画像が使われていることがわかります。
（おそらくドコモ端末で、marginやpaddingが、効かないためだと思われます）

他ケータイサイトのデザインを参考にする際には、ぜひ活用してみてください。

関連：

• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」
• モバゲーのフレームワークがオープンソースとして公開されました
• ブックレビュー： 勝手サイト – 先駆者が明かすケータイビジネスの新機軸