Reading/Web/Desktop Improvements/機能/コンテンツ幅の制限

From mediawiki.org
This page is a translated version of the page Reading/Web/Desktop Improvements/Features/Limiting content width and the translation is 100% complete.

このプロジェクトの主な目的の 1 つは、ウィキペディアや他のウィキメディアのウィキ群を、新規参入者にとってより快適なものにすることです。 そのためには記事をより快適に読むことができるようにすることが大切です。

快適な (あるいは不快な) 読書体験とは何か? 調査によると、いくつかの要因があるようですが、その中でも特に重要なのが行の長さです。 ピーター・オートン(IBM高等学習センター)の研究「画面で読む文章の長さは読解と理解に影響する」(Computer text line lengths affect reading and learning by Peter Orton, a Ph.D. at the IBM Center for Advanced Learning)では、1行が長くなるほど、読解が困難になり、究極的には文章の情報を学んだり記憶したりことが難しくなると結論づけています。 他にも関連するいくつかの研究がウィキペディアの記事 Line length に記載されていますが、いずれも 1 行あたり 40 文字から 75 文字を推奨しています。

ウィキメディアのウィキ群で推奨される行の長さを実現することは特に簡単ではありませんが、ウィキ上のテキストの大部分を推奨に近づけるために、max-width (最大幅) を使用してコンテンツの幅を制限する予定です。

この機能の背景にある研究や考察の詳細を参照してください。

リリースの日程

私たちは、2020年5月に最初のイテレーションを Office Wiki と Test Wiki に展開し始め、以降の数か月間でアーリー アダプターのウィキ群にも展開する予定です。 詳細はメインの機能ページを参照してください。

機能の説明と要件

この機能の主なものは、記事コンテンツの幅を制限することです。 しかし、ページ上の他の要素 (サイドバーやヘッダー) がコンテンツから離れすぎないようにするために、2 つのコンテナーを追加しました。 2 つめのコンテナーは、サイドバーがコンテンツの近くに保持されるようにします。 さらに、ヘッダーがコンテンツとサイドバーの両方から離れすぎないように、ヘッダーの最大幅を制限する 3 つめのコンテナーがあります。

技術的な観点から言うと、ほとんどのページのコンテンツは、最大幅 960px のコンテンツ コンテナー内に配置されています。 さらに、ヘッダーやサイドバーなどのインターフェイスの他の部分の幅を管理するための 2 つのコンテナーがあります:「ワークスペース コンテナー」(最大幅 1440px) と「ページ コンテナー」(1650px) です。 以下は、これらのコンテナーがどのように機能するかを示す図です。 コンテンツ コンテナーによってコンテンツが制限されないページがあります: 「履歴」「最近の更新」などの記録型のページがこれにあたります。 この機能の対話的なデモを試すには、こちらのプロトタイプを参照してください

デザイン要件とガイドライン

ここでは、現在のレイアウトと、上述したさまざまな幅の制限を受けた更新後のレイアウトの違いを示す GIF を示します:

現在のレイアウトと、コンテンツの幅を制限した更新後のレイアウトを比較した GIF

制約

ここでの主な問題点は、履歴や最近の更新などの特定の記録ページが、行の折り返しによって画面が狭くなるにつれて読みづらくなることです。 そのため、これらのページを特別な方法で扱い、コンテンツ コンテナー (960px) ではなく、ワークスペース コンテナー (1440px) にのみ制約をかけることにしました。 ここでは、記事ページと関連する履歴ページの切り替えを示すプロトタイプの GIF を示します:

新しいベクター レイアウトでの記事ページと履歴ページの幅を示す GIF

エディターによるユーザーテスト

複数のウィキで活動する編集者を対象に、コンテンツの幅を制限したプロトタイプでフィードバック ラウンドを行いました。 編集者にはプロトタイプを見てもらい、中央管理の通知バナーを使用してフィードバックを提供してもらいました。 この特集についてはさまざまな意見がありました: 多くの編集者は、行の長さが短くなったことを評価し、この機能がより快適な読書体験をもたらすことに同意しています。 編集者の中には、コンテンツの周りにある空白を嫌い、無駄な余白だと感じる人もいました。 これらのすべての意見と、行の長さや読みやすさに関する既存の研究結果とのバランスをとっています。

目標と動機

読みやすさ

主な理由は、ウィキメディアのウィキ群のページの読みやすさを向上させるためです。 そのため、おそらく最初の質問は: コンテンツ領域の最適な幅をどうすれば把握できるか? 文章を読みやすくするための最適な行の長さについては、研究に基づいた推奨事項があるため、まずはそこから始めてみましょう。 しかし、ウィキメディアのウィキ群の記事は、一般的な記事やウェブ ページとは異なる点があります。 これらの記事は記事の長さと記事ごとに変化するレイアウトが特徴です。 これらの要因により、(直線的な読書とは異なり) コンテンツのスキャンや検索の必要性が通常よりも大きくなる可能性があります。 これらの違いを考慮して設計しなければなりません。 そこで私たちは、ウィキメディアのウィキ ページは、一般的に推奨されているものとは異なる行の長さを必要とするほど固有なものなのか、と問う必要があります。 以下では、私たちがどのようにして設計上の推奨値である最大幅を決めたかを説明します。

ウィキメディアのウィキページ群の読みやすさを直接に調べないことには、何が最適なのか理解できず、知識に基づく推測をしようとすると、読みやすい文章の長さを調査するところが出発点になります。 この分野の研究や推奨事項は確立されているようです。 ウィキペディアには「行の長さ」Line Length」に関する記事が概要をよくまとめていて、他に執筆者ローラ・フランツ教授 Laura Franz による次の私論があります。「サイズが肝心:反応しやすいウェブデザインの行の長さとフォントの大きさのバランス」Size Matters: Balancing Line Length And Font Size In Responsive Web Design Peter Orton 博士(IBM 先端学習センター※1)による調査研究「コンピュータの行の長さは閲覧と学習に影響する※2Computer text line lengths affect reading and learning by 。(※:1=Center for Advanced Learning。2=Computer text line lengths affect reading and learning) よく見かける推奨値は1行当たり半角文字 40 から 75 としています。 複数の研究結果から「行は短いと読みやすい」し、さらに言うなら、学習と情報の習得の視点では「行の幅を制限した文章を読んだ被験者は、行幅の広い文章を読んだ被験者よりも内容が頭に残った」と結論づけています[1]。 このガイドラインに準拠している人気サイトは数多くあります。 科学の学術専門誌『ネーチャー』オンライン版Nature は幅を1行当たり上限半角 76 文字()、『ニューヨークタイムズ』紙の記事面の同上限は 64 文字()、『タイムズ・オブ・インディア』 Times of India の記事面は同 100 文字(ヒンディ語)、学術誌『オックスフォード・アカデミック』Oxford Academic の論文は同75 文字()、世界保健機構 World Health Organization の公式ウェブサイトは同 96 文字()、同 46 文字(漢字)、同 85(キリル文字)です。(訳注 ※=ローマ字アルファベット) 閲覧モードはSafari あるいは Firefox を選ぶと役には立たず、(ブラウザ上の)1行当たりの文字数の上限は(欧文アルファベットで半角)73文字または77文字に自動設定されるからです。

対照的に、ブラウザのウィンドウ幅を1280px*としてウィキメディアのウィキ群の特定のページを表示した場合、1行当たりの文字数上限は(半角)170文字となり、当該の画面幅はむしろ小さめの画面ということができます。 (* StatCounter の統計を見ると、現状で全利用者の 22% が幅 1366px を採用、一般的な画面幅と想定できます。ブラウザのウィンドウを全画面表示したと想定すると、画面幅上限は 1280px になります。) さらに、ウィキメディアのウィキでは画面の幅が大きくなるにつれて、1 行あたりの文字数が増えていきます (一方、前述の他のサイトでは、1 行あたりの文字数は変わらず、最大幅の制約の結果となっています)。 そこで普及率第2位の画面サイズとして、1920px (利用者の21%が使用) の場合には1行単位の文字数は最大半角262文字となり、推奨値の 3倍相当です。 そこで出発点としては、改行の入らない本文の表示として、推奨値の上限を大幅に超過しているとわかりました。

すると、こんな質問が浮かびます。1行当たりの文字数の推奨値に合わせて、ウィキメディアのコンテンツ幅を内部的に規制してはダメでしょうか? 短い回答:ページごとに異なるし、その結果、利用者の読み方も異なります。 ウィキメディアのウィキ群においてページは何ページにもわたり、大量の情報を載せていて、しかもどのページも形式が揃っているわけではありません。 その結果、一般的なオンラインの記事や書籍を読む時と比べると、ページ上で流し読みを強いられたり不必要なほど検索をしなければならなくなります(ウィキペディアの読了時間に関する調査で立証済み。) というわけで、1行当たりの文字数の推奨値は出発点としては良いとしても、記事本文の幅は狭ければ狭いほどページは長くなり、おそらくは流し読みは難しくなるだろう(画面のスクロール回数が増加)と予測されます。(オンラインのさまざまな閲読体験の詳細は2006年のニールセン・ノーマン・グループの研究をご参照ください。) 上記に加えて、ウィキメディアのウィキ群におけるページは本文に合わせて位置が変動するさまざまな要素を載せていて、1行当たりの文字数はこれでなければならないという決定値を決めるにも、単純にはいかない点が指摘されます。

では、熟読/集中して読む場合※1(1行の長さは短めで見た目に密度が低め)と、スキャン/検索/流し読み(1行の長さは短めだが密度が高め)の場合を両立させるには?(※:focused/engaged) 上記の情報に基づくと、ある数値で幅を制限するべきと仮定しても安全そうであり、それでも閲読者はあちこち要点だけ読んだり検索したりできて、なおかつ、そんなにスクロールしなくてもページ構成を視覚的に地図のように把握できると考えられます。 前述のとおり、この件について直接に深く探る(このプロジェクトの期間に実現しようと模索中)以外に、最適な幅を知ることは不可能ではあるものの、知識に基づいてそれなりの想定をすることは可能です。 ウィキメディアのウィキ群れではページの体裁は単一ではなく、レイアウトに着目すると非常にバラエティーに富んでいて、この課題を考慮する上では確認しておくべき共通の体験が2件、指摘されます。

  1. 記事の最上部、基礎情報ボックスの横に文字の段落がある
  2. 記事の中間部、段落を中断する要素はない

これら2種の経験をさまざまな画面幅で検討し、1行あたりの文字数に換算すると次のとおりです。

Line widths and character counts
コンテンツの幅 情報ボックスの横に文がある場合 干渉する要素がない段落
600px 1 行に 30 文字以下 1 行に 94 文字以下
700px 59 以下 109 以下
800px 76 以下 125 以下
900px 89 以下 142 以下
1000px 105 以下 154 以下

推奨される1行の長さのみを根拠とすると、納得できる幅は 700px 前後ではないかと考えられます。 しかしながらバランスが良く、ページの密度を保ってスキャンにかける場合に(スクロールの回数を減らし)処理しやすい数値を探そうとしています。 幅を 1000px にすると改行のない段落は1行が最大半角 154 文字になり、推奨の最大幅のほぼ2倍に達します。 ここで決定の要因として、次の各点を検討します。要素の位置を浮動に指定すると、幅が基礎情報ボックスよりも広い場合があり、結果として隣り合う文字の段はより狭くなります。 さらにこれまでは最大幅の規定がなかったため、編集者によっては幅が狭い画面で作業(あるいは狭い画面での表示を確認)するかもしれないし、場合によっては(現状では)ページ上で見た目が悪くなる要素があるかもしれず、原因はこれまで単に(例えば大きな表組みが)検討課題ではなかったせいかもしれません。

ここで私たちの取り組みを伝える検討課題がもう一つあり、グリッド単位のレイアウトの件です(この課題の概要はBuilding Better UI Designs With Layout Gridsをご参照ください。〈仮題:「レイアウトグリッドを使いより良質な UI 設計を実現」〉) この取り組みは、ページ上の視覚的なバランスの良さをもたらし、余白や幅その他を決めやすくなるよう意図されています。 現状、ベクター外装ではグリッド単位の設定を採用していませんが、できることがあるとすると基礎情報ボックスをグリッドの段組みとして解釈し(ごく一般的な要素であるため)、その上でその視点で複数のコンテンツ要素を想定して幅を検討することです。

共通の閲覧体験を確立する

最大幅の導入が閲覧体験に有益であるという第2の根拠として、それにより共通の体験を確立できるからで、編集者が特定のページのレイアウト(割り付け)を決めるときに役立つのではないかと期待されます(注記: WP:Manual of Style/Layout pageでは、最大幅を 1024px と述べているものの、ここの論点と区別して考えます。) 現状で、作業をする編集者はページ幅を 1500px に指定しているかもしれませんが、閲読者への表示幅は 1200px です。 最大幅の導入により、この差異を全く排除しようとしているのではありません(もちろん最大幅よりも狭い画面で閲読する利用者もいるでしょう)が、バリエーションの幅をかなり縮めることにはなります。

まとめ

これら全てを検討したところ、結論は2点になりました。

  1. 出発点として最大幅 800–1000px の範囲から取り掛かるのが適当でしょう。 ページのコンテンツを中央に配置、サイドバーを開いても閉じても、見栄えがするようにしました。
  2. ウィキペディアの記事の読みやすさに特化した調査は、ぜひ実行する価値があると考えます。 これを実現するリソースが見つかるよう望んでいます。

追加的な注記

テンプレート/コンテンツ/特別ページ/その他 を壊す

ウィキペディアが、またWikimediaのウィキ群が知識配分の強力なツールとして成立する要素には、情報の表現方法にごく少しの制限しか加えていない点が挙げられます。 この結果、同一のページにそれぞれ異なる要素がかなりたくさん盛り込まれています。表組み、画像のギャラリー、図、パノラマ画像、グラフ、フォーム、地図、カテゴリのボックスなどなど。 モバイルサイトのデザインやコンテンツの見栄えの調整には苦労しましたが、max-widthではページの見栄えがよくない場合があると認識しています。 現在の計画は :

  • テストウィキコミュニティと協力して問題を特定し、テンプレートスタイルやその他の既存ツールを駆使して解決策を検討する。
  • 特別ページにmax-widthを実装しない。 特別ページは、「読むこと」を目的としているものは少なく、リストやダッシュボードとしての機能が多いので、これらのページのためにレスポンシブレイアウトの複雑作業を行うことができる時間が空くまでは、変更を加えません。 ここでは、この仕組みの初期のプロトタイプを紹介します。「履歴表示」と「閲覧」を切り替えることで、感覚をつかめます。

以前の会話

この議題は過去にも取り上げられています。 過去の議論のリンクはここに追加してください。

  1. Computer text line lengths affect reading and learning by Peter Orton, Ph.D. IBM Center for Advanced Learning(IBM高度学習センター ピーター・オルトン著「コンピューターの行の長さが閲読と学習に与える影響」)