学習を始める前に環境を整えよう
学習を始める前にまずは環境を整える必要があります。
- Windows or Mac のパソコン
- ネット回線
- アプリケーション
- VisualStudioCode
- Adobe Illustrator
- Adobe Photoshop
- Figma
- Chrome
- Filezilla
上記のようなものが必要となります。
場合によってはレンタルサーバーがあった方が良い場合があります。
その場合は以下の記事を参考にしてください。
Windows or Mac のパソコン
Windowsを使うべきか、Macを使うべきかは色々な視点から語ることができると思います。
このサイトの判断としては「どちらでも良い」というところとなります。
好きな方を使ってください。
管理人のおすすめはMacです。
Macは製品の金額が高いように感じるかも知れませんが、総合的に考えるとそこまで高くありません。例えばMacのノートPCが搭載しているディスプレイと同等なものをWindowsのノートPCに求めると20万円以上することも少なくないでしょう。
また、軽さの点で比べるWindowsの低価格なノートPCの重量に驚くことと思います。
Windowsの安いPCは底なしです。安すぎるものを買うと後悔します。
快適に使えるかどうか、長く使えるか、の視点を入れると15万円以上のものが妥当であるという判断に落ち着くはずです。
Windowsで選ぶ場合は次のようなものをお勧めします。
ノートPC
Web制作の仕事の大きなメリットとしてどこでも働けることというのがあります。
デスクトップpcの方が安いですが、持ち運べない/出先で作業できないのは大きなデメリットです。
ノートPCにしておきましょう
重要 : 日本語キーボードにすること！
Macだと見た目のかっこよさから英字キーボードを選んでしまうことがあります。
しかし、単純に使いにくいです。
ノートPCの場合は後から変えられる部分ではないため、後悔するケースが多くあります。
絶対に日本語キーボードにすること！
しっかり押さえておきましょう。
メモリ16GB以上
メモリというのは作業領域のことであり、机の広さに例えられます。
PhotoshopやIllustratorなどの複数のソフトを同時起動することもありますので、メモリは大いに越したことはありません。
最近は動画を作成する仕事もありますので、そのような仕事をすることを視野に入れている場合はメモリ16GB以上にしましょう。(2024年10月時点)
Adobeソフトウェアの推奨条件でもあります。
HDD SSD 256GB以上 (512GB以上あるともっとよい)
こちらはファイルをどれだけ保存できるか？という話です。
動画や画像などの素材ファイルを管理することもありますので、極力多いものにしておいた方がいいでしょう。
Adobeのツールはそれぞれが1GB以上あるなどアプリケーションも容量を食うものが多いです。
自分はMacで容量256GBのPCを利用していますが、全然容量がたりません。
（ただ、予算に限りがある場合コスト削減で最も下げてしまうのがこの部分。運用で一応カバーができるんですよ）
グラフィックチップが搭載されている（Windowsの場合）
Web制作においてはあまり必要のないスペックだとは思うのですが、現在生成AIツールなどが多く出てきているところです。
そんな時に重要視されるのがグラフィックボードです。
今後AI関連の使いたいソフトにグラフィックボードの要件が追加されないとは限りません。
その時のために、できるだけスペックの高いものを選んでおくべきです。
（グラフィックチップがしっかり搭載されているものは、CPUのスペックも問題ないことが多いというのも理由だったりします。）
NVIDIAのシールが貼ってあるものを選びましょう。
ある程度ゲームもできたりしますが、あくまで仕事用PCであることをお忘れなく！
重量が軽い
持ち運びを考えると、軽いものがいいですね。
性能が高いながらも軽いものは高いです。
できれば1.5kg以下になると良いと思います。
この条件を満たし、きちんとスペックが高いものを選ぶとWindowsでは非常に金額が高いはずです。
そうなると結局Macが安いためおすすめなんですよね。
ディスプレイは13インチ以上
13インチぐらいのサイズはあった方が作業がしやすいです。
作ったサイトがどのように動くか確認する面でも小さすぎる画面は避けましょう。
高解像度ディスプレイにしておかないと、高解像度の場合の動作確認ができないのでそのような画面を選んでおくと良いでしょう。
好みで15インチにするとよいです。
ただし、持ち運びする場合は重さも重要です。
サイズと重さのバランスを見て選んでください。
Microsoft Officeはなくてもいい
あった方がいいですが、Google のツール群でも同じようなことができますのでなくてもなんとかなります。
必要になったら買うぐらいの心構えで良いです。
最初からオフィスが入っているパソコンは割高になると考えて良いと思います。
ネット回線
インターネットに繋がないと仕事にならないですね。
Figmaなどはネット回線があることが前提だったと思いますのでこちらは必須となります。
早ければ早いほどいいです。
オンライン会議などの機会もあると思いますので、モバイル回線のみはつらいかも知れません。
アプリケーション
- VisualStudioCode
- Adobe Illustrator
- Adobe Photoshop
- Figma
- Chrome
- Filezilla
Adobeのツールはデザイナーでなければ使わないこともあります。
Figma/Adobeツールは有料ですので契約が必要となります。
VisualStudioCode
Webサイトはメモ帳、テキストエディタで作ります。
メモ帳でもサイト制作は可能なのですが、専用エディタを使うと作業効率が高まります。
便利な点はさまざまあるのですが、例えば少し文字を打ち込んだら入力できる候補が表示されたりします。
Adobe Illustrator
Adobe Illustratorは印刷物用のツールです。
印刷物をデザインしたり、基本的なデザインについて学習するのにも役立ちます。
Webサイト制作においては主にロゴやアイコンの素材、イラストを作成します。
Adobeツールの使い方の基本はこのソフトから覚えるのがおすすめです。
Adobe Photoshop
Adobe Photoshopは写真編集用のツールです。
少し前まではこのツールでサイトのデザイン作成を行なっていました。
現在は写真素材作成、加工、合成などに活用します。
バナーデザインなどにはまだまだ現役で利用されていると思います。
FigmaなどのWebサイト作成の専用ツールの登場であまり使われなくなりました。
豪華なサイトをデザインするなど、まだまだ出番はあります。
Figma
Webサイトやアプリを作成するための専門ツールです。
photoshopより優れている点がいくつもあり、広く使われ出しました。
Chrome
サイトを見るためのブラウザです。
ただ見るためのものではなく、デベロッパーツールという開発用の機能が非常に役立ちますので活用していきましょう。
FileZilla
サーバーと自分のパソコンを接続しファイルをアップロードするためのソフトです。
