Web制作ではたくさんのアプリケーションを同時に使うことが多くなります。
そんな時にあると便利なのがサブモニター！
デュアルディスプレイ環境にすることで作業効率がとても高まります。
画面が狭いノートPCの場合でも簡単にデュアルディスプレイ環境にすることができるので、その方法や周辺機器について紹介していきます。
目次
デュアルディスプレイのメリット
１：作業効率が上がる
例えばサブ画面に資料を配置し、メイン画面で作業を行うといったことが可能で、いちいちウィンドウを切り替える手間が発生しません。
YouTubeの動画を参考にしながらFigmaだったりAdobeソフトの練習をする際にもとても便利です。
２：画面が広くなる
ノートPCだとだいたい14～16インチくらいの大きさを選ぶと思います。モニターを導入することで24～27インチくらいまで大きくなるので、作業スペースとしてはもちろん映画なども迫力満点で観ることができます。
３：ディスプレイのスペックが上がる
ノートPCのリフレッシュレートが低い場合、例えば最大60Hzだとしても、追加したモニターが最大240Hzまで対応していれば、本体に依存することなくぬるぬると動きます。ゲームをする人には嬉しいですね。
サブモニターの選び方
サイズと解像度の考慮
24インチか27インチが丁度良いくらいの大きさです。
どちらにするかはデスクの大きさなどで決まりますが、よほど広いデスクでない限り24インチで十分だと思います。大きすぎても目の移動が疲れてしまいますので。
解像度はFHDの1920 x 1080で大丈夫です。
特にデザイナーさんとかはピクセルの計算などややこしくなるのでFHDがおすすめです。
映画とか綺麗に観たいならWQHDも選択肢になりますが、4Kになってくると24インチや27インチでは文字がつぶれてしまったりするみたいなのでモニターサイズから見直しましょう。。
ノートPCとモニターの接続方法
今回はぼくが購入したDellのS2522HG 24.5インチ ゲーミングモニターを例に接続方法を紹介します。
PCとモニターは２つのケーブルで接続します。
まず一つ目が映像を送るためのHDMIケーブルです。
ここはDP（ディスプレイポート）ケーブルとの二択になりますが普通に使ってる分にはHDMIで問題ないです。
二つ目がUSBケーブルとなります。
このDellのモニターにはUSBポートが4つありますが、そのうちの一つをPCと接続することで残りのUSBポートを有効化することができます。
例えば外付けのキーボードを使いたい場合、PCのUSBポートを使わず、モニターのUSBに接続することでキーボードを使うことができるようになります。
モニターへの電源供給は普通にコンセントからです。
価格と予算感
単純にExcelや資料とかでしか使わないのあれば、それほどスペックも必要ないので１万円～２万円くらいが相場になります。
デザイナーさんは色の再現率など気になると思うので、スペックを満たそうと思うと大体３万円～５万円くらいです。
実際の環境：使っているノートPC
使っているPCはドスパラのraytrek R5-TA6です。
まあまあ安価なクリエイターズモデルのラップトップになります。
こちらがPC本体となりますが、画面はサブとして使っています。
https://ninusablog.xyz/webdesign-selected-pc/
実際の環境：接続しているサブモニター
ノートPCに接続しているモニターはDellのS2522HG 24.5インチ ゲーミングモニターです。
時期によって変動しますが大体45,000円くらいです。
現在はこちらをメインの画面として使用しています。
Webデザイン関係だと4K以上にすると色々ややこしくなるので1920 x 1080にしました。
IPSパネルとsRGBを99%カバーしているので色の再現も鮮やかです。
知り合いが安いモニターからIPSに切り替えたら全然違ったと言っていたので、デザイナーさんはここであまりケチらないように注意しましょう。
中身はこんな感じでした。
モニターたち。
そしてケーブルたち。
Web制作におけるデュアルディスプレイの活用法
作業スペースの拡大と効率化
作業スペースを大きくとれるのはデザイン体験としては大きなアドバンテージになります。
Webサイトをデザインしている場合でも、アプリケーション内ではたくさんのツールが画面を占有しているため全体感が掴みにくいですが、画面が大きければかなりすっきりします。
レスポンシブデザインの確認とテスト
最近のサイトはほぼすべてレスポンシブ対応となっています。
スマートフォンやタブレットなど、ノートPCより小さいサイズであればウインドウを小さくしてみたり検証ツールで簡単に確認することは可能です。
しかし、大きいサイズのデバイスに対するレスポンシブ対応は確認が取りづらくなります。
そこで大き目のサブモニターがあると、簡単に動きをチェックすることができるようになります。
コーディングとプレビューの同時作業
ノートPCの場合、コーディングの実装や修正を確認するとき、毎回ブラウザに切り替える必要があります。
しかし、デュアルディスプレイなら片方にブラウザを表示し、片方の画面でコーディングを行うだけで余計な作業が発生せずに済みます。
デュアルディスプレイにしてみた感想
本当にめっちゃラクです。
今回はノートPCにモニターを接続してデュアルディスプレイにしてみましたが、デスクトップ環境でもデュアルディスプレイに絶対すると思います。
ぜひ導入してみてください！
今回購入したモニター
Dell S2522HG 24.5インチ ゲーミングモニター