副業をたくさんしているWebデザイナー平尾誠です。
僕は会社員のWebデザイナーですが、副業でもWebデザインをしています。
要するに土日もホームページ制作をしています。
こんな人に向けて書いています。
- デザイナーではないけど、Webデザインで副業をはじめたい
- 実際に稼いでいる人が使うツールを知りたい
副業に前向きなあなたを応援するための記事です。
パソコン一つでできるWebデザインを副業にするのはとても手軽です。
ですが先に言っておくと月額3万円を稼ぐまでは、なかなかたいへんです。
僕は実際に副業で月収50万以上稼いでますが、むしろ最初の0から3万円までが一番大変でした。
初めてWebデザインで副業するなら、おそらくこの3つのどれかだと思います。
- バナー制作
- LPのデザイン
- LPのコーディング
要するにサイト制作の一部分を受託でするって感じですね。
上記の案件をこなすために、どんなツールを使えばいいかをこの記事で紹介します。
月に3万円稼げれば10万まではどうすれば良いかが見えてきます。
これらのツールをつかえれば、Webデザインの一通りを体験できている事になります。
目次
デザインツール
Sketch
Web専用のデザインツールです。
めっちゃ機能が充実していて、Photoshopよりも直観的で操作性がよく、PCのメモリ使用量も少ないです。
デスクトップではなく、ノートパソコンを使ってのWeb制作をする方には、Photoshopではなく、こちらのSketchをおすすめします。
きっとガッツリ制作をするのであればPhotoshopもIllustratorも避けては通れません。
だけどマスターするのは時間がかかるので、すぐに仕事を始めたければSketchを先に学習してからPhotoshopを勉強すると良いです。
Adobe XD
Adobe XDは厳密にいうと、デザインツールではなく、ワイヤーフレームをつくるためのツールです。
アップデートするたびに、もう少しでデザインツールと呼べるんじゃないかって思っています。
それくらいカンタンでWebに向いている。
なぜXDをオススメするかというと、クライアントとのコミュニケーションもこれを使えばラクだからです。
画像の書き出しも出来るので、超初心者はXDを使ってデザインすればいいですよ。
コーディング編
Brackets
Adobeのフリーのテキストエディタです。
テキストエディタとはメモ帳をコーディング用にしたアプリケーションだと思ってください。
Bracketsはエクステンション（拡張機能）が優秀です。
インストールしているオススメの拡張機能は
- One Dark Theme：目に優しいAtomライクな黒いテーマ
- CSSFier with BEM：HTMLをCSSにコピペすると階層立ててセレクタをCSSにしてくれる
- Documents Toolbar：デフォルトのツールバー使いにくいからね
- Emmet：説明不要のエメット
最低これくらい入れてたら困らない。
AtomとかSublimeTextも便利だけど、日本語で始めれるから一番ハードルが低いです。
DreamWeverも便利だけど、有料アカウントが必要なので外しました。
もっとWebデザイナーの環境を作りたい
Local by Flywheel
WordPressのローカル環境を3分で作ることができる、超高速Wordpress環境作成アプリ
WordPressのカスタマイズができるようにならないとなかなか仕事をもらえるチャンスを逃します。
使い方の説明は過去の記事で説明しています。
マジで便利です。
Bitbucket & Soucetree
Bitbucket公式サイト
Sourcetree公式サイト
データの管理ツールです。
Web制作以外にも使われていて、これでエクセルとかも管理する会社もあるみたいですね。
次のステップとして月に10万円を稼ぎたいと言うならば、他のデザイナーやエンジニアとの連携が必須になってきます。
どうなるとデータの管理方法をみんなと一緒にしておく必要があります。
教訓：まずは作りこむよりもツールの基本操作をおぼえましょう
実際に会社員をしながら稼いだ月収の内訳はこちらの記事を参考にしてください。
いろんなサイトで仕事を探した経緯を書いています。
こちらでは実際の勉強方法にも触れています。
ほなね