Reading/Web/Desktop Improvements/Features/Limiting content width/ja

このプロジェクトの主な目的の 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 を示します:

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



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

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

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

In comparison, a Wikimedia wiki page on a browser window at 1280px* has a character count of ~170 characters per line, and that’s at the small end of the screen size spectrum. (*The most common computer screen size, accounting for 22% of users, is 1366px wide according to StatCounter; imagining a browser window at nearly full width you end up with ~1280px). さらに、ウィキメディアのウィキでは、画面の幅が大きくなるにつれて、1 行あたりの文字数が増えていきます (一方、前述の他のサイトでは、1 行あたりの文字数は変わらず、最大幅の制約の結果となっています). So on the second most popular screen-size, 1920px (21% of users), the character count per line is ~262 (again assuming a browser window at nearly full-width), more than three times the recommended value. So as a starting point we know that for paragraphs of uninterrupted text we are well over the recommended limit.

The question then becomes: why not limit the width of Wikimedia content such that we achieve the recommended line length, as other online content sites seem to? The short answer is: because our pages are different, and therefore people read them differently. Wikimedia wiki pages are very long, contain a large amount of information, and they are not uniform from one page to the next. As a result, people have a greater need to skim and search within pages than they would when reading a typical online article or book (this is supported by our research around reading time on Wikipedia). So while the line length recommendations provide a good starting point, we also must consider that the more narrow we make the content, the longer the page gets, and perhaps the more difficult scanning becomes (involves more scrolling, etc.) (for more information regarding different types of online reading please see this 2006 study conducted by the Nielsen Norman Group). Additionally, because Wikimedia wiki pages contain many elements that are floated inline alongside text it is not straightforward to achieve a specific number of text characters per line.

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

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


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

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


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

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


 * 2014 – 文字体裁改新プロジェクトの議論