Web制作の学習で買ってよかったもの・ツールまとめ【フリーランスコーダーの体験談】

「もっと効率よく作業したいな」

「Web制作で他の人がどんなガジェット使ってるのか知りたい」

Web制作の学習を始めた頃、僕も「とりあえず手を動かせばいい」と思っていました。

でも正直、作業環境が整っていないまま勉強を続けるのって、想像以上に効率が悪かったんですよね。

姿勢がつらくて集中できない、画面が狭くてコードとデザインを見比べられない、パスワード管理がぐちゃぐちゃ——小さなストレスが積み重なって、学習のモチベーションまで削られていました。

この記事では、工場勤務17年からWeb制作フリーランスになった僕が、学習期間から独立後の実務まで使い続けているアイテムやツールをジャンルごとに紹介します。

予算が限られている方向けのアドバイスも最後にまとめているので、ぜひ参考にしてみてください。

PC・モニター・周辺機器

Web制作をやるうえで、PCまわりの環境は作業効率にダイレクトに影響します。

僕自身、最初はWindowsのゲーミングPCで学習を始めたので「高いものを最初から揃えないとダメ」とは思っていません。

ただ、実務に入ってからはMacBookとモニター複数枚の組み合わせがめちゃくちゃ快適で、もっと早く揃えればよかったと感じています。

ここでは、僕が実際に使っているPC周辺機器を紹介しますね。

MacBook — 持ち運べて、人にも見せられる

もし「1つだけ選ぶなら何？」と聞かれたら、僕は迷わずMacBookと答えます。

操作性やサポートの良さはもちろんですが、周りのWeb制作者もMacを使っている人が多いので、困った時にすぐ聞けるんですよね。

あと正直、見た目の良さって学習の継続性にもつながると思っていて。

カフェや打ち合わせで開いた時に、自然と「かっこいいな、頑張ろう」という気持ちになれたのは地味に大きかったです。

ネットでの活動をメインで行っていますが、リアルで打ち合わせする際にパソコン画面を開いて説明できるのは非常に良かったです。

MacBookでしたら高品質なマウス、キーボード、液晶がついてきてお得です。

今でしたらMacBookNeoがおすすめです。

モニター4枚運用 — 画面が狭いストレスから解放

僕は現在、モニターを4枚使って作業しています。

「そんなにいる？」と思うかもしれませんが、Web制作では同時に見たいものが多いんですよね。

最初は2枚でしたが、デザインカンプとコードとプレビューを行き来するたびにウィンドウを切り替えるのがストレスで、少しずつ増やしていきました。

ドッキングステーション — ケーブル地獄を解消

モニターを複数使うなら、ドッキングステーションは正直あったほうがいいです。

電源・ディスプレイ・USBをすべて一元化できるので、デスク周りのケーブルがすっきりします。

値段はそこそこしますが、毎日使うものなので投資する価値はあると感じました。

Apple純正キーボード＆マウス — 指紋認証が想像以上に便利

キーボードとマウスは、Apple純正を使っています。

特にキーボードの指紋認証ボタン（Touch ID）が本当に便利で、1Passwordとの相性が抜群なんですよね。

Web制作ではログインが必要なサービスがたくさんあるので、指紋一つでパスワードを呼び出せるのはかなりの時短になっています。

デスク・椅子（Cofo推し）

長時間座りっぱなしのWeb制作において、デスクと椅子の環境は想像以上に体に影響します。

僕は最初、安い事務用の椅子と普通のデスクで作業していましたが、腰が痛くなって集中力が続かなくなりました。

結局、Cofoの椅子とデスクに買い替えてから、体の負担がかなり減ったと感じています。

ちなみにCofoは、高級オフィスチェアと比べるとかなりリーズナブルなのにしっかりした品質なので、コスパを重視する人にはおすすめです。

Cofoの椅子 — 多動の僕でもストレスなし

Cofoの椅子は、背もたれ・フットレストがしっかりしていて、姿勢を細かく変えられるのが気に入っています。

フットレストを伸ばして胡座をかくこともできるんですよね。

正直、僕はADHDで多動の気があるので、じっと同じ姿勢で座っていられないタイプです。

でもCofoの椅子は細かく姿勢を変えても対応してくれるので、長時間の作業でもストレスを感じにくいと思っています。

Cofoの電動昇降デスク — 天板がリストレスト代わり

Cofoの電動昇降デスクは、ボタンひとつで高さを変えられます。

疲れた時や集中したい時、腰が痛い時にサッと立ち作業に切り替えられるのが便利で、動作も静かで滑らかです。

あと意外に良かったのが、天板の手前が丸くなっていること。

手首を乗せた時にちょうど良い丸みで、机自体がリストレストの役割を果たしてくれるんですよね。

ヘッドホン（Shokz骨伝導イヤホン）

作業中にYouTubeや音楽を流す人は多いと思いますが、普通のイヤホンやヘッドホンを長時間つけていると、耳が痛くなったり蒸れたりしませんか。

僕もずっとそれが悩みで、色々試した結果たどり着いたのがShokzの骨伝導イヤホンでした。

骨伝導なので耳をふさがず、熱もこもらないのが本当に快適です。

正直、使っているのを忘れるくらいの装着感で、ストレスフリーで作業に集中できています。

耳をふさがない＝長時間でもストレスなし

骨伝導イヤホンの一番の良さは、耳をふさがないことです。

カナル型のイヤホンを長時間つけていると、耳の中が蒸れたり圧迫感が出てきたりしますよね。

Shokzはこめかみ付近に当てるだけなので、何時間つけていても耳への負担がほとんどありません。

使っているのを忘れるくらいの装着感

「つけている感覚がない」というのは大げさに聞こえるかもしれませんが、本当にそうなんです。

軽くて、締め付けも少なくて、気づいたらつけたまま家の中を歩き回っていることもあります。

使ってよかったツール・サービス

ハードウェアだけでなく、ソフトウェアやWebサービスも作業効率に大きく関わってきます。

僕がWeb制作の学習期間から実務まで、ずっと使い続けているものをピックアップしました。

どれも「もっと早く使っておけばよかった」と思ったものばかりです。

特に1Passwordは、Web制作をやるなら早めに導入しておくことをおすすめしたいですね。

1Password — パスワード管理のストレスが一気に消えた

Web制作をしていると、WordPress管理画面、サーバーパネル、FTP、GitHub、クラウドソーシング……と、ログインが必要なサービスが大量にあるんですよね。

1Passwordを導入してからは、マスターパスワード1つで様々なパスワードを呼び出せるようになりました。

Macの指紋認証と連動するので、指を当てるだけでログインできるのも快適です。

強固なパスワードを自動生成して、そのまま登録できるので「パスワード忘れた」がなくなったのも助かっています。

Figma有料プラン — コーダーでもデザインデータを扱う機会は多い

「コーダーなのにFigma？」と思うかもしれませんが、正直コーダーこそFigmaを使えたほうがいいと感じています。

実務では、クライアントやデザイナーからFigmaでデザインデータをいただく機会がかなり増えました。

有料プランだとプロジェクトの管理やファイル数の制限がなくなるので、案件が増えてきたタイミングで切り替えるのがおすすめです。

エックスサーバー — 複数試して一番使いやすかった

レンタルサーバーは、ConoHa、ロリポップ、お名前ドットコム、さくらのインターネットなど色々使ってきました。

その中で一番使いやすかったのがエックスサーバーだったんですよね。

管理画面がわかりやすくて、WordPressのインストールも簡単、サポート対応も丁寧だと感じました。

マネーフォワード — 家計簿から確定申告まで一気通貫

フリーランスになると避けて通れないのがお金の管理です。

僕はもともとマネーフォワードを家計簿として使っていたので、そのままフリーランスの経理にも使い始めました。

マネーフォワード請求書と連携すれば自動仕訳・入金管理ができて、マネーフォワード確定申告で一気通貫で処理できます。

ちなみに、工場勤務からフリーランスになるまでの全記録でも、開業後のお金まわりの話を書いているので参考にしてみてください。

買ってよかった書籍

Web制作の学習では、オンラインの教材やスクールも良いですが、手元に置ける書籍の安心感は別格です。

僕はデイトラで学習しながら、並行して書籍も何冊か読んでいました。

わからない時にパッと開ける辞書のような存在として、今も手元に置いている本を紹介しますね。

正直、ネットで調べて上位に来ているような定番書籍は、大体ハズレがないと感じています。

manaさん『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』

Web制作の学習書籍で迷ったら、まずこの1冊を手に取ってほしいです。

HTML・CSS・Webデザインの基礎が1冊でまるごと学べる構成になっていて、初学者でも無理なく読み進められました。

説明がとても丁寧で、「なぜそうするのか」まで書いてくれているのがありがたかったですね。

その他おすすめのHTML/CSS書籍

どれも定番ですが、それぞれ切り口が違うので、2〜3冊読むと理解が立体的になりました。

WordPress関連『HTMLサイトをWordPressにする本』— 逆索引が神

WordPress関連の書籍では、『HTMLサイトをWordPressにする本』がかなりおすすめです。

この本の最大の特徴は、逆索引（逆引きインデックス）があること。

「この関数は何をするんだっけ？」という時に、WordPress関数からすぐ該当ページを探せるんですよね。

初学者にもわかりやすく、ある程度慣れた人にもリファレンスとして使える一冊だと思います。

予算が限られている人へ（まず1000〜2000円から）

ここまで色々紹介してきましたが、「全部揃えるのはさすがに……」と感じた方もいると思います。

安心してください。

僕も最初から全部揃えたわけではないですし、いきなりお金をかけすぎるのはむしろおすすめしません。

「やっぱり自分には合わなかった」となった時に引きずってしまうからです。

まずは軽い気持ちで始めて、楽しいと感じたら少しずつ投資していくのがいいと思っています。

書籍1冊から始めるのがおすすめ

最初の一歩としては、書籍1冊（2000円くらい）から始めるのがおすすめです。

メルカリなら1000円以下で手に入ることもありますし、リスクはほとんどありません。

先ほど紹介したmanaさんの本あたりから読んでみて、「面白い」「もっとやりたい」と思えたら次のステップに進めばいいと思います。

僕も最初はWindowsのゲーミングPCだった

振り返ってみると、僕がWeb制作の学習を始めた頃はWindowsのゲーミングPCを使っていました。

途中でMacに乗り換えましたが、学習初期はWindowsでも全く問題なかったです。

大事なのはPC選びに悩んで手が止まることではなく、まず手を動かし始めることだと感じています。

いきなりお金をかけすぎない。軽い気持ちでスタート

繰り返しになりますが、いきなり高額な投資をするのはリスクが高いです。

1000〜2000円の書籍からスタートして、楽しいと思えたら少しずつ環境を整えていく。

僕の場合はそのステップでやってきて、今の環境にたどり着きました。

まとめ

最後に、この記事で紹介したものを振り返っておきます。

作業環境は一度整えると毎日の積み重ねで効いてくるので、少しずつでも自分に合ったものを見つけていくのがおすすめです。

僕自身、工場勤務時代から少しずつ揃えてきて、今の環境にたどり着きました。

この記事が、これからWeb制作を始める方の参考になれば嬉しいです。

Web制作の学習ステップ全体を知りたい方は、工場勤務→Web制作フリーランスになるまでの全記録【ロードマップ】もあわせて読んでみてください。