携帯電話アフィリエイト研究 

携帯電話サイト作成時のポイントです。
HOME >> 携帯電話サイト作成時の要点まとめ

アフィリエイト携帯

携帯電話サイト作成時の要点まとめ

3キャリア対応のページ作成の場合、マークアップ言語はXHTML Basic、文字コードはUTF-8、画像はJPEGかGIF、CSSはインライン、ページサイズはXHTML9KB以内、画像を含めると100KB以内。

使用可能なタグが比較的少ない「iモードXHTML」で使用可能なタグを基準にすると制作しやすい。

深い階層でサイトを構成するより、コンテンツが並列にならんだような構成にする。

1ページのなかで1番見せたい情報は何か、ユーザーが求めている情報を絞った上で、できるだけファーストビューで見えるようにしておく。

ユーザーに優先して見せたい情報はなるべく画面上部に配置する。

ページ内リンクを使用し操作性を確保するナビゲーション。

フリーワード検索は目的のリンクが見つからない際の救済手段と位置づけ、画面下部に配置する。

回線速度を意識し、ページをリッチにする、軽さを優先するといった点を意識して、ページ構築を検討する。

可能な限り情報を絞るページ構成で軽いページを心がける。

詳細を説明するページにおいては、多少1ページ容量が重くなっても情報量を優先する。

画像の数がページの表示速度に影響を与える。

屋外でも閲覧されること前提に、テキストと背景色のコントラストを考える。

表示可能文字数などの端末スペックを考慮したテキストレイアウトを心がける。

段落の終わりに改行スペースを入れたり、文中の区切りに改行を入ることで可読性向上する。

1行でまとめたいリンクやメインコンテンツではないリンクの文字サイズを小さくして、サイト全体の文字にメリハリをつける。

サイト全体に共通するナビゲーションの設計をする。

頻繁にアクセスするページには、フッター部分に関連するコーナーのリンクを追加し、コーナー間を移動できるようする。

リンク先などの文字を並べる場合、文字の始まりと終わりがわかりにくくなる。
区切り線や背景色などを使い独立させ、文字を読みやすくする。

リンクはアイコンなどに設定せず、テキストに設定する。

リンクテキストの横・直下などへ、リンクの補足説明の設置も検討する。

リンクにアクセスキーを割り当てる。
一般的には「[0]がトップページ」「[9]が1つ前のページへ戻る」「[5]更新」としているサイトが多い。

階層が深いサイトの場合、次ページ以下の下位構造を示し、下位コンテンツの内容を伝える。

アクセスキーの設定はページ単位で行うのではなく、サイト全体のナビゲーション構造や機能をもとに統一した設定設定をする。

絵文字自体に意味を持たせる事でアイコンとして使用。

サイト全体を華やかにするために絵文字を使用する。

3キャリア分のソースが必要なため絵文字の使用による制約が発生する。

短い文章では半角カナを、長い文章では全角カナを使った方が読みやすくなる。

1つの文章中に半角カナと全角カナが混在すると読みにくくなる。

見出しは、色を変更したりアイコンを文頭に表示させ、本文の違いをはっきりさせる。

絵文字の変わりに記号を使いテキストを装飾することも考える。

画像を使う場合テキストとの間の余白も含めてレイアウトする。

絵文字や半角カナを使いテキストを短く作る心がけが必要。

横スクロールテキストは使わない。

会員制サイトの場合はトップページのファーストビューに会員登録リンクを設置する。

会員登録リンクは、ファーストビューだけでなく、各コンテンツの説明ページにも表示しておく。
その際、会員登録リンクは適切な文言(くどくなるので同じ文言を繰り返さない)で要所にバランスよく設置する。

非会員でもトップページから各コーナーの中身まで見られるような構成にし、具体的なコンテンツ内容がわかるようにする。

複数のプランがある場合はわかりやすい説明を入れる。

メールアドレス確認のためのメール受信が必要な場合は、メール受信設定についてきちんと記述する。

メール受信設定を簡単にするための「指定受信追加ボタン」を設置したり、テキストボックスからドメインやメールアドレスをコピーできるようにする。

ページを開いた瞬間に認知できる上、多少スクロールされても消えない位置にアクションボタンを配置する。

メールマガジンを受信させる場合は配信頻度を明記する。

個人情報を登録させる場合には理由を明記する。

更新内容を記載し、しかも、わかりやすく、一目でわかるようにする。

更新のあったコーナーにNEWアイコンや絵文字を載せる。

更新した内容をファーストビューに掲載する。

日付入りで何が更新されたかを一覧で示す更新一覧ページを用意することも考える。

トップページは画像を多く配し、デザインを作り込む。

商品一覧ページには、商品画像を大きく掲載し、商品毎の区切りを明確にする。

商品ページには商品の詳細情報を記載し、しかも、ページ分割せず1ページに掲載する。

商品の説明を上部に、購入用のフォームを下部に配置する。

価格は色をつけ目立たせ、上下に配置する。

商品画像は、利用シーンを含めたものと色々なアングルのもをあわせ複数枚用意する。

購入を決めた商品を登録するページはショッピングカートではなく買い物かごにする。

買い物かごページには商品画像を表示させ、テーブルで情報を整理する。

購入フローでは現在地を示す階層のナビゲーションリンクを設置する。

情報入力ページは項目ごとに分割せずに1ページに収める。

入力フォームは細かく分割せず、なるべく少なくする。

誤入力が考えられる場合は、入力情報を細かく分けてフォームを配置する。

個人プロフィールからの引用を考慮した携帯サイトフォーム設計を心がける。

個人プロフィールからの引用を考慮して、メールアドレスの入力欄を1つのフリーワードボックスとする。(@ドメインのプルダウンメニューにしない)

入力フォームにあわせて入力モードを指定しておく。

パスワードを入力するフォームに「password属性」を使わない。

入力フォームに近接して入力例を置く。

ボタンとプルダウンの違いを明確にしないと見た目の区別がつきにくい。
プルダウンは左寄せにし先頭には「▽」を付ける、 ボタンは画面の真ん中に寄せるなどの工夫する。

参考
ユーザビリティ実践メモ
Think IT
Web担当者Forum
▲TOP

携帯電話アフィリエイト研究