2018年4月22日(日) 17:14 JST

Mobile Web Best Practice

原文は英語です。長いな^^;
日本の携帯では無理なことも結構ありますね。
参考にしたのはこちら↓。
http://www.odysseygate.com/archives/664

1.[テーマの一貫性] あるURLにアクセスして得られるコンテンツは、異なるデバイス(PCでもケータイでも)でアクセスしてもテーマ上一貫性のあるものであること。

2.[ブラウザ性能] 洗練されたユーザ体験を提供するべく、デバイスの性能を十分に引き出すこと。

3.[不完全性] (デバイスの)不完全な実装に対して程よい対処策をとること。

4.[試験] エミュレータと同様に(デバイスの)実機でもテストを実行すること。

5.[URI] (ケータイで長いURIを打つのは大変なので)URIは短めに。

6.[ナビバー] ページのトップに置くナビゲーションは最低限に止めること。

7.[バランス] ページに膨大な量のリンクがあると、ユーザは見たいもの(コンテンツ)にたどり着くまでに膨大な量のリンクをスクロールしないといけなくなる。このトレードオフを十分に考慮すること。

8.[ナビゲーション] 一貫したナビゲーションを用いること。(そうすればユーザはそのサイトのナビゲーションの仕組みを用意に理解できる)

9.[アクセスキー] ナビゲーションメニューのリンクにアクセスキー(ケータイなら0~9とか)を割り当てること。

10.[リンクターゲットID] それぞれのリンクのターゲットを明確にすること。

11.[リンクターゲットのフォーマット] デバイスが(表示や再生を)サポートしていないこともあるので、リンク先のファイルフォーマットには注意すること。

12.[イメージマップ] デバイスが十分にサポートしていない可能性があるので、イメージマップは使わないこと。(ほとんどのケータイにはポインティングデバイスはない)

13.[ポップアップ] ポップアップや別窓表示は避けること。ユーザにそれと知らせることなく現在のウィンドウを変えたりしないこと。

14.[自動遷移] 自動遷移ページは作らないこと。自動遷移をユーザに知らせないなら、遷移を止める手段を用意すること。

15.[リダイレクト] 自動的にページをリダイレクトするようなマークアップはしないこと。代わりにHTTP 3xxコードを用いることでリダイレクトするようにサーバーを設定すること。

16.[外部リンクリソース] 外部リンクしたリソース(ファイル)は最小限に止めること。(ケータイではダウンロードに時間がかかるため)

17.[適切さ] コンテンツ内容はモバイルでの利用に適したものとすること。(モバイルでの利用においてユーザはまず役立つ情報を求めている)

18.[明瞭さ] はっきりとシンプルな言葉を使うこと。

19.[限度] ユーザが求めているものに内容を限定すること。

20.[使うのに便利なページサイズ] 使いやすさは残しつつも、適度なサイズまでページを分割すること。

21.[ページサイズの限度] ページ全体のサイズは、デバイスのメモリ制限にあったものにすること。(ケータイでダウンロードできるページサイズは限られている)

22.[スクロール] 二方向へのスクロールを避けられるなら、ページのスクロールは一方向とすること。

23.[中心的意味] ページの中で中心となる要素は、そうでない要素よりも先に配置すること。(ページのトップのリンクはメタに止め、コンテンツが先に読めるように)

24.[スペーサー画像] スペース調整のための画像(スペーサー)は使わないこと。

25.[大きな画像] デバイスがレンダリングできない画像は使わないこと。それを使わないといけない重要な情報があるのでなければ、巨大あるいは高解像度の画像は避けること。

26.[色の使用] 色がないと伝えられない情報は、色がなくても伝えられるようにすること。(モノクロ液晶のケータイの人も…まだまだ要るはず…)

27.[カラーコントラスト] 前景色と背景色は十分(視認できる)コントラストがある組み合わせとすること。

28.[背景画像可読性] 背景画像を使うときはデバイスでコンテンツが読めるように使うこと。

29.[ページタイトル] ページタイトルは短く、かつ内容が分かるようにすること。

30.[フレームダメ!] フレームは使用禁止。

31.[構造] 論理的な構造を示せるマークアップ言語を使うこと。(HTMLとか)

32.[テーブルタグのサポート] デバイスがテーブルタグをサポートしていると分からないのであれば、テーブルは使わないこと。

33.[テーブルのネスト] テーブルはネスト(入れ子に)しないこと。

34.[テーブルレイアウト] テーブルレイアウトはしないこと。

35.[テーブルの代わり] もし可能であるなら、テーブルの代わりとなる見せ方をすること。

36.[非テキスト要素の代わり] あらゆる非テキスト要素には代わりとなるテキストを用意すること。

37.[オブジェクトかスクリプト] 埋め込みオブジェクトやスクリプトには頼らないこと。

38.[画像サイズの特定] 画像に固有のサイズがあるなら、マークアップで画像サイズを特定すること。

39.[イメージリサイズ] 画像に固有のサイズがあるなら、サーバーで画像サイズをリサイズすること。

40.[VALIDなマークアップ] 公式の文法に従ってドキュメントを作成すること。

41.[単位] マークアップの属性値やスタイルシートの属性値の単位にピクセルや絶対値を使わないこと。

42.[スタイルシートの使用] デバイスがスタイルシートをサポートしているなら、レイアウトや見せ方にスタイルシートを使うこと。(日本のケータイはまだあんまり対応してないですけどね…)

43.[スタイルシートサポート] 必要ならスタイルシートがなくても読めるようにドキュメントを構成すること。

44.[スタイルシートのサイズ] スタイルシートは小さく。

45.[最小化] 簡潔かつ効率的にマックアップすること。

46.[コンテンツフォーマットサポート] デバイスでサポートされているフォーマットでコンテンツを提供すること。

47.[より好まれるコンテンツフォーマット] もし可能なら、より好まれているコンテンツフォーマットで提供すること。

48.[文字エンコードサポート] デバイスがサポートしている文字エンコードでもってコンテンツをエンコードすること。(UTF-8に対応しているケータイのほうが少ないですけどね…)

49.[使用した文字エンコード] 使用した文字エンコードを示すこと。

50.[エラーメッセージ] 手助けとなるエラーメッセージと、エラーメッセージから有用な情報へとナビゲートする手段を提供すること。

51.[クッキー] クッキーの利用に頼らない。(日本のケータイは対応してませんね…)

52.[キャッシュ] HTTPレスポンスにおけるキャッシュ情報を提供すること。(日本のケータイでは無理なような…)

53.[フォント] フォント関係のスタイルに頼らない。(…めっさメーカー依存ですしね…)

54.[キーストロークを最小限に] キーストロークは最小限に止める。

55.[フリーテキストを避ける] 可能であれば、textareaやinput type=”text”は避けること。

56.[デフォルト値を使う] 可能であれば、あらかじめ決められたデフォルトの値を使うこと。

57.[デフォルト入力モード] デバイスがサポートしているのなら、デフォルトの入力モードを決めること。(住所はかな漢字、郵便番号は半角数字って感じに)

58.[タブ順序] (tabindexを使って)リンク、フォームのコントロールとオブジェクトに論理的な順序を儲けること。

59.[ラベルコントロール] labelとformとを関連付けてすべてのformを適切にコントロールすること。

60.[位置の調節] labelの位置はそれらが参照するformコントロールに関して適切にレイアウトされていること。