【必見】これで準備OK!web制作に必要なもの一覧

web制作の学習や作業にあたり、必要になるものは何でしょうか?

答えは人により様々ですが、「必要最小限のものしか買わない」人が多いのではないかと思います。出費は少ないほうがいいので、すごく賢明な考え方ですね。

しかし、とりあえず形から入るタイプの管理人は学習開始前からPCなどの必須なものはもちろん、そうでないものまで色々買い揃えました。

そして実際に使ってみると、思いのほかweb制作ライフが快適になったので、その情報をみなさんにシェアしたくなったのです。

ということで、今回の記事では管理人の知見(?)を活かして、web制作に役立つアイテムたちの解説&紹介をしていきたいと思います!

なお、紹介するアイテムはすべて実際に購入し、使っているものです。

おおのり
購入の際にはAmazonのカスタマーレビューなどを鬼のように調査して厳選に厳選を重ねたので、参考にしてくださると幸いです笑
目次

絶対に必要なもの

まずはweb制作に絶対必要なアイテムです。それぞれに必要になる理由や製品の選定理由があるので、そのあたりにも触れつつ紹介していきます!

PC

PCはWindowsでもMac OSでもコーディングはできるのですが、Mac OS搭載のものを推奨します。その理由は、Macでないとsafariがしっかり動作しないからです。

safariはブラウザシェア2位で、多くの人に使われているので、コーディングしたものが実際どのように表示されるかという確認は必須です。

Windowsでもsafariを使うこと自体はできますが、だいぶ前にWindows向けのアップデートが停止されている影響でまともに機能しません。

なので、これから端末の購入をするならMacを念頭に検討するといいです。

機種については、最新のものでなくてもいいのですが、個人的にはこれから買うなら以下が最低ギリギリのスペックだと思います。

M1チップ・メモリ16GB

学習する上では8GBのメモリでも支障はないのですが、実務に取り組むと同時に走らせるアプリケーションが多くなってくるので、8GBでは限界がきます。

同時に走らせることが多いアプリ
  • Visual Studio Code
  • Google Chrome
  • Adobe XD

端末の個体差もあるかもしれませんが、このあたりを8GBの端末で同時起動すると頻繁に遅れが発生します。

なので、少々値段が上がってもメモリが16GB以上のモデルを選ぶことをオススメします。

おおのり
端末はMacbook Proじゃなくても大丈夫です!

マウス

マウスはお好みのものでいいと思うのですが、大手メーカーのものでも結構故障しやすいことがあるので注意しておきたいところです。

ELECOM社製のものは使い心地がいいですし、複数年故障せず毎日働いてくれているのでオススメです。

セキュリティソフト

昨今ではOSのセキュリティレベルがかなり上がっています。

また、Mac OSの端末については、Windowsに比べるとシェア率が低いことから、そもそも悪意ある攻撃の標的になる可能性が低いと言われてきました。

そういった背景もあって「セキュリティソフトは必要ない」と言われてしまうことが多いのですが、そんなことは決してありません。

OSでもセキュリティ対策は行っていますが、やはり専用ソフトに比べると守備範囲は狭いです。

今後web制作を仕事にしていくなら、納品物や支払い関係など重要な情報をオンラインでやり取りすることになるので、少しでもセキュリティレベルを高めておきたいところです。

なので、セキュリティソフトは必ず導入しておきましょう。オススメはソースネクストが提供する「ZEROスーパーセキュリティ」です。

ZEROスーパーセキュリティは期間に対して課金されるのではなく、導入する端末台数に応じて料金がかかります。

同じ端末を使う限りずっと利用することができるので、お財布に優しいソフトです(期間は無制限)。

ZEROスーパーセキュリティの料金

1台用:3,900円

3台用:5,900円

5台用:8,900円

また、値段が安いだけでなく性能も折り紙つきで、全ソフトの中でもトップクラスの防御力を誇ります。

おおのり
ただ、MAMPとは相性が良くなさそうなので、WordPress化の作業はLocalの使用をオススメします。

レンタルサーバー

レンタルサーバーは自分がコーディングしたwebサイトを公開するために使います。

webサイトを公開することで自分の力量を示す、というのは誰もがやっていることなので、やらないと不利になるとも言えます。なので、レンタルサーバーは絶対使いましょう。

レンタルサーバーには有料のものと無料のものがあります。

無料のものはお金がかからない代わりにデメリットが多いので、有料のものを使いましょう。

無料レンタルサーバーのデメリット
  • 表示が遅い
  • 容量が少ない
  • 自分の収入にならない広告が自動挿入される
  • 独自ドメインが使えない
  • プログラミング言語やDBに制限がある
  • サポートがない

もちろん提供する会社によって無料サーバーの仕様は異なりますが、上記デメリットをオールクリアするものはないと思います。

レンタルサーバーにアップロードする自分の作品はコーダーにとって名刺みたいなものなので、必要経費として割り切ってしまいたいところです。

ということで有料のサーバーですが、オススメはGMOが運営するConoHaです!

Xserverをオススメする人も多いのですが、性能やできることは正直あまり変わらないです。

ですが、ConoHaの方が若干安いですし、支払いに使えるプリペイドカードも割引販売されることがあるので、コスパではXserverを上回ります。

サーバーの利用は長期にわたるものになると思うので、より低価格なConoHaを選ぶのがいいと思います。

おおのり
ConoHaは問い合わせへの返答がないという評判もありますが、僕が問い合わせた時は翌日に返答がありました。

必須ではないけどあった方がいいもの

ここからはPCやマウスほどではないものの、あると効率が良くなったり、疲れが軽減されたりするアイテムを紹介していきたいと思います!

モニター

意外と持っていない人が多いのですが、使用端末がノートPCだとモニターは必須といってもいいくらいのアイテムです。

なぜなら、web制作はデザインカンプを見ながらVS Codeなどのテキストエディタでコードを書いていく形が基本になるからです。

カンプの確認とコーディングの両方を一画面でやるとウィンドウの切り替えが頻繁になりすぎて効率が悪いです。

デザインカンプの方を別のモニターに表示しっぱなしにすれば、ノートPCの方はコーディング画面を固定できるので、とても快適です。

また、オンラインの打ち合わせで別の画面を参照しながら話をする機会も多いので、そういうシーンでもモニターがあると便利です。

モニターは安価な某国企業製のものをオススメする人が少なくありません。確かに安くてカスタマーの評価も高いのですが、個人的にはあまりオススメできません。

某国企業製のものがオススメできない理由
  • カスタマーレビューで初期不良や短期間での不具合発生を訴える人が少なくない
  • 企業としてのカスタマー対応に良くない評判が見受けられる

ついでに某国企業は「レビューで高評価するとギフト券をプレゼント」みたいなことをするので、高評価を真に受けるのはリスクありです。

なので、別メーカーのものを選ぶのがベターと言えるでしょう。

ということで、モニターのオススメはDELLの製品です。以下のモニターは縦型にも横型にもできますし、初期不良もなく安定稼働し続けています。

デスク(高さ調節可)

「デスクはあるからいらん!」と思うかもしれませんが、高さ調節できるデスクの快適さをご存知でしょうか?

デスクの高さは姿勢に影響してきますが、人間はずっと同じ姿勢でいると筋肉が緊張して血行不良や疲れを引き起こします。

スタンディングスタイルで作業ができるほど高めに位置を設定できるデスクであれば、柔軟に姿勢を変えられるので、疲労を抑えられますし、気分転換にもいいです。

ということで、デスクのオススメは「ErGearの電動昇降式デスク」です。

こちらは高さが118cmまで上げられるのと、幅が100cmとこの手の製品にしては比較的コンパクトで場所も取りません。

おおのり
コーディングは作業時間が長くなりがちですし、快適さを上げるアイテムは積極的に導入した方がいいと思います!

イス(高さ調節可)

イスもデスクと同じような理由で高さを変えられる方がいいです。

高さが固定だと姿勢も固定されがちなので、元の高さが自分に合っていないと腰痛の原因にもなります。

また、背面部分はメッシュ素材のものだとムレなくていいです。あと、この後紹介するアイテムで楽に作業するためには肘掛けもほしいところです。

以下の製品はコスパ抜群なのですが、クッション部分は少し薄めなので、男性だとクッションがあった方がいいかもしれません。

PCスタンド

PCスタンドはノートPCを高い位置で表示するためのアイテムです。

ノートPCを使っていると、どうしても前のめりな姿勢で斜め下を見続ける形になるので、首・腰・背中の筋肉が固まりやすいです。

PCスタンドがあれば、画面を顔の正面に持ってこられるので、首の負担が軽減されます。

ただ、スタンドを使うとノートPCが実質的にモニターのような形になってしまうので、別途キーボードが必要になります。

キーボード

MacはUSBポートに余裕がないので、ワイヤレスなものを選びたいところですが、正直ワイヤレスキーボードは賛否両論な製品が多いです。

Mac特有の現象かもしれませんが、どれも日 / 英の入力切り替えに難があるようで、該当のキーを押しても入力が切り替わりません。

ですが、これはMac側の設定でcapslockに言語切り替えの機能を割り当てることで解消できます。

ただし、文字変換に「Google日本語変換」を使いたい場合には、端末の「設定→キーボード」から任意のボタンを割り当てる必要があります。

キーボードのオススメはhpの製品です。カスタマーレビューが比較的良いのと、キーボードの幅が概ねMacbookと同じなので、違和感なく使えます。

キーボードスライダー

キーボードスライダーは引き出しのようなもので、デスクよりも少し低い位置にキーボードとマウスを収納できるアイテムです。

これがあれば、イスの背もたれに体重を預けつつ肘掛けに腕を置きながらタイピングできるので、とても楽です。

幅60cmのものであれば、無理なくキーボードとマウスを収納できます。製品はサンワダイレクトのものがオススメです。

そのうち必要になるもの

勉強している時に必要になることは少ないものの、実務にあたる際には必須級になるものがあるので、そちらも紹介しておきます!

Adobe Creative Cloud

Adobe Creative CloudはAdobe社が制作しているソフト45種を利用するためのサブスクです。

学習段階だとデザインカンプをURL形式にしてくれていたりするので、特に必要にならないことも多いのですが、実務となるとそうはいきません。

デザインデータはファイルで提供されるのが基本なので、それを見るためにはソフトの利用権が必要になります。

デザインデータでよく使われるソフト
  • XD
  • Photoshop
  • Illustrator

Adobeの公式からサブスクを登録すると高いのですが、アドバンスクールオンライン経由であれば、割引価格で購入可能です。

Adobe Creative Cloudの価格
  • Adobe公式(通常価格)→72,336円
  • アドバンスクール→39,980円

なお、Adobeはブラックフライデーなどのタイミングでセール価格を設定しますが、それでもアドバンスクールオンライン経由の方が安いです。

また、アドバンスクールオンライン経由で購入すれば,ソフト別の11講座を受けられる特典もついてきます!

おおのり
本来的には講座がメイン、サブスクの方が特典なのだとは思いますが、お得なので細かい話は置いときましょう笑

WordPressの有料テーマ

web制作の勉強をする際には、自分でイチからコードを書いていくので有料のテーマをいじることは少ないです。

しかし、実際の案件には有料テーマをベースにした構築やカスタマイズの案件もあります。なので、既存テーマは最低でも1つは持っておくとともに、操作にも慣れておくと良いです。

オススメのテーマは高いデザイン性と充実した機能を兼ね備える「SWELL」です。

これで準備OK!web制作に必要なものまとめ

ということで、今回はweb制作に必要なアイテムを中心に解説させていただきました!

購入にはお金がかかりますが、一度買えば長く使えますし本当に快適なものなので、ぜひとも導入を検討していただきたいと思います。

では、最後に今回のまとめです!

  • web制作を仕事にするなら、セキュリティソフトは必須
  • レンタルサーバーは有料のものを使うべし!
  • モニターはノートPCユーザーにとって必須級のアイテム
  • PCスタンドなどの作業の快適性を高めるアイテムは疲労軽減の効果あり
  • Adobe Creative Cloudは案件をこなす際に必要になるサービス
  • WordPressの有料テーマはできれば1つは持っておきたい

当ブログへのご支援について

当ブログが少しでもお役に立ちましたら、以下のサービスにてご支援くださると大変喜びますm(_ _”m)ペコリ

こちらは有料のテキスト送信+投げ銭サービスとなりますので、

うぇぶ子
ケッ!知るかよそんなもん

と思われる方はクリックなさらぬようお願いいたしますm(_ _”m)ペコリ

OFUSEで応援を送る
この記事をシェアしてね!

この記事を書いた人

【経歴】元公務員でフリーランスのweb製作者 / 退職後3ヶ月弱でフリーランス活動開始→4日後に初案件の依頼→webマーケティング会社から長期案件受託 / 現在は動画制作にチャレンジ中
【英語】中学レベルまで低下した状態から勉強を再開し、5ヶ月弱でToeic835点を取得 / 現在は英会話を勉強中

目次