Web制作ツール

Web制作で使っているツールを紹介｜初心者向けおすすめ環境

Web制作を始めようと思ったとき、「どんなツールを使えばいいんだろう？」と迷うことがあるかもしれません。

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

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

まずは必要なものから少しずつ使い始めて、自分の制作スタイルに合った環境を作っていくことが大切です。

この記事では、私がWeb制作で使っているツールを中心に、それぞれの役割や使い方を初心者向けに紹介します。

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

Web制作では、一つのツールですべての作業をするわけではありません。

「コードを書く」「デザインを考える」「表示を確認する」など、それぞれの作業に合わせてツールを使い分けます。

まずは、どんなツールがどのような役割を持っているのかを見てみましょう。

ツール主な用途
パソコンWeb制作全体の作業
WebブラウザWebサイトの表示・確認
Visual Studio CodeHTML・CSS・JavaScriptなどを書く
FigmaWebサイトのデザインやワイヤーフレームを作る
WordPressWebサイトやブログを管理する
GitHubコードや制作ファイルを管理する

それぞれ役割が違うので、最初は少し分かりにくく感じるかもしれません。

ここから、一つずつ紹介していきます。

まず用意したいWeb制作の基本環境

パソコン

Web制作をするためには、基本的にパソコンを使います。

HTMLやCSSなどのコードを書いたり、ブラウザでWebサイトを確認したり、画像を編集したりと、さまざまな作業をパソコンで行います。

WindowsでもMacでもWeb制作を始めることができます。

最初から非常に高性能なパソコンが必要というわけではなく、自分が作りたいWebサイトや使用するソフトに合わせて選ぶことが大切です。

Webブラウザ

Webブラウザは、作ったWebサイトを実際に表示して確認するために使います。

代表的なブラウザには、Google Chrome、Microsoft Edge、Safari、Firefoxなどがあります。

Web制作では、コードを書いたらブラウザで表示を確認する、という作業を何度も繰り返します。

コードを書く
↓
ブラウザで確認する
↓
問題があれば修正する
↓
もう一度確認する

特にWeb制作では、パソコンだけではなくスマートフォンでどのように表示されるのかを確認することも大切です。

Visual Studio Code

HTMLやCSS、JavaScriptなどのコードを書くために使っているのが、Visual Studio Codeです。

Visual Studio Codeは、Microsoftが提供しているコードエディターです。

コードを書くためのさまざまな機能が用意されていて、HTMLやCSSだけではなく、JavaScriptやPHPなど、さまざまな言語の編集に利用できます。

Visual Studio Codeでできること

  • HTMLを書く
  • CSSを書く
  • JavaScriptを書く
  • PHPを書く
  • ファイルを管理する
  • 拡張機能を追加する
  • コードを編集する
  • 制作したWebサイトのファイルをまとめて管理する

Web制作を始めたばかりの場合でも、まずHTMLやCSSを書くためのコードエディターとして使い始めることができます。

私自身も、Webサイトを制作するときにVisual Studio Codeを使用しています。

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

Google Chrome

Webサイトの表示確認には、Google Chromeを使用しています。

HTMLやCSSを書いたあと、ブラウザで実際の表示を確認することで、レイアウトや文字の大きさ、ボタンの位置などをチェックできます。

また、Google ChromeにはWeb制作で役立つ「デベロッパーツール」が用意されています。

デベロッパーツールとは？

デベロッパーツールは、WebページのHTMLやCSS、JavaScriptなどを確認できる機能です。

Webサイトの表示がおかしいときに原因を調べたり、CSSを一時的に変更して表示を確認したりすることができます。

Web制作に慣れてくると、とても便利な機能です。

Figma

Webサイトのデザインを考えるときには、Figmaも便利なツールです。

Figmaでは、Webサイトのレイアウトを考えたり、ワイヤーフレームを作ったり、実際のデザインを作ったりすることができます。

Figmaでできること

  • Webサイトのレイアウトを考える
  • ワイヤーフレームを作る
  • 色を決める
  • フォントを決める
  • ボタンをデザインする
  • カードなどのパーツを作る
  • Webページ全体のデザインを作る

Webサイトをいきなりコードで作り始めるのではなく、先にデザインを考えておくことで、完成したWebサイトをイメージしやすくなります。

前回の記事では、Webサイト制作の基本的な流れについて紹介しました。

デザインやワイヤーフレームがWebサイト制作の中でどのような役割を持っているのか知りたい方は、こちらの記事も参考にしてみてください。

WordPress

ブログやWebサイトを運営するときに利用しているのがWordPressです。

WordPressは、Webサイトやブログのコンテンツを管理するためのCMSです。

記事を書いたり、固定ページを作ったり、テーマを変更したり、プラグインを使って機能を追加したりすることができます。

WordPressでできること

  • ブログ記事を書く
  • 固定ページを作る
  • Webサイトのデザインを変更する
  • 画像を管理する
  • カテゴリーやタグを設定する
  • プラグインで機能を追加する
  • Webサイトを管理する

WordPressは、コードを書かなくてもWebサイトを作ることができます。

一方で、HTMLやCSSなどの知識があると、テーマをカスタマイズしたり、より細かくデザインを調整したりすることもできます。

Web制作を学びながらWordPressを使ってみることで、コードとWebサイト運営の両方を経験できます。

GitHub

Web制作で作ったコードやファイルを管理するときには、GitHubも利用できます。

GitHubは、制作したコードを保存したり、変更履歴を管理したり、他の人と共有したりできるサービスです。

GitHubでできること

  • コードを保存する
  • 制作物を管理する
  • 変更履歴を残す
  • 以前の状態を確認する
  • 制作したコードを共有する
  • ポートフォリオとして利用する

GitHubは、Web制作を始めたばかりの頃には少し難しく感じるかもしれません。

最初からすべてを理解する必要はないので、HTMLやCSSなどの制作に慣れてから少しずつ触ってみるのもおすすめです。

Web制作ではツールをどう使い分ける？

ここまで紹介したツールは、それぞれ違う役割を持っています。

例えば、Webサイトを一から作る場合は、次のように使い分けることができます。

① Webサイトの構成を考える
↓
② Figmaでワイヤーフレームやデザインを作る
↓
③ Visual Studio CodeでHTML・CSSを書く
↓
④ Google Chromeで表示を確認する
↓
⑤ 必要に応じてJavaScriptなどを追加する
↓
⑥ GitHubでコードを管理する
↓
⑦ WordPressなどを使ってWebサイトを運営する

もちろん、すべてのWebサイト制作でこの順番になるわけではありません。

制作するWebサイトの種類や、自分の制作方法によって使うツールは変わります。

大切なのは、それぞれのツールが何のためにあるのかを理解することです。

初心者は全部のツールをそろえる必要がある？

結論からいうと、最初からすべてのツールをそろえる必要はありません。

Web制作を始めるだけなら、まずはパソコン、Webブラウザ、コードエディターがあればHTMLやCSSの学習を始めることができます。

パソコン
↓
Webブラウザ
↓
Visual Studio Code
↓
HTML・CSSを学ぶ

その後、デザインを勉強したくなったらFigmaを使ってみたり、コードを管理したくなったらGitHubを使ってみたりと、必要になったタイミングで新しいツールを追加していけば大丈夫です。

まずは無料で使えるツールから始めてみる

Web制作を始めるときは、最初から有料のツールをたくさん購入する必要はありません。

まずは無料で利用できるツールを使って、実際にWeb制作を体験してみるのがおすすめです。

使ってみて「もっとこうしたい」と思ったときに、有料サービスや別のツールを検討しても遅くありません。

  • Visual Studio Code
  • Google Chrome
  • GitHub
  • Figmaの無料プランなど

ただし、サービスの料金や無料プランの内容は変更されることがあります。

利用する前には、それぞれの公式サイトで最新の情報を確認するようにしましょう。

Web制作のツール選びで意識したいこと

必要な機能があるか

まずは、自分が作りたいものに必要な機能があるかを確認します。

高機能なツールでも、自分が使わない機能ばかりなら、かえって使いにくく感じることがあります。

使いやすいか

長く使うことを考えると、自分にとって使いやすいかどうかも大切です。

実際に使ってみて、操作方法を覚えやすいものを選んでいきましょう。

情報を調べやすいか

分からないことがあったときに、公式ドキュメントや解説記事などを見つけやすいツールを選ぶのもポイントです。

Web制作では、分からないことを調べながら進めることが多いため、情報を探しやすい環境はとても重要です。

長く使えそうか

一度使い始めたら、できるだけ長く使えるツールを選ぶのもおすすめです。

ただし、「みんなが使っているから」という理由だけで選ぶ必要はありません。

実際に使ってみながら、自分に合った環境を見つけていきましょう。

まとめ

今回は、Web制作で使っているツールを初心者向けに紹介しました。

Web制作では、

パソコン
Webブラウザ
Visual Studio Code
Figma
WordPress
GitHub

など、さまざまなツールを使うことができます。

それぞれのツールには役割があり、コードを書くためのもの、デザインを作るためのもの、Webサイトを確認するためのもの、制作物を管理するためのものなどに分かれています。

最初からすべてを使いこなす必要はありません。

まずはVisual Studio CodeとWebブラウザを使ってHTMLやCSSを書いてみるところから始めて、必要になったタイミングで少しずつ新しいツールを取り入れてみましょう。

自分に合った制作環境を少しずつ作っていくことも、Web制作の楽しさの一つだと思います。

Noah Labでも、これから実際に使っているツールやサービスについて、使い方や感じたことなどを紹介していきます。

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

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

サービスをチェックする

Related

関連記事

関連記事はまだありません。