Web制作ツール

Web制作に便利な無料ツール・サービスまとめ【初心者向け】

Web制作を始めようと思ったとき、

「どんなツールを使えばいいんだろう？」

「できるだけお金をかけずに始めたい」

「無料で使える便利なサービスを知りたい」

と悩むことがあるかもしれません。

Web制作では、コードを書くためのツールだけではなく、デザインを作るツールや画像素材を探すサービス、Webサイトを確認するブラウザなど、さまざまなツールを使います。

ただ、最初からすべてのツールをそろえる必要はありません。

まずは必要なものから使い始めて、Web制作に慣れてきたら少しずつ使えるツールを増やしていけば大丈夫です。

この記事では、Web制作を始めたい初心者の方に向けて、無料で利用できるツールやサービスを中心に紹介します。

※無料プランの内容や利用条件は変更される場合があります。利用する際は、各サービスの公式サイトで最新の料金・機能・利用規約・ライセンスをご確認ください。

Web制作ではどんなツールが必要？

Web制作では、目的によって使うツールが変わります。

例えば、コードを書くときとデザインを作るときでは、使用するツールが違います。

代表的なものを簡単にまとめると、次のようになります。

目的ツール・サービス
コードを書くVisual Studio Code
Webサイトを確認するGoogle Chrome
Webデザインを作るFigma
画像やバナーを作るCanva
配色を考えるカラーパレットツール
写真素材を探すUnsplashなど
アイコンを探すFont Awesomeなど
コードを管理するGitHub
ブログ・Webサイトを管理するWordPress

このように、それぞれのツールには役割があります。

とはいえ、Web制作を始めたばかりなら、すべてを使えるようになる必要はありません。

まずはコードを書くための環境と、Webサイトを確認する環境を用意するところから始めてみましょう。

まず入れておきたい無料ツール

Visual Studio Code

Web制作でコードを書くなら、Visual Studio Code、通称「VS Code」が便利です。

VS Codeは、HTMLやCSS、JavaScript、PHPなどのコードを編集できるコードエディターです。

Webサイトを制作するときには、

index.html
style.css
script.js

といったファイルを作ることがあります。

VS Codeでは、これらのファイルを一つの制作フォルダでまとめて管理しながら編集できます。

また、必要に応じて拡張機能を追加できるため、自分の制作スタイルに合わせて環境を整えていくこともできます。

Web制作を始めるためのコードエディターを探しているなら、候補の一つとして使ってみてもよいと思います。

実際にVS Codeを使い始めて感じたことや、初心者におすすめしたい理由については、こちらの記事で詳しく紹介しています。

【ここに「VS Codeを使い始めて感じたこと｜初心者におすすめな理由」の内部リンクを設置】

Webサイトの確認に便利な無料ツール

Google Chrome

Web制作では、作ったWebサイトがどのように表示されるのかをブラウザで確認する必要があります。

そのために使えるのがGoogle Chromeです。

HTMLやCSSを書いただけでは、実際の画面でどのように見えるのか分かりません。

コードを書いたらブラウザで確認し、

コードを書く
↓
ブラウザで確認する
↓
修正する
↓
もう一度確認する

という作業を繰り返します。

また、Chromeにはデベロッパーツールがあり、WebページのHTMLやCSSを確認したり、スマートフォンサイズでの表示を確認したりすることもできます。

Web制作を学ぶなら、ブラウザで実際の表示を確認する習慣をつけておくと便利です。

Webデザインに便利な無料ツール

Figma

Figmaは、Webサイトのデザインやワイヤーフレームを作るときに便利なツールです。

例えば、

  • Webサイトのレイアウトを考える
  • ワイヤーフレームを作る
  • 文字の大きさを決める
  • 色を決める
  • ボタンをデザインする
  • カードをデザインする
  • Webページ全体のデザインを作る

といった作業に利用できます。

Web制作では、いきなりコードを書き始めるのではなく、先にサイトの構成やデザインを考えておくことで、制作を進めやすくなる場合があります。

Figmaを使ってデザインを整理してから、VS CodeでHTMLやCSSを書いていくという流れもできます。

Webサイト制作の基本的な流れについては、こちらの記事でも紹介しています。

【ここに「Webサイト制作の基本的な流れを初心者向けに解説」の内部リンクを設置】

Canva

Canvaは、画像やバナーなどを作るときに便利なデザインツールです。

Webサイトの制作だけではなく、

  • ブログのアイキャッチ画像
  • SNS用画像
  • バナー
  • プレゼンテーション資料
  • 簡単な画像編集

など、さまざまな用途に利用できます。

Web制作をしていると、Webサイト本体だけではなく、掲載する画像を用意する場面もあります。

そのため、画像を簡単に作成できるツールを一つ知っておくと便利です。

配色・カラー選びに便利な無料ツール

Webサイトを作っていると、

「どんな色を組み合わせればいいんだろう？」

と迷うことがあります。

そんなときには、カラーパレットを作成したり、配色を探したりできるサービスが便利です。

例えば、

  • メインカラーを決める
  • サブカラーを決める
  • アクセントカラーを決める
  • 色の組み合わせを探す
  • カラーコードを確認する

といったことができます。

Webサイトの配色を自分で考えるのが難しいときは、配色ツールを参考にしてみるのもおすすめです。

ただし、他のWebサイトの配色をそのままコピーするのではなく、自分のサイトの目的や雰囲気に合わせて調整することが大切です。

無料の画像素材サイト

Webサイトを制作するときには、写真やイラストなどの素材が必要になることがあります。

自分で撮影した写真を使う方法もありますが、無料の素材サイトを利用する方法もあります。

Unsplash

Unsplashは、さまざまな写真素材を探せるサービスの一つです。

Webサイトの背景やブログ記事などに使用する写真を探すときに便利です。

写真素材を探すときには、検索した画像を何でも自由に使えるとは限りません。

利用する前に、必ず各素材サイトの利用規約やライセンスを確認しましょう。

無料素材を使うときに確認したいこと

無料素材を利用するときは、

  • 商用利用できるか
  • クレジット表記が必要か
  • 加工して利用できるか
  • 再配布が禁止されていないか
  • 利用できる範囲に制限がないか

などを確認することが大切です。

「無料」と書かれていても、すべての用途で自由に利用できるとは限りません。

特にブログやアフィリエイトサイトなどで利用する場合は、利用規約を確認してから使用するようにしましょう。

アイコン・Web素材に便利なサービス

Font Awesome

Webサイトでは、検索ボタンや矢印、SNSアイコンなど、さまざまなアイコンを使用することがあります。

Font Awesomeは、Webサイトなどで利用できるアイコンを提供しているサービスです。

例えば、

  • 検索
  • メニュー
  • 矢印
  • メール
  • SNS関連のアイコン

など、Webサイトで使いやすいアイコンを探すことができます。

ただし、利用できるアイコンや条件はプランやライセンスによって異なる場合があります。

実際に利用する際は、公式サイトで最新の利用条件を確認しましょう。

コード管理に便利な無料サービス

GitHub

Web制作を続けていると、制作したコードを保存したり、変更履歴を管理したりしたくなることがあります。

そんなときに利用できるのがGitHubです。

GitHubでは、コードや制作ファイルを管理できます。

例えば、

  • コードを保存する
  • 変更履歴を確認する
  • 過去の状態に戻す
  • 制作物を共有する
  • ポートフォリオとして利用する

といったことができます。

Web制作を始めたばかりなら、最初からGitHubを完璧に使える必要はありません。

HTMLやCSSでの制作に慣れてきてから、少しずつGitやGitHubについて学んでいく方法でも大丈夫です。

ブログ・Webサイト運営に便利なWordPress

WordPress

Webサイトやブログを運営する場合には、WordPressも便利な選択肢の一つです。

WordPressを利用すると、HTMLやCSSを毎回直接編集しなくても、管理画面から記事を作成したり、ページを管理したりできます。

また、テーマやプラグインを利用することで、Webサイトのデザインや機能を追加することもできます。

ただし、WordPressそのものが無料で利用できる場合でも、Webサイトをインターネット上で公開するためには、レンタルサーバーやドメインなどの費用が必要になる場合があります。

そのため、

「WordPress＝Webサイト運営にかかる費用がすべて無料」

というわけではない点には注意しましょう。

Web制作初心者なら最初に何を使えばいい？

ここまでさまざまなツールを紹介しましたが、最初から全部使う必要はありません。

Web制作を始めたばかりなら、まずは次のような環境から始めるのがおすすめです。

パソコン
   ↓
Google Chrome
   ↓
Visual Studio Code
   ↓
HTML・CSSを学ぶ

HTMLやCSSに慣れてきたら、必要に応じて、

Figma

でデザインを作ってみたり、

Canva

で画像やバナーを作ってみたり、

GitHub

でコードを管理してみたりするとよいでしょう。

このように、必要になったタイミングで少しずつツールを増やしていけば大丈夫です。

目的別に選ぶならどのツール？

ここまで紹介したツールを、目的別にまとめてみます。

やりたいことツール・サービス
HTMLを書くVisual Studio Code
CSSを書くVisual Studio Code
JavaScriptを書くVisual Studio Code
PHPを書くVisual Studio Code
Webサイトを確認するGoogle Chrome
HTMLやCSSを確認するGoogle Chrome
Webデザインを作るFigma
ワイヤーフレームを作るFigma
バナーを作るCanva
ブログ画像を作るCanva
配色を考えるカラーパレットツール
写真素材を探すUnsplashなど
アイコンを探すFont Awesomeなど
コードを管理するGitHub
ブログを運営するWordPress

この表を見ると分かるように、ツールごとに役割が違います。

「Web制作をするなら全部必要」と考えるのではなく、自分が今やりたいことに合わせて選んでみましょう。

Web制作のツールは少しずつ増やせばOK

Web制作を始めたばかりの頃は、知らないツールがたくさんあるように感じるかもしれません。

私自身もWeb制作を学ぶ中で、少しずつ使うツールが増えてきました。

最初からすべてを覚えようとするのではなく、

HTML・CSSを学ぶ
      ↓
VS Codeを使う
      ↓
Chromeで確認する
      ↓
デザインも学ぶ
      ↓
Figmaを使う
      ↓
画像が必要になる
      ↓
Canvaなどを使う
      ↓
コードを管理したくなる
      ↓
GitHubを使う

というように、必要になったものから覚えていく方法がおすすめです。

ツールを使うこと自体が目的になってしまうと、Web制作の学習が進みにくくなることもあります。

「何を作りたいのか」を考えながら、そのために必要なツールを選んでいきましょう。

無料ツールを使うときに注意したいこと

無料で利用できるツールはとても便利ですが、いくつか注意しておきたいことがあります。

無料プランの範囲を確認する

無料で利用できるサービスでも、

  • 保存容量
  • 利用できる機能
  • 使用できる素材
  • ダウンロードできる形式
  • 利用できる回数

などに制限がある場合があります。

使い始める前に、無料で利用できる範囲を確認しておきましょう。

商用利用できるか確認する

ブログやアフィリエイトサイト、仕事で制作するWebサイトなどに素材を使用する場合は、商用利用について確認することが重要です。

特に画像・イラスト・アイコンなどは、サービスごとに利用条件が異なります。

利用規約を確認する

「無料だから自由に使える」とは限りません。

サービスを利用するときは、公式サイトの利用規約やライセンスを確認するようにしましょう。

サービスの仕様変更に注意する

オンラインサービスは、料金や機能が変更されることがあります。

以前は無料だった機能が有料になったり、無料プランの内容が変更されたりする可能性もあります。

そのため、長期間利用するサービスについては、ときどき公式サイトで最新情報を確認しておくと安心です。

Web制作に必要なツールを選ぶときのポイント

最後に、ツールを選ぶときに意識したいポイントを紹介します。

必要な機能があるか

まずは「何をしたいのか」を考えましょう。

HTMLを書くためのツールが必要なのか、デザインを作るツールが必要なのかによって、選ぶものは変わります。

使いやすいか

高機能なツールでも、自分にとって使いにくければ、制作を続けることが難しくなる場合があります。

実際に使ってみて、自分に合っているか確認してみましょう。

情報を調べやすいか

初心者のうちは、分からないことがたくさん出てきます。

そのため、使い方を調べやすいツールを選ぶことも大切です。

長く使えそうか

Web制作を続ける予定なら、今だけではなく、これからも使っていけそうかを考えて選ぶのもおすすめです。

まとめ

今回は、Web制作に便利な無料ツール・サービスを初心者向けに紹介しました。

Web制作では、コードを書くためのツールだけではなく、デザイン、画像制作、素材探し、コード管理など、目的に応じてさまざまなツールを使います。

特に最初は、すべてのツールをそろえる必要はありません。

まずは、

Visual Studio Codeでコードを書く

↓

Google Chromeで表示を確認する

という基本的な環境から始めてみましょう。

そして、Webデザインを学びたくなったらFigma、画像を作りたくなったらCanva、コードを管理したくなったらGitHubというように、必要なものを少しずつ追加していけば大丈夫です。

無料で使えるツールは、Web制作を始めるときの心強い味方になります。

ただし、無料プランの範囲や利用規約、商用利用、素材のライセンスなどはサービスごとに異なるため、実際に利用するときは公式サイトの最新情報を確認するようにしましょう。

私自身もWeb制作を学びながら、実際に使って便利だったツールやサービスを少しずつ増やしています。

これからもNoah Labでは、Web制作を学ぶ中で使っているツールや、実際に使って感じたことなどを紹介していきます。

Web制作を始めたい方が、自分に合ったツールを見つけるきっかけになればうれしいです。

ゆるり、学んで、つくって。

Noah Labと一緒に、少しずつWeb制作を楽しんでいきましょう。

Web制作におすすめのサービス

Web制作を始めるときに役立つサービスを紹介しています。 気になるものがあればチェックしてみてください。

サービスをチェックする

Related

関連記事