Web制作のおすすめツール紹介

こんにちは、Webデザイナーの小川です。

みなさんはWeb制作をするときに、どのようなツールを使っていますか？

今回は、駆け出しのWebデザイナーさんや学習中の方に向けて、実際に実務で使っているツールを紹介します。これに加えて、もしもおすすめのツールが使えない場合の代わりになるツールも、併せてご紹介します！

ぜひ最後までお付き合いください。

現役Webデザイナーが実務で使用しているツール紹介

サイトマップ

まず最初に、サイトの構造を示すサイトマップを作るツールを紹介します。

Google スプレッドシート

Googleのスプレッドシートは、数値の入力や表を作ることが主な用途に思われがちです。しかし、スプレッドシートでは簡単に四角などの図形の描写や文字の入力などが可能。そのため、サイトマップを制作するのにぴったりです。

サイトマップはわかりやすく、サイトの階層構造を示すためのものなので装飾などは必要ありません。そのため、そういった面でも、スプレッドシートで十分だと言えるでしょう。

ワイヤーフレーム/デザイン

次に、ワイヤーフレーム制作ツールとデザインカンプ作成ツールを紹介します。

Adobe XD

Adobe XDはワイヤーフレームだけでなく、デザイン制作でも使用します。

ワイヤーフレームに必要な情報であるテキストや画像を簡単に入れることができます。これに加えて、複数のアートボードを1つの画面で管理でき、複数のワイヤーフレームを常にチェックしながら作成できます。

また、ホバー時などの動きを設定することができるコンポーネントや、画面遷移を設定できるプロトタイプという機能があります。これらのおかげで、コードを組まずとも画面上でも動きがわかりやすく視覚化できます。

Adobe Photoshop

次に、同じくAdobe製品のPhotoshopです。

Photoshopは主にデザインの写真などの画像編集に使用しています。(ちなみに、Adobe XDでは細かな画像調整はできないので、別の編集ツールで補う必要があります。)

また、後述のIllustratorも画像編集は可能ですが、高度な切り抜きなどはやはりPhotoshopが必要になります。

Adobe Illustrator

次に、同じくAdobe製品のAdobe Illustratorです。

こちらは、主にサイトに使用するロゴやバナーの作成で使用しています。

代替ツール：Figma

FigmaはAdobe製品とは違い、無料で使用できるツールです。

こちらもワイヤーフレーム、デザインの両方を作成することができます。

Adobe XDとの大きな違いはあまりありません。しかし、FigmaはWebアプリケーションのため、ダウンロードする必要はなく、データはWeb上で管理します。

コーディング

最後に、コーディングで使用しているツールを紹介します。

Visual Studio Code

Visual Studio Codeは、プラグインが豊富であり、使いやすいのが特徴。

プラグインで自分の作業しやすい環境に整え使うことができ、作業にストレスを感じづらいです。

代替：テキストエディット(mac)

テキストエディットはMacに標準搭載されている無料アプリケーションです。

Visual Studio Codeと比較してしまうと、機能は大幅に制限されてしまいますがHTMLなどのコード作成作業を行うことができます。

まとめ

いかがでしょうか。

今回は、Web制作で使用しているツールを紹介させて頂きました。

しかし、紹介したツール以外にもどんどんと新しいツールが登場していますので、色々と試していきたいですね。