MacBookに解像度の本気を出させた話【Dot by Dot】

皆さんはパソコンを使用していて「もっとディスプレイが広ければ」と感じたことがありますか？**ありますよね？！**（強制）

そこで今回は「Dot by Dot」表示をして使用感を検証してみたので皆さまに紹介します。

## 拡大率について

まずは事前知識から解説します。Windows、Macともに、システムの拡大率を変更することができます。実際にアクセスして触ってみるとどのようなものか感覚が得られると思います。

|windows|mac|
|-|-|
|`設定` > `システム` > `ディスプレイ`<br />「拡大表示とレイアウト」|`設定` > `ディスプレイ`|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/3970a01d-a20e-33c6-61fe-a42f66171d86.png)|![スクリーンショット 2024-12-25 22.48.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/430452a1-f0d2-9e77-8a37-5bb01a57e78a.png)|

### 拡大率と作業領域の関係

|拡大率|高い|低い|
|-|-|-|
|作業領域|狭い|広い|
|文字|綺麗|粗い|
|windows|200%|100%|
|mac|文字を拡大|スペースを拡大|

一般的に、**拡大率を上げれば作業領域は少なく、文字などがくっきり解像度高く、大きく表示**されます。Windowsの場合は100%→200%に、Macの場合は「文字を拡大」側を選択することで拡大率を上げられます。

逆に、**拡大率を低くすれば作業領域は多く、文字などが粗く、小さく表示**されます。Windowsの場合は200%→100%に、Macの場合は「スペースを拡大」側を選択することで縮小できます。

|![20250105_103044.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/6da9c2c5-768b-1879-d65b-a79be25e8890.jpeg)|![20250105_104840.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/0c32e0a4-2617-11b5-b0be-09a01bf883e3.jpeg)|
|-|-|
|拡大表示(作業領域少ない)|縮小表示(作業領域多い)|

また、**ディスプレイの解像度が高ければ高いほど作業領域が大きく、同じ拡大率で作業領域が広く表示**されます。フルHD(1920×1080)と4K(3840×2160)を比較すれば、4Kは**4倍の解像度、作業領域の差**があり、オススメされる由縁（ゆえん）でもあります。

:::note warn
ここまでの話は「画面の大きさ」とは異なりますのでご注意ください。
:::

### Dot by Dot表示について

次のRetinaを話すうえで重要な話となるのが「Dot by Dot」という概念です。Windowsで言うと**100%表示**に該当します。特に拡大も縮小もしていない状態です。最近のノートPCは**最初から拡大表示**されていることが多く、Dot by Dotになっているほうが珍しいです。

### Retina表示について

今回のキーワードであるRetina表示について解説します。Retina表示は、Windowsで言う**200%表示**に該当します。Macの設定上でRetinaと記述されていることはありませんが、デフォルトがRetina表示のことが多いです。

## 最新のMacBookは拡大（Retina）表示

![スクリーンショット 2025-01-05 9.08.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/b28d4cc2-98ee-d7de-0041-7905521c9c10.png)

少なくとも2020年のMacBook Airから解像度が**2560×1600**（WQXGA）以上の解像度を持つディスプレイを備えています。現在のMacOSは、この**Retina表示がデフォルト**となっています。**100%換算では1440×900 WXGA+表示**であり、デフォルトでは全画面ブラウザ表示で精一杯で、結構狭く感じます。

### デフォルトの「スペースを拡大」では差がない

となれば一番右の「スペースを拡大」で作業領域を広くできるではないか、と。その存在は知っており、MacでのDot by Dotの概念を知る前はその設定にしていました。

|デフォルト|スペースを拡大|
|-|-|
|![デフォルトの拡大率の表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/579b0521-0c04-0642-f4af-ffc069366049.png)|![スペースを拡大したときの表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/73c49789-f152-4ef7-85df-5338c1cbc0e0.png)|

しかし実際のところ微々たる差。多少大きさは変更されていますけど、ブラウザの表示がタブレット表示のままなんですね。

ブラウザのタブレット・PC表示の境界線は600~900pxでWebサイトによってまちまちで、今回の私のブログでは、スペースを拡大したあとの横幅（推定900px）でもタブレット表示のままでした。ここまで来るとWebサイト側に欠陥があると言っても過言ではないですね（自分のサイトですが）

ですが**ブラウザで「開発者モード」を開くとかなり狭い**のが現状です。ということもあり、上記の「スペースを拡大」程度ではまだ作業領域が足りないです。

もちろんブラウザ内で拡大縮小が可能なため、これよりも小さく（作業領域を広く）表示させることは可能です。しかし、他の全てのアプリで拡大率を設定する必要があり、システム側で一括で拡大率が変更できるに越したことはありません。

## MacBookの底力（Dot by Dot）

そこで今回やるのが「Dot by Dot」表示です。

やり方は、先程のディスプレイ設定の解像度選択エリアを「Option + クリック」し、かつ「すべての解像度を表示」を有効にすることで**解像度の選択肢が増えます**。


|![スクリーンショット 2025-01-05 9.08.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/b28d4cc2-98ee-d7de-0041-7905521c9c10.png)|![スクリーンショット 2025-01-05 9.09.10 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/c69958b7-dca7-6fa4-712b-8e56c75b0b1d.png)|
|-|-|
|デフォルトの選択肢|解像度表示＋「すべての解像度を表示」を有効に|

あとは一番上の解像度をクリックすれば出来上がり。あなたのPCはディスプレイの底力を存分に発揮できるようになりました。

:::note warn
Dot by Dot, Retina, 通常の「スペースを拡大」以外にも解像度の選択肢はありますが、あまり最適化されておらず、Macのノッチ部分が表示されなかったり、極端に解像度が落ちたりすることがあります。
:::

|![20250105_103044.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/6da9c2c5-768b-1879-d65b-a79be25e8890.jpeg)|![20250105_104840.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/0c32e0a4-2617-11b5-b0be-09a01bf883e3.jpeg)|
|-|-|
|デフォルト-Retina|底力-Dot by Dot|

**なんということでしょう、ブラウザがPC表示に対応したではありませんか**。これだけの作業領域があれば、複数ウィンドウでの作業もストレスなく可能です。

デフォルト（Retina）は200%表示、底力（Dot by Dot）は100%表示なので、**４倍の作業領域の差**があります。

## やってみたメリット

実際に使用してみたメリットについて話します。

### 圧倒的な作業領域

前述のように、作業領域はデフォルト表示より4倍広いです。

例えば**外付けで4Kディスプレイを接続し、デフォルト（Retina）表示をするよりも広い**のです。

| 表示解像度 | 画素数 | 作業領域 |
| --- | --- | --- |
| デフォルトRetina（1512×982） | 1,484,784 | 1倍 |
| スペースを拡大（1800×1169） | 2,104,200 | 約1.4倍 |
| 4K Retina（1920×1080） | 2,073,600 | 約1.4倍 |
| **Dot By Dot（3024×1964）** | **5,939,136** | **4倍** |

もちろん外付け4Kディスプレイもスペースを拡大あるいはDot by Dotを適用することで同等もしくはそれ以上の作業領域が実現可能です。ですが相手はノートPC。ノートPCの魅力は何と言っても**持ち運び可能なこと**。持ち運びできる媒体として抜群の作業領域を確保しています。

### 作業に没頭できる？

あと作業に没頭できるのもメリットの一つです。

デュアルディスプレイにすることで作業効率が1.4倍に上がるという論文も出ているらしいですが、底力（Dot by Dot）はその**デュアルディスプレイ運用の表示解像度を超えています**。

ノートPC ＋ 外付けFHDディスプレイというコスパ仕様（偏見）の場合、1512×982, FHD(1920×1080)で、合算すると3,558,384。底力（Dot by Dot）の5,939,136には及びません。

あと個人的にデュアルディスプレイは否定派で、可能なら１枚の強々のディスプレイのほうがウィンドウの移動で手間を取らないので好きかなぁ。

作業効率が1.4倍になれば当然作業に没頭する上でボトルネックが減るので良いですね。

## やってみたデメリット

ここからはデメリットです。今回のDot by Dot、作業領域以外のメリットが特にありません。

### 流石に小さすぎる

確かに作業領域は広いです。でも、その分**表示サイズが小さくなります**。

もしブラウザをお使いの場合、50%まで縮小してみてください。同じMacBookの場合**ギリ読めなくないサイズですが、読みたくはないサイズ感です**。ただし元々Retina表示でない、外付けディスプレイでWQHD以下のモニターを使用している場合、文字が潰れると思います。

実際はアプリ側を若干拡大しながら運用することが多いです。二度手間です。つまり、**システム側をここまで縮小するメリットが皆無**というわけです。

### 絶望的に健康に悪い

表示サイズが小さい中で永遠に続けていると、**明確に目が悪くなります**。明らかにしょぼしょぼした感覚になります。メリットの欄で「作業に没頭できる」と解説しましたが、正体はこれです。

![ノートPCに顔を近づけて作業している様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/432d8648-9561-e3dc-cc89-6fac374d7184.png)

何が起きてるかというと、どんどん**顔とディスプレイの距離が近づいている**のです。姿勢も首が前に出てくる、いわゆるストレートネックとなり、**長期的に身体を破壊してきます**。

### マウスカーソルが遠い

表示解像度が高いと起こる問題ですが、マウスの動かす量が増えます。Retina時代からマウスは最大速度で動作するようにしており、手首を動かすだけで端まで到達できていましたが、できなくなりました。

## 結論：デフォルトがベスト

そもそもApple自体がデフォルトを用意していますからデフォルトを使ってくれ、ということでしょう。Apple的には作業領域足りなかったら純正のディスプレイ（Studio Display 20万円、Pro Display XDR 70万円）使いましょうという感じですかね。

### Retina、Dot By Dot以外は最適化されない

Windowsであれば125%, 150%など、ユーザが自由に拡大率を操作できるようになっています。しかし、Macはそのような概念となっていません。

Macにも「スペースを拡大」というオプションはありますが、実は結構無理やりなことをしています。

|スクリーンショット|設定の表示|
|-|-|
|![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/9feda16c-101b-556a-c898-4e37e3e5ad81.png)|![スクリーンショット 2025-01-06 11.25.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/54142c96-2bbf-ebbb-d480-d7530a38d19e.png)|

これが「スペースを拡大」をした場合のスクリーンショットです。本来のMacの解像度は3024×1964のはずですが、今回の場合**3600×2338**となっています。

「スペースを拡大」の場合1800×1169という**疑似解像度**で表示する必要があります。その場合、

1. 疑似解像度の200%にした解像度でレンダリング
2. ディスプレイの解像度に合うように再度縮小する

というプロセスをしています。そのためスクリーンショットをする際は 1 の状態でされるわけです。当然その処理を挟む場合**Macに負荷がかかります**。

実際その解像度にすると「解像度を変更するとパフォーマンスに影響する場合があります。」と表示されます。ちなみにDot by Dotもあまりに高解像度なモニターだと同じ表示が出ます。

Retinaの場合は 1 のみで済むこと、200%で表示解像度が比較的軽いことからAppleが推しているわけです。

### デフォルトはディスプレイサイズ、解像度によって変わる

Appleは目に見える大きさを一定にする努力をしており、最終的に**109ppiで表示させられる**ように決まっています。109ppiは、いわゆる**一般的な文字サイズ**です。

ppiを揃えることで、たとえ**ディスプレイサイズが異なっていても同じ拡大率で表示**され、ウィンドウを動かした際なども違和感なく表示できます。

そのためAppleが販売する外付けディスプレイ、iMacは218ppi, 109ppiのどちらかで統一されています（最近はRetina前提なので218ppiが主流です）。

:::note info
ppi という単位は、**画素密度を示す単位**です。面積当たりに何個ピクセルの画素が入っているかを示す指標です。これが大きければ大きいほど近くで見ても画素の粒を識別できないくらい画質が良いことになります。

一般的にディスプレイの大きさが上がるほどppiは減少する傾向にあります。
![IMG_0067.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/8a35319e-3c10-5be6-c783-326dac351f69.jpeg)
:::

Apple純正モニターは特に問題ないですが、他メーカーが出すディスプレイは218ppi, 109ppiに対応していないことが多いです。

- 27インチ4K 163ppi
- 27インチFHD 82ppi

そのためAmazonでおすすめされているモニターはApple的には使ってほしくないという感じです。もちろん疑似解像度を使用すれば上記でも218ppi, 109ppiの表示に対応可能です。しかし前述の通り疑似解像度は動作が重くなりやすいです。

もちろん対応しているものもあり、

- 27インチWQHD 109ppi

はDot by Dot表示であれば最高の選択肢になりうる、という感じです。ただ実際ppiはApple以外のモニターだと表示されていないことが多いので、自分で計算する必要があります。私は以下のサイトを用いて計算しています。

https://testpage.jp/tool/ppi_dpi.php

### Appleの最適表示は分かりづらい

突然ppiという単位が出て分かりづらいと思いますが、一貫させた表を以下に示します。設定以降の部分はAppleが推奨するであろう表示を示しています。

**27インチでの比較**

|ﾃﾞｨｽﾌﾟﾚｲ解像度|ppi|設定|表示解像度|ppi|
|-|-|-|-|-|
|WQHD(2560×1440)|109ppi|Dot by Dot 100%|2560×1440|**109ppi**|
|4K(3840×2160)|163ppi|Retina 200%|1920×1080|82ppi|
|5K(5120×2560)|218ppi|Retina 200%|2560×1440|**109ppi**|

**14インチ（MacBook Pro）での比較**

|ﾃﾞｨｽﾌﾟﾚｲ解像度|ppi|設定|表示解像度|ppi|
|-|-|-|-|-|
|3024×1964|254ppi|Retina 200%|1512×982|127ppi|
|3024×1964|254ppi|スペースを拡大|1800×1169|151ppi|
|3024×1964|254ppi|Dot by Dot 100%|3024×1964|254ppi|

Macは持ち運び端末というのもあり、外付けディスプレイの218ppi, 109ppiよりかは若干ppiが高めに設定されています。あとAirとProでも若干ppiが異なります。

## で、結局どんな運用となったか

私がMacBook AirからMacBook Proに乗り換えて以降、ノートPCの設定は「スペースを拡大」での運用となっています。スペースを拡大では若干動作が重くなると挙げましたが、MacBook程度ならほんの若干です。ゲームをするとき以外はスペースを拡大の運用にしています。

### シングルウィンドウ運用が染み付いた

|ブラウザ画面|エディタ画面|
|-|-|
|![ブラウザ画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/540f3af4-900c-7b19-0a10-1ec7e78deeed.png)|![エディタ画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/8a2930fb-6cd7-8ebe-3114-f1470bb57317.png)|

自称フロントエンドエンジニアなので、ブラウザとVSCodeをにらめっこして開発することが多いです。またブラウザでは「開発者モード」の使用頻度が高いです。

今までノートPCでは２分割運用をしており、２分割では作業領域が全く足りませんでした。そこで敢えて分割せず、ブラウザ、VSCodeともに**画面いっぱいのウィンドウ**にして使用する運用にしました。

最初に抱えていた課題である「エディタのエクスプローラ・コードが右まで表示されない」や「タブレット表示のまま」という問題がこれで解決します。アプリ切り替えは「Command + Tab」で行うので、２分割時と同等の生産性が確保できます。

### Studio Display を購入した

![Studio Displayが置かれたデスク](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538408/43202356-f3f2-9724-6692-7e15784eca75.jpeg)

Macの拡大率についてはかなり調べたので、じゃあどのようなディスプレイを購入するかをしっかり調べたつもりです。しかし、**結局純正が一番**ということに気づきました。

というのも従来は27インチ4Kディスプレイを3年間使用していました。しかし、だんだん不満を持つようになりました。

- 4K Retina、実質FHD（1920×1080）じゃ足りない
- スペースを拡大、実質WQHD（2560×1440）は不満

**4Kの「スペースを拡大」は明確に解像度が落ちます**。MacBookであれば多少スペースを拡大しても解像度の劣化は見えづらいですが、4Kとなると話が変わります。ぶっちゃけ作業する分には全く変わらないですが、当時の私はかなり不満を持っていたようです。

あとAppleが推奨しない拡大率だとバグも起こりやすく、Command + Tab 時に表示される起動アプリ一覧が、メインディスプレイに表示されなくなることがありました。

という細かいバグが生じたこと、単純にStudio Displayが欲しかった、ということもあり、2024年2月にメルカリで19万円で購入しました。純正なら22万円。22万円です。

解像度に対する不満は一切なく、4Kで生じた細かいバグも発生せず、スピーカー良し、ディスプレイの発色良し、Macとの接続性良し、価格は20万円。うん。価格は割に合わないですが、**27インチ5K（218ppi）の選択肢が現状これしかない**ため仕方ないです。学生の皆さんは間違ってもこんなディスプレイ購入しないようにしましょう。

## まとめ

今回はMacBookに解像度の本気を出させた話ということで、Dot by Dotを適用した事例を紹介してみました。実際「技術的には可能」であっても、実際の使用感がイマイチなことはあります。

アプリ開発者的には「デフォルト」状態が一番推奨であり、そのデフォルト表示に命を注ぐAppleの素晴らしさをこの身を持って実感しました。

ぜひ皆さんもApple本来の美学を体験するため、Studio Displayを購入して素敵な生活を送りましょう🤔