今回はこのような疑問に答えるべく、Web制作のための環境構築を紹介していきます。
【この記事でわかること】
【この記事の信頼性】
この記事を書いているのは現役のWeb制作者です。
Web業界で長くコーダーとして働いているので、環境構築などの知識もあります。
Web制作のための環境構築【全ステップ】
結論から話すとWeb制作の環境構築は以下の3ステップでOK。
全てやれば開発環境がかなり整います。
・ステップ1：パソコン準備
・ステップ2：VSCodeの導入
・ステップ3：FTPツールの導入
それぞれのステップについて解説していきますね。
ステップ1：パソコン準備
まずはWeb制作を行うためのパソコンを用意しましょう。
スペックが悪いPCは安いですが、作業はしにくい。
結果的に効率も悪くなってしまう。
（3時間で終わる作業が6時間かかったり...）
なので最初からそこそこスペックの良いPCを買っておくといいですよ。
自己投資だと思いましょう。
オススメはMacBookProですね。
スペックは最低でもSSD256GB以上、メモリ8GB以上を選ぶといいです。
インチは13インチで十分かと。
ちなみにMacBookProがWeb制作者にオススメできる理由は次の通り。
・起動が早いのでストレスを感じにくい
・トラックパッドで直感的に操作できる
・長く使用できる
あなたも「え、なにこれ使いやすい！しかも見た目もオシャレでやる気も出る」と感じるはずですよ。
特にあなたがiPhoneを使っている場合はデータ共有とかも楽々できるので、MacBookを選ぶべき。
※補足：M1チップは避けて
補足です。
MacBookには「M1チップ搭載」というモデルがありますが、現状は避けたほうがいいです。
Web制作に必要なライブラリがインストール後に上手く動かなかったりします。
ステップ2：VSCodeの導入
パソコンが用意できたら、次はVSCodeというエディタ（開発ツール）をインストールしましょう。
インストール方法は次の記事にまとめています。
-
HTMLとCSSのエディタ紹介【これさえあればOK】
あなたHTMLとCSSの初心者です。HTMLとCSSのおすすめエディタが知りたいです。 HTMLとCSSを使って何かを作ろうと思ったときに必要なものが「エディタ」です。 この記事ではHTMLと ...
続きを見る
ここではWeb制作にオススメのVSCodeの拡張機能を紹介しておきますね。
Browser Preview
Browser Previewは開発中にWeb上での見た目をチェックできるようになる拡張機能です。
エディタ→ブラウザの移動がなくなるのでスムーズに開発を行うことができます。
Live Sass Compiler
Live Sass CompilerはSassのコンパイル環境を整えてくれます。
「Watch Sass」というボタンを推すだけで自動でコンパイルしてくれます。
かなり楽に開発ができるようになる。
HTML CSS Support
HTML CSS SupportはHTMLやCSSの入力時に補完してくれる拡張機能です。
idやclassの付与が簡単になります。
以上Web制作にオススメのVSCodeの拡張機能でした。
ステップ3：FTPツールの導入
最後のステップがFTPツールの導入です。
FTPツールは、ローカルのファイルをサーバー上にアップロードするためのツールです。
オススメはCyberDuckですね。
なお、インストール方法や使い方は以下の記事が参考になるかと思います。
-
【サイト公開】HTML/CSSファイルをエックスサーバー上にアップロードする方法
あなたローカル環境のWEBサイトを、誰でも閲覧できるようにしたいです。 どうすればいいですか？ 前回はCSSでフッターを整えてローカル環境でWEBサイトを完成させました。 前回の記事：CSSで ...
続きを見る
以上Web制作の環境構築のための3ステップでした。
※朗報：無料学習サイト公開中
これからWeb制作の学習を始めたいあなたに朗報です。
なんと当サイトではHTMLとCSSを0円で学習できるサイトを公開しています。
実際にWeb制作の開発環境を構築しつつ、Webページを作ってみませんか？
-
【完全無料】HTMLとCSSの学習ステップ一覧
てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。 ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...
続きを見る
Web制作の開発環境整えてますか？【整備したほうがいいです】
ここまでWeb制作のための環境構築手順を話してきました。
あなたは既に開発環境を整えることはできていましたでしょうか？
もしできていないなら今すぐ整備したほうがいいです。
そう言い切る理由を話していきますね。
スムーズに開発できる
理由の1つ目が「スムーズに開発できる」ことです。
PCのスペックが優れていたり、エディタからすぐにブラウザで確認できるようになると開発効率は上がります。
スムーズに作業できるので、クライアントにも早く納品しやすくなります。
（あなたの評価も上がる）
特にVSCodeにはあなたが想像している以上に便利な拡張機能があります。
「あーこの作業効率化できないかな」と思ったら、まずはVSCodeの拡張機能を探してみることを心がけるといいです。
人的なミスが減る
2つ目が「人的なミスが減る」ことです。
開発環境が整っていないと、人的なミスが発生することも多い。
あなたは次のようなミスをしたことはないですかね？
・間違ってファイルを消してしまった
・コードに間違いがあったのに気づけなかった
・コードの見た目がグチャグチャになってしまった（空白や改行がバラバラ）
開発環境が整えば、このようなミスもなくなりやすくなりますよ。
ストレスが減る
最後3つ目は「ストレスが減る」ことです。
スムーズに開発できたり、ミスが少なくなるとストレスも減る。
結果的にモチベーションも上がります。
仕事も頑張ることができる。
このことって結構大事じゃないですかね？
「楽しみながら作業する」ためにも、あなたには快適な開発環境を手に入れていただきたいです。
以上Web制作の開発環境を整えるべき理由でした。
ちなみに【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】では、開発環境の構築からプロに教えてもらえるスクールを紹介しています。
-
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】
あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの？ スクール選びで失敗はしたくないです。 ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...
続きを見る
Web制作を1から学習できますし、受講後は案件サポートなどもあります。
確実に稼げるようになりたい方は受講する価値がありますのでよかったらどうぞ。
今までの2分の1の作業時間で生産できる→収入も増える
ということで今回は「Web制作のための環境構築の全ステップ」「開発環境を整えるメリット」について話しました。
今回の記事を参考に開発環境を整えると、今までの2分の1くらいの時間で生産できるようになります。
（もしもあなたの開発環境が整っていなかった場合）
そうなると、同じ時間で今までの収益を生み出すことができる。
収入も増えますよ。
まだ月10万円？20万円は稼げますよ
今のあなたのWeb制作の収入はいくらでしょうか？
もし10万円なら少し少ないですね。
ぶっちゃけ、Web制作なら月に20万円は副業でも稼ぐことができます。
以下の記事で詳しくその事実について解説していますので参考にどうぞ。
自由度が増す＆充実度も増す
ちなみにWeb制作で稼げるようになると次のような生活を手に入れることが可能。
✔ 貯金がしっかりできる
✔ 好きな場所で好きな時間に稼ぐこともできる
✔ 副業でも高収入をゲットできる
✔ 家族サービスもできる
✔ 子供に我慢もさせなくて済む
✔ フリーランスとしての独立やWeb制作会社への就職も可能になる
自由度も増しますし、充実度も増しますよ。
手段はある【チャンスを活かしてみませんか？】
「Web制作を始めたいけど何から始めたらいいかわからない...」いうあなたのために、当サイトでは学習ロードマップも公開しています。
つまり手段はある。
-
Web制作の副業を成功させるための独学ロードマップ【現役エンジニアが監修】
あなたWeb制作の副業で稼ぎたいです。 稼げるようになるスキルをつけるための独学ロードマップを教えて下さい。 今回はこのような要望に答えるべく「Web制作の副業を成功させるための独学ロードマッ ...
続きを見る
この目の前にあるチャンスをぜひいかしてみませんか？
Web制作で稼ぐために必要なのは「学習」だけ。
やったもの勝ちの世界なので、とりあえず「行動」を大事にしてみるといいです。
応援しています。今回は以上です。
-
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】
あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの？ スクール選びで失敗はしたくないです。 ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...
続きを見る
※10万円以下で学習できて、受講後に案件紹介もしてもらえるスクールもあり
