Webデザイナーに必要なパソコンの性能
せっかくパソコンを買ったのに性能が低くてPhotoshop動かない…、そんなことがないようにWebデザインに必要なパソコンの性能を把握しておきましょう。
Web制作では、PhotoshopやIllustratorを使うため、ある程度の性能が求められます。これらのソフトがサクサク動くパソコンにしましょう。大丈夫です！意外に安上がりです。
Webデザインに必要なパソコンのスペック
CPU : インテル Core i5以上
メモリ : 16GB
ハードディスク : 500GB以上
OS : Windows10 or Mac最新
モニター : 20インチ以上、フルHD（1920×1080）
グラフィックカード：無くても良し
CPU
インテルのCPUは、主にi7・i5・i3というラインナップがあります。i7が一番性能が良いですが、i5で十分にOKです。WebデザインではCPUを過度に使う作業は少ないため、むしろ消費量の大きいメモリの方にこだわってください。
私の個人のPCはi7です。会社のPCはi3でしたｗ
メモリ
これが一番重要です。必ず16GB以上にしてください。ちょっと軽く写真の補正をする程度なら、8GBでOKです。しかし、PhotoshopとIllustratorで重めのファイルを開いて作業しながら、さらにDreamweaverで同時にコーディングもして、Slackでクライアントとチャットしながら、原稿ファイルであるExcelも見つつ、PCのブラウザを複数開いてサイトの表示の検証をしていたら、もうまったく8GBでは足りませんｗ
通常、パソコンショップで販売されているPCは8GBが多いです。そのパソコンを買って、結局「パソコン重い！」となって、8GBのメモリをさらに買い足して16GBにすることは周りで頻繁に起きています。メモリの拡張はそれほど難しくないですが、どうせ後から拡張するなら、最初から16GBにしておくことをおすすめします。私のPCも当然16GBです。
32GBはさすがに必要ありません。ただもし、動画編集もガッツリこなしたい人がいれば、32GBも要検討です。
ハードディスク
少なくとも500GBは必要です。PhotoshopやIllustratorのファイルサイズは、ものによってはかなり大きくなります。
最近は、高速な起動を実現するSSDというメモリタイプのハードディスクがありますが、高価なため、容量が少なめの256GBを選択することがあるかもしれません。その場合は、1TB以上の外付けのハードディスクを追加しましょう。6000～7000円と意外に安価です。
OS
こちらは特に迷わず、Windowsなら10かMacなら最新のものでOKです。WindowsかMacのどちらを選ぶかについては、こちらの記事でまとめました。
→WebデザイナーはMacかWindowsのどちらを選ぶべきか？
Windowsは10以上でないと、AdobeXDというUI/UXデザインツールが使えません。最近、AdobeXDは現場でもワイヤーフレームを書くために、よく用いられるようになりました。なかにはWindows7が慣れているからいいという方もいるかもしれませんが、プロのWebデザイナーを目指す場合は、10にしましょう。
モニター
モニターは、デスクトップの場合は、20インチ以上は欲しいところです。解像度は1920×1080のフルHDにしましょう。画面が小さくて表示範囲が狭いと、Photoshopでサイトのデザインがかなりしづらいためです。
Web制作の現場や、個人のフリーランスの場合でも、上のようにディスプレイを2つ横に並べて、画面を2つ使って作業することが多いです。これをデュアルディスプレイといいます。片方にPhotoshopのデザインを表示し、もう片方にエディタを出してコーディングすると作業が快適です。
モニターは安いものだと10000円から手に入りますが、メインで使うモニターは、少し質の高いものにしましょう。デザインには、色が正確で、目が疲れづらいモニターが必須です。
僕も使ってる『EIZO FlexScan』シリーズはWebデザイナーに人気です。一度、某メーカーの15000円くらいのモニターをAmazonで買ったのですが、色の表示が妙に白っぽくてすぐに返品しました。それからEIZOのこれを使っていますが、色の表示がすごく精確で落ち着いていて、長時間作業でも目が疲れづらく大のお気に入りです。23.8インチで35000円くらいです。
なかなかお金も掛けられないと思うので、サブモニターは、安価なモニターでも大丈です。
ノートパソコンもHDMIで、外部のモニターに繋げられます。僕はそのパターンで、ノートパソコン自体のモニターは使用せず、EIZOのメインモニターとiiyamaのサブモニターに表示を出力してデザイン作業やコーディングをしています。
ここで示した数値以上のパソコンであれば、あまり性能については過敏になる必要はありません。うちのPCは5年前のThinkpad E430という激安ノートパソコンですが、いまだに現役でバリバリ動きます。グラフィックカードなんて入っていません。それは16GBのメモリによるものが大きいと思います。
このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社しスキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポート
です。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントしてぜひ登録しましょう。
あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校＆就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
30歳以上の方は、TECH::EXPERT
がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます！超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか
“Webデザイナーに必要なパソコンの性能” への4件のフィードバック
Webデザインのご質問やサイトの感想など、お気軽にどうぞ！
管理人（ねこポン）について
週３日だけ会社で働く30代前半ウェブデザイナーです！
インテリ風＆仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。
最近ちょこっと『月曜から夜ふかし』に出演しました↓
なんでもWebの質問受け付け中 (^o^) /♪
Web制作会社を歩き回れるゲームを作ってみました！ぜひ探検してみてください。(注意：音が出ます！)
全くの初心者で、中古のパソコンから購入し、学ぼうと思っています。
パソコンのスペックは把握しましたが、
私が買おうとしているのは、メモリなどの条件は満たされているのですが、Microsoft officeではなく、LibreOfficeが入っています。問題ありませんでしょうか？
みなさん、はじめまして。
Webデザインの学習においては、Office自体が必要ありません。
個人でクライアントを相手にして仕事をする場合は、パワーポイントやエクセルで資料を共有されることがあるため、Officeが必要になるケースはあります。
ちなみに僕はMacですがOfficeは持っていません。エクセルであればGoogleのスプレッドシートにアップロードすることで見れて編集もできるからです。
LibreOfficeについてはよく知りません。
いずれにしろ、Webデザインの勉強で使うだけのPCなら通常はOfficeは必要ありません。
返信ありがとうございます。
ちなみにドットインストールの手順で、
HTML/CSSの学習環境を整えようWindows編を進めているのですが、#4の所でRicty Diminishedの導入をしても全角空白の欄が反映されてないのですが、どうすればいいか教えて頂けますか？
すみません。方法はネットに載ってました。