Webデザイナーを目指すことにしたんですけど、具体的にどんなソフトとかがあると良いですか？
便利なツールは色々あるよ！デザイン用とかサイト作成用とか目的に分けて紹介するね！
Webデザイナーを目指したい…けど具体的にどんなソフトを使えるようにしたら良いんだろう？
という疑問を持つ方は多いと思います。
会社やスクールなど人に聞くことができれば良いですが、独学で一人で勉強していると自分で調べるしかありません。
そこで、今回は僕自身がWebデザイナーとして活動していく上で実際に使っている便利ツール・ソフトを紹介したいと思います。
無料のものから有料のものまで幅広く紹介するので、自分に合ったものを使ってみてください。
デザインするのに便利なツール・ソフト
Webデザインのメインはやはりデザインすることです。
可能であれば以下のソフトは全て使えるようになっていた方が良いでしょう。
Figma
Webデザインのデザインイメージやワイヤーフレームを作成するツールなら無料で使えるFigmaが一番オススメです。
無料とは思えないほど使いやすく、プラグインを使えば効率的な作業もできるのでWebデザイナーならFigmaは使えるようになっておいて損はないソフトです。
少し前までは知名度が低く使い方が調べにくいというデメリットがありましたが、今は関連書籍も多くなってきたので初心者の方でも始めやすくなりました。
似たようなツールとしてAdobe XDがありますが、機能が似ており有料なので、それならFigmaでいいかなという感じです。
ただ、クラウドソーシングサイトなどを見ているとたまにXDでデザインデータを共有するなどの指定があるので、対応できる点が利点といえば利点です。
Illustrator・Photoshop
デザイナーといえばイラレとフォトショ。
代替ソフトとしてCanvaやAffinity Designerなどがありますが、やはりIllustratorとPhotoshopが一番使いやすいです。
これらのソフトが使えればWebサイト以外のデザインもできるので仕事の幅が広がりますし、後述する「Adobe Stock」と「Adobe Fonts」が使えるようになるので、年会費を払う価値はあるというのが僕の考えです。
Adobeコンプリートプランと単体で買うのを比較した記事があるので、安く済ませたい方は以下の記事も参考にしてください。
コンセプト
こちらはiPadのアプリの紹介です。
無制限のキャンパスに自由に書くことができるので、アイデア出しとラフデザインに重宝します。
Apple純正の「フリーボード」というアプリもありますが、使いやすさの面では「コンセプト」が圧勝しています。
機能に制限はありますが無料でも使えるので
- 無料で使ってみる
- 気に入ったら有料に切り替え
という流れで使ってみると良いでしょう。
月間サブスクリプションもありますが、買い切りで必要な機能を拡張できるプランもあるので自分に合わせて検討してみましょう。
細かいけれど、ユーザーに合わせてプランを用意してくれるの、本当にありがたい。
Colors
こちらもアプリの紹介です。
「Colors」という名前の通り色を決めてくれるアプリで、あと一色どうしようみたいな時に使えるお助けアプリです。
シンプルですが、色の数を変えたり、特定の色を固定できたりとかゆい所に手が届く仕様なので、デザイナーなら持っておいて損はないアプリだと思います。
サイト作成に便利なツール・ソフト
WebデザイナーといってもWebサイトの構築までを行うのが一般的でHTMLやCSSなどは使えるという人も多いと思います。
コーディングやサイトのテストなどに使えるソフトを３つピックアップしました。
僕の場合WordPressブログのデザインに使っているソフトでもあるので、ブロガーの方も検討してみてください。
Zed editor
コーディングに特化したテキストエディタで入力の補助やショートカットキーなどを駆使して効率よくHTMLなどのコーディングを書いていくことができるソフトです。
僕が現在使っているのは「Atom」というソフトなのですが、すでに開発終了しているので後継ソフトの「Zed editor」を紹介しておきます。
Atomが気になる方は下記ページが参考になると思います。
Filezilla
サーバーにファイルを送受信するためのFTPソフトです。
僕はWordPressブログに自分がデザインしたサイトのCSSファイルをアップロードするのに使っています。
STUDIOやWixといったプラットフォームでサイトを作成するのであれば必要ありませんが、Word Pressなどを利用する予定があるのであれば導入しておきましょう。
ダウンロードは下記ページが参考になると思います。
MAMP
こちらもWordPressに関連するソフトです。
「MAMP」を使えばローカル環境でWordPressのテストサイトを構築することができるので、レンタルサーバーなどがなくてもWordPressで作業することができます。
コーディングに問題があり、サイトにエラーが発生！なんてことがないように検討や作成はテストサイトで行い、完成後に本当のサイトにアップロードするという手順を踏んでおけば安心なので、こちらのソフトもWordPressでサイトを作成する予定があるなら導入しておきましょう。
使い方などはヒロコードさんの以下の動画が役立つと思います。
その他の便利ツール・ソフト
デザインともサイト作成とも微妙に違う、けど便利なツールたちです。
Google Chrome
ほとんどの方が使用していると思いますが、あえて紹介しておきます。
Google Chromeは既存のサイトのコードが簡単に確認できたり、拡張機能が便利なので検索ソフトでは一番オススメです。
以下に拡張機能のオススメを挙げておくので興味があれば入れてみてください。
- Chrome上でメモが書ける「grt memo」
- サイト上のカラーコードを見れる「カラーピッカーツールGeco」
- 手軽にサイトのスクリーンショットが撮れる「素晴らしいChatGPTスクリーンショット＆録画」
Adobe Stock＆Adobe Fonts
先ほど紹介したIllustratorやPhotoshopなどのAdobeユーザーなら誰でも使えるサービスです。
- 高品質な写真素材を使える「Adobe Stock」
- 高品質なフォントを使える「Adobe Fonts」
正直この二つだけでもAdobeユーザーになる価値があると思います。
Adobeユーザーでないのであれば、写真は「Unsplash」、フォントはフリーフォントやモリサワフォントなどを利用するという方法もあります。
FontAwesome
アイコン素材としても使えてWebサイトにも簡単に組み込める「Font Awesome」です。
簡単な図形であればCSSで描くという方法もありますが、InstagramやX（Twitter）などのブランドロゴもあるので、とりあえずお気に入り登録しておきましょう。
マネーフォワードクラウド会計
副業や個人事業主としてWebデザイナーになる場合、確定申告を行う必要があります。
マネーフォワードなら簡単にスマホで確定申告ができるのでオススメです。
その他にも会社員からフリーランスとして独立したときにやるべきことが知りたい方は以下の記事でまとめています。
まとめ
Webデザイナーにオススメの便利ツール・ソフトを紹介しました。
今回紹介したソフトは実際に僕が使用しているソフトなので、便利さは保証します。
Webデザインを学び始めた人はデザインやコーディングの他にソフトの使い方も学んでおけば、実際に仕事に繋げる時に役立ってくれると思います。
- Webデザイナー必見の便利ツール・ソフトの紹介
- デザインはFigmaのようにメインで使えるものからコンセプトのように補助的に使えるものまで揃えておくと便利
- WordPressでサイト作成するつもりならFTPソフトやローカル環境も整えておく