スマホサイト構築時の意外な落とし穴 コーディングチェック編

日進月歩でますます熱気をおびるスマートフォン市場。

もはやスマートフォンに適したWebサイト制作は避けて通れないカテゴリであり、まだまだ完成されていない「ワクワク」が隠された未知のフィールドと言えるでしょう。iPhoneだけでなくAndroidも存在感を増してきた昨今、制作側はますますクロスプラットフォームなWeb制作の知識やノウハウが必要とされてきています。

まずは基本的なUIのガイドラインに則って、隅々まで自分の手と目で実機で動作確認をしてみましょう。ユーザーの立場になって、スムーズに操作できるインターフェースとなっているかをチェックすることが重要です。

▼指の大きさに合わせてタップ領域が広めにとってあるか？
▼背景画像が横向きも考慮して繰り返しできる仕様となっているか？
▼文章量が増えたときの画像崩れがおきないように想定してあるか？

1.折りたたみボタンがちゃんと実装できているか？
省スペース化をはかるおなじみの仕様。
ただし、一部分しか開かない、開閉の動きがイメージと違う等の事態を防止するために、様々なシーンを想定しながらひとつひとつ丁寧にチェックすることをオススメします。

2.オーバーレイ表示の誤動作はないか？
ポップアップメニューなどをオーバーレイで表示するとき、そのレイヤー下のボタンや画像にタッチできてしまうという不具合が発生する場合があります。ポップアップを使う場合は、表示領域以外もスクロールしてチェックを行いましょう。

3.フォーム入力はスムーズに行なえるか？
入力時にプレースホルダー属性が挿入されていたが、フォーカスしてもグレーの文字が消えない。また入力欄に最適なキーボードが表示されない。などの不具合を防ぐ為にフォーム入力完了までの実際の想定動作を検証する必要があります。

4.角丸タブの可変時表示
スマホサイトの特徴ともいうべきタブ。
両側が角丸のタブの場合、タブ数が変化した時に角丸でないタブが両側に来てしまわないようチェックしましょう。

5.動作イメージは共有できているか？
例えば「画像をスライドさせるとメニューボタンが連動する」とあっても言葉上では実際の動きをなかなかイメージしにくいものです。そのためワイヤー上で注釈を明記する、絵コンテやリファラサイトでイメージを共有することが必要です。

6.JavaScriptの最適化
案件によっては、JSファイルを一括管理することによって、不要な部分の読み込みで重くなったり、一部JSが表示されないなどの不具合が起こります。ページ容量を見つつ、ディレクトリを分割して管理することも頭に入れておきましょう。

7.対象ブラウザ、OSのチェック
標準のiPhone/mobile safari、Android/Webkitベースのブラウザが基本ですが、場合によってはFireFoxやOperamini、dolphinなども対象にあたるケースがあります。
また実際のプロジェクトに関わる方たちの端末チェックも忘れずに行ないましょう。

本番確認はやはり対象の実機で動作確認をすることが必須です。
弊社ではターゲット層や表示環境に合わせて、最初に対象端末とOSを絞り込んで設定し（例えばiPhone4(4.2),GalaxyS（2.2））確認を行ないます。フリーランスの方で、どうしても気になる端末は電気屋にかけこんで実機検証する方もいらっしゃるそうです。

ただし簡易的なデザイン確認や表示確認などでは、以下のシミュレータも有効です。

また、プレゼンや勉強会などで共有する場合には端末の画面をPC上に表示させてくれるソフトもあるようです。

いかがでしたでしょうか？

今回は「ディレクター目線」「コーディングチェック時」に絞ったチェックポイントだったのでやや欲求不満な方もいらっしゃるかもしれません。しかしここでチェック漏れが起きると大きなバグにつながったり、当初の仕様を見直す必要が生じる可能性があります。

大きな視野でひとつひとつ丁寧にチェック項目を洗い出し、ポイントをつかんで動作検証をする「鷹の目」を持つことがスマホサイト構築では重要になってくるでしょう。そこにはテクニカルな分野だけに限らない、ディレクターの視野の広さや想像力が大事な要素となってくるはずです。

これからも更に加速していくスマートフォン事情。家電とリンクしたり、電子決済の新しい形も見せてくれるスマートフォンからますます目が離せない、ディレクター国広がお届けしました。