連載モバイルサイト構築のユーザビリティいろは
モバイルサイト構築前に知っておきたいユーザビリティ10のポイント(第1回)

‹ 前12次 ›

液晶スペックによるページ作成の留意点

ユーザーがページを閲覧する環境は、屋内や野外の他、時間もさまざまです。さらに、携帯端末の液晶画面は、メーカーによってさまざまなスペックが混在しています。そうしたなか、できるだけ多くのユーザーの視認性を確保するために、注意するべきポイントを紹介します。

7 屋外での閲覧を考慮してコントラストに注意

晴れた日の日中、屋外でサイトを閲覧すると、ほとんど文字が見えなくなることがあります。ページを作成する時は、室内環境だけでなく、屋外でも閲覧されること前提に、テキストと背景色のコントラストに注意して色を選択するようにしましょう。

屋外での閲覧を考慮してコントラストに注意
図5 屋外での閲覧を考慮してコントラストに注意

8 明度が高く薄い色に注意

図6のように、明度が高く薄い色は、端末の液晶スペックによって、視認できない場合があります。背景色と文字色はユーザビリティを左右する重要な要素ですので、明暗の差、コントラストを十分に取るようにしましょう。ポイント7でも同じことが言えますが、いつでもどこでも、という携帯端末の特性に対応するために、室内環境だけでなく、さまざまな環境下で携帯端末の表示をテストすることも肝心です。

明度が高く薄い色に注意
図6 明度が高く薄い色に注意

端末によるフォントサイズの違いとページ作成の留意点

携帯端末ではキャリアや端末メーカーによって、フォントサイズやフォントの種類がまちまちであり、構築したページをすべてのユーザーが同じ状態で見ることはできません。また、ユーザーが端末のフォントサイズを独自に変えていることもあるので、フォントの制御について、最低限注意するべきポイントを紹介します。

9 フォントサイズの大小を考慮

テキストレイアウトについては、フォントサイズの大小にかかわらず、3キャリアでの実機確認を必ず行い、レイアウトの崩れや、スペースの大小を確認しましょう。

各キャリアが公開している表示可能文字数などの端末スペックや技術情報のサイト

10 センテンスごとの改行による可読性の向上

携帯端末のテキストは行間が狭いので、比較的長い文章については、段落の終わりに改行スペースを入れたり、文中の区切りに改行を入れたりするなど、文章が読みやすくなるような工夫をしましょう。

センテンスごとの改行による可読性の向上
図7 センテンスごとの改行による可読性の向上

◇◇◇

今回は初回ということで、モバイル端末特性に応じたサイト構築の考え方を紹介しました。次回は、ページ制作に必要なポイントを、ユーザビリティの観点から具体的に紹介します。

株式会社IMJモバイル モバイルユーザビリティ研究所

IMJモバイルの保有するモバイルユーザビリティのノウハウを集約し、企業がモバイルによってサービスを提供する際に、携帯電話の小さな画面でもユーザーがストレスを感じずに目的を達成させるためのモバイルユーザビリティの研究を目的としたプロジェクトチーム。

研究成果としてモバイルECサイトやiPhone専用サイトのユーザビリティに関する調査レポートの配信を行っております。

IMJモバイル


‹ 前12次 ›
(39) この記事をはてなブックマークに追加(948)
あなたの評価 : なし 平均 : 2.9 (投票数:95)
日本赤十字社 東日本大震災 義援金募集

今日の用語

オプトイン
何らかの選択を望んですること。 広告メールを受け取ることなどを、ユーザーが ... →用語集へ

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズYahoo!リスティング広告at+link
ウェブアンテナ株式会社日本レジストリサービスWindows Azureオートノミー株式会社
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社
株式会社サイバーエージェント富士通株式会社Sitecore