Webデザイナーになると決めたら何よりも先に制作環境を作る事がとても重要です。快適な制作環境を整える事でストレスなく、効率的に様々なモノを生み出していく事が出来るようになるからです。

今回は制作環境の中でも、Webデザイナーとして最も効率的に作業を進める為のディスプレイサイズについて考えていきたいと思います。これからマシンを購入される予定の方は、ぜひ参考にして見て下さい。

1.Webデザイナーが検証するべきデバイス(機器)とディスプレイサイズ

Webデザイナーは、様々なデバイスの横幅、画面サイズなどを考慮した上でWebをデザインしていく必要があります。

デバイス(機器)の横幅、画面サイズを把握しておかなければ、デバイス(機器)に対して横幅が大きくはみ出して横のスクロールバーが表示されてしまい、ユーザーにストレスを与えてしまうからです。

Webデザイナーとしてそのようなデザインを作る事だけは避けなければいけません。マシンを購入される前に検証する主要なデバイス(機器)を知っておきましょう。

私が制作の際に意識しているデバイス(機器)とディスプレイサイズは以下の通りです。この6つのデバイスを特に意識して制作を行う様にしています。このデバイスのディスプレイサイズで検証を行えばすべてのデバイスにおいて問題なく表示する事が出来ます。

2.Webデザイナーが購入するべきマシンとデバイス(機器)

これからWebデザイナーを目指すなら最低限、以下のデバイスを購入する必要があります。Windowsでも問題ありませんが、STACKではMacをおすすめしています。動作も安定していて、操作性がわかりやすくクリエイターに最適のマシンだからです。

• 21.5インチ以上のデスクトップパソコン
• 13インチ以上のノートブックパソコン(出来ればRetina ディスプレイ)
• スマートフォン

ノートパソコンで作ったサイトをデスクトップで見てみると予想以上に横幅が細かった。というのはよくある事です。その様な事を防ぐ為にもWebデザイナーとしてデスクトップPCにも最適化したデザインを行う必要があります。この3つのデバイスで検証を行う事が出来れば、あらゆるデバイスでデザイン通りのWebサイトを制作する事が出来るでしょう。

デスクトップは自宅用、ノートは外出用で使い分けると良いですね。

2-1.ノートパソコンはなぜ13インチ以上をおすすめしているのか

Webデザイナーが外出先で使うノートパソコンとして、13インチ以下を選択すると画面サイズが小さすぎて作業効率が確実に落ちるからです。外出先などでも制作を行う場合は、最低でも13インチ以上を選択する事をおすすめしています。

3.Retinaディスプレイ対応パソコンは必ず準備しよう

Retinaディスプレイとは、アップル社が発表した新企画のディスプレイで、本来のディスプレイ解像度よりも数倍の解像度で美しい表示を実現しています。

iPhone・iPad・MacBook・MacBook Proなどすべてのアップル製品でRetinaディスプレイが採用されていて、今後はさらにRetinaディスプレイのシェアが増える為、WebデザイナーとしてRetinaディスプレイ対応は必須となるでしょう。

3-1.Retinaのディスプレイサイズは?

Retinaディスプレイは、高解像度のモニターとなっている為、その分ディスプレイサイズをピクセルで表記した場合、2倍のピクセルとなっています。

以下はMacBook ProのRetina対応と非対応のディスプレイサイズをピクセルで表したものです。

Retinaディスプレイは、通常モニターの2倍のピクセルで表現されているので、Retina非対応のサイトを表示した時サイト内の画像がぼやけてしまう問題が発生するのです。

4.スマートフォンサイトの検証は必ず実機で行う

スマートフォンサイトのデザインはパソコンでも検証する事が出来ますが、パソコンだけではなく必ずスマートフォンの実機でデザインやコーディングデータを確認するようにしましょう。

スマートフォンは人間の指が操作出来るようになっていてマウスとは操作性が異なるからです。

スマートフォンサイトをパソコンで検証しても、そのボタンが押しやすいのか押しにくいのかマウスでは実際の所わかりません。テストサーバーなどにデータをアップロードして、実機で検証し操作性の良いデザインを作る事が大切なのです。

モバイルファーストという言葉があるように、スマートフォンサイト最適化はとても重要ですので、必ずスマートフォンも準備しておきましょう。

5.まとめ

最近は様々なデバイスが登場し、ディスプレイのサイズも多様化しています。

この複雑なマルチデバイス時代にWebクリエイターとして最低限以下の3つのデバイスを準備する事で、あらゆるデバイスの検証を行う事が出来ます。

• デスクトップパソコン(21.5インチ以上)
• ノートブックパソコン(13.3インチ以上 出来ればRetina ディスプレイ対応のもの)
• スマートフォン

これらのデバイスを準備する事でWebサイトの検証がスムーズになりますので時間も短縮され、快適なWebサイト制作環境が実現します。

「Webデザイナーを目指すあなたへおすすめのパソコン・マウス」で詳しくおすすめのパソコン・マウスなどを紹介していますのでこちらの記事も参考にして見て下さい。

石原 誠之

株式会社STACK ONLINE 代表取締役
デザイナー・デザインスクール講師

1983年鳥取県米子市生まれ。大阪市在住。
デザイナー歴17年目。

Webデザイン・グラフィックデザイン・フロントエンドを得意としています。本サイトではこれからWebデザイナーを目指す方向けに様々な情報を発信していきます。