Web制作の副業・フリーランスに必要なもの・準備一覧

といった疑問を解決できる記事になっています。

Web制作の副業・フリーランスとして仕事を始めたい方や、学習が終わったばかりの方は、一度立ち止まってこの記事を読んでみてください。

Web制作では、仕事をする上で絶対に欠かせないものがいくつかありますので、準備が不十分なまま実案件に取り組んでしまうと、トラブルになったり炎上してしまうリスクが高いです。

この記事では現役Web制作フリーランスの私が、Web制作の副業やフリーランスとして働く上で必要なものを、以下３つのカテゴリーに分けて解説します。

後で慌てることがないよう、実案件の前に必要な準備は済ませてしまいましょう。

この記事は既にWeb制作の学習を終えている方向けの内容になっています。
現在学習中の方は「Web制作の副業で月20万稼ぐまでの独学ロードマップ」の記事を先にご覧ください。

実案件の前に準備するべきもの【有料編】

Adobe CC コンプリートプラン

まず、欠かせないのがデザインソフトを揃えることです。
現在Web制作で主要に使われているデザインソフトは以下の４つ。

この中でFigmaだけは無料で使うことができますが、
Photoshop、Illustrator、XDの３つは、Adobe CCの有料ソフトです。

Adobe CCの有料ソフトを３つ以上購入する場合、コンプリートプランに入ることで料金がお得になります。
とはいえ、このコンプリートプランは通常価格で年間86,880円（税込）かかるため、仕事を始めたての方には中々手を出し辛いでしょう。

しかし、Web制作を仕事にする上で絶対に避けては通れない出費（通称”Adobe税”）なので、第一優先で準備する必要があります。

そんなAdobe CCコンプリートプランですが、実は通常価格より格安で手にいれる方法が存在します。

以下の記事で解説しているやり方で、年間39,980円（税込）で購入することが可能です。
年間で4万円以上もお得になる制度なので、今すぐチェックしてみてください！

Windows環境

Web制作者はMacを使用しているユーザーが多いと思います。
しかし、一般的にはMacユーザーは少数派で、圧倒的大多数の方はWindowsパソコンを使用しています。

Macでコーディングをして表示確認を完璧に行ったとしても、そのまま納品するのは大変危険です。
OSが違えば、思わぬ箇所で表示崩れが発生しているケースが十分あり得るので、使用ユーザーの多いWindowsこそ重点的にチェックする必要があると言っても過言ではありません。（もちろん、全OSで重点的にチェックすべきですが）

納品したサイトに確認不足による表示崩れが見つかると、Web制作者としての信頼を一気に失うことになります。
制作会社から仕事を受注する際は、Windowsでの表示確認を行なっているか聞かれるケースも少なくありません。

必ずWindowsで表示確認できる環境は用意するようにしましょう。

Windowsパソコンを買わなくとも、ご自身のMac上でWindowsが使えるサービスもあります。
以下の記事で詳しく解説しているので、ご自身に合った方法でWindows環境の用意を済ませましょう。

iPhone・Android端末

Web制作にレスポンシブ対応は付き物です。
コーディング作業中は、ブラウザの検証ツールなどでスマホ画面サイズにして確認している方も多いと思います。

ただ、これもWindowsの場合と同様、OSによってWeb表示の仕様は異なるため、実機で確認しないと、特定のOSでのみ表示が崩れていることを見落としてしまう恐れがあります。

最終的な確認は必ずスマホ実機で行うべきです。
最低限、iPhoneとAndroidの２つは手元に揃えておきましょう。

自分が持っていない方のスマホは表示確認さえできれば良いので、端末を中古で購入しても問題ありません。
中古であれば大体5,000〜10,000円程度出せば購入できます。

[安心・高品質・即納] 中古スマホ販売サイト にこスマ

テスト環境用レンタルサーバー

受注した案件のコーディングが完了した時、多くの場合、まずテストサーバーにてクライアントに表示確認をしてもらい、OKが出たら本番用サーバーにアップする手順を踏みます。

クライアントによってはテスト用サーバーを用意してくれる場合がありますが、もちろん全てがそういったケースではありません。

自分でもテスト用のレンタルサーバーを１つ契約しておくと安心です。

テスト用サーバーには必ずBasic認証をかけ、ユーザー名とパスワードを知らない人がアクセスできないようにします。（レンタルサーバーには大抵、管理画面上から簡単にBasic認証をかける機能が備わっています）

また、FTPソフトでサーバーにファイルをアップする作業は、Web制作をしていく中で頻繁に発生します。
初心者の方には慣れない操作になるかと思いますので、予め自分のサーバーで練習しておくことを強く推奨します。

せっかくレンタルサーバーを契約するのであれば、WordPressが使えるサーバーを選びましょう。
WordPress案件では、クライアント側のレンタルサーバーにログインしてWordPressの設定などを行う可能性もあるので、WordPressのインストールや設定なども一度自分で経験してみることをおすすめします。

レンタルサーバー選びは、国内シェアNo.1の「エックスサーバー」、もしくは国内最速の「ConoHa WING」のどちらかを選べばまず間違いありません。

デュアルディスプレイ用モニター

ノートパソコン１台のみで作業をしていないでしょうか？

まだ学習中の段階であればそれでも問題ないですが、本格的に仕事をしていくのであれば必ずモニターは購入するべきです。

Web制作の仕事では、最低でもデザインデータ、コードエディタ、Webブラウザを画面上に出して作業することになりますが、それを１画面で行うのはあまりにも効率が悪すぎます。

ディスプレイが２つあれば、Macのトラックパッドでシャッシャッと画面を何度も切り替える必要はありません。
作業効率が格段に上がり、より短時間で仕事を終わらせることが出来るようになります。

また、Webサイトを閲覧するユーザーの中にはデスクトップPCの大画面でサイトを見る方もいるので、あなたが作ったサイトも1920pxや2560pxくらいの大画面幅での表示を確認する必要があります。
これも、大きなモニターが１つあれば簡単に確認が可能です。

１点注意点を挙げるなら、画質は必ず4K以上のモニターを選ぶようにしましょう。
Webサイトの画像などが高解像度ディスプレイでもちゃんと綺麗に表示されるかどうかは、高解像度ディスプレイでないと確認できないからです。
モニターはずっと使い続けるものなので、最初から良いものを買ってしまうことをオススメします。

確定申告用の会計ソフト

個人として仕事をしてお金を稼いだ場合、以下の条件に当てはまる方は確定申告が必要になります。

実際には上記以外にも確定申告が必要になるケースがあるので、詳細はご自身で確認しておいた方が良いでしょう。

確定申告というと、「会計や簿記の知識が必要そうで自分に出来るかな…」と不安に感じる方も少なくないと思いますが、今の時代、面倒な事務作業は全てソフトが行ってくれるので心配ありません。

実際私も会計に関しては全くの素人で、Web制作を始めて１年目の時は不安でいっぱいでした。
しかし、クラウド会計ソフトのfreeeを使うことで驚くほど簡単に確定申告できて、「なんだこんなものか」と拍子抜けしたのを覚えています。

こういった会計作業は、後になればなるほど面倒なことになるので、早めの内から導入しておくことを推奨します。

\ 以下のリンクから登録することで利用料が2,000円分安くなります！ /

全自動のクラウド会計ソフト「ｆｒｅｅｅ（フリー）」の登録はこちら

開業届（+青色申告承認申請書）も忘れずに

また、個人で仕事をしていくなら開業届の提出も必要です。
同じfreeeが提供している「開業freee」というサービスを使うのがとてもおすすめです。

開業freeeは全て無料で利用可能で、開業届および青色申告に必要な青色申告承認申請書を、Web上で項目を埋めていくだけで最短5分で書類作成可能！作った書類はスマホからオンラインで提出できます。

無料で使える開業書類作成サービス「開業freee」

実案件の前に準備するべきもの【無料編】

個人事業主向け無料保険

個人で仕事をする場合、会社員と違って全ては自己責任になるので、いざという時にあなたを守ってくれる存在がありません。そのため、万が一のトラブルに備えてフリーランス・個人事業主向けの保険に加入しておきましょう。

保険というとお金がかかるイメージですが、以下で紹介している「FREENANCE（フリーナンス）」は、会員費無料で登録することが出来ておすすめです。（1,000円お得になる招待コードを後半に載せています）

特にWeb制作の仕事では、制作会社など様々なクライアントと関わる機会があるので、不慮の事故で機密情報を漏洩してしまったり、先方のシステムを停止させてしまうなどで、損害賠償が発生するかもしれません。
フリーナンスの最大5,000万円の損害賠償補償は、そんな万が一の事故の際にあなたを守ってくれます。

また、個人で仕事をする際に悩みがちなのが、クライアントによって報酬の支払いサイクルがばらばらな点。
成果物を納品しても報酬の支払いは翌月末・翌々月末になるケースもあるので、急に大きなお金が必要になった際に請求書の即日現金化ができれば安心です。

フリーナンスに登録すると、同時に専用の銀行口座が無料で開設されるので、請求書の振込先（報酬の受け取り先）をフリーナンス口座に変更しましょう。入金がある度にスコアが貯まっていき、即日現金化の手数料が安くなっていきます。

個人事業主として仕事をするなら、事業用の銀行口座があると圧倒的に会計が楽になるので、まだ事業用口座を持っていない方は、この機会にフリーナンスで口座開設してしまうと良いでしょう。

フリーナンス口座で受け取った報酬は、週に一回ご自身が設定したメインバンクに自動で振り込まれます。
（※振込手数料は無料！）

\ 登録時に以下の招待コードを入力いただくことで、1,000円のお礼が貰えます！^※ /
YFffh8

FREENANCE（フリーナンス）の無料口座開設はこちら

※ 招待コードのお礼は、開設したフリーナンス口座へ法人からの報酬振込があった時点で発生します

Googleアカウント

改めて言うほどのことではないかもしれませんが、以下のサービスを全て無料で使用可能です。

上記のようなツールは他でも代用できるものはありますが、クライアントとGoogleドライブでファイルの共有をすることもあるので、アカウント自体は持っておいた方がいいです。

もしプライベート用のアカウントしか持っていない場合は、仕事用の新規アカウントを必ず作成しましょう。
クライアントとやり取りすることになるので、アカウント名は本名に設定し、２段階認証などセキュリティ対策は万全に。

Zoom

Zoomは言わずと知れたオンライン会議アプリです。
制作会社やクライアントとの面談などに使用することになります。

無料で使用することができますが、もし使ったことがない方は一度インストールして使い方に慣れておくと良いです。

特にMacを使用している方は、あらかじめ設定をしておかないと画面共有機能が使えない場合があります。
【Mac】Zoomで画面共有ができない！初期設定の変更方法（外部サイト）

また、会議中の背景が生活感丸出しだと良い印象にはならないので、こちらも事前に設定で、背景を清潔感のある画像に変えておきましょう。

会議のある当日は、事前にカメラやマイク、画面共有機能などが正常に動作するかチェックを忘れずに。

Chatwork、Slack

ChatworkもSlackも、企業や組織で多く利用されているチャットツールです。
チャットでのやり取りはもちろん、ファイルの送受信や音声・ビデオ通話などの機能も備えています。

制作会社と面談をし、お仕事をもらうことになった際は、大体の場合ChatworkかSlackでメッセージのやり取りをしていくことになると思いますので、２つとも準備をしておきましょう。（体感的にWeb制作会社はChatworkを、エンジニアの多いIT企業はSlackを多く使用している印象があります。）

こうしたチャットツールのプロフィールアイコンは、顔写真に設定すると安心感・信頼感がUPします！

FTPソフト

FTPはFile Transfer Protocolの略。
サーバーにファイルをアップロードしたり、サーバーにあるファイルをダウンロードするために使用します。

FTPソフトの操作はとても簡単で、MacのFinderのように、ドラッグ&ドロップで簡単にファイルの送受信が可能です。

制作会社とお仕事をする際は、サーバーにファイルをアップすることで納品となるケースや、テストサーバーにファイルをアップして表示を確認してもらうケースが多く発生するので、FTPソフトは必須です。

無料で使えるおすすめのFTPソフトは以下の２つ。どちらもMacとWindowsに対応しています。

• Cyberduck
• FileZilla

テスト環境用レンタルサーバーの章でも解説しましたが、自分でサーバーを契約して、FTPソフトでファイルアップロードする操作は、必ず１回は経験しておくことを推奨します。

圧縮ソフトKeka（Macユーザー）

Web制作の仕事をしていると、ファイルを圧縮してクライアントに共有する機会が数多くあります。
この時、Macの標準ソフトでファイルなどを圧縮した場合、それをWindowsで解凍して確認をすると、テキストが文字化けしてしまう可能性があります。

また、同じくMacの標準ソフトで圧縮したフォルダをWindows側で解凍すると、「.DS_Store」などの不要なファイルが含まれているケースがあります。

以上の点から、クライアントに共有するファイルをMacの標準ソフトで圧縮するのはやめましょう。

では、何を使って圧縮すれば良いのかというと、私は「Keka」というソフトをおすすめしています。
Kekaで圧縮したファイルはWindowsで解凍しても文字化けは一切なく、「.DS_Store」などの不要なファイルも含まれません。

KekaはMac App Storeで¥700で購入できる有料アプリですが、開発元のサイトから無料でダウンロードすることもできます。まずは無料版で使用してみて、気に入ればApp Storeで購入して開発者をサポートしましょう。

Keka公式サイトはこちら

各種ブラウザ

最も有名で使用率が高いブラウザはGoogle Chromeだと思いますが、もちろんそれ以外のブラウザを使用しているユーザーも多数います。

そのため、完成したWebサイトを納品する前に、複数のブラウザで表示崩れが起きていないか確認が必要です。
以下の４種類は最低限確認の必要がありますので、インストールしておきましょう。

Microsoft Office

クライアントとやり取りをする中で、Microsoft Officeで作成された文章などを受け取る場合があります。（Word、Excel、PowerPointなど）

これらのファイルはMacに標準インストールされているアプリで開くこともできますが、レイアウトが崩れたりして正確な情報が読み取れない場合があるので、Microsoft Officeを使用できる環境があった方がいいです。

Mac向けの有料版ソフトも販売されていますが、Web版のMicrosoft Officeであれば、オフラインでの編集ができない代わりに無料で使用することが可能です。

Web版であればソフトのインストールも不要で、アカウント作成だけですぐに使えるようになります。

無料のOffice (Microsoft 365) オンラインはこちら

あれば安心・便利なもの

GitHubアカウント

Web制作会社によってはGitでソースコードの管理をしているところも少なくありません。

GitHubは主にチーム制作で使用されることが多いですが、個人のみで使用する場合であっても以下のようなメリットがあります。

初心者の方は慣れるまで少し時間がかかりますが、余力が出てきた際は積極的に学んでみることをおすすめします。

固定IPサービス

※ こちらは必要になった場合にだけ準備すればOKです。

セキュリティに対して厳しい会社と取引する場合、「固定IPは使用していますか？」と質問されることがあるかもしれません。

固定IPとは、インターネット接続時に常に同じ番号に接続するIPアドレスのことです。会社によっては、社内システムにアクセス可能なIPアドレスを制限することで、外部からの不正なアクセスを防いでいます。

そのような会社と取引し、社内システムにアクセスさせてもらう必要がある場合、自分のIPアドレスの番号を許可してもらう必要があります。しかし、一般家庭用に提供されているのは、インターネット接続するたびに番号が変わる動的IPアドレスの場合がほとんどなので、その場合はIPアドレスを固定化しなければいけません。

インターリンクの「マイIP」というサービスを使うことで、簡単に固定IPでの接続が可能になります。
現在ご利用中のプロパイダ側で特に契約などを変更する必要もありません。

最大２ヶ月無料体験できる！【マイIP/マイIP ソフトイーサ版】

もし必要に迫られた際には、こういったサービスのご利用を検討してみてください。

PC周辺グッズ

ノートPCスタンド

Web制作の仕事は長時間座っての作業を強いられますので、ずっと目線が下のままだと姿勢が悪くなり、肩こり・腰痛を招きます。目線を上げて作業しましょう。

こういったスタンドを使うことで目線が上がる他、パソコンの下に空間ができるので熱がこもりにくくなるメリットもあります。

スタンドを使うとMac本体のキーボードやパッドを操作することが難しくなるので、合わせてワイヤレスのキーボード、マウスを購入すると良いでしょう。

卓上ライト

Zoomで面談などをする際に、顔に光が当たっていないと、暗くてどことなく怖い印象になってしまいます。
卓上ライトを使用して顔色を明るくすることで、第一印象がもっと良くなります。

営業マンが第一印象に人一倍気を使うように、こうした印象UPの気配りの積み重ねが、クライアントからの安心感・信頼感UPにつながります。

ケーブル収納

電子機器の配線、ぐちゃぐちゃになっていませんか？

部屋の乱れは心の乱れです。
ケーブル収納スリーブを使用して配線をまとめ、スッキリした気持ちで仕事に臨みましょう。

電源タップなどの収納にはこちら。
見た目がスッキリするだけでなく、ホコリがたまりにくくなって電源火災の予防にもなります。

お掃除グッズ

・エアダスター

キーボードのボタン周りには隙間が空いているので、知らず知らずのうちにホコリが侵入しています。
定期的にエアダスターでお手入れしましょう。

・クリーニングクロス

パソコンやモニターの汚れを拭き取る際は専用のクロスを使うことで、画面を傷つけずにお掃除できます。

まとめ：準備を徹底し、信頼されるWeb制作者になろう

Web制作の副業やフリーランスとして仕事をするために必要な準備について解説しました。

有料編で解説したものを全て揃えるのは中々の出費になるかと思いますが、必ず必要になるものなので、本格的に仕事を開始する前に準備しておきましょう。
Web制作は報酬単価が高いので、初期費用の分はすぐに取り返して大きく稼いでいけるようになっていきます。

このブログでは、そんな駆け出しWeb制作者の方のお役に立てるような情報を、これからも発信して行きたいと思っていますので、今後も見ていただけると嬉しいです！