当記事は2020年2月20日に投稿したものを新たに調査、改編し投稿します。
今まで考えながら行動をしていたと思っていました。
この「思っていました」が問題ですね、「思っていた」と思い込んでいました。
昨年から少々、考え方を改めて色々と取り組んでおりました。
そこで、はたと気がついたのですが、行動して考えていたのか？ということ。
今更ながら、体に馴染んだ作業を流されるようにこなしているだけでは無いのかと思うようになりました。そこで、原点に立ち返りつつ、Web デザインとは何なのかを昔の薄い記憶と現状を調査しつつ考察していきます。
優れたWebコンテンツは読みやすい
Web コンテンツは世の中の数々のメディアから置き換えることが可能になってきました。
チラシ、新聞、書籍、テレビ、映画とそれらが全てインターネットで閲覧することが可能です。
そのような状況の中で人に使いやすい、人に優しいメディアとしての Web コンテンツとはどのようにあるべきでしょうか。
見える範囲（サイズ）
紙媒体のものとサービス内容に問わず Web 上のコンテンツでは大きく違うところの一つが表示範囲です。印刷物で使用する紙は基本的には工業規格で決まっています。その中で、伝えたい内容を全て表現し、フォントサイズも固定です。ユーザーによる拡大・縮小は出来ません。
Web の場合は決まっていません。フォントサイズもユーザーが Web ブラウザ上で操作出来ます。ウィンドウサイズもモニタの範囲内なら、ユーザーが変更することが可能です。また、スクロールすることで無限に表示できます。
インタラクティブな表現
印刷物では表現の可能性はたくさんあると思いますが、ユーザーとの相互関係は築きにくい媒体です。
子供向けの色塗りや飛び出す絵本などは印刷物特有の良さがありますが、問い合わせの際には別のメディア、デバイス（手紙や電話、電子メール等）を経由する必要があります。
一方通行ではありますが、知識欲を満たす『知る』ことを目的としているので、2次元から3次元的表現まで伝えることに長けています。
※ 人間が変わっていく中で、この考え方も合わせて変わっていくと思います。
Webは主にモニタ上での出来事なので、飛び出す絵本のような表現は限界がありますが、問い合わせを促すデザインされたボタンや、直ぐに問い合わせが出来るメールフォームを設置することが可能です。
『使う』ことを目的としたメディアには必須の要素であることがわかります。
『使う』というのは曖昧な表現ですが、それだけ難しくも広い範囲をカバーできるメディアです。
インタラクティブとは、一方通行な発信ではなく、読者や閲覧者からの反応も直接得られる双方向な仕組みのことです。
参考：国立国語研究所
読みやすい文字のサイズ
適切な文字のサイズとは
結論、Webコンテンツの本文、モバイルは16px、デスクトップは18pxから考える。
Web コンテンツを設計する上で、フォントサイズは重要な要素だと思います。
利用されるメディアによるもの、ユーザー（ターゲット）層によるもの、他にも目的別にサイズは考慮されるべきでしょう。
印刷物のフォントサイズについて、調べてみると様々な意見の上で設定されていますが、大凡8pt〜18ptの間で読みやすいサイズとして利用されているようです。（新聞は、新聞社それぞれで少しだけ違いがあり、約 3mm〜4mm 位）
1ptが大体0.35mmなので、8ptだと2.8mm、18ptだと6.3mmになります。
さらに言うと 0.75pt が 1px ということで、8pt は 10.6666…px、18pt は 24px です。
Webではどうかというと、Googleの中で厳しい定義は無いものの、16pxを推奨し、高齢ユーザーには17〜18pxを推奨しています。
考えてみるとほとんどの Web ブラウザの標準フォントサイズは16pxですね。
余談ですが最近ではデスクトップ上では大きすぎるのでは無いかと思われるものも散見できます。主観ですが特にアニメーションの凝った海外のポートフォリオサイトに多い気がします。
また、印刷物のフォントサイズの時に触れませんでしたが、WCAG2.1では行間はフォントの1.5倍、段落の間隔は2倍、文字の間隔が0.12倍、単語の間隔が0.16倍と、最低基準として推奨値が記載されています。
では、それぞれの媒体（印刷物かWebコンテンツ）のサイズ、デバイスのサイズでフォントサイズに気を使ったほうが良いのでしょうか。
参考：
WCAG 2.2：Web Content Accessibility Guidelines (WCAG) 2.2 (日本語訳)
デバイス別にサイズ設定する必要はあるのか
結論としては「必要は無い」と考えます。
何故なのかと言うと、表示範囲と可読性、判読性の相互関係が微妙だからです。
Web コンテンツ上で、本文を読ませるために可読性が重要な要素です。
文章の読みやすさに影響を与えます。
私の考えでは、コンテンツの表示範囲よりも絶対的に読みやすい文字のサイズが、デバイスでは無くユーザー目線で決まっているのではないか、ということです。
実際に私が計測したわけではありませんが、検証されているサイトではスマートフォンの本文のフォントサイズは16pxが多く、また読みやすいフォントサイズであるとして記載されています。
したがって、前述のGoogleとWCAGの推奨するフォントサイズと同じ16pxになることから、PCとスマホ間で本文のフォントサイズを分けてスタイルを作成する必要は無いです。
では、見出しや視認性に重点を置いた設計は、どうすれば良いのでしょうか。
参考：
【検証】スマートフォンで読み易い font-size とは？
スマートフォンで指定すべき最適なフォントサイズとは？
用途別フォントサイズ
見出し、キャッチコピーや問い合わせ等のフォントについては可読性よりも視認性に配慮した設計になるでしょう。
見出しはよく利用されるジャンプ率（本文に対する見出しの比率）は1、1.2、1.414、1.618位が良く使われるようですが、印象を変えるためにはこれに限らないでしょう。
また、キャプションは基本的に本文と同じだと思いますが、使い所の違いから別の設計基準がありそうです。
これらの要素は、そもそも多くの文字数を設定することが少なく、所見でのインパクトと続きの本文を読ませる為の、惹きつける魅力を持った性質が必要です。
読みやすさより派手さと、一発で伝わるパワーを表現するために、フォントサイズの既成概念にとらわれないことが大事かと思います。
コンテンツによって、その派手さやパワーは変わってくるので、Web サイトを運営する業種、テーマによってやり方は様々でしょう。
ここまでで、現在でのフォントサイズは16pxが一番妥当であるとなりました。
では、そのサイズから見て、メインコンテンツの幅はどのくらいが適切でしょうか。
フォントサイズとコンテンツ幅
読みやすい文字数
フォントサイズが16pxとして、一行内の適切な文字数は幾つになるでしょう。
Googleのガイドラインの中で「読みやすいカラム幅にするには、1行あたりの文字数を70 ～80文字（英単語で約8～10語）にするのが理想とされています。」とあります。
（2024年10月現在このガイドラインは削除されているようです）
これは、半角英語を基準にされているので、全角文字となると単純に35〜40文字程度になります。
他にも自ら検証されているさいとでは30〜60文字が許容範囲とか、一般的には35文字が読みやすいと掲載されているところもありましたが、大凡同じくらいです。
また、フォントサイズでは選択の幅が多そうな印刷物でも、読みやすい一行の文字数は、ほぼ同じようです。
適切なメインコンテンツの幅
適切なフォントサイズがわかって、適切な一行の文字数から大凡ではありますが、コンテンツの幅も予測できます。
文字サイズ16px、フォントはヒラギノ角ゴW3で35 文字とした場合、width559pxが下限でした。558px にすると34文字になります。
前述の一行の入る文字数の40文字の場合639px、60文字では974pxでした。
私見になってしまいますが、60文字の974px 以上は読みにくいです。
文字を追っていくと視線がズレます。
確かに35文字の559pxは読みやすいです。
文字を追うのでなく、瞬間的に一行を把握出来る感じがします。
40文字の639pxはどっちつかずですが、35文字より読みにくい感じがしました。
今までのWebサイト制作でコンテンツの全体幅は1024px、読ませる為のメインコンテンツは640px位を目安に作成してきましたが、改めて検証してみると35文字というのが納得出来る結果になったと思います。
様々な閲覧環境によって見え方は大分変わるかと思いますので、ご参考までに。
※検証環境は MacOS CatalineでGoogle Chromeです。
まとめ
更に時間をかけて調査すれば、また別の視点で考える事ができそうな、奥の深いテーマだったと感じました。
今回の結果は全て私の主観であり、他の人では違う見え方になるかもしれませんが、GoogleのガイドラインやWCAGで推奨されているということはアクセシビリティやユーザビリティに貢献している仕様なのでしょう。実際、自分で検証して可読性、判読性が高いと感じました。
判読性が高いということは、ユーザビリティの向上に繋がるだけでなく、制作者のミスの回避にもなるのでは無いかとも思いました。
また、補足になりますが、コンテンツ幅について調べている中でレスポンシブデザインのブレークポイントの決め方をデバイス基準では無く、コンテンツ内容に基づいて、メジャーブレークポイントとマイナーブレークポイントを設けることが推奨されていたこと。
※メジャーブレークポイント：この場合、ウィンドウサイズに合わせて大きな変化をさせるブレークポイント。（例：グローバルメニューを横からスライドさせるようなドロワーメニュー等に変化させる。）
※マイナーブレークポイント：ウィンドウサイズに合わせて変化させるが、その度合が小さなブレークポイント。
今までの制作経験では、ついデバイス有りきでのブレークポイントを考えがちでしたので、たくさんの機種をカバーしないといけないのは大変だと思っていましたので、少しですが目から鱗が落ちました。でも、これだけある機種をカバーするのは難しいし、コンテンツ有りき、ユーザー有りきのWebサイトであることを考える切っ掛けになりました。