« 魅力的な「Coming Soon」ページを作ろう(その5) | メイン | モバイルサイトを作成するための6つのTips(後編) »

モバイルサイトを作成するための6つのTips(前編)

2010年07月01日
 

モバイルサイトイメージ

モバイル通信機器からWebへアクセスすることが一般的になってきた昨今、多くの企業がモバイル機器でアクセスしやすいプラットフォームの構築が優位であることを把握しています。人々は携帯電話からWebへアクセスすることに抵抗を感じなくなっており、各企業は企業のWebサイトをモバイル機器から閲覧できるよう、モバイルサイト対応を進めています。

事実上、モバイル機器からのWeb閲覧は一時的なものではなく、最新のインターネット事情においても、必要不可欠なものとなりました。もし、モバイル機器から閲覧可能なウェブサイトをお持ちでないなら、ここで携帯用サイト(モバイルサイト)の構築について焦点を当てていきましょう。いろいろな重要オプションと基本技術をご紹介します。早速実践で使えるTipsへ移りましょう。

携帯サイトをデザインするには、それにかかわる特別な処置が必要になってきます。モバイルサイトをつくる最も簡単な方法は、既存のウェブサイトを互換性があるように変更することです。その方法で行う場合、大幅なレイアウトやデザイン変更があるとお考えください。それでは、いよいよ原則とも言える6つのステップについてご紹介します。

1 レイアウト
モバイルサイトへ接続する際に時間がかかる場合があります。リードタイムが長いと、閲覧者は離脱しやすくなります。トップページを軽くし、ページ先頭に最も重要な情報を配置してください。会社のロゴは重いサイトの一因となります。モバイルサイト用にカスタマイズした会社のロゴを使用することをお忘れなく。携帯電話ではトラブルの元になりやすいので、左右に動くナビゲーションはなるべく避け、シングルカラムレイアウト(1カラムレイアウト)で作成してください。また、表の使用は最小にしたほうが好ましいです。どうしても組み込む必要があるならば、2カラム以上の使用を避け、列とカラムの合体は避けてください。

2 コンテンツ
モバイルサイトでの情報はナビゲートしやすいことを重視し、わかりやすいサイト構築がポイントになります。ユーザーが移動しながらモバイルサイトを見ていることを考慮します。最終的にコンテンツの一部の内容を選んで表示させるので、サイトメニューのテキストを合わせて、ズームするのを避けてください。字体サイズ処理をコントロールするのに見出しを使用すると考えてください。

3 コーディング
モバイルサイト構築のために、特別なコーディングは必要ありません。XMLかXHTMLのいずれかを使用してコーディングされるならばとても簡単です。また、基本的なHTMLやCSSでモバイルサイトを作ることも可能です。タイトルタグ、ディスクリプションタグ、見出しタグ、およびファイル名は重要キーワードで構成して、コンテンツの利用価値を最大にするべきです。

4 画像(イメージ)
ほとんどの携帯電話が、画像を読み込むために大変な時間を要していると思います。それを避けるため、文章に関連している画像(イメージやグラフィック)のみを使用してください。 モバイルサイトに画像を載せる場合、軽量ファイルである.jpeg(JPG)、.gif(GIF)または.png(PNG)形式の使用を推奨します。画像は必ず圧縮して、ズームすることを避けてください。最近では殆どの機器において画像をデフォルトで表示しますが、画像をオフにしている状態で、ユーザーが閲覧するかもしれません。ですから常にテキストによる代替表示(altタグ)を使用してください。

5 ページサイズ
モバイルサイト用にスタイルを割り当てる場合、全てをシンプルにし、ページサイズを小さく保つことが必要不可欠です。最大のページサイズが20Kb以上にならないことを注意し、可能であれば10Kb未満が理想です。通常、ユーザーのパケット代はKb単位で課金されることを覚えておいてください。(定額課金のパケットプランを使用しているユーザが多いですが、従量課金制を使用しているユーザも意識してください。)

6 ページリンク
使いやすいモバイルサイトには、「戻る」ボタンや「戻る」リンクが設置されています。携帯電話に戻るボタンが装備されていないので、モバイルサイト上でユーザーへ提供することは有効です。すべてのページから他のページにリンクされることを確認してください。そして最後に、それが電話向けサイトであれば、実際に電話できるリンクを設置しませんか?

後編では、追加Tipsをご紹介します。



スポンサードリンク


トラックバック

このエントリーのトラックバックURL:
http://blog.templatemonster.jp/mt-tb.cgi/36

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)