Webデザイナーに必要なものを徹底紹介【これから始める人必見!】

こんにちは、Sakiです!

Webデザイナーってなにが必要ですか?パソコンやソフトなど、必要なものを詳しく教えてください!
この記事では、現役フリーランスWebデザイナーが、これからWebデザイナーを目指す方に必要なものをご紹介しています。
- パソコン
- マウスやキーボードなどのPCツール
- Webデザインソフト
- フォント
- ドメイン・サーバー
Webデザイナーの必需品だけでなく、作業環境を良くするためにおすすめのPCツールもご紹介しています!



自身のWebデザイナーとしての経験から、本当に必要なものをご紹介しているのでぜひ参考にしてください!
Webデザイナーに必要なパソコンの性能(スペック)や選び方


まずはWebデザイナーの必需品である、パソコンの性能(スペック)や選び方を解説します!
WindowsとMacどっちがいい?
パソコン選びに1番最初に気になる点かと思いますが、WindowsかMacかはどちらでも大丈夫です!
とくに操作性に大きな差はないことや、どちらの利用者も一定数いることから、WindowsでもMacでも好きな方でOKです。
私はWebデザインを学習し始めた頃から現在まで、ずっとWindowsを使っています。
ちなみにWebデザインスクールはWindows、勤めた制作会社はMacが採用されていました。



WindowsもMacも両方使いましたが、キーボードの名称や配列が少し違うだけで、操作などほとんど同じなのですぐに使いこなせました!
ただやはりそれぞれ少しずつ差はあるので、詳しく解説します。
Windowsがおすすめな人
Windowsは下記のような人におすすめです。
- できるだけ安くパソコンを手に入れたい人
- MicrosoftでもAppleでもどっちでもいい人
- クライアントが使うPCに合わせたい人
- ExcelやWordなどのOfficeソフトを使いたい人
とくにMicrosoftやMacにこだわりがなければ、安く購入できるWindowsがおすすめです!
ひとまず最初は出費も抑えたい方もいると思うので、学習中はWindowsを準備して、ある程度余裕ができてからMacに移るのもありです。
また、クライアント側を重視するなら、圧倒的に利用者が多いのはWindowsです。
色などの見え方はOSにより変わることがありますが、それを合わせるために大多数のクライアントと同じにするのもWebデザイナーにとっては大事です。



とはいえWindowsとMacの画面の差で困ったことはないので、値段やOfficeソフトの有無で考えるといいかと思います!
Windowsでデザイン性を重視するなら
もしWindowsがいいけど「デザイン性も重視したい」と考えるなら、「Surface」がおすすめです!
私が持っているパソコンの1つですが、Macのようにスタイリッシュなデザインで、薄いので持ち運びにも便利です。



中身はWindowsでありながら見た目はおしゃれなので、クリエイターにピッタリですよ!


Macがおすすめな人
Macは下記のような人におすすめです。
- Appleがいい、iPhoneやiPad利用で連携したい人
- 見た目やデザイン性を重視したい人
- Webデザイナーに人気のPCを使いたい人
- ある程度お金に余裕がある人
Webデザイナーに人気のあるMacは、デザイン性を重視したい方や、iPhoneやiPadなどすでに身の回りのものをAppleで揃えている方におすすめです!
ただ、Macは値段が高く、上でご紹介したSurfaceと同じぐらいの画面サイズ(14.2インチ・16.2インチ)となると、274,800円~となります。
その分容量も大きくなるので完全な比較対象ではありませんが、作業を考えて15インチはほしいところなので、そうなるとある程度のお金の余裕は必要です。
Webデザイナーに最低限必要なパソコンの性能(スペック)は?


Webデザイナーは、最低限下記の性能(スペック)があるパソコンを選びましょう。
- CPU:Intel core i5以上
- メモリ:最低8GB(16GB以上推奨)
- モニターのサイズ:デスクトップ20インチ以上、ノート15インチ以上
パソコンには他にもグラフィックボードなどの性能もありますが、考え過ぎても難しいかと思うので、最低限上記のもので探せばOKです!
メモリはデザインソフトの操作の快適さにつながる部分です。最低8GBから使うことはできますが、読み込みが遅かったり操作が重くなるので、快適に作業するためにも16GB以上がおすすめです!
あとはモニターのサイズですが、ノートパソコンはとくに画面が小さすぎると作業がしにくいので、15インチ以上がおすすめです。
デスクトップとノートパソコンどっちがいい?


デスクトップかノートパソコンかは、こちらも結論としてはどちらでも大丈夫です。



下記から自分に合う方を選ぶといいかと思います!
- デスクトップ:できるだけ大きな画面で作業したい、自宅での作業のみで持ち運びすることがない、持ち運び用にノートパソコンは別で購入予定
- ノートパソコン:外で作業したり持ち運びをする、15インチ以上を購入予定でデスクトップほどの大きさは必要ない
こんな感じですが、個人的には1台目にノートパソコンを購入して、大きい画面が必要になったらモニターの購入でもいいかなと思っています。



モニターなら画質を重視しても、デスクトップより安く購入することができますよ!
\値段を重視する方に/


\発色や綺麗さを重視する方に/


Webデザイナーにおすすめのマウスやキーボード「PCツール」


続いてWebデザイナーにおすすめのマウスやキーボードなど、パソコン周りのツールをご紹介します!
ノートパソコンスタンド


ノートパソコンを使うなら、ノートパソコンスタンドもおすすめです!
ノートパソコンを使うときって、どうしても目線が下向きになるので猫背になりやすいです。
そして首も前のめりになりやすいので、いわゆる「スマホ首・ストレートネック」となり、痛めてしまう危険性もあります。
Webデザイナーは毎日長時間のパソコン作業となるので、少しでも楽に作業するためにも、ノートパソコンスタンドは取り入れてみてくださいね!





私はBoYataのシャンパンゴールドを使っています。上品なカラーで、ちょっとしたインテリアのアクセントにもなっています!
キーボード


ノートパソコンスタンドを使うとなると、キーボードも必要になります。
スタンドにパソコンを乗せた状態ではキーボードが遠くなるので、合わせて購入しておきましょう!
私はエレコムのキーボードを使っていますが、各キーが薄型に作られているので打ち込みやすいです。
あとは、キーボードの裏側に角度調整のスタンドが付いているので、多少手首が楽だと感じます!



私は見た目よりも機能性重視なので、デザインはシンプルなものばかりですが、どれも長時間作業にはおすすめですよ!


マウス


マウスは購入したパソコンに付いてくるものでもいいですが、私はこちらのマウスを使っています。


このマウスは横にもボタンが2つ付いており、自分で好きな操作に設定することができるんです!
たとえばページの進む・戻るをボタンのみで簡単にできたり、コピー・ペーストに設定すれば作業効率を上げられます。
私は今までコピーするときはキーボードのCtrl+Cで行っていましたが、このマウスに変えてからはワンクリックでポチポチできるので、めちゃくちゃ気に入っています!
そしてマウスの形も手の形状から考えられたものになっているので、長時間でも疲れることなく快適に作業ができますよ!
マウスパッド
もう1つマウスに忘れてはならないのが、マウスパッドです。


こちらが私が使っているマウスパッドですが、これは手首にあたる部分が柔らかくなっており、こちらも疲労軽減にかなり役立っています!
なんとリハビリテーションセンターと共同開発されているようで、手首や腕、肩までの位置を考えてマウスパッドの形状が作られています。



マウスパッドは正直重視していませんでしたが、これに変えてからマウスパッドは作業の快適具合にめちゃくちゃ関係していることが分かりました!
もともと「柔らかくて良さそう!」の気軽な気持ちで購入したんですが、疲れにくさと手首の心地よさから、購入して良かったツールの1つとなっています!



裏面のシリコン素材も、机としっかり密着してくれるので、マウスパッドがずれるストレスも無くなりますよ!
Webデザイナーに必要なAdobeのデザインソフト


Webデザイナーにはデザインソフトも必須です。
デザインソフトやツールも最近はいろいろありますが、基本的にはAdobeを利用するのがおすすめです!
Webデザイナーが主に使うAdobeソフトは下記の3つです。
- Illustrator(デザイン用)
- Photoshop(デザイン用)
- Dreamweaver(コーディング用)
Illustrator・Photoshop(デザイン用)


IllustratorとPhotoshopはデザイン用に使うAdobeソフトです。
- Illustrator→図形などを用いてデザインするときに使用、名刺やチラシ制作・ロゴ制作にも
- Photoshop→写真の加工や切り抜きに使用
このような違いがあり、Illustratorはイラスト系、Photoshopは写真系に強いと覚えると分かりやすいです。
Webサイトはどっちを使うべき?
Webサイトの構成やデザインを作るときによくある、「IllustratorとPhotoshopのどっちで作るべき?」ですが
これは、どちらでも使いやすい方・好みで大丈夫です!
Illustratorで作る人もいれば、Photoshopで作る人、XDを使う人などさまざまです。
Webデザインスクールでも制作会社であっても、その場所ごとに使われているものが異なるので、自己判断で好きなものを使うといいでしょう!



私はIllustratorの方が扱いに慣れているので、グラフィック系だけでなく、WebサイトもIllustratorでデザインしています!
Dreamweaver(コーディング用)


Dreamweaverはコーディングするときに使うAdobeソフトです。
Dreamweaverは、無料のテキストエディタで代用するのでもOKなので、こちらは必須ではありません。
たとえばAdobeソフトがすべて使えるコンプリートプランを購入するなら、Dreamweaverを利用するのでもいいですが、単体購入の場合はDreamweaverまで購入するとなると結構高くなってしまいます。



Adobeソフトの単体購入でIllustrator・Photoshop・Dreamweaverを揃えると86,328円もかかるんです!
しかし無料のテキストエディタでも問題なく使えるので、Dreamweaverは代用するのがおすすめです!
3万円以上もお得にAdobeプランを購入する方法


実は、Adobeのプランをなんと3万円以上もお得に購入する方法があるんです!
それは、Adobe認定パートナーのオンライン講座を購入することです!
Adobeのプラチナスクールパートナーに認定されているスクールから講座を購入すると、1年分のAdobe Creative Cloudライセンスも付いてきます。



講座といっても、Adobeの基礎操作に関する教材が付いているぐらいで、スクールのように課題や学習ノルマはありません。
Adobeのプラチナスクールパートナー認定スクールはいくつかありますが、1番おすすめなのはデジタルハリウッドのAdobeマスター講座です。
デジハリなら土日や祝日の申し込みでもOKで、365日・24時間受付やシリアルコードの発行をしてもらえるので、購入したらすぐにAdobeソフトが使えます。(クレジットカードの場合)
下記の記事ではAdobeプランを安く購入する方法として、デジタルハリウッドのAdobeマスター講座について詳しく解説していますので、ぜひ参考にしてください!


Webデザイナーにおすすめのフォントサービス


Web制作ではフォントが重要になりますが、元々パソコンに入っているフォントのみでは足りないので、フォントサービスからダウンロードしておきます。



フォントサービスでダウンロードしたものは、IllustratorやPhotoshop、Webサイト上で使うことができます!
Webデザイナーにおすすめのフォントサービスは、Adobeが提供している「Adobe Fonts」と、Googleが提供している「Google Fonts」です。
- Adobe Fonts:Adobeに無料登録で使える(制限あり)、いずれかのAdobeプランを購入していれば制限なくフォントが使える
- Google Fonts:誰でも無料で利用可能
フォントの種類を増やすことで、デザインの幅がぐんと広がります。
どちらも無料で使えるので、ぜひダウンロードしてWeb制作に役立ててくださいね!
Webサイト制作に必要なドメイン・レンタルサーバー
ホームページやブログなどWebサイトを制作するには、ドメインとレンタルサーバーが必要です。


ドメインとサーバーは家で例えると、ドメイン=住所・サーバー=土地の役割をしています。



ドメインとサーバーを契約することで、ホームページやブログが作れるようになります!
- エックスサーバー:当ブログの利用サーバー。国内シェアNo.1で実績も豊富。迷ったらココにすれば間違いなし!
- ConoHa WING:料金も機能もバランスOK。ただ歴は浅いので、新しいもの好きにおすすめ!
これらの中でも1番おすすめなのが、当ブログでも利用しているエックスサーバーです!
昔からあるので実績も豊富で、利用者数も多いので調べればだいたいのことは解決します。



実際に利用していて困ったことは全くないので、迷ったらエックスサーバーがおすすめです!
機能面や料金でいうとConoHa WINGも似ていますが、エックスサーバーに比べて歴が浅いので、まだまだ情報は少ないです。
問題が起きてもある程度自分で解決できる人や、新しいもの好きにはおすすめですが、心配な方はエックスサーバーを選んでおくと安心です!
下記の記事ではエックスサーバーを使ってみた感想や、他社との比較を詳しく解説しているので、合わせて参考にしてください。


Webデザイナーに必要なものを徹底紹介【まとめ】
この記事では、これからWebデザイナーを目指す方に必要なものをご紹介しました。
Webデザイナーには下記のものが必須です。
- パソコン
- Webデザインソフト
- フォント
- ドメイン・サーバー
また、マウスやキーボードなどのPCツールをアップグレードすることで、格段に作業効率や快適さが良くなります!
Webデザイナーに必要なものはたくさんありますが、1度揃えると長く使えるので、ぜひ自分に合ったものを取り揃えてくださいね!