空前のパンデミックにより通勤やオフィスの必要性が見直され、時間や場所にとらわれない柔軟な働き方ができる職業にますます注目が集まっています。
中でもWebデザイナーはサイト制作のお仕事だけではなく、会議資料の作成やSNSの投稿などいろんな場面で生かすことができ、人気が高まっているお仕事です。
そこで今回は

という方に向けてWebデザインを始めるときに揃えておきたい6つのものをご紹介していきます。
1.パソコンと周辺機器
まず準備しておきたいのがパソコンです。
必要なスペックは以下の通り。ご自身がお持ちのパソコンに当てはまっているかどうかチェックしてみましょう。
Webデザイナー向けのパソコンのスペック
- CPU : Mac M1 または Intel Core i5以上
- メモリ : 16GB
- ハードディスク : SSDの256GB以上
- OS: Mac最新 または Windows10
Webデザイナーのパソコンの話になると、必ずついてまわるのがMacとWindowsどちらのパソコンを買うべきかという話です。
結論から言うと、どちらでも問題ありません。
昔は印刷に耐えうるデータを作ることができるハイスペックなパソコンはMacしかなかったため、デザイン=Macという構図ができあがっていました。
▼WebデザイナーおすすめPCについて詳しく知りたい方はこちらの動画をチェック▼

しかし、現在はWindowsのパソコンも性能が上がっていますし、今お使いのパソコンがWindowsなら無理に買い換える必要はありません。
「せっかくならWebデザインのお仕事に最適なパソコンを買い替えたい」という方や「現役デザイナーが多く使っているパソコンに合わせておきたい」という方はMacを購入されるといいかもしれません。
また、パソコンと合わせてマウスやハードディスクなどの周辺機器も揃えておきましょう。
あると便利な周辺機器
- マウスまたはトラックパッド
- 外付けSSD
- ディスプレイ
- マルチハブ
▼関連記事▼

2.ネット環境
続いて準備するのが、ネット環境です。こちらはすでに用意されている方が多いかもしれません。
最近はミーティングやクライアントとのやりとりなどをzoomで行うケースが増えていますし、リサーチやWebサイトの検証などにもネットを利用します。
携帯の回線しかない方はできればモバイルWi-Fiか光回線を契約し、お仕事のときの通信環境にストレスがないようにしておきましょう。
3.IllustratorとPhotoshop
3つ目は、デザインソフトです。
まずはWebデザイナーに必須のAdobe IllustratorとPhotoshopを契約しましょう。
料金
単体プランの場合:月額2,728円
コンプリートプラン(20以上のAdobeソフトを使用できる)の場合:月額6,248円
IllustratorとPhotoshopをそれぞれ単体プランで契約する場合、毎月5,500円ほどかかるという計算になります。
「え、こんなに高いの!?」と驚かれた方もいらっしゃるかもしれません。筆者も「デザインソフトを使うのだけで毎月こんなにかかるのか…!」と最初はびっくりしました。
しかし、Webデザイナーになるために必要な投資だと思って契約してしまいましょう。
▼関連動画をチェック▼

たまにAdobeの公式サイトやAmazonで割引セールを行っているので、タイミングが合えばお得に購入できます。
また、職業訓練校やスクールに通っている学生の方であれば、コンプリートプランを月額 2,178円と割安で使うことができますよ。
他にもAdobeのソフトには
- デザインカンプの作成などに使うXD
- 写真のレタッチに使うLightroom
▼Lightroomに関して知りたい方はこちらの動画をチェック▼

などWeb制作の現場でよく使うソフトがあります。
まずはIllustratorとPhotoshopを使いこなせるようになるところからスタートし、将来的にはコンプリートプランを契約して様々なソフトを駆使できるようになりましょう。
4.エディタ
エディタはコーディングをするためのソフトです。
エディタには無数の種類がありますが、中でもWebデザイナーやエンジニアがよく使用しているソフトがMicrosoft製の「Visual Studio Code(ビジュアル・スタジオ・コード)」です。
略して「VSCode(ブイ・エス・コード)」と呼ばれています。
Visual Studio Codeの特徴
- 無料
- Windows、Macのどちらでも利用できる
- 入力の補完機能などコーディングを効率的に行うための機能がある
こちらからダウンロードすれば、すぐに使い始めることができます。
有料エディタのDreamweaverやAtom、WebStormなども現場でよく使われていますが、VSCodeを使用していれば他のソフトにもすぐに慣れることができます。
5.ドメインとサーバー
Webデザイナーは今までの経歴や職歴以上に、成果物が重視されます。
つまり、「どんなコンセプトでどんなデザインをしたのか」がとても重視されます。
そこで必要になってくるのがポートフォリオ(作品集)です。自分が作った作品をまとめて公開できるようにしておかなくてはなりません。そのためにドメインとサーバーを契約しておきましょう。
ドメインはいわばネット上の住所です。
ドメインはお名前.comなどのサイトで取得できます。早いもの勝ちなので、すでに使われているドメインは取得できないため注意しましょう。
レンタルサーバーは、サイトを表示するために必要な場所を借りるというイメージです。ConoHa WINGやエックスサーバー、ロリポップなどを選んでおけば間違いないでしょう。
※エックスサーバーの場合はX10プランがオススメ。


ドメインとサーバーがセットになっているプランもあるので、自分に合ったものを選びましょう。
6.フォント
最後にご紹介するのが、フォントです。
前提として、AdobeFontsやGoogleフォントを利用すればそこまでフォントに困ることはありません。Adobeのソフトを契約していればAdobeFontsは無料で利用できますし、Google Fontsも完全無料で誰でも利用できます。
しかし、どちらも日本語フォントはそこまで充実していないため、必要に応じてモリサワフォントの購入も検討しましょう。
MORISAWA PASSPORTを契約すると1,500書体以上を利用できるようになります。料金は1年契約で54,780円です。
Webデザイナーになる上でフォントの知識は必須です。デザインやターゲットに合わせて、適切なフォントを選ぶことができるよう訓練しましょう。
▼フォントに関して詳しく知りたい方はこちらの動画をチェック▼


まとめ
今回は、Webデザインを始めるときに揃えておきたい6つものをご紹介しました。
最初の頃は何を準備したらいいのか迷うものですよね。
まずは今回ご紹介した6つのものを揃えるところから始め、やっていく中で足りないものが出てきたら追加購入していくと良いと思います。
勇気を出してぜひWebデザイナーへの一歩を踏み出してみてくださいね。
これからもmikimiki webスクールではみなさまのお役に立つ情報を発信していきますので、楽しみにしていてください♪

- 【初心者向け】Canvaの無料版でできることを徹底解説!基本機能や注意点についてもご紹介
- 【初心者OK】Canvaでかんたん!おしゃれなアイコンの作り方完全ガイド
- 【Windows向け】ChatGPTデスクトップアプリの特徴とインストール方法を徹底解説!