フリーランスのWebデザイナーってどこまでのスキルがあったら仕事が取れるのでしょうか？
Web制作と一口にいっても、いろいろなスキルがあります。
デザイン、HTML、CSS、JavaScript、サーバー、SEO、CMS、動画作成。
これを全部できなきゃフリーランスになれないの？
いいえ、全てのスキルを網羅する必要は全くありません。
中途半端なスキルしかないと嘆いている人もいるかもしれませんが、スキルレベルによって受注する仕事の内容は異なりますし、自分の得意な案件だけを受注する人もいます。
この記事では、実際にフリーランスのWebデザイナーとしてで生計を立てている私フクが過去に受注した案件をベースに、実際にどんな仕事があるかをまとめてみました。
この記事を書いているのは、Webデザイナー歴17年の現役フリーランスです
Webデザイナーが受注する仕事の概要
フリーランスのWebデザイナーが手がける案件には主に以下のものがあります。
- WebサイトやLPの制作
- バナー制作
- Webコーディング(HTML&CSS)
- JavaScriptを使った動きのあるサイト制作
- WordPressサイト構築
- 既存サイトへのWordPress導入
- 写真のレタッチ、加工
- 製品写真の切り出し
- ワイヤーフレームの制作
- レスポンシブデザインへの対応
- アプリ画面のデザイン
上記は基本的にWebに関するものですが、それ以外にも
- パンフレットの制作
- ポスターの制作
- ショップカード等その他販促物の制作
といったDTPデザイン（紙もののデザイン）を一緒に手がけるフリーランスデザイナーもいます。
DTPデザインができると、Webサイトと併せてブランディングを意識したデザインが提案できます
クライアント側も、一人のデザイナーにお任せできるので、グラフィックデザイン＆Webデザインができるフリーランスは強い
Webデザイナーの受注案件は大きなものから細かいものまで多岐に渡っているのがわかりますよね。
単純にWebサイトを制作するだけが受注案件ではないのです。むしろ、人伝てに細かい作業を依頼されることも多いです。
例えば、Photoshopのようなデザインソフトを使えるというのは、一般人にはないスキルです。
Photoshopが使えるだけでも、人物写真をきれいにする、風景写真を加工する、色彩を変える、画像の一部だけを切り抜く、おしゃれなカードを作る、といったことができます。
次に、私が実際に受注したことのある案件をレベル別に紹介しますね
レベル別Webデザイナーの受注案件の具体例
ネットショップの商品登録＆画像加工
レベル1 ★☆☆☆☆
ECショップの商品登録という仕事があります。
単純作業でマニュアル通りにやればOKなものから、画像加工のスキルが必須、セールストークを自分で考えるというもの、推しの商品に特別ページを作るため、ページ作成のHTMLの知識が必要な場合もあります。
画像の加工や特別な商品の見せ方が必要な時は、Webデザイナーの出番です。
ECショップは楽天やヤフーショップ、Amazon、カラミー、BASEといった有名なショッピングサイトから、企業オリジナルのショッピングサイトもあります。
ECショップの管理画面の操作を実際に触ることは、良い経験値になりますよ。
必要なスキルは簡単な画像加工。内容によっては、HTMLも。
Webサイトのデバッグ
レベル１ ★☆☆☆☆
これから公開されるであろうWebサイトやWebサービスのチェック、バグ出しです。具体的には、システムの動きが仕様通りに動いているか、バグがないかをチェック、各ブラウザでの挙動チェック、リンク切れのチェック等。Web会社に勤めると新人がよくやらされる作業です。
Webデザイナーを続けていく上でWebサイトのエラーとは切っても切れない縁になります。
エラーの傾向を覚えていくと、実際に自分で制作する立場になった時にも役立ちます。
デバッグには特別なスキルも必要ないので、参加ハードルも低いですね。
必要なスキルは特に無し！
Web画像加工やフォトレタッチなど
レベル２ ★★☆☆☆
フォトレタッチとは、写真を加工・修正すること。フォト＋レタッチ（加筆・修正）のことで、写真レタッチともいいます。
例えば
- 写真の女性の肌をきれいにする
- 背景を切り取る
- 別々の写真を合成して自然に馴染ませる
といった写真加工技術のことです。
フォトレタッチには、Photoshopのスキルが必要です。Photoshopの使い方がある程度できれば、受注可能なお仕事です。
フォトレタッチは、少しのコツと経験です。募集案件の中にはひたすらフォトレタッチ作業をする内容もありますが、そういう1000本ノック的なものでレタッチスキルのレベル上げをするのもおすすめです。
必要なスキルはPhotoshopで画像加工ができるスキル！
Webバナー制作
レベル2 ★★☆☆☆
駆け出しのWebデザイナーにオススメなのは、Webバナーのデザイン制作です。
バナー制作の発注は一年中山のようにあります。バナー制作の案件のみを受注し続けて、デザインセンスを磨いていくのもおすすめです。
バナー制作には、Webデザインに必要とされるHTMLもCSSもサーバーの知識も必要ありません。
必要なスキルは、デザインソフトが使える事とデザインセンス。
短時間かつ単品での納品が可能な案件のため、クラウドソーシングサイトではライバルが多いのが難点ですが、初心者にはおすすめの案件でもあります。
バナー制作はとにかく数をこなすこと。
最初のうちは低めの受注価格でも受注数をこなすことで実績もできますし、作業時間もデザインレベルも徐々に上がってきます。
Webバナーのあの小さい面積には、配色・レイアウト・セールスコピー・あしらいといったデザインで大切なことがたくさん詰まっています。
必要なスキルは、デザイン力のみ！
WebサイトのWebコーディング
レベル2 ★★☆☆☆
動きの少ないシンプルなWebサイトのWebコーディング案件です。
別のデザイナーが作ったデザインカンプを受け取り、HTML/CSSで構築していきます。
Webコーディングもとにかく数をこなすことで、どんどん納品時間も早くなっていきます。
Webコーディングは慣れると作業も早くなりますし、手堅くそれなりの料金を稼げるようになります。
新規のWebコーディングのみで大きく稼ぐのは難しいですが、ちょっとしたコーディングができるようになると保守案件も受注できる様になります。
必要なスキルは、HTMLとCSSのコーディング！
Webサイトの下層ページの量産コーディング
レベル2 ★★☆☆☆
Webサイト制作で、トップページのWebコーディングはできているので、下層ページの量産コーディングをしてほしいという案件もあります。昔はよく「流し込み」と言ってました。
他人のソースコードを参考にできて自分の勉強にもなるので、初心者のうちはどんどんやっていきたい案件ですね。
必要なスキルは、HTML/CSS/簡単なJavaScript！
Webサイトの下層ページだけデザイン
レベル2 ★★☆☆☆
「トップページは別のWebデザイナーが作ったのがあるから、それに合わせて下層コンテンツのデザインが欲しい」という依頼もあります。
トップページを作ったWebデザイナーと単価が合わなかった、Webデザイナー側に時間がない、CMSで作り込みしているので元々大枠のデザインしかない、といった理由で外注することになるんですね。
会社員デザイナーであれば、先輩の作ったトップページに合わせて下層ページのデザインを起こすという仕事はよくありますが、その外注版です。
他人のデザインに合わせてデザインするというのは難しいですが、非常に良い勉強になります。
必要なスキルは、他人のデザインに合わせられるデザイン力！
CMS＆テンプレートでWebサイト制作
レベル2 ★★☆☆☆
自分のオリジナルデザインではなく、テンプレートを使ってCMSサイトを納品する案件です。
例えば、wordpressの有料テンプレートをクライアントのサーバーにインストールして、クライアント用にテンプレートを使える状態にして納品するといったケースです。
またwixやBASEといったCMSサービスは、すでにあるデザインテンプレートの中から選んで自社Webサイトを作ることができます。
これらのCMSは素人でも簡単にサイトが作れるのが売りのサービスですが、本当のWeb素人にはテンプレートを選んで設定して自社用のコンテンツを流し込みするのすらなかなか難しいし、作業時間も必要でなので、忙しい経営者にはハードルが高いんですよね。そんな時にフリーランスにお声がかかることがあるので、積極的にお手伝いできるといいですね。
CMSの知識さえあれば、デザインの技量はそこまで必要ありません。
必要なスキルは、CMSを知っていること。CMSのサービスとテンプレートを使えること！
小規模のLPサイトのデザイン
レベル3 ★★★☆☆
LP＝ランディングページとは、 主に広告のリンク先のページとなるもので、サービスの訴求情報がすべて詰まった縦長の1ページのWebサイトのことです。
1ページで集客・売り上げにつなげる必要があるため、求められるデザイン力は高めになります。
LPの制作費用はピンキリですが、クラウドワークスでは制作費5万円くらいのものもあります。
必要なスキルは、デザインソフトとデザイン力とHTML/CSS/JavaScript！
Webサイトのデザインのみ制作
レベル3 ★★★☆☆
Webサイトのデザインのみ、トータルデザインを担当します。HTML/CSSコーディングは別の人が行います。全部のページをデザインするよりは、トップページ、下層ページを数ページ（カテゴリ毎）、その他デザインが違うページのみのデザインカンプを起こします。
Webサイトのブランディングを考えてトップページから全て作り込むので、一定レベルのデザイン力が必要になります。
Webデザイナーの本領発揮なお仕事ですね。
必要なスキルは、デザインソフトのスキルと中級以上のデザイン力！
Webサイト制作全て
レベル4 ★★★★☆
企業や個人のサイトを、デザインからWebコーディングまで全て担当して、クライアントに納品します。フリーランスWebデザイナーの代表的なお仕事です。
必要なスキルは、デザイン力とHTML/CSS/JavaScript！
wordpressの導入
レベル4 ★★★★☆
オリジナルのHTMLサイトにwordpressを導入します。もしくは、元々あるサイトをwordpressに作り替えます。ただのHTMLでは問題ないのにwordpress化するとなぜか動かない…そんなあるあるな経験を積みながら成長していきましょう。
必要なスキルは、wordpress構築の知識とHTML/phpがわかること！
サイトをデザインする。デザインしたサイトをWebコーディングする。wordpressでWebサイトを構築する。これを全部一人でできるようになったら、一人前のWebデザイナーです。
絶対にフリーランスで食べていけます！
大規模Webサイトの制作チームの一員
レベル４ ★★★★☆
経験を積んでくると、自然に横の繋がりができてきて、WebディレクターやWebエンジニアと組んで、大規模なWebサイト制作のチームの一員として動くこともあります。チームで動くというのはやはり大変ですが、一人ではできない特別な経験を積むことができます。
必要なスキルは、デザイン力だったりHTMLコーディング力だったり。あとコミュニケーション能力
企業のWebサイトの運用
レベル４ ★★★★☆
企業の公式Webサイトやオンラインショップの運用を継続的に委任されるようになれば、フリーランスとして大きなレベルアップとなります。一番は、収入が安定して入るようになること。固定収入はフリーランスにとって何よりありがたいですね。
また、企業から継続的に依頼されるということは、自分の評価や信頼性に直結していきます。自信もつきますし、相対的に周りの評価もあがりますね。
必要なスキルは、デザイン力やコーディング力、コミュニケーション能力！
wordpress以外のCMS・ネットサービスを使ったWebサイト制作
レベル４ ★★★★☆
wordpress以外のCMSって何百という種類があるのですが、マニアックすぎてネットに情報がないのもあるんですよね。
Web制作家業を長く続けているといろいろな依頼がくるものです。私も多数のCMSを触りましたが、なぜこんなCMSを導入した…と思うものも中にはありました。
全てのCMSの仕様を知っておく必要はないですが、いろいろ触れているとCMSという構造がわかってきますし、強みにもなります。
CMS構築＆HTMLの知識はもちろん必要ですが、そのCMSで使われているプログラム（php、smarty、Perl、.netと、ベースとなるCMSで使用言語が変わります）にも多少触れる事になります。
尚、私自身はこれらのCMSの知識を覚えているかというと、もう忘れたものの方が多いです。
なので別にスペシャリストになる必要はありません。
必要なスキルは、どんなCMSにも対応できる程度の知識と慣れ。
大手代理店の大型案件など
レベル5 ★★★★★
大手の大型案件にフリーランスのWebデザイナーとしてお声がかかるようになれば、一流と言えます。
このクラスの案件では、完全分業制が多いので、Webコーディングはフロントエンドエンジニアが担当するため、Webデザイナーはデザインに注力します。
ここまで来れば、名実ともに一流のトップクリエイターですね。
必要なスキルは、誰もが認めるデザイン力！
スキル別案件：まとめ
一口にWebデザイナーと言っても、いろいろな受注案件がありますのが伝わりましたでしょうか。
人によっては得意分野もさまざまで、デザインは得意だけどCMSは苦手だからやりませんというWebデザイナーもいますし、その逆でCMS案件を中心に受注するWebデザイナーもいます。
レベル５までいくデザイナーはそうそういませんし、レベル1の仕事を中心に受注をしているデザイナーもいます。
自分の環境や生活スタイルによっても受注できる案件は変わってきます。
例えば私は子供が小さいときは、単発で単純作業の仕事中心に受けてきました。
自分に合った仕事をすることが一番大事なので、焦らず自分に合った案件を探しましょうね。
フリーランスではなく就職したい方へ。Webデザインスキルを取得した後の具体的な就職先についてのまとめ記事はこちらです。