3.ページにコンテンツをわかりやすく表示しましょう

はじめに

初めの一歩は、読みやすいウェブサイトコンテンツを書くことです。人々に内容を理解してもらいたいのであれば、モバイル、デスクトップの両方で読みやすく見えることが必要です。

あまりにも多くの文章が一段落にまとまっている場合、またはページ上に十分な余白がない場合には、わかりやすい言葉で書かれてあったとしても、健康情報を見ることは困難となります。そして、あなたのウェブサイトがモバイル上でよく機能しない、もしくは表示されなければ、モバイルユーザーは記事にたどり着く前に挫折してしまう恐れがあります。

ウェブサイト設計とコンテンツは連動しています。余白(作用空間または空欄と言います)や配置、書体、および色は、ユーザーがウェブサイト上のコンテンツを理解するのに役立ちます。

やってみよう

3.1.段落の大きさを制限しましょう。箇条書きと短い一覧の形式を使いましょう

スクリーンサイズに関わらず、ユーザーを圧倒するようなコンテンツにしないことは非常に重要です。この原則は、モバイルデバイスだけでなく、デスクトップやラップトップ（ノートパソコン）にも当てはまります。下記は、リテラシーの低いユーザーが、内容を飛ばしてしまう要因です。

• 文章の隙間のない"壁"
• 長い文章
• 文章内に複数の数字が入っている段落
• 長い言葉
• 3行以上の段落

ここに挙げたことはいかに重要か、いかに簡単に書かれているかにかかわらず、読みづらい印象を与えユーザーが情報を読み飛ばすことにつながります。

さらに、ユーザーの限られた作業記憶のために書いてください。明確に独立した節や、文章の"塊"を使用しましょう。

例

• わかりやすく独立したセクションを用いる、もしくは見出しを用いて文のまとまりをつくる。
• 各文章のまとまりは1つの主題もしくは情報にする。
• できるなら文章をリスト化する
• リストが7つよりも多い場合には、いくつかのサブリストに分ける。

healthfinder.govのこれらのページを比較してください。実験では、ユーザーがテキストの段落で提示された説明1の情報を読んでいないことを示しました。一方、ユーザーは、説明2の方が箇条書きの一覧と文章の小さい「節」からなっているため読みやすいのです。

3.2.意味のあるタイトルを使用しましょう

ユーザーがウェブサイトをさっと目を通すように、ユーザーはその内容が自分に関係があるものかを判断するために見出しのみを読むことが多々あります。見出しは、ユーザーが必要な情報を見つけやすいキーワードを含むようにして、可能な限り具体的にすることが重要といえます。

見出しに重要な語句を含めると、検索エンジンが検索結果としてあなたのコンテンツをより表示しやすくします。検索エンジンは、重要単語が内容にだけ含まれている場合よりも、リンクや見出しページ、タイトル、アドレスに含まれている場合の方がウェブサイトを先に表示します。

やってみよう

小見出しを使いましょう

質問を見出しにすることを考えましょう

適切な場合には、質問を見出しとして使ってみましょう。ユーザーの声を反映させるために、"私は"と"私に"を使用しましょう。

例えば、マンモグラフィについて述べる際に、よくある質問は、

• 私にとってどんないいことがありますか？
• いくらかかりますか？
• 医師が何か悪い所見を見つけた場合はどうなりますか？
• どのくらいの頻度で検査を受ける必要がありますか？
• それは痛いですか？
• 検査に関連する何らかのリスクがありますか？
• 時間が無い場合はどうすればいいですか？

見出しは適切な箇所に配置しましょう

見出しがページ上で「フロート（浮くこと）」しないことを確認してください。見出しと次の文章の間よりも、見出し上部により多くのスペースがあるようにしておくべきです。目標は、見出しと関連する文章、または中点（箇条書きにする文の前につける黒点）からなる内容の節を、別々に設けることです。

（Figure 3.2は省略しますが、説明を紹介しておきます）

healthfinder.govのウェブサイトでは、骨粗しょう症に関する情報の見出しとして、質問を使用して構成されています。分かりやすい文章の「節」を作成するため、見出しの後よりも前に多くの余白があります。

3.3.最小で12ポイントの読みやすいフォントを使いましょう

フォントの選択は、あなたのウェブサイトの読みやすさにかかわるのでとても重要です。下記に読みやすさに影響する最も重要な要素を一覧にします。

大きさ

最小で12ポイントのフォントを使用してください。書体の大きさに配慮してください。
ユーザーの多くが高齢者である場合は、14ポイントの書体を使用することを検討します。書体が小さいと、リテラシーの低い人や高齢者のユーザーにとって読みづらくなります。

NIH SeniorHealthでは、各ページにツールバーを設置していて、文字サイズの変更やカラーコントラスト（黒地にカラーの文字）の調整が可能です。

簡潔さ

不必要に華やかで、一般的ではないフォントは読みづらいです。一般的なフォントを選ぶことはユーザーを安心させます。
Verdanaのようなシンプルで親しみやすいフォントで印刷された文章は読みやすいです。

また、見出しと本文で異なるフォントを使用できますが、1ページに3つ以上のフォントを使用しないようにしましょう。少ない数のシンプルなフォントを使うことで、ページにまとまりが出きます。

セリフかサンセリフか？

行間隔

行間隔は、テキストの行間の垂直方向の距離です。文書作成の共通の行の間隔は下記のようになりますす。

• シングルスペース（行の高さはフォントサイズと同様）
• 1.5行（行の高さはフォントサイズの1.5倍）
• ダブルスペース（行の高さはフォントサイズの2倍）

3.4.余白を使ってごちゃごちゃしないようにしましょう

きれいですっきりとしたウェブサイトは、読みやすくなります。それらは、すべての人々、特にリテラシーの低い人々や忙しい人々にとって、注意をそらせたり多すぎると感じたりすることが少なくなります。

節の中の情報を分割するために、主な内容が書いてある部分の中で余白を使用してください。画像やボタン（ディスプレー画面上でマウスクリックできる場所）の周囲にある文章の部分に余白を用いてください。

（Figure 3.4、3.5は省略します）

また、ボタンやリンクを誤ってタップしないで、モバイルユーザーがボタンやリンクを操作できるようにするために、サイトの機能の周囲に余白を設けましょう。

3.5.アバブ・ザ・フォールド（ファーストビュー）に最も重要な内容がくるようにしましょう。モバイルでも同様です。

ユーザーは最初に見たコンテンツに最も多くの時間をかけます。そのため、最も重要で魅力的な内容をアバブ・ザ・フォールドにくるようにします。ユーザーは、見えているコンテンツを判断して、スクロールダウンをしてさらに内容を見るかどうかを判断します。
アバブ・ザ・フォールドとは、スクロールしなくても、読めるコンテンツのことです（ファーストビューとも言います）。

リテラシーの低い読者は、スクロールが苦手な場合があることを覚えておきましょう。視線追跡データによると、スクロールが必要になると、読み進めるために再び場所を探そうとしてコンテンツをスキップしやすくなります。そのため、できるだけスクロールを減らすことが重要です。

コンテンツが最初の画面から下に続いている場合、ユーザーにスクロールダウンの必要性を知らせるためのベストの合図は、スクロールラインを越えるテキストの段落です。しかし、これを異なるスクリーンサイズで一貫して表示させるのは非常に難しいため、代わりにスクロール矢印やスクロールバーの使用を考えるとよいでしょう。

やってみよう

コンテンツが画面上でどのように表示されるかを確認するために、様々なモニター、ブラウザ、デバイスを使用してウェブサイトを見てみましょう。

最後に、ユーザーは画面の下にある水平な線や大きな空白をウェブページの終わりと勘違いする可能性があります。そのため、多くのデバイスやスクリーンサイズでサイトを確認することが大切です。もし、ページの下部にこれらを見つけたら、何らかの変更を考えてください。"偽の終わり"は、人々があなたのコンテンツを全部見ることを妨げるかもしれません。

3.6.効果的にリンクを使いましょう

関連するコンテンツにリンクする機能はウェブサイトを使用する上で主要なメリットです。下記に、あなたのオンライン健康コンテンツで効果的にリンクを用いるための方法をいくつか紹介します。

1ページに掲載するリンクの数を制限しましょう

リテラシーの低いユーザーは、ページ上のコンテンツを読むというよりはむしろリンクをクリックする傾向にあり、時に"リンクホッピング（インターネット上で次から次へとリンクを読み回ること）"と言われます。

リンクは出口のようなものだと考え、ユーザーに本当に出てほしい場所にだけリンクを設置します。

コンテンツをサポートするツールやリソースに直接リンクしましょう

容易にリンクを開けるように、リンクは適切な長さにしましょう

リンクが短すぎると、リンクを選択するためにスクリーンの右側でタップやクリックをすることがユーザーはむずかしくなります。

説明を含んだわかりやすいリンクラベルを使用しましょう

説明を含んだリンクラベルはユーザーにリンクに含まれた内容を伝えます。ユーザーがリンクを開いたときに、その内容が期待と異なるものでないようにしなければなりません。さらに、説明を含んだリンクラベルはユーザーが正しい内容を探すのに役立ち、検索エンジンのランキングにも影響します。

リンクラベルには動作動詞を使用しましょう

「開始するためにこれらのヒントを確認しましょう！（Check out these tips for getting active）」「妊娠中の健康的な食事の方法を見つけましょう！（Find out how to eat healthy during pregnancy）」「糖尿病についてより深く知りましょう！（Read more about diabetes）」のようなすぐに行動を行えるようなリンクラベルを選びましょう。動作動詞はユーザーがあなたのコンテンツに関わりやすくなります。

例
前：保険プランの検索
後：自分に合った保険プランを見つけましょう

（Figure 3.7は省略します）

一般的なリンクラベルは使わないようにしましょう
何を期待しているのかわからなくなります。
例えば、次のようにリンクに名前を付けることは避けてください

• ここをクリック(Click here)
• 印刷（Print）
• 詳細はこちら(Learn more)

3.7.リンクが分かりやすいよう色や下線を使いましょう

ユーザーが　リンクをクリックできると認識しやすいようにリンクを表示します。そして、あなたのサイトを通じて一貫性を保つようにします。

リンクの表示についての確立されたガイドラインに従いましょう

• 特定の理由がない限り、開く前のリンクには青を、開いたあとのリンクには紫を使用する。
• 使用する色が文章の中で目立つかどうかを試す―そして色覚異常の人々であっても見えるようにする。
• リンクに下線をひくことによってユーザー、とくに視力低下者やほかのアクセスすることへの問題がある人々にとってリンクであると分かりやすくなる。
• 操作メニューのような明らかにリンクとわかるものについては下線を使用しない。

3.8.学びに役立つ画像を使いましょう

文章をサポートするシンプルな画像を載せると、リテラシーの低いユーザーが、健康情報を見つけ、理解し、伝えて、活用するのに役立ちます。

あなたの文章をサポートする画像を選びましょう

画像はあなたの伝えたい内容を説明し理解を高める方法として使用すべきであって、飾りとしてではありません。さらに、不要な画像（キャラクターなど）は内容を邪魔し、広告と間違われる可能性があります。

リアルな画像を選びましょう

リアルな写真を使って、健康行動を説明したり、医学的な概念を明確にしたりします。ユーザーは、モデルのような人々よりもリアルな人々が被写体である画像を好みます。また、様々な人種や民族の人を登場させることも重要です。そうすることで、より多くの人がサイトで「自分」を見つけることができ、コンテンツに共感しやすくなります。

人は画像に強く反応することを念頭に置き、必ず画像を含むサイトをテストしてください。画像に対するユーザーの反応に注目してください。意外な反応があるかもしれません。

やってみよう

画像の意味がすべてのユーザーにわかることを確認しましょう。

3.9.適切なコントラストを使いましょう

白または非常に明るい背景に暗い色の文字が最も読みやすいです。反転したテキスト（暗い背景に明るいテキスト）は控えましょう。また、背景をはっきりさせることも重要なので、模様や画像は避けましょう。

（背景の例は省略します）

3.10.コンテンツを印刷しやすいようにしましょう

多くのリテラシーの低いユーザーは画面上で文章を読むよりもウェブサイトのページを印刷することを好みます。

さらに、彼らは得た健康情報についてコンピュータの利用をしない友人や家族と共有したり、その印刷した情報を冷蔵庫に貼ったりしたいかもしれません。そのため、あなたのコンテンツを印刷ができるようにすることが重要になります。

（Figure 3.10は省略します）

印刷できるようにデザインされたページには、印刷用のリンクを使用しましょう

印刷することが意図されたページ（医師に持参する問診票のようなもの）は印刷用のリンクがユーザーに迅速にわかるように配置する。印刷用のリンクやアイコンはそれぞれのページにおいてはっきりと見やすくする。可能であれば、ユーザーに印刷のオプション（単一ページのみ、セクションすべて、もしくは文章の一部分のみ）を提供する。

印刷したものがユーザーにとって利用しやすいようにしましょう

下記のデザインガイドラインに従ってください。

• 余白を多く使用し、適したカラーコントラストを用い、それぞれのページに明確なタイトルをつける。
• ユーザーがページの印刷をクリックしたときにのみ使われる印刷スタイルシートを指定する。
• 様々なデバイスからの印刷を可能にするために、パーセンテージベースの流動的な幅でサイトをデザインする。
• サイトにページ番号がある場合は、印刷時にページ番号が上書きされるようにするか、ユーザーに「すべてのページを表示する」というオプションを与える。

3.11.障がいを持った人にとっても利用しやすいようなサイトにしましょう

連邦政府の運営する全てのウェブサイトは、障がいを持つ人々にとってもアクセス可能でなくてはなりません。これは大抵<米国リハビリテーション法508条に言及されていて>第508条のコンプライアンス（法令順守）と呼ばれています。

508条のガイダンスは全ての人のために役立つようなウェブサイトの設計を支援します。
ここに508章に従って取り上げられている重要な考慮すべき事柄を数例列挙します（各事柄の詳細は省略します）。

• スクリーンリーダー（コンピュータの画面読み上げソフトウェア）やその他のソフトウェアがあなたのサイトを読むことができることを確認する。
• 一貫したページタイトルとセクションごとの見出しをつける。
• ユーザーがキーボードだけでサイトの操作ができるかどうかを確認する。
• 特にボタンには強めのカラーコントラストを選ぶ。
• アクセスしやすくするために、プラグイン（ソフトウェアに機能を追加する小さなプログラムのことを指すこと）や他のソフトウェアを試験する。

3.12.ウェブサイトをレスポンシブにしましょう

ユーザーはウェブサイトを携帯電話や、タブレット、パソコンなどの機器を使用して見ます。そのため、どの機器であっても問題なく見られるように設計する必要があります。より多くの人がモバイル機器からウェブを使用するようになっています。特にリテラシーの低い人々はウェブを見る手段がモバイル機器に限られる場合があります。

このようにウェブコンテンツへのアクセス方法が変化したことで、ウェブデザイナーは、モバイルユーザーにコンテンツを提供するために、ネイティブ・モバイル・アプリ、ウェブ・アプリ、モバイル・ウェブサイトなど、さまざまな選択肢を持つことになりました。

多くの健康系ウェブサイトでは、レスポンシブデザインが最良の選択です

3.13.モバイルユーザーのニーズに合わせたモバイルコンテンツをデザインしましょう

各画面に表示する要素の数を制限する

ページ上部のコンテンツと機能を優先させる

インタラクションを容易にする

• ユーザーが入力する文字の量を制限する。
• 小さなデバイスを使う人が簡単に選択できるように、大きなボタンやタップ可能なエリアを使用する。また、それらの周りには十分なスペースを確保してください。
• よく使うボタンは、届きやすい場所に配置してください。届きやすい場所は、デバイスの大きさやユーザーの持ち方によって異なります。多くの場合、画面の中央や下部の方が上部よりも届きやすいです。

小さな画面でウェブサイトをを見るモバイルユーザーのため、デザインを整理し障害がないようにしておくことは重要です。シンプルなデザインによりユーザーは探しているものをより効率的に見つけることができます。

• 優先度が高い内容については、トップに持ってくる
• 使用方法を簡単にする（ユーザーが書き込むところ制限する、ボタンを大きくし押しやすくする、ボタンの場所を見つけやすくする）
• ラジオボタンを使ってみましょう。リテラシーの低いユーザーの場合、大きなラジオボタンは、モバイルデバイスで選択を行う最も簡単な方法です。チェックボックスやインタラクティブなアイコンの代わりにラジオボタンを使用しましょう。

やってみよう

まとめ

ウェブコンテンツを成功させるためには、うまく書いただけでは不十分であり、読みやすく見えることが必要です。デザインとレイアウトを徹底的に工夫することで、情報の提示方法によって読み手が圧倒されると感じたり、戸惑いを感じたり、混乱を感じたりしないで内容に集中できるようにすることが可能になります。

ウェブサイトを設計する際には、すべてのユーザーについて―モバイル機器のユーザーとアクセシビリティを求めるユーザーを含めて―考慮すること。コンテンツへのアクセス方法が何であれ、コンテンツがアクセスしやすく、かつナビゲーションしやすいようにしましょう。

次のセクションでは、コンテンツの構成とナビゲーションについて―すなわち、ユーザーがサイト上で、求める情報を見つけるための適切なページに簡単にたどり着けるようにすることについて、説明します。