モバイル端末に適したウィキメディアのウィキ群の記事の書き方

This page is a translated version of the page Recommendations for mobile friendly articles on Wikimedia wikis and the translation is 86% complete.

Recommendations were made and are maintained by the Web team. They are based on data, technology trends, and our capabilities. As such, they evolve and may change.

本文書では、MediaWiki のウィキの経験から、どうすればモバイル端末利用者に最も役立つ編集者になれるかアドバイスを行います。この文書の執筆はモバイル用アプリとウェブの複数の開発者で、MediaWiki のコンテンツ担当歴はそれぞれ10年以内です。モバイルに適したコンテンツから選んだいくつかの要点に基づき、実用的なガイドにまとめてあります。

ウィキメディアのウィキでは、訪問者の過半数がモバイル版サイトにアクセスしており、多くの地域ではウィキメディアのコンテンツにアクセスできる主要な手段は、モバイル版になっています。

Category:モバイルに適していないテンプレート（w:Category:Templates that are not mobile friendly）など、テンプレート管理用のカテゴリの使用が推奨されており、モバイル版で問題のあるテンプレートにフラグを立て、修正の手間を分担するために役立つ方策です。

最善手法

Wrap wide images and tables

If an image or table is larger than 500px consider how it will display on mobile or smaller monitors. If the image should scale down, consider the use of TemplateStyles to define that behaviour. If the image should become horizontally scrollable you will need to use a noresize class on the image to disable Minerva optimisations as well as provide a containing element with overflow scrolling set. See w:Template:Wide image as an example.

Bad example

[[Image:Panorama.jpg|1800px]]

Good example

<div style="margin:0 auto;overflow:scroll;width:auto;max-width:100%">[[File:Brooklyn_Skyline_(9910358874).jpg|1800px|class=noresize]]</div>

プロジェクト横断的なテンプレートのHTMLは標準的なクラス名を使ってマークアップ

メッセージ用テンプレートのチェコ語版は、出力は見た目は英語版に似ていても、HTMLマークアップは全く異なります。

モバイル版サイトは、同じ用語を使って書かれたコンテンツに依拠しています。モバイル版の使用感を異なる言語間で一貫させるには、意味論的に類似した用語を使うことが重要です。

多くの言語版でテンプレートを英語版ウィキペディアからコピー&ペーストしている現状から、「標準的」名前のほとんどが英語優先という傾向があるものの、名前には最も広く使われるクラスを反映するような方向転換を大いに検討したいと考えています。とりわけ、ambox の名前は意味論的定義を改良する必要があります。

.infobox - 事項 (例 dob = 2018-12-25; name = Santa Claus Junior) の要旨を構成要素で示す。例えばTemplate:Infoboxなど。
.dablink - disambiguation notice that appears at the top of the page.
.hatnote - リダイレクトや類似の記事名があることをページ冒頭に示す。ja:Template:Hatnote (頭注) など。
.ambox - ページに問題点があると示す。ja:Template:Amboxなど。
- .ambox .mbox-image - 問題点ごとにアイコンを割り当てる。ja:Template:Amboxなど。
- .ambox .mbox-text-span - 問題点のみ記述する（修正法はなし）。
- .ambox .hide-when-compact - 問題点の修正法を説明。（訳注:おそらくモバイルでは非表示にする）
.navigation-box or .navbox - describes a box that contains various navigation links. For example sister site links. Note, the former is removed from mobile, so use the navigation-box class where possible for content that you know to be mobile friendly.
.side-box for boxes that appear at the sides of articles e.g. quote boxes.
.metadata for boxes that appear in the article that do not fit the criteria above.

悪い例

（訳注：おそらく、意味論的に非常にあいまいなクラス名を使っている）

Template:Infobox

<div class="my-infobox-like-component"></div>

良い例

<!-- semantic infobox class added per [[:mw:Recommendations_for_mobile_friendly_articles]] for mobile compatibility -->
<div class="my-infobox-like-component infobox"></div>
{{Infobox}}

可能であれば基礎情報ボックスをウィキテキストの上に配置しない

infobox（基礎情報ボックス）を記事の最初に配置すると、モバイル版での記事の可読性と読み込み時間に影響します。現在のモバイル版ソフトウェア (Extension:MobileFrontend ) はこの問題を修正処理しますが、時には失敗することもあるため、可能なら常に以下の並べ方にしてください。さもなければ正しい順序に修正できたか、実際にモバイル機器で編集結果を確認してください。

infobox を最初に置く場合の可読性の点では、閲覧者がその主題の導入文や文脈に触れないうちに詳細情報を読むことになり、しばしば混乱をもたらします。特に閲覧者がよく知らない主題では、わざわざ infobox の内容をスクロールしないと自分が読みたかった記事を読んでいるかすら確認できない事態が露見しました。モバイル版とデスクトップ版はサイト表示の一貫性を実現し（デスクトップ版も第1段落をページの上位に配置）、閲覧者は先に記事の主題に触れてからinfobox をスクロールすればよいように変更しました。

読み込み性能の観点から、 infobox を2番目の位置へ移動して平均読み込み時間が大幅に減少すると、閲覧者に対してコンテンツを以前よりも早く表示できるようになります。

詳細情報: 閲覧/Web/プロジェクト/導入段落の移動

悪い例

{{Infobox}}
記事の第1段落の始まり

良い例

記事の第1段落の始まり
{{Infobox}}

メタデータ（座標を含む）は記事の末尾に

デスクトップ版表示では座標テンプレート(coordinate)を記事の右上に置く傾向があり、その位置はモバイル版だと実用的ではありません。画面サイズのせいで上部にスペースが確保できないからです。こうした情報を記事本文の例えば末尾などに配置すると、モバイル版機能の選択肢を増やし、同時にモバイル版でも表示位置を確保できます。

メタデータを末尾に配置することの恩恵は他にもあり - ページプレビュー（ポップアップ）アルゴリズムを助け、モバイル版サイトの第1段落の検出処理を早めて記事の要約作成を支えます。

悪い例

{{Coord|35|N|136|E|type:country_region:JP|display=title}}
記事の第1段落の始まり

良い例

記事の第1段落の始まり

....
....
....
{{Coord|35|N|136|E|type:country_region:JP|display=title}}

頭注、ambox、infoboxはテンプレートの使用順を統一

モバイル版のコンテンツは、表示スタイルは変更できても、コンテンツ自体の移動はできません。要素を種類別にグループ分けすると、それに従ってデータ処理するモバイル版サイトやアルゴリズムに適合します。

モバイル版の構成要素はいわゆる頭注と呼ばれるもの(Template:Hatnoteなど)の次にambox (ページの問題点を示すTemplate:Amboxなど)が続き、配置はページの最上部だと想定されています。Infobox や他の要素はこれらの後に置かれます。

この順序が守られない状況では、モバイル版サイトによるコンテンツの最適化はできず、コンテンツはモバイル向けに最適化されません。

悪い例

{{infobox}} <!-- infobox -->
{{page issue}} <!-- .ambox -->
{{disambiguation}} <!-- .hatnote -->
{{page issue}} <!-- .ambox -->

良い例

{{disambiguation}}  <!-- .hatnote -->
{{page issue}}  <!-- .ambox -->
{{page issue}}  <!-- .ambox -->
{{infobox}} <!-- .infobox (table or div) -->

サイズと配置に影響するプロパティをインラインの書式に使わない

CSSのプロパティのうち width、float、height を含む値はモバイル版で問題の原因になりやすいです。

大きな値が指定された場合、padding、border、margin も問題を起因しやすくなります。

通則的に、CSSのプロパティにて 100px 以上のピクセル値を使う場合、モバイル版で表示テストを行う必要があります。

理想的には、これらのプロパティに関連する要素はすべて、クラスと Extension:TemplateStyles とメディアクエリを使い、モバイル版とデスクトップ版の2通りの異なる処理を提供できるようにするべきです。

悪い例

<div style="width: 700px; float: left; padding: 5px; border: solid 1px black;">文章を書く</div>

良い例

<templatestyles src="..." />
<div class="mybox">文章を書く</div>

.mybox { width: 100%; padding: 5px; border: solid 1px black; }

@media all and ( min-width: 720px ) {
  .mybox { width: 700px; float: left; }
}

表の使用はデータに限定

説明のために表 (tabel) を使用することはやめてください。表をモバイル用に最適化するには非常に手間がかかる上、説明用の要素は通常、モバイル向けの最適化処理で壊れてしまいます。表 (訳注：tableタグ) のレイアウトを、divタグを使ったレイアウトに変更すべきです。

よい解決策を適用する代わりに、モバイル版では残念ながらこれらの要素を非表示にするしかありません。例えばナビゲーションボックスがもっとも顕著です。

Nested tables

If you do need to use tables, note they are designed in responsive design/flex in Mobile version.

メインページは必ずモバイル最適化する

この記事には検討課題が非常に多いため、説明があります。

テンプレートは単一ルートの要素に限定し認識可能なCSSクラスを持たせる

ウィキペディアのコンテンツの大部分は構造化されていません。コンピュータ解析と表示向けに最適化するヒントとしては、テンプレートの最も外側は必ず単一のHTML要素にし、その要素には固有のCSSクラス名を与え、このクラス名を全言語版のウィキで共有させる方法があります。この方法により、モバイル版ウェブサイトなどのソフトウェア (コンテンツサービス、Andoroid や iOSのネイティブなアプリなど) のコンテンツ認識が劇的に改善します。

悪い例

<div>foo</div>
<div>bar</div>

良い例

<div class=FoobarTemplate>
  <div>foo</div>
  <div>bar</div>
</div>

複数の問題点テンプレートの折りたたみ

記事に複数の問題点がある場合、それらを単一の「問題テンプレート」にまとめてから、折りたたみを指定します。モバイル版の問題点テンプレートは数値空間を占有してしまいますが、折りたたみを指定するとモバイルに適した外装に選択を増やします。

このことは特に、削除依頼に出された記事で問題になります。

悪い例

{{fringe|date=June 2018}}
{{rewrite|date=April 2018}}

{{Proposed deletion/dated
    |concern = 明らかな盗用
    |timestamp = 20180829061154
    |help = 
}}
{{Unreferenced|date=December 2009}}

良い例

{{multiple issues|
  {{fringe|date=June 2018}}
  {{rewrite|date=April 2018}} 
}}

{{Deletion notice with multiple_issues|
    {{Proposed deletion/dated
    |concern = 明らかな盗用
    |timestamp = 20180829061154
    |help = 
    }}
|
    {{Unreferenced|date=December 2009}}
}}

画像、情報ボックス、表の配置を限定しない

記事の表示の仕方をあらかじめこうであるべきだと限定しないよう、注意してください。デスクトップ版では2つの画像を置いても文の回り込みを特定できますが、モバイル版でそれと同じ表示ができるわけではありません。つまり「右の表」とか「左に示した画像」のような文は使わないでください。

記事の表示は、それぞれのパソコン、モバイル端末で流動的に異なると考えることが大事です。

文中で画像の参照が説明に必要ならば、縦に配置する方が安全です。

この例のように画像は2点ではなく1点にするか、縦に並べる方が適しています。

悪い例

<div>
  <div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px">
  [[File:Felipe Massa]]
  </div>
  <div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px"><
  [[File:Sergey Sirotkin]]
  </div>
  <div class="thumb-caption">左からフェリペ・マーサ（左）、セルゲイ・シロトキン（右）。</div>
</div>

良い例

<div>
  <div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px">
  [[File:Felipe Massa]]
  </div>
  <div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px"><
  [[File:Sergey Sirotkin]]
  </div>
  <div class="thumb-caption">上から順にフェリペ・マーサ（上）、セルゲイ・シロトキン（下）。</div>
</div>

ページ内の画像数を制限する

モバイル用サイトでは画像の遅延読み込み (lazy load) を行うため、大量の画像がある記事をモバイル端末で開こうとするとタイムアウトが発生することがあります。

画像の数を決めるには、ブラウザの開発者ツール（デベロッパーツール）で次の JavaScript を実行するとヒントが得られます。

$( 'img' ).length

理論上、単一のページに掲載する画像の上限は100枚です（サイズの大小に無関係）。画像点数が1万超のページは、モバイル機器ではアクセスできないので要注意です。

以下の例では表の中で画像の代わりに、UnicodeのEmojiやシンボルを使っています。

悪い例

Rank	Article											Views
1	A											3,895,581,597
2	B											62,210,344

良い例

Rank	Article											Views
1	A	🅱️	🅱️	🅱️	🅱️	🅱️	🅱️				🅱️	3,895,581,597
2	B	🅱️	🅱️	🅱️	🅱️	🅱️	🅱️		🅱️			62,210,344

モバイルに適した「ページの問題点」(ambox テンプレート) の作り方

「ページの問題点」のテンプレートをモバイルに適合させるには、いくつかのルールがあります。

Use the ambox class and mbox-text if not using a table

ambox クラスには「ページの問題点」の最も重要度が高い要素を選びます。

Preferably, the element should be a div, in which case the text portion of the element should have the mbox-text class.

amboxクラスを使って重大性を明確にする

Minerva の外装との適合性のために、これらのテンプレートのクラスによって指定されたメタデータから取得して表示されます。画像の場合は、.mbox-image クラスです。(または mbox-image クラスの要素の中に入れる。) クラスを追加して (以下に示す) 重大性の正確性に従って、その問題の種類が取得されるようにできます。


目的	使用すべきクラス
中立的な観点	`ambox-POV` または `mobile-issue-pov`
移動(改名)/統合	`ambox-move` または `mobile-issue-move`
重大性は中間的	`ambox-content` または `mobile-issue-severity-medium`
重大性が大きい	`ambox-serious` または `mobile-issue-severity-high`
重大性は低い	`ambox-style` または `mobile-issue-severity-low`

悪い例

<div class="ambox custom-class-issue-icon-POV">
    <div class="ambox-image">[[File:Commons-emblem-issue.svg]]</div>
</div>

良い例

<div class="ambox custom-class-issue-icon-POV ambox-POV">
    <div class="ambox-image mbox-image">[[File:Commons-emblem-issue.svg]]</div>
</div>

このクラス指定が存在すれば、Minerva外装は適切なアイコンを使います。

問題についての文章を2行に制限する

2行を超えたら、.hide-when-compact クラスを指定した要素の中に入れます。

悪い例

<table class="ambox">
    <tr>
    <td class="mbox-text">
        <b>Questa voce sull'argomento guerra è <a href="/wiki/Aiuto:Voci_da_aiutare" title="Aiuto:Voci da aiutare">da aiutare</a>.</b>
        <div style="font-size:90%;">
            <b>Motivo</b>: <i>manca la contestualizzazione dell'argomento, non si riesce a capire cosa sia. Mancano fonti e bisogna verificare l'enciclopedicità.</i>
        </div>
    </td>
    </tr>
</table>

良い例 (table version)

<table class="ambox">
    <tr>
    <td class="mbox-text">
        <b>Questa voce sull'argomento guerra è <a href="/wiki/Aiuto:Voci_da_aiutare" title="Aiuto:Voci da aiutare">da aiutare</a>.</b>
        <div style="font-size:90%;" class="hide-when-compact">
            <b>Motivo</b>: <i>manca la contestualizzazione dell'argomento, non si riesce a capire cosa sia. Mancano fonti e bisogna verificare l'enciclopedicità.</i>
        </div>
    </td>
    </tr>
</table>

Good example (div version)

<div class="ambox">
    <div class="mbox-text">
        <b>Questa voce sull'argomento guerra è <a href="/wiki/Aiuto:Voci_da_aiutare" title="Aiuto:Voci da aiutare">da aiutare</a>.</b>
        <div style="font-size:90%;" class="hide-when-compact">
            <b>Motivo</b>: <i>manca la contestualizzazione dell'argomento, non si riesce a capire cosa sia. Mancano fonti e bisogna verificare l'enciclopedicità.</i>
        </div>
    </div>
</div>

問題点のテキスト部分をマーク付けする

「ページの問題点」のテンプレートには画像、メタデータなど複数の要素があり、どの部分でその問題点を説明しているかを、コンピューターが認識できるということが実に重要となってきます。

そのため、ほとんどのプロジェクトではクラスの embox-text-div か mbox-text-span を使っています。このことでメッセージの重要部分を抜き出すことができ、モバイル用の低い解像度の画面において乱雑に表示される部分を減らします。

悪い例

<div class="ambox">
    <div class="mbox-text">
       <div class="mbox-text-span"> 
        This page has an issue.
            <div class="hide-when-compact">This is how you fix the issue if you didn't know how.</div>
        </div>
    </div>
    <div>
        Did you know that this is a wiki that anyone can edit? For general advice on editing take a look at the
        <a>guidelines page</a>!
    </div>
</div>

良い例

<div class="ambox">
    <div class="mbox-text-div"><div class="mbox-text-span"> 
        This page has an issue.
        <div class="hide-when-compact">This is how you fix the issue if you didn't know how.</div>
    </div></div>
    <div>
        Did you know that this is a wiki that anyone can edit? For general advice on editing take a look at the
        <a>guidelines page</a>!
    </div>
</div>

Do not put links inside section headings

In mobile, section headings links are used to collapse/expand sections. Use of links inside the section headings are thus discouraged. Where these links are essential, it is advised that editors disable section collapsing on the page by wrapping the entire content in a DIV element.

Bad example

== Link without heading ==
Text.

== [[Agriculture]] == <!-- link inside heading -->

Text about agriculture.

Good example

<div><!-- this page uses links inside headings so a wrapper element is used to disable section collapsing on mobile -->
== Link without heading ==
Text.

== [[Agriculture]] == <!-- link inside heading -->

Text about agriculture.
</div>

Infoboxes

Do not wrap infoboxes

A common pattern/mistake is to wrap an infobox either by incorrectly using wikitext or intentionally via HTML tags. The problem with this is it makes it difficult for mobile optimisations to apply as the infobox cannot be properly identified. If you must wrap them use the infobox-container class.

Bad example

:{{Infobox record label}}list item
''{{Infobox record label}} be bold!''
[[File:Photo_of_person|thumb|
{{Infobox person
| name               = Person
}}
]]
<div style="float: right">{{Infobox}}</div>

Good example

{{Infobox record label}}
:list item
{{Infobox record label}} ''be bold!''
{{Infobox person
| name               = Person
| image = File:Photo_of_person
}}
<div style="float: right" class="infobox-container">{{Infobox}}</div>

Do not style infoboxes in MediaWiki:Mobile.css

While infoboxes appear on many articles, they do not appear on all of them. In consequence, it is better to ship any styles for styling infoboxes using Extension:TemplateStyles .

Using MediaWiki:Mobile.css is highly discouraged as this can result in a cumulative layout shift. This is because Mobile.css unlike desktop loads via JavaScript and is not render blocking.

Bad example

Template:InfoboxExample:

<div class="infobox">
<h1>Infobox heading</h1>
</div>

MediaWiki:Mobile.css:

.infobox h1 { font-size: 24px; }

Good example

Template:InfoboxExample:

<div class="infobox">
<h1 style="font-size: 24px;">Infobox heading</h1>
</div>

OR

Template:InfoboxExample:

<templatestyles src="InfoboxExample/styles.css" />
<div class="infobox">
<h1>Infobox heading</h1>
</div>

Template:InfoboxExample/styles.css

.infobox h1 { font-size: 24px; }