こんにちは！ゆいです！
今回は、「Webデザイナーを目指すときに、最初に必ず準備するべき6つのものと後から購入でOKなもの」をお伝えします。
くま必要なものってパソコンだけじゃないの？
ゆいパソコン以外にも必要なものがあるよ！
この記事で紹介する「Webデザインを始めるのに必要なもの」を用意すると、誰でもWebデザインを始められる環境を整えられます。
くまもしかして、揃えないといけないものってたくさんある‥？
くまもし自分に合わなかったときに投資したことを後悔したくない！
ゆい最初から全部は揃えなくても大丈夫！
ゆい最初から一気に投資！ではなく、少しずつ必要なものから準備するようにすると、大きな後悔をしなくて済むよ！
ゆいこの記事では、「必須のもの」と「任意のもの」に分けて紹介します！
この記事はこんな人にオススメ
- 未経験からWebデザイナーになりたい人
- Webデザインを0から学びたい人
- 副業としてWebデザインをやってみたい人
- Webデザイナーとして独立したい人
- Webデザインを勉強中または仕事にしていて、環境を整えたい人
【必須】Webデザインを勉強しようと思ったときに最初に準備すべきもの
1. パソコン
まずはある程度のスペックのパソコンを用意しましょう！
WindowsとMacがあり、どちらでもいいのですが、迷ったらMacをオススメします。
その理由は、大抵Macを前提に記事が書かれていることが多く、単純に情報量が多いからです。
ゆい調べながら仕事に取り組むことも多いので、情報量が多い方が便利です！
一方で実際にWebデザインをすると、Windows環境で検証をする場面も出てきます。
MacにはBootcampという機能があり、Macの中にWindowsをインストールし動かすことができるので、Macだと何かと使い勝手がいいというのも理由の一つです。
くまあとMacだと単純になんかカッコイイイメージ！
くまスタバでMacとかやってみたい
ゆい理想はMacもWindowsも両方使えることだよ！
求められる最低限のパソコンのスペック
- SSD：最低256GB以上
- メモリ：最低8GB以上（16GB以上推奨）
SSDはデータを記憶しておく記憶媒体のことです。
デザイン系の学習や仕事では、画像などの多くのファイルを参照することが多いので、SSDは予算に合わせてできるだけ高い性能のものを選びましょう。
メモリは多ければ多いほど、パソコンの動作がスムーズになります。
メモリが少なければ少ないほど、パソコンが固まりやすくなります。
デザイン系の学習や仕事では、多くのソフトウェアを使用するので、メモリを消費しがち。
パソコンが固まってしまうのは、かなりのストレスと時間のロスになってしまいます。
快適に操作するためにも、メモリは最低でも8GB以上、できれば16GB以上を推奨します！
ゆいパソコンは最新のMacBookを購入しておけば問題ありません！
できればMacBook Proがオススメです
ゆいデスクトップかノートパソコンかは、まずはノートパソコンを用意するのがオススメです！
くま持ち運びができて便利！
最初はMacBook Airでも問題はありません
2. ネット環境（Wi-Fi）
ネット環境がないと、そもそもWebデザインに取り組むことができません。
まだネット環境がない場合は自宅にネット環境を契約するか、持ち運び可能なポケットWiFiが必要です。
ゆいポケットWiFiがあると、カフェとか外出先でも作業ができたり、外でパソコンを見せながら打ち合わせできたりするから便利！
3. 机
最初はなんでもいいので、机が必要です。
膝の上にノートパソコンを置いて作業・・・なんて疲れますので、もし机がない場合はローテーブルでもダイニングテーブルでもOKなので用意しましょう。
くま机がない家は少ないとは思うけど、なかったら買おう！
4. 椅子
ローテーブル&床座でも問題ないですが、やはりデスク&椅子があると作業はやりやすいです。
椅子も最初は高いものでなくても構わないので、スペースがあれば用意することをオススメします！
くまWebデザインは長時間座って作業することが多いからね・・・
5. 集中できる場所・部屋
Webデザインを勉強しようと思ったときに、集中できる部屋・場所、環境を用意すると勉強が捗ります。
くま一人になれる環境を作るのが難しい場合は？！
ゆい自宅で自分一人の場所を確保できるといいけど、難しい場合は近くにカフェやコワーキングスペースがないか調べてみて！
意外と、環境が整っていないために勉強を断念してしまうことも多いので、最低限の環境は整えましょう！
6. 勉強する時間
「勉強する時間を確保する」のが1番の難関の人も多いかもしれません。
勉強時間を確保するためには、工夫する必要があります。
勉強時間を確保するための工夫例
- 定時で帰る
- 朝早くに起きる
- 飲み会などに参加しない
- テレビやスマホは封印する
- 遊びやデートを断る
- 家族に理解を求める
- 職場の近くに住む
- 残業続きなら転職する
- 時間を確保するために、モノを買わずに浮いたお金で時間を買う
- 浮いたお金でベビーシッターやハウスキーパー（家事代行）を雇う
- 時間と生活費を確保するためにお金を借りる
- 実家で住む
くま生活を変えないといけないな・・・
ゆい何かを変えようと思ったら、それなりの覚悟や捨てるものも必要だよ
ゆいずっと続くわけじゃないから、期間を決めて頑張ってみて！
くまここは覚悟と気合だね！
【必須】Webデザインを勉強しようと思ったときに最初に準備すべきもの
- パソコン
- ネット環境（Wi-Fi）
- 机
- 椅子
- 集中できる場所・部屋
- 勉強する時間
【任意】Webデザインに取り組む際に作業がしやすいもの
これから紹介するものは、準備するかどうかは任意ですが、あるとWebデザインに取り組む際に作業がしやすくなるので準備するのがオススメです！
ゆい環境を自分で整えるのって大事です！
ゆい意外と環境に影響されるからね
1. いいデスク
部屋のスペースが許すのであれば、机はできるだけ広めで、足がしっかりしたものを選ぶと、勉強や仕事が捗ります。
また、Webデザイナーは座りっぱなしのことが多いため、健康のために昇降式デスクにするのがオススメ！
ゆい1時間座りっぱなしだと、寿命が約22分縮むらしい・・・
ゆいバコを1本吸うことで寿命が5分30秒縮むことを考えると、座りっぱなしは本当によくないことが分かるね・・・
ゆいあとは腰痛や肩こり！
昇降式デスクは、電動式だとほとんど揺れを感じず、機能も多いのでオススメです。
ハンドル式やガス圧式だと、揺れることが多く、昇降しづらいので、あまりオススメしません。
パソコンにプラスモニターを置くなら、デスク幅は120cmだとちょうど収まる広さです。
そのため、120cm以上のものを推奨します。
オススメの昇降式デスク
2. いい椅子
Webデザイナーは座りっぱなしのことが多い、とはいえ、立って仕事をし続けるのも疲れます。
そのため、いい椅子に座ると心地良く、正しい姿勢が保たれるので、断然仕事が捗ります。
ゆい数千円の椅子とはレベルが違う！
ゆい長時間のパソコン作業による首や肩、腰への負担も軽減されるよ！
長時間作業しても疲れにくいのは、エルゴノミクス（人工工学）チェアもしくはゲーミングチェア、部屋の雰囲気に馴染みやすいものがほしいなら、エルゴノミクス（人工工学）チェアがオススメです。
くまゲーミングチェアはエルゴノミクス（人工工学）チェアよりも安めだけど、存在感が大きいからね
素材はウレタン素材のものだと、クッション性があるので、リラックスでき、仕事以外でも使いやすいです。
メッシュ素材のものは通気性に優れているものの、座面が薄くクッション性もほとんどありません。
ただし、汗っかきの人にはメッシュ素材一択かなと思います。
また深く倒れるシンクロロッキングや背面一体ロッキング機能のものであるかどうか、ヘッドレスト・フットレスト・アームレストがあるかどうかも選ぶポイントです！
オススメの椅子
3. デスクトップ
ノートパソコンでも問題なくWebデザインの勉強や仕事ができますが、デスクトップの方がモニター画面のサイズが大きいので、ノートパソコンに比べると快適に作業ができます。
勉強をし始めたときの最初のパソコンはノートパソコンを購入し、余裕ができたら自宅用のデスクトップパソコンを購入するのがオススメです。
4. モニター
ノートパソコンで作業がしにくいな・・・デスクトップは費用がかかる・・・と思ったら、別でモニターを用意するのでもよいですね。
モニターがあると、断然作業効率が上がります。
選ぶポイントは、27インチであること、4Kモニターであること、高さの調整ができること、USB TYPE-C１本で映像出力や給電ができることです。
オススメのモニター
5. PC用のメガネ
ブルーライトカット用のメガネがあると、目の負担が軽減されるのでオススメです。
ゆい私は作業時はブルーライト90%以上カットのメガネを使っているよ！
メガネだけではなく、ブルーライトカット用の無料アプリ「f.lux」を合わせて使うことでだいぶパソコン作業がラクになります。
私も眼精疲労や首こり、肩こりが軽減されて、以前と比べて疲れにくくなりました。
ゆいパソコンで色を確認するときだけは外すようにしてます
6. マウス
ノートパソコンの場合は、タッチパッドでの操作が可能なのでマウスは必要ではないです。
しかし、Webデザインの場合はマウスがあると作業スピードが上がるのであると便利なアイテムです。
選ぶポイントは、両側面がくぼんでいる、静音タイプである、6ボタン以上あり横スクロールもできる、サイズはポケットサイズである、ことです！
オススメのマウス
7. AirPods Pro
AirPods Proがあると、どこにいても静かな環境が手に入るので、音で集中力が途切れやすい人にはオススメです。
【任意】Webデザインに取り組んでいく際に必要に応じて準備するもの
これから紹介するものも、準備するかどうかは任意です。
むしろ、最初からは揃えなくてもOKです。
Webデザインに取り組んでいった先に、Webデザインが楽しくなってきたり、勉強が進んだり、仕事で必要になったりしたら、準備するのがオススメです！
ゆい勉強し始めの最初から、一気に揃えなくても大丈夫！
ゆい初期投資は最低限でOKです！
1. デザインソフト
Adobe Photoshop / Illustrator / XD
AdobeソフトはWebデザインをするのに必要なソフトです。
ただし、Adobe以外にもさまざまなデザインができるツールがあり、最近ではFigmaやCANVAなどでデザインすることもあります。
また、デザインを何から勉強するかですが、コーディングから勉強する場合は、最初の段階ではPhotoshop や Illustratorは必要ありません。
私自身はWeb制作に特化したデザイナーを目指していたため、コーディングから勉強しました。
Photoshop は仕事で必要になったときに契約し、Illustratorはイラストを仕事にしていないので現在も契約していません。
ゆいWeb制作の仕事にはAdobeソフトがなくても困りませんでした
バナー作成から学ぶ場合は、最初からPhotoshop を契約することが必要です。
月額1,078円から利用可能です。
Illustratorも一緒に必要な場合は月額2,728円から利用可能です。
Adobeのそれぞれのソフトの違い
- Photoshopは主にレイアウトや画像の加工に使用
- Illustratorは主にアイコン画像やイラストの作成に使用
- XDは主にレイアウトに使用
色々デザインができるようになってきたり、本気でこの道に進もう！と思ったら、Adobeのコンプリートプランをサブスクリプション契約することをおすすめします。
コンプリートプランを契約すると、Adobe XDや、Dreamweaver、動画編集、PDF編集、ファイル管理などのソフトをすべて使うことできます。
Figma
Figmaは無料で使えるデザインソフトで、最近はWebデザインをFigmaで制作することが主流になってきています。
ゆい私もWebデザインのカンプを作るときは、ほぼFigmaを使っています！
ゆいコーディングもしやすく、画像も取り出しやすいから、Figmaはコーダーにとってもありがたいです
CANVA
CANVAも無料で使えるデザインツールです。
CANVAでチラシを作ることもあったりするので、必要になったら登録しましょう。
有料版だとさらに多くの素材や機能が使えます！
ゆい私もCANVAは有料版にしてます！
2. エディタ
コーディングする際に必要となるテキストエディタも、必要になったら準備するスタンスで問題ありません。
コーディングから勉強する場合であっても、コーディング学習サイトProgate（プロゲート）を使用する場合は、ブラウザ上でコーディングできるので、エディタを準備する必要がありません。
ゆい私も学習を進めていって、必要になったときにエディタをインストールしました！
オススメは、マイクロソフトが提供している全世界人気No.1の「Visual Studio Code」というエディタ一択。
日本語に対応しており、機能面でも充実しており、動作も軽く、しかも無料です。
その他、Dreamweaverやatomなどがありますが、動作の重さや機能面において「Visual Studio Code」に劣ります。
ゆい私も実務ではほぼVisual Studio Codeを使っています！
3. サーバー
サーバーとは、ホームページやメールなどの情報を保管したり配信したりする、いわば「データの保管庫」のことです。
たとえるなら、土地のようなものですね。
サーバーも、必要になったら契約で問題ありません。
サーバーはレンタルサーバー一択で、月1,000円〜が相場です。
オススメのレンタルサーバー
：WordPressの表示速度No.1ゆい私自身はmixhostを使っているけど、利便性やサポートの手厚さを考えると、エックスサーバーがオススメです
4. ドメイン
ドメインとは、インターネットの住所である「IPアドレス」を文字列に変換したものです。
IPアドレスとは「000.00.000.0」といった数字の羅列で表されるもので、それを「yuisdiary.com」など、人間にとっても理解しやすい文字列にしたものが「ドメイン」です。
たとえるなら、インターネット上の住所のようなものです。
くまサーバーもドメインも難しい・・・
ゆい最初はとりあえず、サイトを表示させるのに必要だということを押さえておけばOKだよ！
ドメインは、情報が多いドメイン取るならお名前.com
がオススメです。
エックスサーバーの場合は、サーバー契約と同時にドメインが無料で取れたりします。
通常はサーバーとドメインを紐づける作業が必要なのですが、エックスサーバーの場合はその作業が不要となるのでとても便利です。
ゆいサーバーとドメインを紐づける作業は、慣れないうちはとても手間ですよ！
くまうまくできるかどうかも不安！
ゆい不安なら、エックスサーバーでサーバーもドメインも一緒に取ってしまった方がラクだよ！
5. フォント
Webデザインをするのに、フォントの種類は多いほうがデザインの幅が広がります。
フォントの種類を増やしたいと思ったときに、まず使うのは「Google Fonts」と「Adobe Fonts」。
どちらも無料で使えます。
「Adobe Fonts」は、PhotoshopなどAdobeのサブスクに入っていれば、追加料金無しで制限なしで全フォントが使えます。
本格的にデザインをする！他にもフォントが必要！となったときには、「モリサワ書体」がある「Morisawa Fonts」を契約するとよいでしょう。
6. 画像素材
写真やイラストがダウンロードし放題の、「写真AC」や「イラストAC」などの画像素材サイトも、必要になってからの契約で問題ありません。
Webデザイナーの中にはこれらのサイトに契約している人も多いですが、私は今のところは契約しなくても困っていないのでしていません。
7. FTPソフト
実務では、コーディングデータをサーバーにアップロードするために、FTPソフトを使用することも多いです。
学習の段階では、多くの場合は必要ありません。
FTPソフトはたくさんありますが、機能的にはほとんど変わらないので、使いやすいものを選べばOKです。
オススメのFTPソフト
8. クラウドソフト
クラウドソフトはPCにダウンロードするソフトとは違い、オンライン上でいつでも、どこでも、誰とでも、リアルタイムで共有できるのが特徴です。
Googleドキュメント・Googleスプレッドシート・Googleスライド・Googleドライブ
Officeソフトの代わりに、Googleドライブ系のソフトも主流になってきています。
それぞれ無料で使えます。
機能
- Googleドキュメント＝Word
- Googleスプレッドシート＝Excel
- Googleスライド＝PowerPoint
Dropbox
DropboxもGoogleドライブと同じく、無料から使用できるオンラインストレージサービスです。
Googleドライブの共有でも同じようにできますが、Googleアカウントを持っていないクライアントは使えないので、そのような時にDropboxを使用します。
9. Officeソフト
Officeソフトの代わりに、Googleドライブ系のソフトも主流にはなってきていますが、クライアントによってはOfficeソフトでの資料のやりとりが要求される場合があります。
OfficeはWeb上だと無料で使えますが、機能的に物足りないこともあります。
機能的に物足りない場合は、Officeアプリをインストールする必要があり、月額750円〜で使えます。
10. コミュニケーションツール
Webデザイナーがよく使うコミュニケーションツールは以下の4つです。
会社によってどれを使用するかは分かれますが、どこかで必要になってくるツールです。
それぞれ基本的な機能は無料で使えます。
ゆい私は、どっちも使っていて、Chatworkは有料での契約をしています
ゆい他にもいろんなコミュニケーションツールがあるけど、必要になったらそれぞれダウンロードでOKです
11. 外付けHHD（ハードディスク）
デザイナーはデータ容量が重くなりがちなので、外付けHHD（ハードディスク）があると便利です。
こちらも必要になってからの準備でOKです。
Macの場合は、フォーマット形式の違いからすぐに使えない場合もあるので、HHD（ハードディスク）はMacに対応しており、フォーマット不要のものを購入すると便利です。
ゆい私は近くの電気屋さんで、Macに繋いだらすぐに使えるものを買いました！
まとめ
「Webデザインはパソコン1つあればできる！」と言われますが、そのパソコンの中には色々インストールして使えるような準備が必要です。
ただ、始めはこの記事で紹介した6つのものがあれば、Webデザインの勉強は始められます！
実際にWebデザインをやってみて「自分に向いていそう、続けられそう！」「Webデザインを仕事にしていきたい！」と思ったら買い揃えたり、契約したりすることがおすすめです。
ぜひ、始める一歩のハードルを小さくして、Webデザインに取り組んでみてくださいね。
ビジネスや副業・起業に関するご相談を承ります
1. 60分単発コンサル
事業相談、サイト制作方法、集客など、どんなご相談でもOKです。
60分間の個人セッションの中で、あなたの目的やお悩みごとに今やるべきことや解決につながる行動を一緒に導き出します。
困ったときや行き詰まったときなどにお気軽にご利用ください。
2. ノーコード / ローコードWeb制作 完全マスターコーチング
WebデザイナーとしてWeb制作で副業・起業したい方に向けての個別コーチングです。
ご案内は公式LINEで行なっています。
【公式LINE登録者限定】今なら有料級6大プレゼントを配布中。
- 「案件が獲得できるようになるためのスキルを身につける、超具体的な学習ロードマップ」
- 「6つのサイト制作ツールのメリット・デメリットをわかりやすく比較したスライド」
- 59枚の「Web制作に必須の画像素材サイトの紹介スライド」
- 42枚の「知らないとヤバい！ビジネスマナー35選のスライド」
- 学習に挫折しないための助けになる！「自分振り返りワークシート」
- 無料個別相談
3. ホームページ制作・リニューアル
訴求力が高いホームページを制作し、売上アップや採用効果アップ、ブランド力の向上など事業の活性化に繋げます。
アクセス解析などの数値やデータなどの分析に加え、女性ならではの感性と直感力を活かしたご提案や、女性向けデザインが得意です。
コメント