Web制作で使うツール・ソフトを徹底解説する【初心者は必見】

  • WEB制作
Web制作ではどんなソフトやツールが使われているの?詳しく教えて下さい!
お任せください!現役フリーランスのみやしもが、Web制作で使うソフト・ツールについて詳しく解説してゆきます!

Web制作を始めたいと考えている方の中には「どんなツールやソフトが必要なの?」「具体的に何から揃えればばいいの?」という疑問をお持ちの方も多いと思います。



上記の疑問にお答えするためも今回は、現役フリーランスのみやしもがWeb制作で必要になるソフト・ツールを網羅的に解説してゆきます。



▼この記事の解説内容

  • HTML&CSSなどの制作で必要な「コーディング」関連のツール
  • Webサイトの構築で使う「WordPress(ワードプレス)」について
  • Webサイトの公開に必要な「サーバー・ドメイン」関連のツール
  • Webデザインに使用する「デザインツール」について
  • このほかWeb制作の管理で役立つツール
この記事を読めばWeb制作に必要なツール・ソフトが分かり、Web制作を始めるための準備が整えられますよ。各見出しでは何故必要なのかといった側面や、実際のインストールや使い方で役立つおススメ記事も紹介してゆきます。
この記事を読んでWeb制作に必要なツール・ソフトをしっかり揃えてゆきましょう!

Web制作で稼げるスキルをいち早く身につけるなら、業界最安級でTwitterでも大好評のデイトラを利用するのがおススメです。

▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

Web制作ツール紹介:『コーディング』編

Web制作ツール紹介:『コーディング』編

Web制作の作業の中心とも言える、コーディング関連のツール・ソフトを紹介してゆきます。

ツール①:Visual Studio Code

HTML&CSSやJavaScriptのコーディング作業で無くてはならないのが「テキストエディタ」ですが、テキストエディタにはMicrosft社の「Visual Studio Code(ビジュアル・スタジオ・コード)」を導入してゆきましょう。



▼公式サイト

Visual Studio Code



テキストエディタには、上記のVisual Studio Code以外にも様々な種類のものがあります。

しかし無料で利用する事ができて、WindowsやMacでの動作も軽量、便利なプラグインが充実している。といった多くの側面から、現在では上記の「Visual Studio Code」がWeb制作では導入必須とも言える定番のテキストエディタになっています。

実際にWeb制作スキルが学習できる多くの書籍やオンラインスクールでも、Visual Studio Codeを前提にした教材が用意されています。以上の理由からVisual Studio Codeは、これからWeb制作を学習する方には真っ先に導入して欲しいツールとなります。



Visual Studio Codeのインストール方法や日本語化の手順については次の記事が参考になります。

ツール②:GitHub

自分が書いたHTML&CSSやJavaScriptなどのコードを管理するために「GitHub(ギットハブ)」を利用してゆきましょう。GitHubを使えば、バージョン管理ソフト「Git(ギット)」を使ったリポジトリの作成や管理を、Webブラウザから簡単に行うことができます。



▼公式サイト

GitHub



ここまでに登場したコーディング関連の2つのツールの使い分け方を簡単に説明すると、以下の様に表現できます。



▼2つのツールの使い分け

  • テキストエディタ・・・HTML&CSSやJavaScriptのコードを書くために使う
  • GitHub・・・書いたコードをWeb上に保管したり、共有するために使う



GitHubももちろん無料で利用ができるので、先ほどにも登場したVisual Studio Codeと合わせて、確実に導入しておきたいツールとなります。



テキストエディタのVisual Studio CodeとGitHubを連携する方法については、次の記事が参考になります。

Web制作ツール紹介:『WordPress』編

Web制作ツール紹介:『WordPress』編

Web制作における、WordPress関連のツール・ソフトを紹介してゆきます。

ツール①:WordPress

WordPress(ワードプレス)はWebサイトやブログの構築に利用できる無料のソフトウェアです。WordPressは次の日本語版サイトからダウンロードする事が出来ます。



▼公式サイト

WordPress(日本語)



WordPressはもともとブログを構築するために開発されたソフトウェアですが、強力な編集機能やカスタマイズ性の広さから、Webサイト制作における【CMS】としての用途で注目をあつめ、現在では多くのWebサイトの管理画面にWordPressが採用されています。

▼CMS(コンテンツ・マネジメント・システム)とは
Webサイト上のテキストや画像などのコンテンツを管理して、配信などの処理を行うことが出来るシステム全般のこと。
WordPressはWebサイトの土台として機能するソフトウェアです。IT用語では「プラットフォーム」なんて表現されたりもします!

そんなWordPressは『ウェブの40%がWordPressで構築されている』と言われるほど、多くのWEBサイトで利用されてるソフトウェアとなっています。

実際に多くのWeb制作会社では、サイトの構築手法にWordPressが採用されています。このため制作会社への就職や、副業・フリーランスを目的にWeb制作を学ぼうと思ったら【習得必須】とも言えるべきツールになります。
Web制作に馴染みのない人でも「名前だけは知っているよ!」という方も多いと思います。

ツール②:ローカル開発環境

WordPressを使ったWebサイトの制作で欠かせないのが【ローカル開発環境】の存在です。

ローカル開発環境とは自分のPC上に用意したソフトウェアの実行環境、もしくは作業環境のことです。

自分のPC上でのみ利用できる環境は一般的に"ローカル"という言葉を使って表現されます。また実際にインターネット上に公開されたWebサイトの事は、ローカルと対比して"本番環境"とも呼ばれます。

WordPressは本来は「Webサーバー」と呼ばれる環境があって初めて動作するソフトウェアです。このためにも自分のPC上でWordPressを動かそうと思ったら、まずはWordPress専用のローカル開発環境を導入する必要があります。

そんなローカル開発環境は、Web制作において次の様な目的のために利用することが出来ます。



▼ローカル開発環境の目的

  • WordPressを使ったオリジナルWebサイトの開発
  • WordPressの「テーマ」「プラグイン」の動作確認や検証
  • 本番のWebサイトに影響を与える事なく安全に作業を進める



以上の事からも「ローカル開発環境」は、WordPressを使ったWeb制作において必要不可欠な存在だと言えます。Web制作初心者の方や、これからWordPressを使おうと考えている方は確実に導入してゆきましょう。



WordPressのローカル開発環境の構築では、次のツールが利用できます。



▼ローカル開発環境

  • XAMPP(ザンプ)
  • MAMP(マンプ)
  • LOCAL(ローカル)



上記のツールを使った実際のローカル環境の構築方法については、次の記事で詳しく確認できます。

自分のPCにWordPressのローカル開発環境を導入して、安全かつ効率的に作業を進めてゆきましょう!

補足:WordPressに必要なスキルは?

ところでWordPressを使ってゼロからWebサイトを作ろうと思ったら、次のようなスキルが必要になります。



▼Web制作に必要なスキル

  • 「HTML&CSS」や「JavaScript(jQuery)」のコーディング
  • プログラミング言語「PHP」の基礎知識やコーディング
  • WordPressの「テーマ」の作成方法やカスタマイズ



上記のスキルは主には書籍やブログ、オンラインスクールを通して学習することが出来ます。「Web制作スキルをゼロから学習したい」「学習内容について詳しく知りたい」という方には、次の記事もおススメです。

Web制作ツール紹介:『サーバー・ドメイン』編

Web制作ツール紹介:『サーバー・ドメイン』編

Webサイト制作における「サーバー・ドメイン」関連のツール・ソフトを紹介してゆきます。

自分が作ったWebサイトをインターネット上に公開するためには、実際のファイルやデータなどの置き場所になる【サーバー】と、サーバーにアクセスするための情報になる【ドメイン】がそれぞれ必要になります。

ツール①:レンタルサーバー

Webサイトの公開に必要になるサーバーやドメインは、いずれも【レンタルサーバー】に契約することで用意できます。レンタルサーバーでは次のサービスが一般的です。



▼レンタルサーバー①

ConoHa WING(コノハウィング)


▼レンタルサーバー②

XSERVER(エックスサーバー)


▼レンタルサーバー③

ロリポップ



レンタルサーバーの仕組みについて詳しく知りたいという方には、次の記事もおススメです。

ツール②:FTPソフト

Webサイトの設置先であるサーバーに対して、ファイルをアップロード・ダウンロードするには【FTPソフト】を使用します。

FTPソフトとは「FTP(File Transfer Protocol)」という通信を利用してPCとサーバー間でのファイルの送受信(アップロード・ダウンロード)をするためのソフトのことです。

そんなFTPソフトには次のものが一般的です。



▼FTPソフト

  • WinSCP(Windows)
  • FileZilla(Windows/Mac)
  • Cyberduck(Windows/Mac)



これからFTPソフトを導入するなら、Windowsは「WinSCP(ウィン・エスシーピー)」が、Macは「FileZilla(ファイルジラ)」がおススメです。各FTPソフトのインストール方法や使い方については次の記事で確認できます。

FTPソフト①:「WinSCP」のインストール方法・使い方

FTPソフト②:「FileZilla」のインストール方法・使い方

このほかFTPソフトを使ったファイルのアップロード方法については、次の記事が参考になります。

Web制作ツール紹介:『デザイン』編

Web制作ツール紹介:『デザイン』編

Webサイト制作における「デザイン」関連のツール・ソフトを紹介してゆきます。



▼WEB制作におけるデザインの成果物

  • WEBサイトの『デザインカンプ(完成イメージ)』
  • 企業やWEBサービスなどのロゴ素材
  • サムネイルやバナーなどのイラスト素材
今回は、上記のデザインを作成するうえでも標準的な『Adobe』社のソフトウェアについて紹介してゆきます。

ツール①:Adobe XD(アドビ・エックスディー)

Adobe XD(アドビ・エックスディー)は、Adobe社が開発するデザインツールです。

Web制作ツール_Adobe XD
Adobe XD

Web制作におけるAdobe XDの主な用途としては次の様になります。



▼Adobe XDの用途

  • Webサイトのワイヤーフレームやデザインの制作
  • デザインカンプから画像素材(jpg、png)への書き出し
  • プロトタイプの作成や検証、チームやクライアントへの共有



▼公式サイト

Adobe XD



Adobe XDのインストール方法や使い方については、次の記事が参考になります。

スタータープランなら無料でインストール出来ますよ!、初心者にも確実に導入して欲しいデザインツールです!

ツール②:Photoshop(フォトショップ)

Photoshop(フォトショップ)は、Adobe社が開発するデザインツールです。

Web制作ツール_Photoshop
Phothoshop

Web制作におけるPhotoshopの主な用途としては次の様になります。



▼Photoshop

  • Webサイトのデザイン制作
  • デザインから画像素材(jpg、png)への書き出し
  • Webサイトに掲載する写真の加工やサイズ圧縮など



▼公式サイト

Adobe Photoshop

Photoshopは画像加工のみならず、Webページのメインビジュアルやバナーなどを含めて、Webデザイン全般で使用されています。デザインカンプはPhotoshopで作成されることも多いので、デザイナーのみならずコーディングを行うWeb制作者にとっても必要になる機会のあるツールです。
お肌のシミを取ったり、画像加工での印象が強いPhotoshopですが、Webページのデザインやバナーの制作など、Web制作でもバッチリ使いますよ!

ツール③:Illustrator(イラストレーター)

Illustrator(アドビ・イラストレーター)は、Adobe社が開発するデザインツールです。

Web制作ツール_ Illustrator
Illustrator

Web制作におけるllustoratorの主な用途としては次の様になります。



▼Illustrator

  • Webサイトのデザイン制作
  • デザインカンプから画像素材(jpg、png)への書き出し
  • アイコンフォントの加工やSVGデータへの出力



▼公式サイト

Adobe Illustrator

ベクターデータに強く、ポスターやチラシなどの制作向きの印象が強いIllustoratorですが、Web制作でもデザイン作業のほか、アイコン素材などのデータを扱ったり、Webサイト用のSVGデータに加工する。といった目的で利用機会の多いツールです。
主役として登場する機会は少ないですが、素材サイトからダウンロードしたファイルを開くために何だかんだ必要になってゆきます。

補足①:Adobe製デザインツールの入手方法は?

これまでに紹介したデザインツールは、いずれもAdobeの「Creative Cloud」というサービスを通してサブスク形式で利用できます。Creative Cloudにおける各デザインツールの利用プランと価格は以下の通りです。



▼Creative Cloudのプランと価格

①Adobe XD

スタータープラン:無料

単体プラン:1,298円(税込)/月額

②Photoshop

単体プラン:2,728円(税込)/月額

フォトプラン:2,178円(税込)/月額

③Illustrator

単体プラン:2,728円(税込)/月額

上記プランの価格はキャンペーンの実施によって変わる場合もあります。詳しくは公式サイトからご確認下さい。

▼公式サイト

Creative Cloud

上記のCreative Cloudを通して契約すれば、デザインツール以外にも「100GBのクラウドストレージ」「Adobeフォント」などの各種特典も利用できる様になります。
お得なキャンペーン情報もお見逃し無く!

補足②:全てのツールを所有しておくのが推奨です

上記に紹介したAdobeのデザインツールですが、実際のお仕事をするにあたっては基本的には全てのツールを所有しておくのが推奨です。Adobe Creative Cloudでは「コンプリートプラン」に契約することで、XD、Photoshop、Illustratorを含む全てのツールが利用できます。

Creative Cloudアプリのプランと価格
Creative Cloudアプリのプランと価格
なぜ全てのデザインツールを所有するのが推奨かというと、単純にWeb制作で扱われるあらゆるデザインデータや制作環境に対応できる様になるからです。

Web制作で利用するデザインツールの選択は、Web制作会社やチームの方針によって様々に変わってゆきます。また、Webサイトを依頼するクライアントによっては、予め指定された形式で納品データを作成する必要もあります。



このため所有していないAdobe製品があると「渡されたデータを利用する」「指定されたデータを作成する」といった場面で支障がでる可能性があるほか、クライアントによってはそもそも依頼を頂けないといった可能性もあるため注意が必要です。



コストはかかりますが、しかし全てのツールを所有すれば上記の問題がクリアできるほか、様々なメリットが発生します。



▼全てのツールを所有するメリット

  • 条件に左右されずにスムーズに業務を進めることが出来る
  • デザインツールをフル活用出来るのでクリエイティブの質が上がる
  • 対応の間口が広い作業者として営業のアピールポイントになる
筆者もCreative Cloudのコンプリートプランを5年以上継続利用しており、Web制作・ブログ運営・動画制作といったクリエイティブ作業全般でAdobe製ツールを活用しています。

以上のことから、Web制作でお仕事をするならAdobe製品は全て所有しておくのが推奨となります。Adobe Creative Cloudでは【コンプリートプラン】に契約することで全てのツールが利用できる様になります。



▼公式サイト

Creative Cloudのプランと価格

月々の費用はかかりますがコスト以上に『何でも作れる』環境に強みを感じています。もちろん仕事でもお世話になりっぱなしです!

Web制作ツール紹介:その他

Web制作ツール紹介:その他

このほかWeb制作で役立つツール・ソフトを紹介してゆきます。

ツール①:Googleスプレッドシート

Web制作における進捗やデータの管理では【Googleスプレッドシート】を便利に使うことができます。

Web制作ツール_Googleスプレッドシート
Googleスプレッドシート

Web制作では、次のような作業や目的でGoogleスプレッドシートが活用できます。



▼Googleスプレッドシートの活用例

  • Web制作のプロジェクトの概要や、タスクなどの進捗を管理する
  • コンテンツ一覧や機能一覧など、サイトの企画や設計に関する作業
  • Webサイトに掲載する実績や、商品などの情報を一覧で管理する



▼公式サイト

Googleスプレッドシート

基本的な管理はGoogleスプレッドシートで全て解決できますよ!目的によって「ドキュメント」や「スライド」も便利に使うことができます。

ツール②:メールソフト

Web制作を行うならメールソフトを導入してゆきましょう。メールソフトには無料でダウンロードできてWindows・Macの両方で使える「Thunderbird(サンダーバード)」がおススメです。

Web制作ツール_Thunderbird(サンダーバード)
Thunderbird(サンダーバード)

▼公式サイト

Thunderbird(サンダーバード)



Web制作では「お問い合わせ」や応募フォーム」といった【Webフォーム】の実装を多く行います。そんなWebフォームの実装では頻繁にメールの送受信を行う機会も多くあるため、Thunderbirdの様なメールソフトを導入しておくと作業がしやすくなります。



メールソフトThunderbirdのインストール方法や使い方については次の記事が参考になります。

Thunderbirdには、かれこれ10年以上お世話になっています。個人的には「メールソフトならThunderbird一択!」と言えるほどおススメできます。

まとめ:Web制作の作業環境を整えてゆこう

今回は、WEB制作に使用されるソフト・ツールについて詳しく解説してゆきました。



▼この記事の解説内容

  1. HTML&CSSなどの制作で必要な「コーディング」関連のツール
  2. Webサイトの構築で使う「WordPress(ワードプレス)」について
  3. Webサイトの公開に必要な「サーバー・ドメイン」関連のツール
  4. Webデザインに使用する「デザインツール」について
  5. このほかWeb制作の管理で役立つツール



WEB制作の学習のために、ぜひ参考にして頂きたい情報です。



このほか当ブログでは【Web制作】で役立つ情報を掲載しています。あわせてご活用くださいませ。



▼関連記事を探す

Web制作の記事一覧

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事