プログラミングで人生を豊かに楽しく

WEB制作で必要なツール・ソフトを徹底解説します【初心者は必見】

みやしも WEB制作

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

▼この記事を書いた人

Twitter|miyashimo_eng

フリーランスのみやしもです。WEB制作・システム開発などの経験を活かして、初心者に役立つIT知識を発信してゆきます。

WEB制作に使用されるソフト・ツールについて徹底解説します

WEB制作に必要なソフトやツールについて



WEBサイトの制作では『どんなソフト・ツールが必要なの?』『始めるには何を揃えればいいの?』といった疑問をお持ちの方も多いと思います。



そこで今回は、現役フリーランスの「みやしも」が実際のWEB制作で使用されるソフト・ツールについて徹底的に解説。WEBデザイナーやエンジニアなどのクリエイティブ職を目指すみなさんの期待に応える内容となっています。



▼この記事の解説内容

  • 定番ツール『WordPress(ワードプレス)』について
  • WEBサイトの公開に必要になる『サーバー・ドメイン』について
  • ファイルのアップロードに使用する『FTPソフト』について
  • デザイン制作で使用するAdobeの『デザインツール』について
ただ単純に『必要なもの』を紹介するだけでなく、実際にどの様に業務に関わるのか?といった側面も踏まえつつ解説を行います。
この記事を読んでWEB制作の背景知識を身に付けましょう!

WEB制作の定番ツール「WordPress(ワードプレス)」について

WordPress



WEBサイトの制作において、無くてはならないのが『WordPress(ワードプレス)』の存在です。

WordPressは「WEBサイト」の土台として機能するソフトウェアです

WordPress(ワードプレス)とはWEBサイトやブログの構築に利用できるソフトウェアです。オープンソースとして公開されているため、誰でも無料で利用することが出来ます。



WordPressの編集画面イメージ

WordPressの編集画面



元々は「ブログ」を構築するために開発されたソフトですが、更新機能が備わっていることから『CMS(コンテンツ・マネジメント・システム)』として注目をあつめ、現在では多くのWEBサイトの管理画面にWordPressが採用されています。

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

オリジナルの『テーマ』を作ることで自由なサイト表現ができます

WordPressには『テーマ』と呼ばれるデザインを自由に入れ替えることが出来る仕組みがあります。

WEB制作では、この『テーマ』の仕組みを介すことで、WordPress上にオリジナルのWEBサイトを制作できる様になります。

WordPressのテーマについて

WordPressのテーマ


WordPressとテーマの関係は、それぞれ「WordPress=ゲーム機の本体」「テーマ=ゲームソフト」のようにイメージすると分かりやすいと思います。
WEBサイトを制作することは、オリジナルのWordPress『テーマ』を作ること。と言い換えることも出来ます!

WEB制作業界でも「定番ツール」となっています

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

WEBに馴染みのない人でも『名前は知っているよ!』という方も多いと思います。
実際に多くのWEB制作会社でも、WEBサイトの構築手法としてWordPressが採用されています。このためにも制作会社やフリーランスを問わず『習得必須』とも言えるべき定番ツールとなっています。

WordPressを使ったサイト制作で必要なスキルは?

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



▼WEBサイト制作に必要なスキル

  • HTML・CSS・JavaScriptのコーディングスキル
  • プログラミング言語『PHP』の基礎的なスキル
  • WordPress『オリジナルテーマ』の作成方法



これらのスキルは、例えば「TechAcademy」などのプログラミングスクールから学ぶことが出来ます。



TechAcademy - Wordpressコース

とはいえ現在は書籍やネットにも情報が充実しているため独学からでも学習ができる様にもなってきています。

WEBデザイナーやエンジニアになりたいと思ってプログラミングスクールを利用する方も多いですが、まずは無料で学習を初めてみるのも良いと思います。



独学に限界を感じて挫折しそうだったり、質問できる環境で勉強したい!と思ったタイミングでプログラミングスクールを検討するのも決して遅くはありません。



WordPressの記事一覧

僕のブログにも無料で学べるコンテンツを沢山用意しています。ぜひ利用していって下さいね!

WEBサイトの公開に必要な「サーバー」と「ドメイン」について

WEBサイトを公開する方法



作成したWEBサイトを公開するには『サーバー』や『ドメイン』といった存在が必要です。

WEBサイトとサーバー・ドメインの関係は?

サーバー・ドメインは『家を建てること』に例えると分かりやすく、サーバーは【土地】ドメインは【住所】といった様に、いずれもWEBサイトの置き場所として機能します。



WEBサイトの公開に必要なもの

WEBサイトの公開に必要なもの



サーバーやドメインは『レンタルサーバー』というサービスを利用することで用意ができます。



また、先にも登場した「WordPress(ワードプレス)」とは、実際は上記の『サーバー』に”インストール”する形で利用してゆきます。

サーバー・ドメインを用意する方法

サーバー・ドメインを用意する方法として、次の記事を紹介します。

記事の通りに作業を行えば、これまでに登場したWordPress・サーバー・ドメインといったツールがまとめて揃い、実際のWEBサイトの動作環境にさわれる様になります。

WordPressの『テーマ』はいつでも入れ替え可能なので、最終的には自作したテーマに差し替えてオリジナルサイトを構築!なんて使い方もできます。
概念的なことばかりでいまいちピンと来ないな...!なんて方にこそおススメなアプローチです。ぜひ試してみて下さいね!

ファイルをアップロードする「FTPソフト」について

ファイルをアップロードする「FTPソフト」について



WEBサイトの設置先である、サーバーにファイルをアップロードするには『FTPソフト』を使用します。

▼FTPソフトとは
FTP(File Transfer Protocol)という通信を利用して、サーバーとPC(クライアント)間でファイルの送受信をするためのソフトのこと。

FTPソフトの多くは無料で利用する事ができ、自分のPCにインストールする形で利用します。



▼一般的なFTPソフト

  • FFFTP(Windows)
  • WinSCP(Windows)
  • FileZilla(Windows/Mac)
  • Cyberduck(Windows/Mac)
おすすめのFTPソフトは、ずばり『FileZilla(ファイルジラ)』です!

FileZillaは無料かつ、Windows・Macの両方で使用することができます。また、各レンタルサーバーでも設定方法が紹介されているため、初心者でも扱いやすい定番のFTPソフトとなっています。



FTPソフト『FileZilla』の使い方や、ファイルのアップロード方法には次の記事が参考になります。

デザイン・イラスト制作で使う『Adobe』のソフトウェア

デザイン・イラスト制作で使う『Adobe』のソフトウェア



WEBサイトのデザイン業務で欠かせないのが『デザインツール』の存在です。WEB制作では主には次の成果物を目標に、デザインツールを使って作業を進めてゆきます。



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

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

WEB制作で主流のデザインツール3つ

現在のWEB制作では、主には次に挙げる「Adobe」製のデザインツールが主流になっています。



▼WEB制作で使用されるデザインツール

  • XD(エックスディー)
  • PhotoShop(フォトショップ)
  • Illustrator(イラストレーター)



なぜ「Adobeのソフトが主流なの?」という点についてですが、かんたんな理由として『デザイン制作に十分な機能性が備わっている』こと、『制作したデザインのデータの受け渡しができる』ことの2つが挙がります。

このためにもWEB制作における『標準的なデザインツール』として広く浸透しています!

Adobeのデザインツールを入手する方法は?

上記のデザインツールは「Adobe CC(CreativeColud)」というサービスを通して、サブスクリプション形式で利用できる様になっています。



▼Adobeのデザインツール

XD

公式サイト:Adobe XD

本体価格:1,298円(税込)/月

※スタータープランなら無料で利用可能

Photoshop

公式サイト:Adobe Photoshop

本体価格:2,728円(税込)/月

Illustrator

公式サイト:Adobe Illustrator
本体価格:2,728円(税込)/月

※上記の掲載料金は2021年4月12日現在の内容となります

上記はいずれもAdobe CCを通して『単体プラン』として契約できます。また「100GBのクラウドストレージ」や「Adobeフォント」といった各種サービスも利用できる様になります。
どれかひとつ所有するだけでもWEBデザインには十分な作業環境が用意できます!

フリーソフトはNG?業務ではAdobeのソフトを使おう!

一方でデザイン・イラスト用のソフトには、無料で利用できる「フリーソフト」も数多く存在します。



▼デザイン・イラスト用フリーソフト

  • GIMP(ギンプ)・・・Photoshopの代替として
  • Inkscape(インクスケープ)・・・Illustratorの代替として
業務ではデータの互換性が失われたり、納品データが作成できないなどの問題を回避するために基本的にはフリーソフトの使用は「NG」とされています。

フリーソフトは無料で利用できる点が魅力的ではありますが、使用する場合はあくまで個人の範囲にとどめておくのが無難と言えます。

お仕事でWEBデザインをするなら、Adobeのデザインツールの使い方を学んでゆきましょう!

コンプリートプランが最強!あらゆる制作条件に適応できます

上記に紹介したAdobeのデザインツールですが、最終的にはすべてのデザインツールを所有しておくのが推奨です。

Adobe CCでは『コンプリートプラン』に契約することで全てのツールが利用できる様になります。

AdobeCCのプランと価格

Adobe CCのプランと価格



▼公式サイトはこちら

Creative Cloudのプランと価格

なぜ全てのデザインツールを所有するのが推奨されるかというと、WEB制作で扱われるあらゆるデザインデータや、制作環境に対応できる様になるからです。

WEB制作ではデザインツールの選択も企業・チームによって様々ですし、また最終的な納品データの形式もお客様の希望によって変わってゆきます。



全てのAdobe製デザインツールを所有すれば上記のような条件に左右されずに作業できる様になります。一方では『対応の間口が広い作業者』として制作会社やお客様へのアピールポイントとして利用できるメリットも発生します。

デザインを作成する『デザイナー』でも、作成されたデザインを扱う『エンジニア』や『ディレクター』でも同じことが言えると思います。

ちなみに筆者みやしもは、コンプリートプランを3年以上継続利用しています。WEB制作・動画制作・ブログ運営などのクリエイティブ作業全般にAdobeのツールを役立てています。
月々の費用はかかりますが、コスト以上に『何でも作れる』環境に強みを感じています!

Adobe CCをお得に利用する方法は?

「TechAcademy」などのプログラミングスクールでは、AdobeCCのコンプリートプランが3カ月無償で利用できる特典が用意されています。

Adobe社が新たなクリエイターのサポートを目的にカリキュラム内で使用するAdobe Creative Cloud コンプリートプランを3ヶ月分無償提供
引用:
TechAcademy

AdobeCCのコンプリートプランが3カ月無償で利用できる特典

Adobe CCを3ヶ月分無償提供(TechAcademy)



上記特典を利用すれば、結果として「XD・Photoshop・Illustrator」を含む全てのAdobe製品が利用できる環境を整えることが可能となります。



▼デザインを優先的に学ぶなら

TechAcademy - Webデザインコース


▼WEBサイト制作をしっかり学ぶなら

TechAcademy - Webデザイン+WordPressセット

プログラミングスクールの利用が前提とはなりますが、『デザインツールの使い方を含めてWEB制作のスキルを短期間でガッツリ学びたい!』という方にとっては、デザインツールを入手できるお得な選択肢の一つとなっています。

まとめ:WEB制作に必要な作業環境を整えてゆこう

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



▼この記事の解説内容

  1. 定番ツール『WordPress(ワードプレス)』について
  2. WEBサイトの公開に必要になる『サーバー・ドメイン』について
  3. ファイルのアップロードに使用する『FTPソフト』について
  4. デザイン制作で使用するAdobeの『デザインツール』について



WEB制作の学習のために、ぜひ参考にして頂きたい情報です。このほか当ブログでは、WEB制作関連の情報を多く掲載しています。あわせてご活用くださいませ。



WEB制作の記事一覧

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

関連記事

最新記事