Webサイト制作

Webサイト制作に必要なPCのスペックは?【MacBookProがおすすめ】

最近プログラミング学習を始めた。将来はWebサイト制作を仕事にしたい。Webサイト制作をするのにパソコンのスペックはどれだけあればいい?Macだとどのモデルがおすすめ?

このような疑問に答えます。

本記事の要点は以下のとおりです。

・メモリは16GB、CPUはi5以上、ディスクは256GBを選べばOK

・Webサイト制作で使うPCはMacBook Pro13インチがおすすめ

こんにちは、フリーランスエンジニア1年目のまさです(@ryoblog2

普段、Web制作会社よりコーダーとして案件を受注しています。

今回、Webサイト制作を仕事にする場合の必要なパソコンのスペックをお伝えします。

パソコンの購入に悩んでいる方はぜひご覧ください。

Webサイト制作に必要なPCのスペックは?

Webサイト制作をするなら、下記のスペックを満たすパソコンを用意しましょう。

CPUCore i5もしくはCorei7
メモリ16GB以上
ディスク256GB以上

理由を順に説明します。

CPUはCore i5かi7を選ぶ。

CPUはパソコンの頭脳です。

Core i3<Core i5<Core i7というように、数字が大きくなるほど処理速度も速くなります。

このCPUはWebサイト制作においてはそれほど重要ではありません。

Core i5でも十分軽快に動作します。

ただ、もし動画編集やゲームをするのであれば、Core i7を選んだほうがいいです。

私は将来的に動画編集もやるつもりだったので、Core i7を選びました。

ちなみにクロック数という指標もあります。例えば、1.7GHzとか1.9GHzなど。(GHzはギガヘルツという単位)

このクロック数は数値が大きいほど、1つのコアあたりの処理性能が上がります。

予算に余裕があれば、クロック数の高いものを選んだほうがいいです。

ただ、Webサイト制作のパソコンを選ぶ上では次のメモリのほうが重要です。

メモリは16GBがおすすめ

Webサイト制作をするなら、メモリは16GB以上を選びましょう。

なぜなら、PhotoshopやXDなどのデザインツールを使うと、メモリを大量に使用するからです。

たとえば、私が以前使用していたMacBook Air(2012年モデル)のメモリは4GBでした。

最初はネットサーフィンしたり、コードを書くだけでしかMacBook Airを使ってなかったので、4GBでも十分でした。

しかし、デザインカンプをもとにコーディングするようになると、PhotoshopやXDを立ち上げることになります。このデザインツールがメモリをたくさん使いました。

実際、Photoshopを操作しているとフリーズが頻発しました。コーディングが遅々として進まず、全然仕事が進みません。私がMacBook Proの購入を決意した瞬間です。

今はメモリ16GBです。Photoshop、XD、Illustratorを同時に立ち上げてもサクサク動きます。何もストレスがありません。

Webサイト制作をするなら16GBあったほうが安心です。

Photoshop、XD、Illustratorを使わないプログラミング初心者の方は、メモリ4GBのパソコンでも十分です。ブラウザとエディタだけでもプログラミングを学べるからです。

ただ、将来Webサイト制作を仕事にする可能性があるなら、16GBのPCを買ったほうが安全です。

※「メモリ8GBでもいいのでは?」と考える方もいるかもしれません。私が制作会社で常駐しているとき、制作会社のWindowsPC(メモリ8GB)を使用していました。Photoshopを立ち上げると動作が明らかに遅くなりました。Photoshopのファイルを2つ開くと重くなるので、1つまでしか開かないようにしてました。これはストレスを感じるレベルです。やはり、メモリ8GBではなく16GBのほうがいいです。

【メモリの補足】Webサイト制作中はどんなアプリ立ち上げてるの?

私は普段立ち上げているアプリをまとめました。

これらすべてのアプリを同時に立ち上げても、メモリ16GBあればサクサク動きます。

■私がWebサイト制作中に立ち上げているアプリ

・Photoshop(デザインカンプ)

・Adobe XD(画像書き出し用)

・VSCode(エディタ)

・Chrome、Safari、FireFox(動作確認)

・Chrome(YouTubeでbgm聴く)

・メモ帳

・Station

・Sourcetree

・Evernote

・Slack

ストレージは256GBで十分

Webサイト制作用のパソコンであれば、ストレージは256GBもあれば十分です。

容量が足りなくなっても、クラウドに保存する(DropboxやGogoleドライブ)、外付けHDDを買う、などで対応できます。

あえて大容量のディスクを選ぶ必要はありません。

USB-Cポートは2つで十分(MacBook Proの場合)

以下は、MacBook Proを選ぶ場合のお話です。

MacBook ProにはUSB-Cポートが2つのものと、4つのものがあります。

これは2つで十分だと思います。

なぜなら、あとから拡張できるからです。

ポートが不足する場合は、USB-Cの拡張用のハブを買えば済みます。拡張ポートは5,000円ほどで買えます。

ちなみに私の場合は、1つのポートは充電用、もう1つはマウスのBluetooth用で使用しています。iPhoneの充電をする場合は、どちらかを外して差し替えます。特に手間だと感じません。

ディスプレイのサイズは13インチで十分

MacBook Proのディスプレイは13インチと16インチの2種類があります。

「コーディングするなら、画面が広い16インチのほうがいいかな」と最初考えてました。

でも調べてみると、16インチは2.0kgあります。電源アダプタが295gなので、合計で2.3kg。

これはさすがに重い。

持ち運びできる重さがよかったので、13インチのほうを選びました。13インチなら電源アダプタを合わせても1.57kgです。これなら持ち運びできます。

(補足)私のMacBook Pro13インチのスペック

私が購入したMacBook Proのスペックをご参考として載せます。

13インチMacBook Pro - スペースグレイ
システム構成:
第8世代の1.7GHzクアッドコアIntel Core i7プロセッサ(Turbo Boost使用時最大4.5GHz)
Intel Iris Plus Graphics 645
16GB 2,133MHz LPDDR3メモリ
256GB SSDストレージ
True Tone搭載Retinaディスプレイ
Thunderbolt 3ポート x 2
Touch BarとTouch ID
PRO APPS 065-C171 NONE
SW LOGIC PRO X 065-C172 NONE
バックライトキーボード - 英語(米国)
アクセサリキット
¥ 214,800(税抜)

Webサイト制作用のパソコンを選ぶときのポイント

MacBook Proを買うと、どんなスペックにするのであれ20万円はかかります。

しかし、Webサイト制作を仕事としてやるのであれば、パソコンへの投資は惜しまないほうがいいです。「ちょっと過剰かな」と思うぐらいのスペックを選んだほうがいいです。

十分なスペックのPCを選ぶことで以下のメリットがあります。

・サクサク動くのでストレスがない

・PCが速いので仕事も速く終わる

・パソコンにお金を使うことで、「がんばって稼ごう」という気になれる


パソコンは5年は使うものです。「ちょっと過剰かな」ぐらいのPCを選んだほうがいいです。

まとめ

今回、Webサイト制作に必要なPCのスペックについて、私の購入例をもとにご説明しました。

まとめると、以下のスペックを満たすパソコンを選びましょう。

・メモリ16GB

・Core i5以上

・ディスクは256GB

Macの中ではMacBook Pro13インチが特におすすめです。

ご覧いただきありがとうございました。

5月のつぶやき

コロナが長引いてますね。
緊急事態宣言が延長されることに。。
家にずっといると退屈ですよね。

動画や本で暇つぶししませんか?

下記のサービスはどれも30日以内に解約すれば完全無料です。0円で試せるのでぜひ。

プライム・ビデオでは14,000本の動画が見放題です。「君の膵臓をたべたい」がイチオシ。浜辺 美波がかわいい。

Audible(オーディブル)では本を1冊聴けます。ホリエモンの多動力がおすすめ。

Amazon Music Unlimitedでは音楽が聴き放題です。Official髭男dismやback numberの曲も。自分はブログ書くときに聴いてます。
※今は期間限定で3ヶ月無料です。チャンス。
  • この記事を書いた人

まさ

Webサイト制作のフリーランスエンジニア。WordPress、SEOが専門。東大大学院経済→富士通営業→iSara6th。広島市在住の30歳。TOEIC960。フリーランス5ヶ月目で月収40万円達成。ブログではWeb製作やプログラミング学習法について書きます。Web製作のご相談をお待ちしております。

おすすめ記事

1

プログラミングの独学が大変。1人で勉強してるけどモチベーションが上がらない。Progateは難しいし。分からないところを質問できる相手もいない。2時間かけてググっても答えが見つからない。このままだと挫 ...

2

Photoshopでデザインカンプを作れるようになりたい。おすすめの方法があれば教えて。by コーダー このような疑問に答えます。 記事の内容 Photoshopでデザインカンプを作る方法をUdemy ...

-Webサイト制作

Copyright© まさWEB , 2020 All Rights Reserved Powered by AFFINGER5.