Tools/Responsive_Design_Mode を更新 (#1337)

- conflicting 版は英語版で削除済みの旧版向けの記事であるため削除
- 正規版を 2021/06/29 時点の英語版に同期
- 画像1枚を日本語化

5 files changed, 100 insertions, 189 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 1b5ac61d89..3c6f7ba0af 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3612,7 +3612,7 @@
 /ja/docs/Tools/Profiler	/ja/docs/conflicting/Tools/Performance
 /ja/docs/Tools/Release_notes	/ja/docs/conflicting/Mozilla/Firefox/Releases
 /ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone	/ja/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE
-/ja/docs/Tools/Responsive_Design_Mode_(before_Firefox_52)	/ja/docs/conflicting/Tools/Responsive_Design_Mode
+/ja/docs/Tools/Responsive_Design_Mode_(before_Firefox_52)	/ja/docs/Tools/Responsive_Design_Mode
 /ja/docs/Tools/Responsive_Design_View	/ja/docs/Tools/Responsive_Design_Mode
 /ja/docs/Tools/Using_the_Source_Editor	/ja/docs/conflicting/tools/Keyboard_shortcuts
 /ja/docs/Tools/Web_Console-redirect-1	/ja/docs/Tools/Web_Console
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index d80d6090f0..64be149878 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -48339,13 +48339,6 @@
       "yyss"
     ]
   },
-  "conflicting/Tools/Responsive_Design_Mode": {
-    "modified": "2020-07-16T22:36:36.933Z",
-    "contributors": [
-      "wbamberg",
-      "yyss"
-    ]
-  },
   "conflicting/Web/API": {
     "modified": "2019-09-25T00:26:30.367Z",
     "contributors": [
diff --git a/files/ja/conflicting/tools/responsive_design_mode/index.html b/files/ja/conflicting/tools/responsive_design_mode/index.html
deleted file mode 100644
index 35f4517454..0000000000
--- a/files/ja/conflicting/tools/responsive_design_mode/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: レスポンシブデザインモード (Firefox 52 より前)
-slug: conflicting/Tools/Responsive_Design_Mode
-translation_of: Tools/Responsive_Design_Mode
-translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52)
-original_slug: Tools/Responsive_Design_Mode_(before_Firefox_52)
----
-<div>{{ToolsSidebar}}</div><div class="note">
-<p>このページでは、Firefox 52 より前のバージョンのレスポンシブデザインモードについて説明します。Firefox 52 以降については、<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a> をご覧ください。</p>
-</div>
-
-<p><a href="/ja/docs/Web_Development/Responsive_Web_design">レスポンシブデザイン</a> は、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインモードは、ウェブサイトやウェブアプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。</p>
-
-<p>以下のスクリーンショットは Wikipedia のモバイル版を、コンテンツエリアのサイズが 320x480 の状態で表示した例です。</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/12738/responsive-design-mode.png" style="height: 788px; width: 735px;"></p>
-
-<p>レスポンシブデザインモードは、コンテンツエリアのサイズをすばやくかつ正確に変更できるので便利です。</p>
-
-<p>もちろん、ブラウザーのウィンドウサイズを変えることもできるでしょう。しかしブラウザーのウィンドウを小さくするとほかのタブもすべて小さくなってしまい、ブラウザーのインターフェイスが使用しづらくなります。</p>
-
-<p>レスポンシブデザインモードを有効にした状態で、コンテンツエリアがリサイズされたまま通常どおりにブラウジングを続けることができます。</p>
-
-<h2 id="Enabling_and_disabling" name="Enabling_and_disabling">有効化と無効化</h2>
-
-<p>レスポンシブデザインモードの有効化方法は 3 つあります:</p>
-
-<ul>
- <li>Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) のウェブ開発サブメニューで [レスポンシブデザインモード] を選択する</li>
- <li><a href="/ja/docs/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> で [レスポンシブデザインモード] ボタンを押す</li>
- <li>Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)</li>
-</ul>
-
-<p>また、レスポンシブデザインモードを無効化する方法も 3 つあります:</p>
-
-<ul>
- <li>[レスポンシブデザインモード] メニュー項目を再度選択する</li>
- <li>ウィンドウの左上隅にある [終了] ボタンをクリックする</li>
- <li>Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)。Firefox 34 より前では、Esc キーでもレスポンシブデザインモードが閉じました。</li>
-</ul>
-
-<h2 id="Resizing" name="Resizing">リサイズ</h2>
-
-<p>コンテンツエリアのサイズを変更する方法は 2 つあります:</p>
-
-<ul>
- <li><a href="#select-size">[サイズ選択] コントロール</a> を使用する</li>
- <li>コンテンツエリアの右端と下端、および右下隅にあるコントロールをクリックアンドドラッグする</li>
-</ul>
-
-<p>クリックアンドドラッグでリサイズする場合、Control キー (Mac OS X では Cmd キー) を押しながら操作するとリサイズ時の移動速度が遅くなります。これにより、精密なサイズ設定が容易になります。</p>
-
-<h2 id="Responsive_Design_Mode_controls" name="Responsive_Design_Mode_controls">レスポンシブデザインモードの操作</h2>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/12736/responsive-design-mode-controls.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
-
-<p>レスポンシブデザインモードでページを表示しているときは、ウィンドウの上部に 5 個のコントロールがあります:</p>
-
-<dl>
- <dt>終了</dt>
- <dd>レスポンシブデザインモードを終了して、通常のブラウジングに戻ります。</dd>
- <dt>サイズ選択</dt>
- <dd>いくつかの幅と高さのプリセット、または独自に定義したサイズから選択します。</dd>
- <dt>高さと幅を入れ替え</dt>
- <dd>スクリーンの向きのポートレートとランドスケープを切り替えます。</dd>
- <dt>タッチイベントをシミュレート</dt>
- <dd>touch イベントのシミュレーションを有効化/無効化します。touch イベントのシミュレーションを有効化すると、mouse イベントを <a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events">touch イベント</a> に変換します。</dd>
- <dt>スクリーンショット</dt>
- <dd>コンテンツエリアのスクリーンショットを取得します。スクリーンショットは、Firefox の既定のダウンロード先に保存します。</dd>
- <dt>Custom User Agent を設定</dt>
- <dd><em>Firefox 47 の新機能</em>。ユーザーエージェント文字列を入力して、入力ボックスからフォーカスを外します。入力ボックスを青色でハイライト表示して、入力した UA 文字列を使用していることを示します。Firefox はカレントタブから実行するリクエストに限り、指定した UA 文字列を含めます。これは、<a href="/ja/docs/Browser_detection_using_the_user_agent">UA スニッフィング</a> によってブラウザーごとに異なるコンテンツを提供するサイトで役に立ちます。文字列を選択および削除すると、通常の UA 文字列に戻ります。</dd>
-</dl>
diff --git a/files/ja/tools/responsive_design_mode/index.html b/files/ja/tools/responsive_design_mode/index.html
index f5d713a53d..a14ff5927e 100644
--- a/files/ja/tools/responsive_design_mode/index.html
+++ b/files/ja/tools/responsive_design_mode/index.html
@@ -9,142 +9,142 @@ tags:
   - Responsive Design
   - Tools
   - Web Development
-  - 'l10n:priority'
+  - l10n:priority
 translation_of: Tools/Responsive_Design_Mode
 ---
-<p>{{ToolsSidebar}}</p>
+<div>{{ToolsSidebar}}</div>
 
-<p><a href="/ja/Apps/Progressive/Responsive">レスポンシブデザイン</a> は、さまざまな端末、特にデスクトップやラップトップだけでなく携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。</p>
+<p><a href="/ja/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks">レスポンシブデザイン</a> は、さまざまな端末、特にデスクトップやラップトップだけでなく、携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。</p>
 
 <p>もっとも明らかな要素は画面のサイズですが、ほかにもディスプレイの画素密度やタッチをサポートするかといった要素があります。レスポンシブデザインモードは、さまざまな端末でウェブサイトがどのように表示および動作するかを確認するために、これらの要素をシミュレーションする手段を提供します。</p>
 
-<h2 id="Toggling_Responsive_Design_Mode" name="Toggling_Responsive_Design_Mode">レスポンシブデザインモードを切り替える</h2>
+<h2 id="Toggling_Responsive_Design_Mode">レスポンシブデザインモードの切り替え</h2>
 
-<p>レスポンシブデザインモードを切り替える方法は 3 つあります:</p>
+<p>レスポンシブデザインモードを切り替える方法は 3 つあります。</p>
 
 <ul>
- <li>Firefox メニュー (メニューバーを表示している場合や macOS では [ツール] メニュー) の [ウェブ開発] サブメニューで [レスポンシブデザインモード] を選択します。</li>
- <li>開発ツールのツールボックスで、<a href="/ja/docs/Tools/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールバー</a> の [レスポンシブデザインモード] ボタンを押します。<img alt="" src="https://mdn.mozillademos.org/files/16318/RDM_button.png" style="display: block; height: 664px; margin-left: auto; margin-right: auto; width: 852px;"></li>
- <li>キーボードで Ctrl + Shift + M (OS X では Cmd + Opt + M) を押下します。</li>
+ <li>Firefox メニューの<strong>ウェブ開発</strong>サブメニュー (メニューバーを表示している場合や macOS では<strong>ツール</strong>メニュー) の<strong>ウェブ開発</strong>サブメニューで<strong>レスポンシブデザインモード</strong>>を選択します。</li>
+ <li>開発ツールのツールボックスで、<a href="/ja/docs/Tools/Tools_Toolbox#toolbar">ツールバー</a> の [レスポンシブデザインモード] ボタンを押します。 <img alt="" src="rdm_button.png" style="display: block; margin-left: auto; margin-right: auto;"></li>
+ <li>キーボードで <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd> (OS X では <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd>) を押下します。</li>
 </ul>
 
-<h2 id="Using_Responsive_Design_Mode" name="Using_Responsive_Design_Mode">レスポンシブデザインモードを使用する</h2>
+<h2 id="Controlling_Responsive_Design_Mode">レスポンシブデザインモードの操作</h2>
 
-<p>レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。初期状態は 320 x 480 ピクセルです:</p>
+<p>レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。初期状態は 320 x 480 ピクセルです。</p>
 
 <div class="note">
-<p><strong>メモ:</strong> レスポンシブデザインモードで選択したデバイスは、セッション間で保存されます。</p>
+<p><strong>メモ:</strong> レスポンシブデザインモードで選択した端末とその向き (縦または横) は、セッションをまたいで保存されます。</p>
 </div>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16319/RDM.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 852px;"></p>
+<p><img alt="" src="responsive_ui.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
 
-<p>レスポンシブデザインモード自体の切り替えとは別に、開発ツールのツールボックスを表示または非表示にすることができます:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/16320/RDMdevtools.png" style="display: block; height: 799px; margin-left: auto; margin-right: auto; width: 852px;"></p>
-
-<p>レスポンシブデザインモードを有効にした状態で、コンテンツ領域がリサイズされたまま通常どおりにブラウジングを続けることができます。</p>
-
-<h2 id="Device_selection" name="Device_selection">端末選択</h2>
-
-<p>ビューポートの上に [端末が選択されていません] と表示されています。ここをクリックすると、端末名の一覧が開きます。端末を選択すると、レスポンシブデザインモードは以下の特定を、その端末に合わせて設定します:</p>
+<p>選択した端末の情報がディスプレイの中央に表示されます。表示内容は左から右に向かって次のようになっています。</p>
 
 <ul>
- <li>画面のサイズ</li>
- <li>端末の画素密度 (端末の物理ピクセルと端末に依存しないピクセルの比率)</li>
- <li>タッチイベントのシミュレーション</li>
+ <li><em>選択中の端末の名前</em> - 「端末設定」画面で選択した端末が表示されるドロップダウンリストです。</li>
+ <li><em>画面サイズ</em> - 幅の高さの値を編集して端末サイズを変更するには、数値を直接編集したり、 <kbd>↑</kbd> と <kbd>↓</kbd> キーで値を 1 ピクセルずつ増減させたり、 <kbd>Shift</kbd> を押しながら押すと値を 10 ずつ変化させたりすることができます。
+  <ul>
+   <li>マウスホイールでは、サイズの値を 1 ピクセルずつ変化させることができます</li>
+   <li>また、ビューポートの右下隅をつかみ、希望の大きさにドラッグすることで、端末の画面サイズを変更することができます。</li>
+  </ul>
+ </li>
+ <li><em>方向 (縦または横)</em> - このセッションはセッションをまたいで保持されます</li>
+ <li><em>DPR (ピクセル比)</em> - Firefox 68 以降では、 DPR は編集できなくなりました。 DPR を変更するには新しい端末を作成してください</li>
+ <li><em>帯域制限</em> - 2G, 3G, LTE など、適用する接続の帯域制限を選択できるドロップダウンリストです</li>
+ <li><em>タッチシミュレーションの有効化/無効化</em> - レスポンスデザインモードがタッチイベントをシミュレートするかどうかを切り替えます。タッチイベントシミュレーションが有効になっている場合は、マウスイベントが<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>に変換されます。これには (Firefox 79 以降では) マウスドラッグイベントのタッチドラッグイベントへの変換も含まれます。 (なお、タッチシミュレーションが有効になると、ツールバーアイコンが青くなります。シミュレーションが無効になると、アイコンが黒くなります。</li>
 </ul>
 
-<p>さらに Firefox は <a href="/ja/docs/Web/HTTP/Headers/User-Agent">User-Agent</a> HTTP リクエストヘッダーを、選択した端末の既定のブラウザーであると名乗るように設定します。例えば iPhone を選択すると、Firefox は自身が Safari であると名乗ります。<code><a href="/ja/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> プロパティも同じ値を設定します。</p>
-
-<p>{{EmbedYouTube("JNAyKemudv0")}}</p>
-
-<p>ドロップダウンリストにある端末は、選択可能な端末のサブセットです。ドロップダウンリストの末尾に [リストを編集...] という項目があります。これを選択するとすべての選択肢を含むパネルが表れて、ドロップダウンリストに表示したい端末を選択できます。端末一式や各端末に関連付けられている値は、<span class="im"><a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices</a></span> から取得できます。</p>
-
-<h3 id="Saving_custom_devices" name="Saving_custom_devices">カスタム端末を保存する</h3>
-
-<p>Firefox 54 より、レスポンシブデザインモードでカスタム端末を保存できます。それぞれの端末で以下の特性を持つことができます:</p>
+<p>画面の右端には 3 つのボタンがあり、次のようなことができます。</p>
 
 <ul>
- <li>サイズ</li>
- <li>端末の画素密度 (devicePixelRatio)</li>
- <li>ユーザーエージェント</li>
- <li>タッチのサポート</li>
+ <li><em>カメラボタン</em> - スクリーンショットを撮ります
+  <ul>
+   <li>
+    <p>スクリーンショットは Firefox の既定のダウンロード先に保存されます。</p>
+   </li>
+   <li>
+    <p>開発者ツールの<a href="/ja/docs/Tools/Settings">設定</a>ページにある「スクリーンショットをクリップボードへコピー」がチェックされている場合、スクリーンショットはシステムクリップボードのにコピーされます。</p>
+   </li>
+  </ul>
+ </li>
+ <li><em>設定ボタン</em> - レスポンスデザインモードの設定メニューを開きます</li>
+ <li><em>閉じるボタン</em> - レスポンスデザインモードを閉じ、通常の閲覧に戻ります</li>
 </ul>
 
-<p>また、端末モデル名にマウスポインターを乗せると、既存の端末の特性をツールチップでプレビューできます。</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14797/RDM%20Custom%20Device.gif" style="display: block; height: 800px; margin: 0px auto; width: 800px;"></p>
+<p>設定メニューには次のようなコマンドがあります。</p>
 
-<h2 id="Device_controls" name="Device_controls">端末の制御</h2>
+<p><img alt="" src="responsive_setting_menu.png" style="display: block; margin: 0 auto;"></p>
 
-<p>ほとんどの端末の特性について、特別な値を与えることもできます。</p>
-
-<h3 id="Setting_screen_size" name="Setting_screen_size">画面のサイズを設定する</h3>
-
-<p>画面のサイズを設定するには、ビューポートの下にある値をクリックして編集します:</p>
+<ul>
+ <li><em>左寄せビューポート</em> - チェックした場合、レスポンシブデザインモードのビューポートがブラウザーウィンドウの左端に移動します</li>
+ <li><em>ユーザーエージェントを表示</em> - チェックした場合、ユーザーエージェント文字列を表示します</li>
+ <li>最後の 2 つの選択肢は、いつページが読み込まれるのかを定義します。
+  <ul>
+   <li><em>タッチシミュレーションが変更されたときに再読み込み:</em> このオプションが有効になった場合は、タッチ対応を切り替えるたびにページが再読み込みされます。</li>
+   <li><em>ユーザーエージェントが変更されたときに再読み込み:</em> このオプションが有効になった場合は、ユーザーエージェントが変更されるたびにページが再読み込みされます。</li>
+  </ul>
+ </li>
+</ul>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14939/rdm-set-size-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+<p>これらが変更されたときに再読み込みするようにすると、そうしないと適用されないページの動作があるため便利です。例えば、多くのページでは、ロード時にタッチの対応をチェックし、対応している場合にのみイベントハンドラーを追加したり、特定のブラウザーでのみ特定の機能を有効にしたりしています。</p>
 
-<p>ビューポートの右下の角をドラッグして、サイズを変更することもできます。</p>
+<p>しかし、そのような機能を確認することに興味がない場合 (異なるサイズでの全体的なレイアウトを確認しているだけのような場合)、このような再読み込みは時間を浪費し、生産性の高い仕事を失う可能性があるため、これらの再読み込みを制御できると便利です。</p>
 
-<p>また Firefox 59 より、キーボードで画面のサイズを編集できます。2 つの寸法の値のいずれかにフォーカスがある (またはカーソルがある) ときに上下のカーソルキーを押すか押し続けて、寸法を 1 ピクセルずつ増減できます。</p>
+<p>現在は、このような設定を初めて変更したときに、再読み込みが自動的に行われなくなったことを示す警告メッセージと、再読み込みを自動的に行う方法についての情報が表示されるようになっています。例えば、以下のようになります。</p>
 
-<p>より早く寸法を変えたい場合は、Shift キーを押しながら上下カーソルキーを押すか押し続けると、寸法を 10 ピクセルずつ増減できます。</p>
+<p><img alt="" src="page-reload-warning.png" style="display: block; margin: 0 auto;"></p>
 
-<h3 id="Setting_device_pixel_ratio" name="Setting_device_pixel_ratio">端末の画素密度を設定する</h3>
+<h2 id="Developer_Toolbox_with_RDM">レスポンシブデザインモードと開発者ツールボックス</h2>
 
-<p>端末の画素密度を設定するには、[DPR] のリストボックスをクリックして希望する値を選択します。</p>
+<p>レスポンシブデザインモード自体の切り替えとは別に、開発ツールのツールボックスを表示または非表示にすることができます。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14941/rdm-set-dpr-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+<p><img alt="" src="rdmdevtools.png" style="display: block; margin-left: auto; margin-right: auto;">レスポンシブデザインモードを有効にした状態で、コンテンツ領域がリサイズされたまま通常どおりに閲覧を続けることができます。</p>
 
-<h3 id="Toggling_touch_event_simulation" name="Toggling_touch_event_simulation">タッチイベントのシミュレーションを切り替える</h3>
+<h2 id="Device_selection">端末の選択</h2>
 
-<p>タッチイベントのシミュレーションを有効化/無効化するには、人差し指を立てている手のアイコンをクリックします:</p>
+<p>ビューポートのすぐ上に「no device selected」というラベルがあります。これをクリックすると、端末名の一覧が表示されます。端末を選択すると、レスポンシブデザインモードでは、選択した端末に合わせて以下のプロパティが設定されます。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14935/rdm-toggle-touch-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+<ul>
+ <li>画面のサイズ</li>
+ <li>端末の画素密度 (端末の物理ピクセルと端末に依存しないピクセルとの比率)</li>
+ <li>タッチイベントのシミュレーション</li>
+</ul>
 
-<p>タッチイベントのシミュレーションを有効化すると、マウスイベントを <a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events">タッチイベント</a> に変換します。</p>
+<p>さらに Firefox は HTTP の <a href="/ja/docs/Web/HTTP/Headers/User-Agent">User-Agent</a> リクエストヘッダーを、選択した端末の既定のブラウザーであると名乗るように設定します。例えば iPhone を選択すると、Firefox は自身が Safari であると名乗ります。 <code><a href="/ja/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> プロパティも同じ値に設定されます。</p>
 
-<h3 id="Controlling_page_reload_behavior" name="Controlling_page_reload_behavior">ページ再読み込みの動作を制御する</h3>
+<p>{{EmbedYouTube("JNAyKemudv0")}}</p>
 
-<p><em>自動再読み込み</em> ドロップダウンメニューは、Firefox 60 の新機能です:</p>
+<p>ドロップダウンリストにある端末は、選択可能な端末の一部です。ドロップダウンリストの末尾に <strong>リストを編集...</strong> という項目があります。これを選択すると、すべての選択肢を含むパネルが表れて、ドロップダウンリストに表示したい端末を選択できます。端末一式や各端末に関連付けられている値は、<span class="im"><a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices</a></span> から取得できます。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15841/reload-behavior-controls.png" style="display: block; margin: 0 auto;"></p>
+<h3 id="Creating_custom_devices">カスタム端末の作成</h3>
 
-<p>メニューをクリックすると 2 つの項目があり、どちらもデフォルトで表示されます:</p>
+<p>レスポンシブデザインモードで<strong>カスタム端末を追加...</strong>をクリックすると、カスタム端末を作成して保存することができます。端末ごとに以下の特性を設定することができます。</p>
 
 <ul>
- <li>タッチシミュレーションが変更されたときに再読み込み: チェックボックスにチェックを入れると、タッチイベントのシミュレーションを有効化すると自動的にページを再読み込みします。</li>
- <li>ユーザーエージェントが変更されたときに再読み込み: チェックボックスにチェックを入れると、ユーザーエージェントを変更すると自動的にページを再読み込みします。</li>
+ <li>名前</li>
+ <li>サイズ</li>
+ <li>端末ピクセル比</li>
+ <li>ユーザーエージェント文字列</li>
+ <li>タッチスクリーン</li>
 </ul>
 
-<p>Firefox 60 より前のバージョンでは、自動的に再読み込みしていました。これは、再読み込みしなければ適用されないページがあるためです。例えば、多くのページが読み込み時にタッチのサポートを確認して、サポートされている場合に限りイベントハンドラーを追加したり、特定のブラウザーでのみ特定の機能を有効化したりしています。</p>
-
-<p>しかし、このような機能を実行することに興味がない場合 (さまざまなサイズで全体のレイアウトを確認するなど) は、再読み込みで時間を浪費してよい仕事ができなくなるかもしれませんので、再読み込みを制御できると役に立ちます。</p>
-
-<p>はじめてこの設定を変更したときに再読み込みを自動的に行わないことと、自動的に再読み込みできるようにする方法を示す警告メッセージを表示します。例えば:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/15840/page-reload-warning.png" style="display: block; margin: 0 auto;"></p>
-
-<h3 id="Toggling_orientation" name="Toggling_orientation">向きを切り替える</h3>
-
-<p>画面の向きをポートレートまたはランドスケープに切り替えるには、端末選択の隣にあるアイコンをクリックします:</p>
+<p>また、端末モデル名にマウスポインターを乗せると、既存の端末の特性をツールチップでプレビューできます。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14937/rdm-toggle-orientation-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
+<p>{{EmbedYouTube("SA0RlGtOCmE")}}</p>
 
-<h2 id="Network_throttling" name="Network_throttling">ネットワークを調整する</h2>
+<h2 id="Network_throttling">ネットワークの帯域制限</h2>
 
-<p>とても高速なネットワーク接続を使用してすべての開発やテストを行っている場合は、低速な接続を使用してアクセスしたときにサイトで問題が発生するかもしれません。レスポンシブデザインモードで、さまざまな種類のネットワークの特徴をほぼエミュレートするようブラウザに指示できます。</p>
+<p>とても高速なネットワーク接続を使用してすべての開発やテストを行っている場合は、低速な接続を使用してアクセスしたときにサイトで問題が発生するかもしれません。レスポンシブデザインモードでは、さまざまな種類のネットワークの特徴に近い形でエミュレートするようブラウザーに指示することができます。</p>
 
-<p>以下の特徴をエミュレートします:</p>
+<p>エミュレートするのは以下の特徴です。</p>
 
 <ul>
  <li>ダウンロード速度</li>
  <li>アップロード速度</li>
- <li>最小の遅延</li>
+ <li>最小遅延</li>
 </ul>
 
-<p>以下の表で各ネットワークに関連付けられた値を示しますが、正確なパフォーマンスを測定するためにこの機能を頼らないようにしてください。これは、さまざまな状況におけるユーザーエクスペリエンスのおおまかな見解を示そうとするものです。</p>
+<p>以下の表で各ネットワークに関連付けられた値を示しますが、正確なパフォーマンスを測定するためにこの機能を頼らないようにしてください。これは、さまざまな状況における使い勝手のおおまかな考え方を示すものです。</p>
 
 <table class="fullwidth-table standard-table">
  <thead>
@@ -152,71 +152,61 @@ translation_of: Tools/Responsive_Design_Mode
    <th scope="col">選択肢</th>
    <th scope="col">ダウンロード速度</th>
    <th scope="col">アップロード速度</th>
-   <th scope="col">最小の遅延 (ms)</th>
+   <th scope="col">最小遅延 (ms)</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>GPRS</td>
-   <td>50 Kb/s</td>
-   <td>20 Kb/s</td>
+   <td>50 KB/s</td>
+   <td>20 KB/s</td>
    <td>500</td>
   </tr>
   <tr>
    <td>Regular 2G</td>
-   <td>250 Kb/s</td>
-   <td>50 Kb/s</td>
+   <td>250 KB/s</td>
+   <td>50 KB/s</td>
    <td>300</td>
   </tr>
   <tr>
    <td>Good 2G</td>
-   <td>450 Kb/s</td>
-   <td>150 Kb/s</td>
+   <td>450 KB/s</td>
+   <td>150 KB/s</td>
    <td>150</td>
   </tr>
   <tr>
    <td>Regular 3G</td>
-   <td>750 Kb/s</td>
-   <td>250 Kb/s</td>
+   <td>750 KB/s</td>
+   <td>250 KB/s</td>
    <td>100</td>
   </tr>
   <tr>
    <td>Good 3G</td>
-   <td>1.5 Mb/s</td>
-   <td>750 Kb/s</td>
+   <td>1.5 MB/s</td>
+   <td>750 KB/s</td>
    <td>40</td>
   </tr>
   <tr>
    <td>Regular 4G/LTE</td>
-   <td>4 Mb/s</td>
-   <td>3 Mb/s</td>
+   <td>4 MB/s</td>
+   <td>3 MB/s</td>
    <td>20</td>
   </tr>
   <tr>
    <td>DSL</td>
-   <td>2 Mb/s</td>
-   <td>1 Mb/s</td>
+   <td>2 MB/s</td>
+   <td>1 MB/s</td>
    <td>5</td>
   </tr>
   <tr>
    <td>Wi-Fi</td>
-   <td>30 Mb/s</td>
-   <td>15 Mb/s</td>
+   <td>30 MB/s</td>
+   <td>15 MB/s</td>
    <td>2</td>
   </tr>
  </tbody>
 </table>
 
-<p>ネットワークを選択するには、初期値として [No throttling] と表示されているリストをクリックします:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14945/rdm-network-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
-
-<h2 id="Taking_a_screenshot" name="Taking_a_screenshot">スクリーンショットを取得する</h2>
-
-<p>カメラのアイコンをクリックすると、ビューポートのスクリーンショットを取得します:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14943/rdm-screenshot-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
-
-<p>スクリーンショットは、Firefox の既定のダウンロード先に保存します。</p>
+<p>ネットワークを選択するには、初期値として [帯域制限なし] と表示されているリストをクリックしてください。</p>
 
-<p>Firefox 53 より、開発ツールの <a href="/ja/docs/Tools/Settings">オプション</a> ページで "Screenshot to clipboard" にチェックを入れると、スクリーンショットをシステムのクリップボードにもコピーします。</p>
+<p><img alt="" src="rdm_throttling.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/ja/tools/responsive_design_mode/responsive_setting_menu.png b/files/ja/tools/responsive_design_mode/responsive_setting_menu.png
new file mode 100644
index 0000000000..b993978ddf
--- /dev/null
+++ b/files/ja/tools/responsive_design_mode/responsive_setting_menu.png