Webデザイナーを目指す方に最適なディスプレイサイズ

Webデザイナーを目指す方に最適なディスプレイサイズ

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

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

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

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

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

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

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

デスクトップ(21.5インチ) 1920×1080
ノートパソコン(13.3インチ) 1280×800
タブレット(iPadなど) 768×1024
スマートフォン (iPhone 6・7・8Plus) 414×736
スマートフォン (iPhone 6・7・8) 375×667
スマートフォン (iPhone 5・SE) 320×568

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

iMac MacBook Pro iPhone

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

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

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

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

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

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

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

MacBook Pro 2015モデル

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

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

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

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

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

Retinaディスプレイ対応(13.3インチ) Retinaディスプレイ非対応(13.3インチ)
2560×1600 1280×800

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

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

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

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

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

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

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

5.まとめ

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

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

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

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

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

コメントを残す

Photoshop本で挫折した方必見!! Webデザイナーに必須のPhotoshop力がたった7日で身につく動画講座

STACK DESIGN

一生涯使える人気のスキル!Photoshopを使ったデザイン力がたったの7日間で身につくオンライン動画講座。すべて無料で受講出来ますので、この機会にぜひご活用下さい。

  • デザイナー歴13年のプロが、デザインする時に使うテクニックのみを厳選してわかりやすくご紹介。無駄なテクニックはすべて排除。
  • デザインにかかる作業時間を10倍スピードアップさせるショートカットキーをご紹介。
  • あなたのわからないを現役デザイナーがすべて解決!解決するまで質問し放題です。
  • PC・スマホ・タブレット対応。学校、カフェ、通勤、通学あなたがどこにいても動画で学習出来ます。