Main menu

Shinya Kunihiro

クリエイティブディレクター
国広 信哉

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

スマホの波がやってきた!

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

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

さてロフトワークでも日々スマートフォンサイト制作のご依頼をいただき、「○○は実装できる?」「○○が表示されない!」と様々な壁を乗り越えながら制作に取り組んでいます。そんな制作プロセスの中で、コンセプトワーク、ワイヤー作成、デザインと一通りの仕様設計を経て、いざ動作確認ができる形であがってきた段階でひとつの疑問にぶちあたります。

「どこをポイントにチェックすればよいのだろう…?」
(みなさんもきっとあるはず!!)

そんな時に使えるチェックポイントを、今回は実際にご担当させて頂いた案件をベースに、(ディレクター目線で!)コーディングチェック時にしぼっていくつかご紹介させていただきたいと思います。

スマホならではの基本UIのチェック

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

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

スマートフォンサイト ベーシックUIガイドライン
基本UIのチェックについては、ベーシックUIガイドラインや その他参考サイト(ページ最下段にリンクあり) などをご参照ください。

実際にあったバグから学ぶチェックポイント

基本UIのチェック以外にも、様々なケースを想定して動作検証をしてみましょう。

回線の安定しない電車の中、細かい動作のしにくい移動中、縦横回転の多いベッドの上など…。画面上で"なんとなくOK"と思い込んでいる箇所に意外な落とし穴があったりします。

ここでは実際の案件の中で学んだ、気をつけておきたい7つのポイントをご紹介します。

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上に表示させてくれるソフトもあるようです。

ディレクターは鷹の目をもて!

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

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

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

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

コメント

blog comments powered by Disqus