Web制作をしていると、さまざまなツールが必要になります。また、知っておけば他の人と差がつくツールも少なくありません。
Web制作で手に入れておいた方がよいツールはあるかな？
もっと作業スピードをあげたいんだけど、いいものないかな？
この記事ではこのようなお悩みを解決します。
僕がよく使用しているものを中心に、Web制作で便利なツールをお伝えします。
- Web制作に必須アイテム7選
- アイテム①：パソコン
- アイテム②：ドメイン
- アイテム③：サーバー
- アイテム④：FileZilla（FTPツール）
- アイテム⑤：Adobe XD
- アイテム⑥：Adobe Photoshop
- アイテム⑦：セキュリティソフト
- GoogleChrome拡張機能4選
- 学習サイト・教材7選
- 経理関係4選
- 生産性を高めるアイテム6選
- 便利Webサービス3選
- 無料素材サイト9選
- 無料素材①：O-DAN（写真）
- 無料素材②：ぱくたそ（写真）
- 無料素材③：FLAT ICON DESIGN（アイコン）
- 無料素材④：ICOON MONO（アイコン）
- 無料素材⑤：ソコスト（イラスト）
- 無料素材⑥：Loose Drawing（イラスト）
- 無料素材⑦：ちょうどいいイラスト（イラスト）
- 無料素材⑧：manypixel（イラスト）
- 無料素材⑨：uiGradients（グラデーション取得サイト）
- 有料素材サイト3選
- まとめ
Web制作に必須アイテム7選
まずは必須のアイテムを紹介します。高額なものもありますが効率を高めるためには必要なものばかりなので、チェックしておきましょう。
アイテム①：パソコン
まずはなんといってもパソコンです。Web制作業務のほぼすべてはパソコンで行われるため、パソコンは必須。
そしてできる限りパソコンのスペックにもこだわりましょう。最低限、下記のスペックは欲しいところです。細かいところは省いて大まかな目安のみ示しています。
- CPU Core i5相当以上
- メモリ 4GB以上
- HDD・SSD 512GB以上
とはいっても、パソコンは詳しくない人がほとんどでしょう。パソコンにあまり詳しくない人には“MacBookAir”を僕はおすすめしています。
Mac系は、Web制作でよく使われるAdobe製品との親和性が高い上に、使っている人も多いため、わからないところを調べやすいからです。
ちなみに僕はMacbook Proを購入して使用しています。これはFlutterやPythonなどのプログラミングにも手を出していきたいと考えたためです。
とはいっても、スペックが上がれば処理速度も高まるので、たとえウェブ制作だけでも、速度を上げたい人はMacbook Proがおすすめです。
アイテム②：ドメイン
ドメインはインターネット上の住所です。ドメインがないとWebサイトを作成することができません。
Web制作者はポートフォリオサイトを作成したり、アップロードの練習をしておく必要があるため、ドメインをひとつは持っておいた方がよいです。
僕が利用しているドメインショップは”お名前.com”さんです。
ドメインの購入方法や利用方法については【図解】ポートフォリオサイトの条件・作成から公開までの全手順にまとめていますのでぜひご覧ください。
アイテム③：サーバー
サーバーは、サイト訪問者にサイトのデータ（HTML・CSSやPDFファイル）などを渡す役割をもつコンピュータです。
基本的にはレンタルします。僕は「エックスサーバー」というサーバーをレンタルしています。たくさんのユーザーがいるため、ネット上に大量の情報が落ちている上に、リーズナブルな値段で利用することができるので、気に入っています。
Web制作者をしていると、下の段階が訪れます。
- サーバーを選択する
- サーバーを契約・利用する
「①サーバーを選択する」については、【Web制作にサーバーは絶対必要？】費用やおすすめのサーバーをご紹介にまとめております。
そして、「②サーバーを契約・利用する」については、【図解】ポートフォリオサイトの条件・作成から公開までの全手順にまとめています。全手順を図解で示しているので、パソコンがまったくわからない人でも簡単にレンタル・利用できます。
ご興味があれば、ご覧ください。
アイテム④：FileZilla（FTPツール）
FileZiilaはFTPツールの一種です。FTPツールとは、自分のパソコンとサーバーの間でデータを送受信するためのツールです。
手紙を運ぶ郵便局員さんと考えてもらってよいでしょう。
FileZillaについても【図解】ポートフォリオサイトの条件・作成から公開までの全手順にまとめています。
アイテム⑤：Adobe XD
AdobeXDはコーディングのデザイン見本を作り、共有するソフトです。
Web制作案件では、デザイナーがデザインカンプ（デザイン見本のこと）を作成し、それをコーダーに共有して、Webページが作られます。
そのため、Adobe XDをもっておくことは必須級で重要です。
※コーディングのみの場合は、AdobeXDは必須ではないです。XDを用いずにWebサイトを用いて共有してもらうことも可能だからです。
しかし、Webサイトでの共有は、細かいところのコピーとかが扱いにくいです。そのため、僕はAdobeXDを使用しています。
アイテム⑥：Adobe Photoshop
AdobePhotoshopは写真や画像を加工するソフトです。こちらもAdobe製品です。
AdobeXD程はWebデザインに特化していないのですが、以前の名残りで広くWebデザインで使用されています（AdobeXDが登場したのが割と最近）。
Web制作会社との案件で、いただけるデザインカンプがAdobePhotoshopの可能性が少なくないで、マスターしておきましょう。
ちなみに、AdobePhotoshopはウェブサイトでの共有とかはないので、ソフトを持っていないとNGになります。
アイテム⑦：セキュリティソフト
セキュリティソフトも必須です。クライアント様から大切なデータを預かる可能性も十分ありますので、セキュリティ対策はしっかりとしておきましょう。
僕が使用しているのはESETです。
1日あたり6円弱で使用できる上に、セットアップも簡単だからです。複数のセキュリティソフトで比較した際に、もっとも僕に適していると判断したため、購入し、利用し続けています。
ご興味がありましたら、下記のボタンより詳細をご覧いただけます。
GoogleChrome拡張機能4選
Web制作とGoogleChrome拡張機能は切っても切り離せない関係性にあるので、紹介します。
GoogleChrome拡張機能とは、下の赤枠の中にあるものたちです。拡張機能をインストールすると、それぞれの拡張機能を使うことができます。
その中には、ピクセルパーフェクト（ピクセル単位で正確なコーディング）を行うために重要な拡張機能もあります。
ぜひインストールしておきましょう。
拡張機能①：ColorPick Eyedropper
ColorPick Eyedropperは、画面中のどこかでクリックすると、クリックした箇所の色番号を取得できるツールです。
Web制作中では何か他のサイトを参考にしてデザインをしたりするのですが、その際にモデルとなるサイトにあるパーツの色を取得することは重要です。
手軽に色番号を取得できるので重宝します。
拡張機能②：PerfectPixel
PerfectPixelはピクセルパーフェクトなコーディングを行うために必須級に大切な拡張機能です。
使い方は、下の通りです。
①PerfectPixelを起動し、デザイン見本（JPG or PNG）を読み込ませて、ブラウザの背景に映し出します。
②背景の画像に被せるようにコーディングする。
こんな簡単にピクセルパーフェクトにコーディングができてしまいます。
拡張機能③：Image Downloader
Image Downloaderは、閲覧中のページにある画像を一括で取得できる拡張機能です。Web制作のリニューアル案件では、画像は既存のサイトにある画像から取得するように言われるケースは少なくありません。
そういったときに、一つひとつの画像に対して「右クリック→画像をダウンロード」をしていたら日が暮れてしまいます。いや、日が暮れるどころではすまないです。
そのため、Image DownloaderはWeb制作者に必須なんです。
拡張機能④：Window Sizer
Window Sizerは、Google Chromeのウィンドウを、主要な画面サイズに変更する拡張機能です。
Web制作においては、できるだけ、すべての画面サイズに対応させますが、特に主要な画面サイズには用心して制作する必要があります。
Window Sizerはワンボタンで主要な画面サイズに変更できるため、Web制作のテスト行程が捗ります。
学習サイト・教材7選
次に学習で使用する、サイトや教材についてお伝えします。
学習①：Progate
Progateは、スライドで説明を見たのちに、見本通りになるようにコーディングし、AIに自動判定で正誤を判定してもらう学習サイトです。
課金をしない状態でも、Progateは無料で使えます。まずProgateを利用してみて、ご自身がProgateでの学習に向いているかどうかを判断してみるのをおすすめします。
そして特におすすめなのが、Progateの有料版です。僕はとてもお世話になりました。個人的には最短で案件レベルまで実力を高められるのではないか、と考えています。
料金も月額980円（税抜）とリーズナブルです。だいたい2ヶ月あれば学習や忘れた時の見直しができてしまうので、合計支出として2,000円程度を考えておけばOKだと思います。
学習②：だんさんカンプ
だんさんカンプはWeb制作を行なっている大学生のだんさん（@dan03301）が制作するデザインカンプです。
HTML・CSSの基礎が完成した頃合いに行う演習として優秀なので、紹介しました。優秀だと考える具体的なポイントは下記の通りです。
- HTML・CSSの基礎技術が網羅されている
- デザインカンプのコーディング例がだんさんのブログに掲載されている
- レスポンシブコーディングに対応している
- ぱっと見でコーディングの構造を読み取りやすい
ご興味のある方はぜひダンさんカンプに着手してみてくださいね。下のボタンよりだんさんカンプを無料で入手できます。
学習③：ねこポンさんカンプ
次に紹介するのが、ねこポンさんカンプです。ねこポンさんカンプは、フリーランスデザイナーのねこポンさん（@webdesigner_go）が作成したデザインカンプです。
jQueryの使用がマストだったり、レスポンシブコーディングの難易度がやや高かったりと、実案件レベルのコーディングを行うことができます。
- 頻出のハンバーガーメニューを利用
- jQueryのスライダーを使用
- 構造がやや複雑
- 固定ヘッダーを利用
ねこポンさんカンプも無料で利用することが可能です。下のボタンより、ねこポンさんカンプをいただくことができます。ご興味のある方はぜひどうぞ。
学習④：WordPressレッスンブック
WordPressレッスンブックは、「HTML・CSSの基礎はすでできていて、WordPressもできるようになりたい人」におすすめの本です。
0からブログ形式のWordPressテーマを構築し、その流れの中でWordPressテーマ制作を学びます。
- 初心者でもわかりやすく0から
- ブログ型テーマの作成方法がわかる
- 余計な機能をつけないから混乱しない
僕はこの本のおかげで、つっかえることなくWordPressの基本的な作り方を身につけたので、とても気に入っています。
学習⑤：WordPressの教科書
もう一冊WordPressの学習でおすすめの書籍があり、それが「WordPressの教科書」です。
こちらは先程のWordPressレッスンブックとは違い、コーポレート形のWordPressテーマを作成します。
- WordPressレッスンブックからスムーズにステップアップできる
- WordPress頻出の機能である“カスタムタクソノミー”を詳しく学べる
- コーポレート型のWordPressテーマ作成を学べる
レッスンブックよりもレベルがぐいっと上がりますが、この本のレベルをマスターすれば案件をこなすこともできます。
学習⑥：Udemy
動画で学習することができるUdemyもおすすめです。
断っておきますと、Web制作に関して、僕は動画教材は使用していません。しかし、Flutterなどは動画で学習したため、動画教材が学習しやすいことを知っています。そのため、有名なUdemyを紹介させていただきました。
動画教材は、後からピンポイントで振り返りたい点を探しにくい、というデメリットもありますが、やはりメリットも多いですよね。
- 詳細に動作を辿ることができる
- PCを持ち運べば教材も持ち運べる
- 割と新しいサービスが多いので、現環境に適した学習を受けることができる
Udemyは動画教材が豊富に揃っていますので、お好みの教材がないか探してみてください。
学習⑦：プログラミングスクール
プログラミングスクールも学習のひとつの手です。僕は使用してませんが、独学ではなくプログラミングスクールの利用が向いている人もいます。
というのも、僕は大学の卒業論文でPythonを使用したり、授業でC言語を暑かったりしていました。そのためプログラミング言語の扱いには多少慣れがあります。
しかし、プログラミング言語への慣れがない方は疑問が浮かびまくって、迷子になって挫折してしまう可能性は低くないでしょう。
そのため、人に聞いて解決できるという点でプログラミングスクールは適しています。
決して僕が優れているという話ではなく、慣れがあるかないかの話であり、慣れはプログラミングにおいて非常に重要なことだと考えています。
慣れるまでプログラミングスクールで人に質問できる環境を用意するのも重要な戦略のうちのひとつでしょう。
経理関係4選
Web制作を開始すると、見積もりや請求、税金などの話が関係してきます。そこをサポートしてくれるサービスや本を紹介します。
経理関係①：会計freee
経理関係全般で活躍してくれるのが、会計freeeです。会計freeeは経理関係全般で活躍してくれて、主な役割は下記の通りです。
- 見積書・請求の作成
- 経費・売上の計算
- 確定申告の書類作成
素早く正確に書類を作成できるため、僕も使用しています。しかも、月額980円とリーズナブルなので、おすすめです。
会計freeeの見積書作成方法や登録方法について、まとめた記事もあります。ご興味のある方はぜひご覧ください。
経理関係②：開業freee
開業届を簡単にできるソフトです。本来、開業届を作成する際には、管轄の税務署のHPからフォーマットをダウンロードして、必要事項に記入する必要があります。
その上、青色確定申告を提出するとなると、記入がさらに面倒になります。
開業freeeはその辺の作業を楽にしてくれます。みやすい質問に答えていくだけで、開業届を作成できてしまいます。
ご興味のある方はぜひご覧ください。僕は開業freeeを使用して開業届を作成しました。
経理関係③：両学長 リベラルアーツ大学
両学長（@freelife_blog）が運営するリベラルアーツ大学（リベ大）の本・動画もおすすめです。
これらの動画と本を見ると、フリーランスや税金に関する知識が大量に手に入ります。また、家賃や通信費の下げ方など、生活に結びつくお金に関する情報も豊富です。
YouTubeには無料とは思えない質・量の動画が上がっていますので、ぜひご覧ください。
本は有料ですが、漫画を用いて、理解しやすくお金の知識を教えてくださっています。
ちなみに、この本の印税を両学長は受け取っておらず、その印税の分、本の料金を低くしているそうです…。一人でも多くの人のマネーリテラシーを高めたいからだそうです。知識もすごいですが、そのポリシーがとても素敵です…。
経理関係④：フリーランス税本
税理士の大河内先生（@k_art_u）と漫画家のあんじゅ先生（@wakanjyu321）が共同制作した『お金のこと何もわからないままフリーランスになっちゃいましたが税金で損しない方法を教えてください!』もおすすめです。
「税金とは何か？」という疑問から「経費精算はどうするか」「業種は何を選択して開業するべきか」などの具体的なアクションまでをわかりやすくギャグ漫画でまとめてくれています。
フリーランスや副業をするなら絶対に持っておいた方がよいと断言できる素敵な一冊です。
生産性を高めるアイテム6選
個人的に使っていて生産性が上がるなぁと思っているアイテムを気軽に紹介します。基本的にはデスク周りのアイテムになります。
こちら僕のデスクなのですが、だいたいがこの中に含まれています。
生産性①：モニター
まずモニターです。Web制作は、①デザインカンプの確認②コーディング③ブラウザでの表示確認という3つのことを同時に行うため、モニターが必須になってきます。
ひとつの画面でやってもいいのですが、画面の行き来が多くなりすぎて、時間がかかってしまいますし、精神的にも疲弊してしまいます。
そのため、できればモニターを買いたいところです！
ちなみに僕は、LGの少し大きめのモニターを買っています。モニターがお大きいため、エディタを三分割にしたり、Illustratorが使いやすかったりするのがお気に入りポイントです。
最安値ではないですが、半永久的に自分の生産性を高めてくれると考えたら安い買い物だと考え、購入に至りました。使い始めてから2年弱経ちますが、まだまだ飽きが来ておらず、満足しています。
生産性②：Majextand
Majextandは折り畳み方のパソコンスタンドです。
僕がMajextandを気に入っているポイントは下記の3点です。
- 折り畳むと超薄型
- 排熱ができる
- PC画面の高さが上がるので姿勢がよくなる
PCスタンドは使用していない人が多いと思うのですが、使ってみるとやめられなくなります。
生産性③：Nizのキーボード
Niz（「にず」と読みます）のキーボードも気に入っています。このキーボードはボタンが反応する仕組みが一般的なキーボードと異なります（「静電容量無接点方式」というものです）。
そのため、キーボードの耐久性もよい上に、打鍵感がよく、手も疲れません。静電容量無接点方式のキーボードにはHHKBというものもあるのですが、そちらは高価すぎるので、僕はNizを使用しています。
キーボードがUS配置なことに気づかれた方もいるでしょう。僕がJIS（日本語の配置）ではなくUS配置を利用している理由は下の通りです。
- ；や”などプログラミングで使用するものが打ちやすい位置にある
- キーがほぼ左右対称でかっこいいから
- 「JISじゃなくてUS使ってるんだよね〜」って言えるのがかっこいいと思ってるから
- なんかかっこいいから
要するに厨二病ですね。買ってから「え、ローマ字と英語の切り替えってどうするの！？」と焦りました。
生産性④：観葉植物
作業時に目の着くところに植物をおいておくと、ストレスが和らぐとの研究を見たので、デスク上に置いています。
僕が置いているのは「パキラ」という植物です。近所の植物屋さんにて500円で購入しました。
猫や犬など動物を飼っている方は観葉植物の種類には注意してください。観葉植物のなかには、動物に毒なものもあります。
僕は猫を飼っていますが、色々念入りに調べた結果、パキラは問題ないとの結論に至ったので、パキラを置いています。
ちなみに、猫にかじられまくってボロボロになっています。
生産性⑤：FLEXISPOT（電動昇降デスク）
FLEXISPOTという電動昇降デスクもおすすめです。
人間はずっと座っているとステレスも溜まっていくし、体にもよくないので、できれば、立って仕事するのが望ましいです。
とはいえ、ずっと立っているのも疲れるので、僕は昇降デスクを使用しています。身長は175cmなのですが、十分対応できるほど、デスクの上下幅があります（昇降範囲：60~123cm）。
メリットを僕なりにまとめると下の通りです。
- 座る⇄立つが自由自在で疲れない
- 本人や子ども、奥さんなど、人によって机の高さを変更できる
- 子どもの成長期に合わせて高さを変更できる
上記がメリットです。とはいえ、FLEXISPOTは4〜5万円するので、高額で手が出しづらいことも否めません。
そのため、僕はWeb制作で売り上げを上げることを絶対条件として購入しました。結果として、この机の何倍もの収入は得たので、もとは取れているとは考えています。
また、よいものを購入したゆえに、飽きは全然こないし、長期間使えるので、結果的にコスパがよいと考えています。興味があればぜひご一考ください。
また、個人的には「電動」がよいと考えています。というのも、レバーで回す「手動」の方が安価で買えるのですが、毎回のレバー回しが億劫になり、結果的に使わなくなる気がするからです。それにレバーを回す時間は無駄な時間でもありますしね…。
そのため、僕は「電動」推しです。
生産性⑥：楽天モバイル
楽天モバイルも僕の生産性をあげてくれています。
- キャンペーン中のUNLIMITによって通信量1年間無料なので、その分のお金を他の投資に回せる
- 楽天の電波圏内なら通信量無制限なので、場所を気にせずテザリング作業できる
- 音楽も通信容量気にせず聞ける
節約しつつ、生産性を高められるので、僕は楽天モバイルを気に入っています。楽天UN-LIMITの期間ならば、月額2,980円が1年間無料というも嬉しすぎます。
東京にお住まいの方にはおすすめできますが、それ以外の都道府県にお住まいの方にはおすすめできないかもしれません。
楽天は現在（執筆：2021年1月23日）、電波の領域を拡大中で、電波が網羅できていない箇所が少なくありません。※それらの地域ではauやdocomoなどの電波を使えますが月5GBまでです。
実際、僕も千葉に行くときは楽天の電波が弱いので、auなどの電波に切り替えています。
便利Webサービス3選
便利なWebサービスをご紹介いたします。
Webサービス①：画像サイズ変更ツール
画像サイズ変更ツールは、画像加工関係全般ができるツールです。
- サイズ変更
- トリミング
- カラー加工
機能の数は少なめなのですが、少ないゆえに非常に使いやすいです。
僕は少しの加工ならばIllustratorやPowerPointなどは使用せず、画像サイズ加工ツールを使用します。
登録も不要で無料で使えますので、ご興味があればぜひ。
Webサービス②：Canva（画像加工ツール）
Canvaはちょっとしたバナーなどを作成するのに適したツールです。
フォントや無料のテンプレ素材が充実していて、あっという間にいい感じのデザインを作成できてしまいます。
僕もTwitterのバナーなどを作成する際に使用していました。
Webサービス③：Pinterest
Pinterestはデザイン共有のSNSです。Pinterestをみると優れたデザインが数多く集まっています。
Pinterestの優れた画像を参考にウェブデザインを作るといったのが、僕の使い方です。（もちろん丸パクリはNGです）
無料素材サイト9選
無料素材サイトを紹介します。デザインするときなどに有用なものを集めましたので、ブックマークしておくのがおすすめです。
無料素材①：O-DAN（写真）
海外の複数の無料素材サイトを一括で検索できる有用サイトです。検索対象の素材サイトはどこもイケてるデザインなので、画像探しが超捗ります。
無料素材②：ぱくたそ（写真）
ぱくたそは日本の中で一番有名な無料素材サイトかもしれません。いろいろなサイトでよく見ますもの。
人物の写真は基本的に有料のものが多いのですが、ぱくたそは人物の画像でも無料で提供しています。
無料素材③：FLAT ICON DESIGN（アイコン）
FLAT ICON DESIGNは無料とは思えないほど、カラーでかわいいアイコンを揃えている無料素材サイトです。
それぞれのアイコン内で複数パターンあるので、ぜひ見てみてください。どれもかわいいです。
無料素材④：ICOON MONO（アイコン）
ICOON MONOはとにかく種類が豊富です。しかも、単色で作成されているので、Illustratorをもっていれば、自分の理想の雰囲気に簡単にチェンジできちゃいます。
バナーのちょっとしたアクセントにでもいかがでしょうか？
無料素材⑤：ソコスト（イラスト）
ソコストは「ソコソコ使えるシンプルなイラスト」をテーマにイラスト提供を行っているサイトです。正直、ソコソコどころではなく、かなり使えます…。
僕は図解作成やバナー作成に重宝しています。お気に入りのサイトですので、ご興味があれば、ぜひご覧ください。
無料素材⑥：Loose Drawing（イラスト）
Loose Drawingはその名の通り、ゆるい画像がたくさんあるサイトです。このゆるさが、汎用性高く重宝します。
無料素材⑦：ちょうどいいイラスト（イラスト）
ちょうどいいイラストはとにかくちょうどいいです。複数パターンから選択できるので、とても使いやすい。
無料素材⑧：manypixel（イラスト）
manypixelはとにかくおしゃれなイラストが配布されているサイトです。小洒落たサムネを作成したかったり、サイトの雰囲気を洋風に持っていきたかったりする場合にはぜひ利用してみてください。
無料素材⑨：uiGradients（グラデーション取得サイト）
数多くのグラデーションから色番号を選択できるサイトです。
グラデーションはうまく使用すれば、一気におしゃれになるのですが、素人が使うと、どうしてもベタ感がでてイケてないデザインになってしまいます。
有料素材サイト3選
次に紹介するのは有料素材サイトです。お客様によっては有料素材を使っていいとの指定が来るかもしれません。
その時のために有料素材サイトを知っておいた方がよいでしょう。
有料素材①：PIXTA
PIXTAは日本有数の画像サイトの一つです。僕も過去の案件で、PIXTAから画像を取得するように指定されたことがあります。
有料素材②：Shutter Stock
shutter Stockも日本で大手の画像サイトです。僕は案件中で使用したことはありませんが、過去のバイト先で利用していたことがあります。
こちらも信頼性が高い画像サイトです。
有料素材③：イラストAC（数量限定で無料）
イラストACは多数のイラストが存在する素材サイトです。数量限定ですが、無料で使うこともできます。
イラストのテイストは多岐にわたっていますので、イラストが必要になった際には一度探してみるとお探しのテイストが見つかるかもしれません。
まとめ
この記事ではWeb制作を行う上で便利なツールをお伝えしました。ざっとまとめると下の通りです。
- Web制作に必須アイテム7選
- GoogleChrome拡張機能4選
- 学習サイト・教材7選
- 経理関係4選
- 生産性を高めるアイテム6選
- 便利Webサービス3選
- 無料素材サイト9選
- 有料素材サイト3選
ツールを使いこなして生産性を高め、目標達成につなげましょう！
最後までお読みいただきありがとうございました！
