Webデザイナー・フロントエンジニアになりたいと思ったら、
教材・デザイン系ソフトを購入するよりも先に、まずパソコンを購入する必要があります。
私は実際にWeb制作会社で働いていて、
自分の環境・周りの環境・外部デザイナーさんの環境などを知る機会が多いので、
これからWebデザイナー・フロントエンジニアを目指される方に、どんなPcがオススメできるか、
実務目線で紹介できると思います。
※この記事はノートパソコンをメインで扱っていくので、絶対デスクトップがいいって人には合わない記事だと思います。
※ちなみに2022年1月現在、私はM1 Mac Book Air 2020(16GB、1TB)を使用しています。
目次
迷ってるならM1 Mac Bookがオススメ
前置きが長くなってしまいすみません。本題に入ります!
M1 Mac Book発売前なら、他にもオススメできるPcありましたが、M1 Mac Bookが出てからは、Webデザインする上では、M1 Mac Bookが最適な1台だと考えています。
特に、コスト面と使い勝手の面が大きいです!
ストレージ | メモリ | 価格 | |
M1 Mac Book Air | 256GB | 16GB | 137,280円 |
Surface Pro8 | 256GB | 16GB | 193,380円 |
コストの面では、2022年1月現在、windowsにはSurface Pro8という機種がありますが、実務想定で考えると、最低でも193,380円くらいかかってきてしまいます。(※メモリ16GB、i5、ストレージ256GB。タイプカバー別)
異なるOSですので、一概に比較はできないですが、
M1 MacBook Airが同じようなスペックで、137,280円で購入できること考えると、ちょっと割高です。。
使い勝手の面では、私の体験談になりますが、一時期surfaceのかっこいいデザインに惹かれて、Macからsurfaceに乗り換えた時期がありましたが、
- ディスプレイの色味と明るさに違和感を感じた
- タッチパッドが使いにくい
- バッテリー持ちが悪い
などの理由からsurfaceを3ヶ月ほどで売却してしまった経緯があったりします。windowsに期待して、乗り換えた結果、あらためてMacの良さを認識することになってしまったエピソードです。
また、Webデザインに必須なヒラギノフォントが、windowsには最初から入ってないので、別途購入の必要があったりします。
Macなら最初からヒラギノフォントがインストールされているので、余計な費用がかからない点もメリットです。
特にこだわりなければM1 Mac Bookがオススメです!
ノート or デスクトップ
今だと Mac bookかiMacなのかで迷うと思いますが、私は以下の理由から持ち運びできるMac Bookをオススメします。
これから勉強していく方であれば、
- 勉強中であれば、そのまま持ち出せた方が断然有利。そのまま講師のとこに持っていって質問できる。
- 会社終わりに勉強することも可能。
といったメリットがあり、
今後仕事をしていく方であれば、
- 自宅と職場環境、同じ環境で仕事ができる。
- 気分転換に出社して作業したり、リモートNGなクライアントとの打ち合わせがしやすい。
といったメリットがあります。
私自身も勉強初期の頃はデスクトップでやっていましたが、スクールやセミナーに通うときに、ノートPcがないと不便だったため、デスクトップを売却して、ノートPcに乗り換えた経緯があります。
よほどこだわりがなければ、持ち運びできるMac Bookをオススメします!
M1 Macとインテル版Macはどっちを選べば良い?
今買うなら間違いなくM1 Macだと言えます。
私が購入した5月末くらいの時だと、Illustratorの挙動がちょっと怪しかった(使えないことはないが作業効率が落ちる)のですが、2021年6月くらいにIllustratorのネイティブ対応が完了したので、それ以降は問題なく使えています!
また、Apple Silicon搭載端末では、
- Photoshopのパフォーマンスが1.5倍
- Illustratorに関しても高速化している
と、Adobeからアナウンスされています。
この辺り単純なPcスペックでは計れないメリットなので、迷ったら、購入理由に加えていい部分だと思います。
今買うなら、インテル版Macでしか動作しないソフトなどを使ってない限りは、
Apple Silicon搭載のM1 Macを買ったほうが絶対にいいです!
どのM1 Mac Bookを選べばいいの!?
Air、Pro13インチ、Pro14インチ/16インチなど、M1 Mac Bookにもいくつかの種類がありますが、
Webデザイン業務には、Airで十分対応可能です!
Apple Silicon搭載前の、以前のMac Bookでしたら、間違いなくProをオススメしていましたが、
Apple Silicon搭載後は、以下の理由が無い限りはAirで十分だと思います..!
- 長時間の動画書き出し作業を行うので冷却ファンが欲しい
- バッテリー容量が少しでも大きいほうがいい
- 屋外で作業するので少しでも明るい画面で作業したい(Air400ニト Pro500〜)
長時間の4K動画の書き出し等の、高負荷作業をするなら、Proのほうが安心できると思いますが、Webデザイナー・フロントエンド業務でそこまで高負荷な作業をすることなまずないので、Airで十分だといえます。
また画面輝度に関しても、屋外で作業するような状況でない場合、Airの400ニトで十分すぎるほど明るいです。
というか、Web制作ならむしろストレージ容量が1TBとかあってもいいと思うので、Pro買う予算を、ストレージに回してもいいと思います!
バッテリーの持ち
バッテリー容量に関しては、下記の通りです..!
- Air:18時間
- 13インチPro:20時間
- 14インチPro:17時間
- 16インチPro:21時間
16インチはバッテリー持ちはいいですが、かなり大型なので、持ち運びには不向きだと思います。一番軽い巨体ながら、Airは十分検討していると思います..!
冷却ファンの有無
冷却ファンについては、私自身普段から、
- Photoshop、 Illustrator、XD
- Vsコード、ブラウザ(Chrome、Firefox、Safari)
- Parallels(Macでwindowsを開くソフト)
- 連絡用アプリ(ChatWork、Slack、Thunderbird)
を同時利用していますが、Mac Book が熱を持ったことはないので、基本的なWebデザイン業務であれば、ファンの有無は気にする必要がないと思います。
画面輝度
画面の明るさについてですが、スペック上Airが400ニト、13インチProが500ニト、14/16インチProが1000ニトになっています。
基本的に屋内の作業であれば、全く問題ないですが、屋外での作業時に、気持ち500ニトの方が画面が明るくみやすくなる可能性があります。まあ、基本的に屋外で作業する機会って写真家の方とかになると思うので、Webデザイン業務ではそこまで気にする必要はないと思います。
そもそも400ニトで十分明るくみやすいです。(以前使っていた300ニトでも十分見やすかったので)
料金比較
AirとPro13インチの比較です。
おすすめの組み合わせ メモリ16GB ストレージ512GB | 最安の組み合わせ メモリ8GB ストレージ256GB | |
Air | 159,280円(税込) | 115,280円(税込) |
Pro13インチ | 192,280円(税込) | 148,280円(税込) |
14インチ/16インチProに関しても最安の組み合わせで掲載しておきます。
最安の組み合わせ メモリ16GB ストレージ512GB | |
Pro14インチ | 239,800円 |
Pro16インチ | 299,800円 |
私がAirをおすすめしている最大の理由が、料金部分です..!Pro14インチ以上はグッと料金上がってくるので、Airで対応できるならAirがおすすめです。
また、AirもしくはPro13インチを購入する場合は、なるべくおすすめの組み合わせを購入した方が良いと思います。
当時勉強中だった私は、Mac Book Air2018のメモリ8gb、ストレージ128gbを使っていましたが、実際に仕事としてWeb制作をするようになってからは、やはりスペック不足を感じてしまったので。
結論として、通常のWebデザイン業務であれば、Airが、
長時間の動画編集などを行う場合は、Pro14インチ以上がおすすめです!
M1 Mac Book Air 2020の使用感
私は、基本的に、Photoshop、 Illustrator、XD開きながら、Vsコードでコーディングしつつ、
Parallels(Macでwindowsを開くソフト)でwindowsの表示確認しながら作業することが多いですが、
メチャクチャ快適に動作しています。
また、MacBookAirはファンがないので、熱問題が心配ですが、今日まで使っていて、熱を持つことは特にないです。
Parallels Toolboxの熱測定ツールで、時々温度を見てますが、充電中しながらの作業でも、33℃前後におさまってます。
比較対象だと、以前使用してました、MacbookAir2018の8GBモデルの時は、動きがもっさりしすぎてて、仕事にならなかったので、乗り換えてからはメチャクチャ仕事がはかどってます。
※以前がスペック低すぎたってものあります。
以下同時に使用することが多いソフトです。
- Photoshop、 Illustrator、XD
- Vsコード、ブラウザ(Chrome、Firefox、Safari)
- Parallels(Macでwindowsを開くソフト)
- 連絡用アプリ(ChatWork、Slack、Thunderbird)
特別こだわりがなければ、M1 MacBookAirは本当にオススメできます。
デザイン系ソフトに関して
デザイン系ソフトに関して、Apple Silicon搭載端末は、
- Photoshopのパフォーマンスが1.5倍
- Illustratorに関しても高速化していると、
Adobeからアナウンスされている通り、体感ですが、作業スピードが爆速になっていると感じています。
正直、こういったソフトとOSの相性の問題って、単純なスペックでは計れないと思うので、ぜひ実際に体感してみて欲しいです!
ノートの便利さ
あとは、ノートにしたことで、持ち運びができるので、気分転換に作業場所を移したり、打ち合わせをしたり、勉強会を開催したりする時に、ノートにして良かったと感じています。
今勉強中の方や、気分転換によく作業場所変える方は、ノートが便利です!
Web制作する上でのMacのデメリット
ここまでメリットばかり書いてきましたが、Macにもデメリットはあります。
個人的作業していてに気になった箇所を紹介していきます。
Office系のソフトが始めからインストールされていない
Windowsだと、Office系のソフトとPcをセットで購入できるので、楽なのですが、
Macだと別途Officeソフト用意しなければならないのは、ちょっとだけ手間でした。
Macでも、こちらからサブスク形式で、契約することはできます。
Macにも「Numbers」というエクセルに似たアプリありますが、
エクセルと見え方変わってしまうこともあったので、業務するなら、エクセルは必要だと思います。
操作性がWindowsと異なる
デザインにしても、コーディングにしても、ショートカットキーが変わるので、慣れるまでは作業効率が落ちます。
私はWindowsからMacに変えて、1週間くらいで違和感無くなってきました。
こればかりは慣れるしかないと思います。
あとはどういう業務体系で働いてくか人によって違うと思いますが、会社や常駐先がMacだけということも制作系だと普通にあるので、Macの操作に慣れておくのは、全然いいと思います。
デュアルモニタでの作業がやりにくい
個人的に、2画面での作業は、Windowsのほうがやりやすかったです。
画面2つにする際に、Macだとアニメーションかかるので、若干切り替えの時にもたつく感じがあります。
あとショートカットで、2画面にうつすのも、Windowsのほうがやりやすいです。
ただ、1画面での作業は、Macのほうがやりやすいです。
※こればかりは個人の感覚だと思います。
Macはどこで購入するべき!?安くは買えないの?
ここまでMacをおすすめしてきましたが、やっぱり購入する上でネックになるのは、値段ですかね..。
Mac book Airが安いとはいっても、10万超えてきますので!
また、新品のAir買わずに、中古のPro購入するって選択肢もあります。
最後にMacの購入場所のおすすめ紹介して終わりたいと思います。
新品を購入するのにおすすめの場所
Apple Storeで購入しておけば間違いないと思います。
- 購入後14日以内は返品を受け付けてくれる
- カスタマイズができる
- オンラインでも在庫があればすぐに届く
AppleStoreで購入したMacに関しては、通常、購入後14日以内は返品を受け付けてくれるので、もしスペック不足などを感じた場合の保険になります。
また自由にカスタマイズできるのも魅力です。
Apple Store以外のお店だと、吊るしモデルしか購入できないことがほとんどです。
お店によってはオーダーすることで購入できる場合もありますが、例えば、ビックカメラとかだと、カスタマイズ品は納期が未定なのと、返品ができないなどの規則があるので、カスタマイズしたい場合は、Apple Store以外で購入する理由はないと思います。
アマゾンでも購入できます
一応Amazonでも購入することができます。
メリットは、
- 購入するときポイントがつく
- 届くのが早い
- Mac購入と一緒に、キーボードカバーなどアクセサリも購入できる
といったところだと思います。
逆に、デメリットは、カスタマイズができない点に尽きるかと..!
アマゾンで、MacBookAir購入する場合、「8GB RAM」しか選択できないので、アマゾンで購入するとき、私ならAirは選択肢から外します。
※とはいえ、8GBでもよければ、ポイントもつくのでお得に購入できるとは思います。
Macbookと合わせて購入しておいたほうがいいモノ
スキンシール(パームレフト保護)
Macのトラックパッド横(パームレフト)は汗とかで色落ちしてしまう場合がありますので、スキンシールを貼って保護するのがオススメです!
今使用しているMacも保護してなかったので、若干色落ちしてしまっています。

保護しておくのがオススメです..!
キーボードカバー
キーボードカバーの必要性は賛否あります。正直私は使ってないです!
ただ、キーボードカバーしないと汚れます。。
汚れ気にする方は購入必須です!
Webデザインスクール選びに迷ってる方へ

この記事を読んでくれてる方の、最終目標はMacを購入することではなく、Webデザイナー、フロントエンジニアとして、仕事をしてくことだと思います。
実は私も、4年ほど前、
まだweb業界未経験だった頃に、webスクールに通ってましたが、
正直スクール選びに失敗してしまって、
合計60万円ほどを無駄にしてしまったことがあります。
その際に学んだことが、結局web制作って開発とは違うとこにあることだと思いました。
未経験の方は、webデザインやるために、プログラミングスクールに通う方多いです。
確かに、html、css、js、phpくらいまでできれば、それなりにはなんとかなると思います。
ただ、開発と制作はちょっと違うので、プログラミングスクール卒業した後の、進路で、自分が想像してた方向性に行けない方が出てしまっているケースを見ることが時々あります。
たとえば「webデザイン スクール 費用」とかで検索すると上位に表示されるのは、大抵プログラミングスクールだったりします。
実体験としてプログラミングスクールに入学後、講師にWebデザイン経験者がいないと入学後に知らされたこともあったりしたので、
これから入学しようとしているスクールが、デザインに強いスクールなのか、プログラミングに強いスクールなのかはしっかり確認しておいたほうがいいです。
ちなみに、Web制作会社(株式会社LIG)ってご存知でしょうか?
Web制作やってる方なら大体知ってる会社だと思います。
今回紹介するスクールは、「Web制作会社(株式会社LIG)」が運営するスクールです。
おすすめは以下の点です
- Web制作会社が運営するスクールなので、しっかり制作について学べる
- 現役のクリエイターに直接指導してもらえる
- コワーキングスペースが無料利用できる
- 転職サポートあり
- Adobeソフトを特別価格で購入できる
転職サポートがあったり、コワーキングスペースが利用できたり、と色々、
入会する利点はありそうですが、
このスクールを選ぶ一番の理由は、
よくあるプログラミングスクールではなく、
Web制作会社が運営する、現役のクリエイターから制作について学べる学校
というとこに尽きると思います。
またAdobe系ソフトを特別価格で購入できるのもメリットです。
とはいえ、いきなりお金を払うのも不安だと思うので、まずは無料個別説明会に参加して、
自分の進路など相談してみるのがいいと思います。
※LIGが運営するだけあって人気なので、予約はお早めに取るのがオススメです。
まとめ
一般的なWebデザイン業務であれば、
M1 Mac Book Air 2020
メモリ16GB、ストレージ512GB以上を選んでおけば間違いないと思います。
以上「Webデザイナーを目指すならMacがオススメ?」でした。
コメント