ウェブデザイナーの副業 - 時給換算で1500~3000円!在宅で好きな時間にできる

中野貴利人
監修中野貴利人
2020/10/25 更新

ウェブデザイナーの副業 - 時給換算で1500~3000円!在宅で好きな時間にできる

  1. ウェブデザイナーの仕事内容
  2. 時給換算で1500~3000円
  3. 副業でウェブデザイナーを始める手順
  4. メリットは技術と実績が増える
  5. 注意点は継続的な案件獲得
  6. ウェブデザイナーに役立つスキル7選
  7. ウェブデザイナーの副業まとめ
  8. ウェブデザイナーの体験談や口コミ

ウェブデザイナーの仕事内容

ウェブデザイナーは顧客の要件をくみ取って、ウェブサイトやスマホアプリのデザインを制作します。主な業務範囲はレイアウト設計、コーディング、素材制作の3点。それ以外ではサーバー設定、CMS導入、コンテンツ制作もあります。

ウェブデザイナーの仕事内容
  1. ウェブサイトのレイアウトと構造設計
  2. HTML、CSS、JavaScriptによるコーディング
  3. ウェブサイトのロゴやバナーなどの素材制作
  4. ドメインとサーバーの設定
  5. CMSの導入、インストール、設定
  6. コンテンツ、記事、イラストの制作

ホームページのウェブデザインを依頼された場合、顧客から「ホームページの目的、期待する効果、必要なページ、参考になるサイト、素材の有無」を伺って、トップと個別ページのレイアウトやカラーを提案します。

そこではビジュアルのみではなく、ユーザーの使いやすさやコンバージョン率にも配慮します。全体設計が決まれば、HTMLやCSSによるコーディングです。このようにウェブデザイナーの仕事は感性と技術の組み合わせであり、高単価の案件ではマーケティング、プログラミング、ライティングも要求とされることもあります。

大手のクラウドソーシングサービスにはこのような「ウェブデザイン・ウェブ制作」の案件が、2020年1月時点で1000件以上も募集しています。

ウェブデザイナーの仕事内容

フク
フク
デザインだけが仕事ではない。
先生
先生
顧客の目的を叶えるスキルが必要だぬ。

時給換算で1500~3000円

本業、副業を問わず、1件あたりの単価は、ホームページ全体の制作が5万~40万円、ウェブデザインのみが5万~20万円、コーディングのみが1万~10万円です。既存のデザインを改修する案件は1ページ1万円程度になります。

いずれにしても時給換算では1500~3000円が相場です。以下に2020年1月時点の案件別の報酬リストを載せました。

種別実案件報酬
全体コーポレートサイトのトップページ(Adobe XD使用)3万~4万円
全体コンサルティング会社のホームページ10万~20万円
全体医療クリニックのホームページ(WordPress導入)10万~20万円
全体リフォーム会社のホームページの改修2万~3万円
設計ワイヤーフレームのパターン作成2万~3万円
設計レスポンシブデザインの設計5万~6万円
設計アプリの管理画面のUI50万~60万円
設計スマホゲームのUI2万~3万円
コーディングレイアウト崩れの直し1万~2万円
コーディングレンタカー会社のオフィシャルサイト1万~2万円
文言トップページの文言修正7000円
文言ブログ内のリンク削除2000円
素材美容室の広告用バナー3点の制作2万~3万円
素材ラーメン店のLP内のアニメーション1万~2万円
機能スライドショーの改修(JavaScript)6000円
LP生活雑貨販売会社の販促LP制作7万~8万円
LP女性向けサロンのLP制作9万~10万円
CMS既存サイトのWordPress化3万~4万円
CMSWordPressのテーマのカスタマイズ2万~3万円
設定SSLの公開設定6万~7万円
設定VPN接続の構築3万~4万円
設定AWSからサーバー移行7万~8万円
設定カラーミーショップからヤフーショッピングに移行9万~10万円

情報取得日 2020年1月時点

フク
フク
クラウドソーシングの案件は幅広い。
先生
先生
自分ができる案件を選べるだぬ。

副業でウェブデザイナーを始める手順

ウェブデザインの案件は仕事仲間や知人経由でも紹介してもらうことができますが、一般的にはクラウドワークスやランサーズといったクラウドソーシングサービスで探したほうが、報酬が数万円のライトな案件が見つかりやすいです。

  1. クラウドワークスbizseekココナラなどのクラウドソーシングサービスに登録します。
  2. 実績がある人はフリーランス専門のクラウドテックレバテックフリーランスもおすすめです。
  3. 自分のスキルに見合った案件に申し込みます。
  4. 依頼内容の詳細を確認します。
  5. レイアウトやデザイン案を提出します。
  6. コーディング後、期日までに成果物を納品します。
  7. 依頼主の検収後に修正箇所がある場合は対応します。
  8. クラウドソーシングサービスを介して、代金が振り込まれます。

クラウドワークスには非対面で業務が完結できる仕組みが揃っています。仕事の種類は246種、チャットによる充実のコミュニケーション、上場企業運営の安心感で副業がしやすいです。クライアントは経済産業省、Yahoo!JAPAN、TBSなどの大手から中小企業まで、多数の利用実績があります。

クラウドワークス

クラウドテックはフリーランス専門の副業仲介サービスです。業界トップクラスで14万社以上が登録しています。全案件の25%がリモートの仕事であり、週2~3日の仕事がほとんどです。

クラウドテック

メリットは技術と実績が増える

ウェブデザイナーの業務は適用範囲が開く、奥も深いです。しかし、それは案件の豊富さと難度のばらつきを意味しています。初心者はシンプルなバナー制作や簡単なコーディング依頼をこなせますし、上級者はレスポンシブデザインによるUI設計からリリースまでを一気通貫で受注することもできます。

これらは在宅のみで好きな時間に作業し、優秀な人ほど問題を自己完結できるために、自分のペースで高収入を得られます。

本業のスキルを生かしながら、副業での経験が本業のプラスになる相乗効果も期待できます。収入アップとともにウェブデザイナーとしての自身の価値を高めることを第2の目標にする人もいます。

また、ウェブデザインは座学より経験重視です。例えば、本業で顧客折衝や予算管理をしない人も、副業では1人であらゆる経験が積めるため、フリーランスとして独立する際に役立ちます。

フク
フク
1度好評価を受けると、継続で依頼されることも多い。
先生
先生
継続できなくても、需要があるから別の案件もすぐ見つかるだぬ。

注意点は継続的な案件獲得

案件獲得は100%ではない

ウェブデザインの未経験者は案件を獲得できません。たとえ技能や実績があっても、コンスタントに案件を獲得するには一工夫必要です。クラウドソーシングに登録された案件は、数十人との受注競争になるため、コスパに優れた提案をしながら別の案件にも申し込みましょう。

ただ、最初は誰もがウェブデザイナーの未経験者や初心者であり、独学でウェブデザインを勉強して、簡単な案件を安価で請け負って、実績を築いていく流れが一般的です。サイトのウェブデザイン全体を受注すると、継続的に保守やメンテナンスも依頼されるため、副業の安定化も期待できます。

ソフトウェアが高額である

ウェブデザイナーの副業で必要なものは「パソコン、ソースコードエディタ、Photoshop、フォント」です。

パソコンはデスクトップとノートパソコンのどちらでも構いません。オーソドックスなスタイルはMacbook AirをメインPCにして、自宅ではそのノートパソコンをディスプレイにつなぐスタイルです。これなら本業の休憩中や外出先でも作業できますし、ウェブカメラでスムーズに顧客とやり取りができます。

ただ、ソフトウェアは高額です。本業で支給されたノートパソコンにPhotoshopがインストールされていて、それを自由に使える人は無料ですが、自分で用意する場合はライセンスを年間2万8000円前後で購入しなければいけません。

Photoshop以外にIllustratorやClipStudioも入れている人もいます。また、フォントはモリサワフォントが定番であり、ライセンスは年間約1万円になります。

フク
フク
Adobeのソフトはサブスクで利用しよう。
先生
先生
副業するときのみ、月間を支払う手もあるだぬ。

ウェブデザイナーに役立つスキル7選

チェック1

デザインセンス

デザインセンス

すでにサイトやアプリは生活必需品になっているため、それらのレイアウト設計では年齢や知識を問わず、万人が利用できるユニバーサルデザインを採用します。その際にウェブデザイナーに求められる能力こそが、デザインセンスです。

ただ、現時点でデザインセンスがなくても問題ありません。なぜならデザインやファッションのセンスとは勉強で身につくスキルであり、年齢が経ってからでも磨けるからです。デザインセンスに自信がない人はこれから学びましょう。

ウェブデザイナー向きのデザインセンスを学ぶときは、デザイン性に優れたサイトのチェックから始めます。そこにはプロによる完成された配置や配色が多数存在しており、それらを視覚的に記憶することによって「今回のワイヤーフレームの一部はこのサイトの配置をまねしよう」など、効率的に作業を進めることができます。

配色も同様です。例えば、赤色はスポーツのポスター、信号機の止まれ、居酒屋の看板に使われていますが、これは赤色に「情熱・危険・食欲増進」などのイメージがあるからです。カラー1色にも明確な意図が含まれており、ユーザーに直接的な印象を与えていることがわかります。

私たちはデザイン性に優れたサイトを見続けることで「赤=情熱・危険、オレンジ=温暖・自由、黄=活発・幼稚、緑=自然・調和、青=誠実・冷静、紫=高貴・神秘、ピンク=女性・弱い、白=清潔・空虚、灰=不安、黒=高級・恐怖」など、自分が制作するサイトのコンセプトに合うカラーを選べるようになります。

フク
フク
センスはYouTubeなどでも独学で習得できる。
先生
先生
特にデザイン性に優れたサイトを模倣することが効率的だぬ。
チェック2

マークアップ言語

ソフトウェアやアプリケーション開発ではプログラミング言語、データベース操作や管理ではデータベース言語、ウェブサイト制作ではマークアップ言語が使われます。マークアップ言語にはHTMLやCSSなどがあり、きめ細かなウェブサイトを制作するにはこれらの習得が不可欠です。

一般的にはマークアップ言語が不要であるWordPressやMovableTypeといったCMS(Contents Management System)では、管理画面からテキストや画像を入力すると、プログラムによってHTMLページが自動生成されます。ただ、そのHTMLページの元になるテンプレートはウェブデザイナーが制作しており、その際もXMLやCSSなどのマークアップ言語が使われています。

チェック3

画像制作・画像加工

ウェブデザイナーはPhotoshopを使えることが基本です。Photoshopでは「写真加工、グラフィック制作、イラスト制作」ができます。写真加工では切り抜きはもちろん、明るさ調整や傾き補正、モザイク、レタッチ、一眼レフで撮ったように背景をぼかすことも簡単です。

それ以外でもIllustrator、CLIP STUDIO、Dreamweaverといったソフトを使った画像制作や画像加工をするスキルがウェブデザイナーには欠かせません。

チェック4

UI設計・UX設計

UIやUXの知見を保有するウェブデザイナーは重宝されます。ウェブデザイナーは見た目に情熱を注ぐことが仕事ではありません。クライアントの目的である「新規顧客やリピーターの獲得、クリック率や購買率の上昇、ブランドイメージの向上」などを理解して、サイトの視認性や操作性を改善することが仕事です。

UI(ユーザーインターフェース)

ウェブサイトにおいてはユーザーとサービスをつなぐ接点のこと。画面上にある情報すべてがUIであり、UI設計では例えば、購入ボタンのカラーや形状を工夫して、クリック率などを上げていく。

UX(ユーザーエクスペリエンス)

ウェブサイトにおいてはユーザーがサービスで感じた体験のこと。画面上で得た体験すべてがUXであり、UX設計では例えば、デザインが洗練されている、文章が読みやすい、ボタンが押しやすいなどがある。

例えば、ユーザーが1ページ目のみを見て去った割合である「直帰率」と、閲覧中にあるページから去った割合を示す「離脱率」に対して、クライアントは「デザインを改善して、それぞれの数値を10%下げる」という目標を立てています。

優秀なウェブデザイナーはこのクライアントの目標達成のために、UIやUXを何度も改善しては数値目標に寄与しています。

チェック5

ライティングスキル

ウェブデザイナーに必要なライティングスキルは「文章デザイン、コピーライティング、コンテンツ制作」の3種類です。

文章デザインでは文字や段落のスペースは1px単位で調整するなど、ウェブデザイナーの実力が試されます。これはUX設計の1つであり、CSSにて「font-size: 16px、line-height: 180%、color: #333333」などと指定しています。

この理由も明確であり、フォントサイズは15px前後が読みやすく、行間は180%前後にすることで上下にスペースがあいて文字が認識しやすいからです。フォントカラーは黒より少し薄い黒のほうが文字が窮屈になりません。

フォントスタイルは文字が斜めになるイタリック体や手書き風フォントを使いませんし、フォントカラーで赤色を使いたいときも原色の#ff0000はビビッドで読みにくいため、彩度を抑えた#cc3300を使います。

また、コピーライティングはバナーに載せるために使用頻度が高いですし、コンテンツ制作では「口語文法、句読点、接続詞、指示代名詞、常用漢字」などの校正ルールが存在しており、それぞれでライティングスキルが求められます。

チェック6

資格

ウェブデザイナーの副業では資格がいりませんが、顔が見えないクラウドソーシングサービスでは資格保有者をアピールすることで、案件獲得につながる場合があります。ウェブデザイナーの資格には「ウェブデザイン技能検定、HTML5プロフェッショナル認定資格、Adobe認定エキスパート」の3種が有効です。

ウェブデザイン技能検定は、厚生労働省が認定する唯一のウェブデザイナー国家資格です。1~3級があり、試験は筆記試験と実技試験の2部構成で、ウェブについての幅広い知識が求められます。1級と2級は実務経験年数や下位の級に合格していることが必要です。

HTML5プロフェッショナル認定資格は、特定非営利活動法人「LPI-Japan」が認定するHTML5、CSS3、Javascriptなどのマークアップ言語の技術認定制度です。HTML5は音声、映像、3Dグラフィックにも対応し、マイクやカメラなどのデバイスアクセスもカバーすることから、これらを使いこなせることを証明できる資格として注目度は高くなっています。レベルはLevel.1とLevel.2があります。

アドビ認定アソシエイトは、Adobe社製ソフトの公式認定資格です。Adobe Photoshop CCやAdobe Illustrator CCの製品シェアは高く、これらの資格を保有していることも、ウェブデザイナーのスキルの証明になります。

チェック7

ウェブ・システム全般

ウェブデザイナーの仕事内容は、以前はHTMLとCSSのコーディングをするのみでした。それが企画プロモーション、ウェブマーケティング、ワークフレーム制作コンテンツ制作、広告配信、システムエンジニアなどを兼務するようになり、ウェブ全体を統括するウェブデザイナーも出ています。

そのため、ウェブデザイナーは多様な知識を持つことを求められます。例えば、ウェブサービスを閲覧するデバイス1つでも、スマホ、タブレット、パソコンのみではなく、テレビ、ゲーム機、スマートウオッチでも快適に閲覧できるように、各画面の大きさや解像度を組み合わせもします。

ウェブサイトはアクセス数を得ることも重要なファクターです。SEO(Search Engine Optimization)の技術は専任者がいるほど重要な役割ですが、あらかじめウェブデザイナーがこの領域を熟知していることで、SEOに最適化したサイト設計ができます。

また、有名企業のウェブサイトが乗っ取られたり、顧客情報がウェブサービスから流出するというニュースは、日常茶飯事です。そこでウェブデザイナーがセキュリティ対策の知識を持っていれば、サイト設計やデザイン段階で配慮することができるため、それも非常に強みになります。

フク
フク
他に役立つスキルはある?
先生
先生
特に企画とマーケティングは重要だぬ。

ウェブデザイナーの副業まとめ

総合 3.4
評価
収入1件1万円~
時間1日~
特徴
スキマ
深夜OK
土日有利
期間限定
初心者
スキル
資格有利
趣味併用
週末起業

副業の評価方法

ウェブデザイナーの体験談や口コミ

ポートフォリオで実績をアピールする
2020/05/07
30代 男性
5年

ウェブデザイナーで副業をするなら自分のポートフォリオを制作して、ブログやSNSで公開しましょう。クライアントは必ず事前に確認されるスキルの証明を欲しますので、その際はポートフォリオが役立ちます。

また、ウェブデザインの知識をブログやSNSで発信することで、ウェブ業界でのネームバリューが上がりますし、広告を貼ってアフィリエイトなどで稼げば、効率的に副業の横展開ができます。

クラウドソーシングは手間がかかる
2020/05/11
20代 男性
2年

クラウドソーシング上にあるウェブサイト構築の案件では、クライアントの好みに左右されやすく、実作業よりコミュニケーションに手間と時間がかかります。私はいつも実作業が40%、クライアントの要望とコミュニケーションが60%くらいの割合です。

スキル獲得のために副業を利用することには遠回りですし、本業の給与よりも単価が低いことは間違いないため、非効率な気もします。

スポンサーリンク

スポンサーリンク

著作・制作

中野貴利人
監修・編集
新卒から10種類以上の副業を経験。26歳で株式会社ネットピコ設立、12期目。著書4冊、2児の父、取材履歴はこちら

ピックアップ

スポンサーリンク