モバイルサイト構築のユーザビリティいろは

モバイルサイトを見やすくする絵文字活用&テキストレイアウトのポイント（第3回）

絵文字の活用方法やテキストレイアウトのポイントなど、読みやすいコンテンツの作成方法を紹介

この連載では、PCのWebサイトとは異なるモバイルならではのユーザビリティに特化して、モバイルサイト構築におけるユーザビリティの基本、成果を出すためにはどうすればいいのか。制約の多いモバイル端末だからこそ求められるモバイルサイトのユーザビリティ、そのポイントをお伝えします。

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

第2回ではモバイルサイト構築前の基本ルールの考え方や、使い勝手の良いモバイルサイトのナビゲーション設計について紹介しました。第3回では、コンテンツ自身にあたる「テキスト」をわかりやすくするためのテキストレイアウトについて紹介します。

ユーザーが文章を読む負担を減らす
絵文字&テキストレイアウトのポイント

使い勝手の良いナビゲーションと、わかりやすいコンテンツの両者が揃って初めてユーザーに伝えたい情報を正確に伝えることができると考えますが、モバイルサイトでは、PCサイトと同じ感覚でテキストを並べただけでは、コンテンツが読みづらく、わかりづらくなってしまいがちです。そのため、ユーザーが文章を読む負担を少しでも減らす工夫が必要です。今回は、モバイルサイトにおいてコンテンツ自体にあたることの多い「テキスト」をユーザーに見やすく、わかりやすい形にレイアウトする方法を紹介します。

見やすくてわかりやすいテキストレイアウト5つのポイント

絵文字の活用方法
全角半角カタカナの使い方
モバイルでも読みやすいテキストの見せ方
絵文字を使わずにテキストを見やすく装飾する方法
画像を使ったレイアウトの調整

1.絵文字の活用方法

絵文字の使用は、モバイルサイトを構築するうえで必ず検討事項にあがる要素です。モバイルサイトでよく使われる方法として、次の2つを紹介します（図1）。

図1　絵文字の代表的な活用方法

図1の左の例では、絵文字自体に意味を持たせる事で、アイコンとして使用しています。これは、一般的な企業サイトでも使用される方法です。

図1の右の例は、文章（サイト全体）を華やかにするために絵文字を使用しています。これは、デコメールサイト、ゲームサイトなど、比較的若年層向けのサイトで見受けられる方法です。

絵文字は使用することで、ユーザーにとって親しみのある「一般的なモバイルサイト」という印象を与えることができます。また、画像アイコンの代わりに絵文字を使うことで、ページ容量の軽減にもつながります。反面、キャリアによって絵文字表現の違いがあり、3キャリア分のソースを用意したり、システムを開発する必要があったりするなど、絵文字の使用による制約も生まれるため、絵文字の採用については十分な検討が必要です。

2.全角半角カタカナの使い方

一行に表示できる文字数が約8文字の頃は、1画面により多くの文字を表示させ、少しでも容量を軽くする方法として半角カナを使用していました。

最近では、携帯端末の高機能化や、文字サイズを調整できる携帯端末の普及により、すべてのカタカナを半角カナで表現することは少なくなり、カタカナの半角、全角を使い分けるサイトも出てきました。

短い文章では半角カナを、長い文章では全角カナを使った方が読みやすくなる傾向がありますので、全角カナ、半角カナの特徴を考えながら読みやすい文章にするように心がけましょう（図2）。

	半角カタカナ	全角カタカナ
利点	1行に収めやすいので短文に向いている	全角の文字に埋もれにくいので、読みやすく、長文に向いている
欠点	文字が詰まって見えるのでカタカナの文字が読みにくい	短い文章でも改行しやすくなってしまうカタカナ（記号）によっては、空白のスペースが目立ってしまう

図2　全角・半角カタカナの利点と欠点

3.モバイルでも読みやすいテキストの見せ方

モバイルサイト上でテキストを表示させる場合、見やすくする方法がいくつかあります。ここでは、代表的な方法を3つ紹介します。

1.文章中に半角カナと全角カナを混在させない

1つの文章中に半角カナと全角カナが混在すると、相対的に半角カナが読みにくくなります。また、見た目の印象も良くないので、混在させないようにしましょう（図3）。

図3　半角カナ、全角カナを文章に混在させずに統一する

2.一覧として文字を表示させる場合は“区切り線”か“背景色”を入れる

リンク先などの文字を並べる場合、単純に並べるだけでは文字の始まりと終わりがわかりにくくなります。“区切り線”や“背景色”などを使い、1つひとつのリンクを独立させ、文字を読みやすくしましょう（図4）。

図4　リンクを並べる場合は背景色や区切り線を入れる

3.見出しは“色を変更”して“アイコンを文頭に表示”させる

見出しのすぐ下に本文が続く場合、本文と同じフォントではわかりづらくなってしまいます。見やすくするために、“見出しの色を変更”して“アイコンを文頭に表示”させ、本文との差別化ができるようにしましょう（図5）。

また、見出しをセンタリングする方法もありますが、センタリングした文字が改行されてしまうと文字のバランスが取りにくくなるため、文字数が多くなってしまう場合はオススメしません。特に利用規約、プライバシーポリシーなど長文になりがちな文章の見出しは、メリハリをつけて見やすくなるように心がけましょう。

図5　見出しは本文と差別化して見やすくする

4.絵文字を使わずにテキストを見やすく装飾する方法

制約によって絵文字を使用できないサイトでも、記号を使いテキストを装飾することでページ容量を軽く保ちながら、テキストの見やすさを向上し華やかさを演出することができます（図6）。

図6　記号を装飾に使いテキストを華やかに、見やすくする方法

記号を使ったテキストの装飾は、絵文字だけでなく画像の代替としても活用できますし、機種依存の少なさなど、絵文字、画像とは異なるメリットもあります。記号を工夫して組み合わせることによって様々な表現が可能になるため、テキストを装飾する1つの方法として記号を使った表現を考えましょう。

5.画像を使ったレイアウトの調整

タイトルや区切り線に画像を使う場合、上下に余白を持たせないままにしてしまうと、画像とテキストの間のスペースが狭くなり、読みにくくなってしまいます。

図7　コンテンツの余白を保ち視認性を確保する

PCサイトでは、CSSでレイアウトを細かく調整できますが、モバイルはキャリアによってCSSに制限があったり、端末によって、対応しているタグが異なったりします。余白を持たせる方法には、図7のように画像自体に余白を持たせたり、行間に1ドットの透過画像を入れたりする方法があります。コンテンツの区切りごとに適度な余白を保つことはテキストの視認性やわかりやすさに大きく影響を与えるため、画像を使う場合は、ファイルサイズとあわせて余白のことも考えながら調整しましょう。

◇◇◇

基本的に1画面に表示できる要素が少ないモバイルサイトにおいては、「文字の代わりに絵文字を使う」「半角カナを使う」などの方法でテキストを短く作ることが、読みやすいコンテンツ作成のポイントになります。ユーザーが目的を達成しやすいモバイルサイトを実現するために、単純なテキストの流し込みのページに終始するのではなく、テキスト自体の読みやすさを考慮したレイアウトを検討しましょう。

また、伝える内容が多く、どうしても長文になってしまうページ（商品詳細ページなど）には、「全角カナの使用」や「見出しをわかりやすくする」などの方法で、ユーザーの文章を読む負担を極力減らすようにしましょう。

今回はテキストのレイアウト、装飾の方法や絵文字の使い方をご紹介してきました。次回は公式サイト独自の注意点やダウンロードコンテンツに関するポイントを紹介する予定です。