WebDesign

【疑問解決】Webデザイナー初心者のパソコン選び【最低限から始めよう】

NaoG
NaoG
タラーン!やぁ!みんな!元気?

クリエイターの@NaoGです。

Webデザインに必要なパソコンが知りたい。
Webデザインはどんなソフトを使うのかな。

パソコン選びはMacとWindowsどっちがいいんだろう?
ノートパソコンにしたら良いのかデスクトップにしたら良いのかもよく分からないし。

Webデザイン初心者なので、Webデザインを始めるのに必要なパソコンの知識が知りたいです。

こういった疑問に答えます。

この記事の信頼性(著者は実務経験者)

  • MacとWindowsを仕事で使ったきた経験
  • ノートパソコンとデスクトップを使ってきた経験
  • 現在はフリーランスのWebデザイナー

実際にフリーランスのWebデザイナーとして働いているので、信頼できるかと思います。

目次

  • Webデザイナー初心者におすすめのパソコン
  • 結局MacとWindowsどっちが良いの?
  • ノートパソコンとデスクトップどっちが良いかな?
  • 周辺機器は何を選べば良いのかな?
  • Webデザイナー向けの理想の作業環境

ではさっそく見ていきましょう。

Webデザイナー初心者におすすめのパソコン

Webデザイナーが選ぶべきパソコンのスペックは下記になります。

CPU Corei5
メモリ 8GB
ハードディスク 500MB

上記のとおり。
それぞれ順番に解説します。

CPU

CPU Corei5

CPUとはパソコンの頭脳のことです。
Webデザインを行う上で、CPUは最低でもCorei5は必要です。

体験談:通っていた学校がCorei5の環境だった

私が通っていた専門学校のCPUはCorei5でしたが、IllustratorやPhotoshopを触っていても特に不便と感じることはありませんでした。

ですが、Photoshop、Illustrator、Bridge等同時に負荷がかかるツールを3つ以上起動すると少し重いと感じました。

なので繰り返しになりますが、CPUは最低でもCorei5は必要です。

メモリ

メモリ 8GB

メモリとはアプリケーション等を一度に処理できる作業環境の広さです。
Webデザインを行う上で、メモリは最低でも8GBは必要です。

体験談:メモリ8GB以下だと正直厳しい

実際に私はメモリ8GB以下のPCで作業をしたことがありますが、正直8GB以下だと処理を待つ時間等が発生し作業をしていて煩わしく感じます。

なので繰り返しになりますが、Webデザインを行う上でメモリは最低でも8GBは必要です。
16GBあれば安心です。

ハードディスク

ハードディスク 500MB

ハードディスクとはパソコンの記憶容量です。

パソコンを触っているとデータを保存したりアプリケーションをダウンロードしたりする場面がありますが、そのデータを保存しているのがハードディスクです。

Webデザインを行う上でハードディスクは最低でも500MBは必要です。

何故なら単純に容量が大きい方が保存できるスペースが広いからです。

タンスを例に考えてみる

  • 扉が3つのタンス
  • 扉が5つのタンス=扉が3つのタンスより収納できる
  • 扉が7つのタンス=扉が5つのタンスより収納できる

上記の通り。
容量が大きくなればなるほど、収納スペースが広くなります。

反対に収納スペースが狭すぎると入れたいものが入れらなくなってしまいます。
これをハードディスクに置き換えるとデータを保存できないということです。

なので、繰り返しになりますがハードディスクは最低でも500MBは必要です。

結局MacとWindowsどっちが良いの?

結論「好きな方をどうぞ」です。

なぜかというとMacでもWindowsでもWebデザインはできるからです。

体験談:Macの制作環境もあれば、Windowsの制作環境もある

私はWeb制作会社で7社程の経験がありますが、Macの現場もあれば、Windowsの現場もあります。

なので基本、どちらを選んでもOKです。

とはいえ、いろいろな情報を見ているとMac派、Windows派みたいな意見があり、正直混乱しますよね。

  • Macの良い所
  • Windowsの良い所

それぞれ順番に解説します。

Macの良い所

  • 画面が綺麗
  • 直感的な操作性
  • パソコン初心者に優しい
  • フォントが初期から入っている

上記のとおり。
順番に解説します。

画面が綺麗

MacはWindowsに比べ画面が綺麗です。

なぜならMacやiPhoneなどのディスプレイはRetinaディスプレイと言われており、一般的なモニターと比べ、およそ倍の解像度を持っている為です。

解像度とかRetinaとかよく分からないと思われた方は、難しく考えず、普通のモニターよりも画面が綺麗という認識でOKです。

直感的な操作性

Macは直感的な操作性に優れております。

なぜならトラックパッドやショートカットキーが優秀だからです。
トラックパッドとはノートパソコンについている指で触るところです。

質問:トラックパッドはノートパソコンでしか利用できないの?

トラックパッドだけで別売しているので、ノートパソコンにしかトラックパットが使えないという訳ではありません。

なのでデスクトップでもトラックパットは使えます。

体験談:トラックパッドやショートカット機能が仕事を各段に効率的に進める

私は仕事でMacを使用してきましたが、Macのトラックパットやショートカットで操作する下記の機能が便利で仕事の効率が上がりました。

「現在開いているアプリを一覧表示する」
「作業モニターを切り替える」
「一時的にデスクトップに戻る」

Appleの別売りトラックパッドは下記になります。

因みにWindowsでも同じ操作はできますが、Macはトラックパッドのみで先ほどの操作が可能です。

パソコン初心者に優しい

Macはパソコン初心者に優しいです。

なぜかというと、パソコン初心者が不安なウイルス対策が初めからされているからです。

MacとWindowsを比較してみる

  • Mac=ウイルス対策がされている(ファイアウォール有)
  • Windows=ウイルス対策がされていない

上記のとおり。

Macは標準でウイルス対策がされていますが、Windowsはされていません。
なのでWindowsの場合は自分でウイルス対策などを行う必要があります。

ウイルス対策とかってよく分からないしパソコン初心者の方は、正直ハードルが高いですよね。
そんな初心者の不安を解消してくれるMacは非常にありがたいです。

なので繰り返しになりますが、Macは初心者に優しいです。

初期から入っているフォントの数が多い

Macは初期から入っているフォントの数が多いです。
こちらのページでMacに標準で入っているフォントの一覧が確認できます。

なので繰り返しになりますが、Macは初めから入っているフォントの数が多いです。

質問:仕事で使うフォントは初めからパソコンに入っているものを使うことが多いですか?

Webデザイナーが仕事で使用するフォントは、モリサワやダイナフォントといった月契約で利用するものが多いです。

また商用フリーと呼ばれる、仕事で使える無料フォントを使用したりもします。
とはいえ、仕事の場面に応じて標準フォントを利用することもあります。

質問:標準フォントは多い方がいいですか?

職場でフォントを用意されている場合がほとんどなので、正直Webデザイナー志望の方はあまり気にしなくてOKです。

Windowsの良い所

  • ハイスペックの価格が安い
  • 汎用性が高い
  • カスタムの自由度が高い
  • 制作会社ではWindowsの現場が多い

上記のとおり。
順番に解説します。

ハイスペックの価格が安い

WindowsはMacに比べてハイスペックのパソコンの価格が安いです。
ハイスペックとは、メモリやCPU等を良いものにして作られた優秀なパソコンのことです。

なぜWindowsのハイスペックパソコンがMacと比べ安いかというとMacはメモリの選択が64GBからパソコンのグレードが上がるからです。

Macで64GBが選択できるシリーズは上記のとおり。
どれもProシリーズになります。

質問:Webデザインで64GBは必要ですか?

Webデザインを行う上では16GBあれば十分です。

動画編集なども行いたい方は16GB以上も選択肢になるかと思います。

汎用性が高い

Windowsはプラグインや何かのソフトを入れる際の汎用性が高いです。

時々、Macは非対応のソフト等がある場合があります。
これはWindowsにも同じことが言えますが、割合でいうとMacが非対応のものが多いです。

質問:Webデザインで使うソフトで使えないものはありますか?

Webデザインで使うソフトは特に影響はないので、MacでもWindowsでも大丈夫です。

カスタムの自由度が高い

Windowsはカスタムの自由度が高いです。

なぜかというと購入の際の選択肢が広いからです。

下記は「マウスコンピューターさん」の選択画面になります。

メモリやハードディスクなど幅広くカスタムすることが可能です。

Macで同じぐらいのメモリを選択するとなると本体のグレードが上がりかなり高額になります。
なので、ハイスペックで安く抑えたい方はWindowsが良いと思います。

制作会社ではWindowsの現場が多い

制作会社ではWindowsの現場が多いです。

体験談:Windowsの制作現場が多い

実際に私は制作会社での経験が8社程ありますが、8社中6社はWindows、2社がMacでした。

この辺は経験則なので正直、現場次第という感じではありますが、私の経験上はWindowsの制作現場が多いです。

ノートパソコンとデスクトップどっちが良いかな?

結論、どちらでもOKです。

  • 外出先でも使いたい方
  • カフェでノートパソコンを広げたい方

上記の方はノートパソコンが良いと思います。

カフェでMac開いてる人ってなんか憧れますよね。
何もしてなくてもMacを広げてるだけでおしゃれみたいな。

単純にそういう理由でノートパソコンを選ぶのは全然ありだと思います。

私もカフェでノートパソコン片手にコーヒーを飲みたかったので、初めはノートパソコンを買いました。

13inchはおすすめしない

13inchのノートパソコンはおすすめしません。

何故かというと、小さい画面でデザインをしてしまうと大きい画面で見たときに印象が変わってしまう為です。

体験談:13inchでデザインしたものを普通の環境で確認したらあり得なかった。

実際に13inchでデザイン作業をしていた時に、その時はこれでOKと思っていたものが、後日デスクトップの27inchで確認したら「これはないな」と思い作業をし直しました。

なので繰り返しになりますが、13inchのノートパソコンはおすすめしません。

周辺機器は何を選べば良いのかな?

周辺機器も初めてパソコン購入を検討されている方は正直何が必要かよく分からないですよね。

  • キーボード
  • マウス
  • モニター
  • ケーブル

必要な周辺機器は上記のとおり。
それぞれ順番に解説します。

キーボード

Macの方向け

Magic Keyboard – 日本語(JIS) – シルバー

Appleの純正のキーボードになります。
Appleの純正品なので、Macを利用する方は全体の統一感も出ます。

体験談:実際に使っていた

私は実際にこのキーボードを使っていましたが、スマートで場所を取らない所がとても良いです。また何よりデザインが美しいです。

Windowsの方向け

CRAFT

ロジクールのキーボードです。
このキーボードはクリエイターと相性が良いです。

なぜかというと左上にダイヤルが付いており、PhotoshopやIllustratorなどでダイヤルを回してブラシのサイズや数値などの変更が行えるからです。

体験談:実際に使っている

私は実際にこのキーボードを使っていますが、ダイヤルの機能ももちろん、何よりタイピングした時のフィット感がとても心地良いです。

マウス

Macの方向け

Magic Mouse 2 – シルバー

純正のマウスになります。

マウスをなぞったりタップするだけで、Macの便利なショートカットを利用できるのでMacとの相性がとても良いです。

Windowsの方向け

G502 LIGHTSPEEDワイヤレスゲーミングマウス

ゲーム用のマウスです。
ゲーム以外でも利用することができ、とても使い勝手が良いです。

なぜかというと11個のボタンが付いておりそれぞれのツールに対して処理を割り当てられるからです。

ツールに応じてどんな処理ができるのか?

  • Photoshop利用時にボタン1をクリック→「一つ作業を戻る」を実行
  • Illustrator利用時にボタン1をクリック→「レイヤーをグループ化する」を実行

上記のとおり。
それぞれのツールに応じて自分の好きな処理をボタンに割当てることが出来ます。

マウスには11個のカスタムボタンが付いているので、11個の処理を割り当てることができます。

なので、繰り返しになりますが使い勝手が良いです。

モニター

フルHDのディスプレイ

Dell デジタルハイエンドシリーズ U2419H 23.8インチワイドフレームレスモニター

Dellの23.8インチフルHDモニターです。

2Kのディスプレイ

25インチ 2K WQHD デザイナー向けモニター PD2500Q

BenQの25インチ2Kモニターです。
フルHDよりも解像度が高いです。

4Kのディスプレイ

27インチ4K HDRデザイナーモニター PD2700U

BenQの27インチ4Kモニターです。
27インチの4Kなので作業範囲が広く快適に制作を進めることが出来ます。

体験談:フルHDモニターよりも作業が捗る

実際に私はこのモニターを使っていますが、フルHDモニターよりも解像度が高いので、一画面にウィンドウを二つ並べて作業をする等、使い勝手が良いです。

ケーブル

Macの方向け

Macの方は下記のいずれかのケーブルを選択する必要があります。

  • Type-C to Type-C
  • Type-C to HDMI
  • Type-C to DisplayPort
Type-C to Type-Cのケーブル
Type-C to HDMIのケーブル
Type-C to DisplayPortのケーブル

それぞれの変換ケーブルもあるので、
必要に応じてType-Cの変換ケーブルを利用するのもありだと思います。

Windowsの方向け

Windowsの方は購入するPCの端子がHDMIなのか、Displayportなのか確認する必要があります。
また4K出力をする場合はケーブルも4Kに対応している必要があるので、注意しましょう。

4K対応のDisplayportケーブル
4K対応のHDMIケーブル

理想の作業環境とパソコン選び

Webデザイナーの理想の環境は同期性の高さです。
同期とは、複数のデバイスで同じ状態になっていることです。

Google Drive等のサーバーを借りて保存しておけば、
どの環境からでもデータをダウンロードする事ができるので、とても便利です。

  • ノートパソコン+外部モニター
  • デスクトップ+ノートパソコン
  • デスクトップ+外部モニター+ノートパソコン

Webデザイナーの理想の作業環境は上記のとおり。

ここまで読まれた方で正直、具体的にどんなパソコンを選んだら良いのか迷っている方も多いと思います。

  • なるべく安く抑えたい方
  • 作業環境にこだわりたい方

上記も踏まえて、それぞれ順番に解説します。

ノートパソコン+外部モニター

初めにノートパソコンと外部モニターの組み合わせです。

外出先で作業ができることはもちろん、自宅でも大画面で作業することができ、管理をノートパソコンで一元管理できるからです。

体験談:実際にノートパソコン+外部モニターの環境で作業をしていた

実際にこの環境で作業をしていたことがありますが、外出先で行っていた作業を自宅でも大画面ですぐに作業に取り掛かれるのでとても効率が良いです。

なるべく安く抑えたい方

ノートパソコン
外部モニター
マウス
キーボード
ケーブル

作業環境にこだわりたい方

ノートパソコン
外部モニター
マウス
キーボード
ケーブル

デスクトップ+ノートパソコン

続いてデスクトップ+ノートパソコンの組み合わせです。

外出先で作業をしたデータをGoogle Driveにアップロードし、自宅でダウンロードして作業をするという使い方が出来るからです。

体験談:実際にデスクトップ+ノートパソコンの環境で作業をしていた

実際にデスクトップ+ノートパソコンの環境で作業をしていましたが、ノートパソコンを鞄から出して、モニターに繋げるという作業をしなくて済むのでとても効率がいいです。

なるべく安く抑えたい方

デスクトップ
ノートパソコン
マウス
キーボード
ケーブル

作業環境にこだわりたい方

デスクトップ
ノートパソコン
マウス
キーボード
ケーブル

デスクトップ+外部モニター+ノートパソコン

続いてデスクトップ+外部モニター+ノートパソコンの組み合わせです。

外出先で作業をしたデータをGoogle Driveにアップロードし、自宅でダウンロードして作業をするという使い方に加え、外部モニターを加えることで自宅での作業環境がより快適になります。

体験談:実際にデスクトップ+外部モニター+ノートパソコンの環境で作業をしている

実際にデスクトップ+外部モニター+ノートパソコンの環境で作業をしていますが、これ以上に快適な環境はないです。

なるべく安く抑えたい方

デスクトップ
ノートパソコン
外部モニター
マウス
キーボード
ケーブル

作業環境にこだわりたい方

デスクトップ
ノートパソコン
外部モニター
マウス
キーボード
ケーブル

最後まで読んでいただき、ありがとうございます。

Webデザイン学習する際に初めに悩むのはやっぱりパソコン選びですよね。

Webデザイン学習は特別高価なパソコンを必要としないので、自分の予算に応じたパソコン選びをすると良いと思います。

ぶっちゃけパソコンが良かろうが悪かろうが、Webデザイナーに必要なのはスキルなので、
パソコン選びに時間をかけるよりも、早くWebデザイン学習に取りかかった方が良いと思います。

【失敗しない勉強法】Webデザイナーは未経験でも独学でなれます未経験でも独学でWebデザイナーになれるのかを知りたい。 というか学習にどれぐらいの時間がかかるのだろうか…? これからWebデザイナーとして就職したいので、「正しい勉強法」を知りたいです。 こういった疑問に答えます。...
【7日間の体験版】Photoshopを無料で始める手順【失敗しない学習法】Photoshopの学習をしたいけど、どうやって始めるんだろう? 使い方も分からないし、いくらかかるんだろうか、、、。 これからPhotoshopを学習したいので「失敗しない学習法」を知りたいです。 こういった疑問に答えます。...