Webデザイナー独学のロードマップ｜順番と教材、最初の案件まで

まず、安心してください。Webデザイナーを独学で目指すのは、可能です。ただし「可能です」と言い切るには条件があって、その条件を先に知らないまま走り出した人が、半年で止まっています。私はメーカーで品質管理をしていて、42歳で退職を決めました。そのときに一番怖かったのは、独学で身につけたつもりのものが、仕事として通用しないことでした。

この記事は、独学の可否を論じるものではありません。学ぶ順番と、各段階で何をどこまでやれば次へ進んでよいのかという判断基準を書きます。あわせて、独学のデメリットも正直に書きます。メリットだけ並べた記事を読んで始めると、詰まったときに自分の才能の問題だと思ってしまうからです。詰まる場所はほぼ決まっていて、才能とは関係ありません。

独学で目指せるのか。市場の側から見た答え

結論から書きます。Webデザインは、独学で仕事にできる領域です。理由は3つあります。

1つ目は、成果物で判断される仕事だからです。学歴や資格ではなく、作ったものを見せれば伝わります。医師や弁護士のように資格がなければ業務ができない職種とは、前提が違います。

2つ目は、教材が揃っていることです。ツールの公式チュートリアル、無料の学習サイト、有料の動画講座。20年前とは比較にならない量の教材が日本語で手に入ります。むしろ多すぎて選べないことが問題になっています。

3つ目は、小さな仕事が存在することです。バナー1枚、ロゴ1点、既存サイトの1ページ修正。いきなり企業サイトを1本作る必要はありません。小さい仕事を積むことで、独学で足りない部分を実務の中で埋められます。

一方で、独学の限界も明確です。最大の問題は、フィードバックがないことです。自分で作ったものが良いのか悪いのか、判断する基準を持っていない段階では、悪いものを繰り返し作り続けてしまいます。スクールの価値は知識ではなく、この添削の部分にあります。独学で進める場合は、この穴を別の方法で埋める必要があります。方法は後述します。

もう1つ、収入の見通しについて先に触れておきます。フリーランスとして独立した場合の収入は、実際に多くの人が気にしています。

フリーランスwebデザイナーという職業はどのくらい稼げるのでしょうか？5、6年企業でwebデザイナーとして経験を積んでフリーランスとして独立した場合、収入はどちらの方が上なのでしょうか？ 教えていただけたら幸いです。 出典: detail.chiebukuro.yahoo.co.jp

この問いに対する私の答えは、「企業で5年経験した人が独立すると、上に振れる人と下に振れる人が同じくらいの割合で出る」です。技術の差ではなく、仕事を取る力と単価を交渉する力の差で分かれます。独学の人が気にすべきなのは、技術が足りないことより、この後半の部分を誰も教えてくれないことです。

学ぶ順番を間違えないこと。最初はデザインではない

独学で最も多い失敗は、順番です。ツールの使い方から始める人が多いのですが、私はここが原因で遠回りになると考えています。

推奨する順番は次のとおりです。

第1段階は、良いデザインを言葉で説明できるようになることです。手を動かす前に、既存のサイトを見て「なぜこれは見やすいのか」を文章にする訓練をします。余白の量、文字の大きさの差、色数、視線の流れ。この4点だけでも十分です。1日1サイト、3行ずつ書く。2週間続けると、自分の見る目が変わったことに気付きます。この段階に費用はかかりません。

第2段階は、ツールの基本操作です。現在の実務では、画面のデザインを作るツールはブラウザ上で動くものが主流になっています。無料で使える範囲が広く、独学の入口としては障壁がありません。ここで覚えるべきは機能の全部ではなく、図形を配置する、文字を組む、色を指定する、書き出す、の4つだけです。残りは必要になったときに調べれば済みます。1週間から2週間。

第3段階は、模写です。既存のサイトを見ながら、同じ見た目を自分のツールで再現します。ここが独学の中核で、最も時間を使う部分です。3サイトから5サイト。1サイトあたり10時間から20時間はかかります。

第4段階が、コードです。HTMLとCSSは、デザイナーでも読み書きできたほうが仕事の幅が明確に広がります。実装まで請けられると、単価の付き方が変わります。ただし、プログラミング言語まで手を広げる必要は最初の段階ではありません。

第5段階が、オリジナル制作とポートフォリオです。架空の店舗や架空のサービスを設定して、1本を通しで作ります。

この順番で進める理由は、第1段階を飛ばすと第3段階の模写が「ただの写し取り」になってしまうからです。見る目がない状態で写しても、何を学んだのか自分で言えません。逆に、見る目を先に作っておくと、模写の途中で「この余白は意図的に広く取られている」と気付けます。気付けたものだけが、自分の引き出しに入ります。

模写は「手を動かす」ことに意味がある

独学の相談を受けるとき、私が必ず確認するのは「作ったものが何本あるか」です。読んだ本の数ではありません。ここで数が出てこない人は、まだインプットの段階から出ていません。

同じことを、独学でWebデザイナーを目指した方が書いています。

インプットばかりだとせっかく知識を吸収しても、手を動かさないのでなかなか体が覚えられなかったり、実際に作ってみると自分のレパートリーの少なさにびっくりしたので、まずは一通りざっくりインプットしたら、サイトを制作して、その都度今の自分の100％を出し切ることが大切だと思いました。 出典: note.com

「自分のレパートリーの少なさにびっくりした」という表現が、独学の核心を突いています。知識として知っていることと、手が動くことは別です。私も技術文書のライティングで同じ経験をしました。文章の書き方の本を10冊読んだ状態で最初の原稿を書いたら、自分の文章がまったく変わっていませんでした。読んだことは、書いたことにはならないのです。

模写の進め方を具体的に書きます。

対象の選び方。最初は情報量の少ないサイトを選びます。企業のコーポレートサイトのトップページ、あるいは1商品のみを扱う販売ページ。ニュースサイトのように要素が多いものは3本目以降にしてください。

やり方。ブラウザで対象を開き、隣にツールを並べて、上から順に再現します。ピクセル単位で合わせようとしなくてよいですが、文字の大きさの差と余白の量は測って合わせます。目分量でやると、模写の効果が半分になります。

終わりの判断。完成したら、元のサイトと自分の作ったものを並べて、違いを5つ書き出します。この5つが、次に意識する項目です。書き出さないと、次の模写で同じ差が出ます。

本数。3本目でツールの操作に迷わなくなり、5本目で「この配置は自分で決められる」という感覚が出てきます。ここまで来たらオリジナル制作に移ってよい合図です。

私の失敗を1つ書きます。私は最初の模写で、完成度にこだわって1本に1ヶ月かけました。結果として、学べたのは1パターンだけでした。80%の完成度で5本作ったほうが、身につく量は明らかに多い。完璧に仕上げる練習は、仕事を受けてからで間に合います。

コードをどこまで学ぶか。実装できると何が変わるか

デザインだけで仕事にするか、実装まで含めるか。これは独学者が必ず迷う分岐です。私の見方を書きます。

結論として、HTMLとCSSは学ぶべきです。理由は、デザインの実現可能性が判断できるようになることです。実装の仕組みを知らないと、コードで再現しにくいデザインを平気で作ってしまいます。現場で「これは実装が難しい」と言われて作り直す経験を何度も繰り返すより、最初から仕組みを知っているほうが早い。

学ぶ範囲を具体的に絞ります。HTMLは、見出し、段落、リスト、画像、リンク、表、そしてフォームの基本形。CSSは、余白の指定、文字の設定、色、配置の仕組み、そして画面幅に応じて並びを変える書き方。この範囲で、静的な1ページは作れます。

次の段階として、サイトを更新できる仕組みを扱えるかが分かれ目になります。多くの中小企業のサイトは、担当者が自分で記事を更新できる形で作られています。この仕組みに乗せてデザインを組み込む作業は需要が安定しており、独学者が入りやすい領域です。ここまで扱えると、受けられる仕事の性質が変わります。

一方で、本格的なプログラミングまで進む必要があるかというと、デザイナーとしてはそこまで求められません。動きのある機能や、データを扱う画面が必要な案件は、実装担当と分業するのが普通です。どういう案件で分業が起きるのかを知りたい方は、Web・業務システム開発のお仕事を見ておくと、自分が受ける範囲と、他の人に任せる範囲の線引きが見えてきます。募集内容には求められる技術が具体的に書かれているので、自分の学習範囲を決める材料になります。

学習に使う教材については、無料と有料の使い分けを勧めます。文法の基礎は無料の学習サイトで十分です。有料の価値は、体系立った順番と、質問できる環境にあります。私は無料教材で3ヶ月進んで、行き詰まった箇所だけ有料の講座を単発で買いました。全部を有料にする必要はありません。

ツールと環境。無料でどこまで進められるか

独学の初期に出費を増やす必要はありません。何が無料で足り、どこから有料になるのかを整理します。

デザインを作るツール。ブラウザ上で動く画面設計のツールが、現在の実務では主流です。個人で学習する範囲なら無料で使えるものがあり、ここに費用をかける必要はありません。以前は高額な月額のソフトを契約するのが前提でしたが、状況は明らかに変わりました。写真の加工や複雑な合成が必要になったときに、初めて有料のソフトを検討すればよいです。

素材。写真とアイコンは、商用利用可の無料素材で学習の範囲は足ります。ただし、ポートフォリオに載せる作品では利用条件を必ず確認してください。無料素材でも、加工の可否や再配布の条件が定められています。ここを確認せずに公開して指摘を受けると、信用に直接響きます。私は最初、条件を読まずに使っていました。指摘される前に気付けたのは運が良かっただけです。

フォント。文字の選び方は、デザインの印象を最も大きく左右する要素です。無料で使える日本語のフォントは、以前と比べて質と種類が大きく改善しました。学習段階では、明朝体を2種類、ゴシック体を3種類ほど選んで、それだけを使い回してください。種類を増やすより、同じフォントで大きさと太さを変える練習のほうが効果があります。

コードを書く環境。無料のエディタで十分です。動作を確認するブラウザも無料です。作ったものを公開する場所も、静的なサイトを無料で置けるサービスがあります。つまり、制作から公開までを無料で一周できます。

有料に切り替えるべきタイミングは、仕事を受け始めてからです。商用利用の条件が厳しい素材、独自ドメイン、有料のフォント。これらは、収入が発生してから必要になるものです。学習段階で先に契約すると、月額の負担だけが積み上がります。

私が独立前にやって良かったのは、無料の範囲で3ヶ月進めて、何に困っているかが明確になってから有料のものを選んだことです。困る前に買うと、何のために買ったのか分からないまま解約することになります。

独学中にやってはいけないこと

遠回りになる行動を、よく見かける順に書きます。

教材を並行して進めること。動画講座を2つと本を3冊、同時に開いている人がいます。理解が深まるように思えますが、実際には同じ範囲を繰り返し眺めるだけで、先に進みません。1つを終えてから次に移るほうが速いです。

流行の技術を追いかけること。新しいツールや新しい手法の情報は毎月出てきます。学習中の方がここを追うと、基礎が固まりません。基礎は数年単位で変わりません。余白、文字、色、配置。ここを固めてから、新しいものを見ればよいです。

完成させずに次へ行くこと。70%の状態で放置した作品が10本ある人と、完成させた作品が3本ある人では、後者のほうが明らかに先に進んでいます。完成させる過程で学ぶことが多いからです。細部の調整、書き出し、公開までの手間。この部分は途中でやめると一度も経験できません。

他人の進捗と比べること。学習の記録を公開している人は多く、それを見て焦る方がいます。前提条件が違うので比較になりません。1日30分しか取れない人と、1日8時間取れる人を並べても意味がありません。比べるなら、1ヶ月前の自分とだけ比べてください。

安すぎる仕事を受けること。実績がほしい気持ちは分かりますが、相場を大きく下回る金額で受けると、次にその金額が基準になります。無料や極端な低額で受けるなら、期間と本数を先に決めてください。「最初の3件まで」と決めておけば、抜け出せます。

そして、独学を理由に自分を低く見せないこと。提案の文章に「独学なので不安ですが」と書く人がいます。書く必要はありません。発注する側が見るのは成果物と進め方です。学んだ経路は関係ありません。

ポートフォリオは作品集ではなく、提案書として作る

独学で最後に効くのがポートフォリオです。ここで差が付きます。

多くの独学者が作るポートフォリオは、作品を並べたギャラリーになっています。これでは弱い。発注する側が見たいのは「この人に頼んだら、自分の課題が解決するか」です。作品の見た目だけでは、そこが伝わりません。

私が推奨する構成を書きます。

1つの作品につき、次の4点を書き添えます。想定した依頼者と、その課題。自分が置いた方針。実際にどう作ったか。そして、どこに時間をかけたか。この4点があると、読む側は思考の過程を追えます。見た目が多少粗くても、考えて作ったことが伝われば仕事に繋がります。逆に、見た目がきれいでも説明がないと、素材を組み合わせただけに見えてしまいます。

掲載する本数は、3本から5本で十分です。10本並べても、見る側は最初の2本で判断します。自信のある順に並べて、弱いものは外します。

作る題材については、架空でよいのですが、業種を選ぶときに実在する課題を持つ業種にしてください。地域の飲食店、小規模の学習塾、個人の整体院。この手の業種は、実際に依頼が多い領域です。反対に、大企業のサイトをリニューアルする想定の作品は、受ける仕事と乖離するため評価に繋がりにくいです。

文章を書く力も、ここで必要になります。作品の説明文が読みにくいと、その印象がデザインの評価にも影響します。Webの文章作法を体系で押さえたい方にはWebライティング能力検定のような試験も選択肢です。読みやすい文章の型を、我流ではなく基準で確認できます。デザインと文章の両方を扱えると、依頼の受け方に幅が出ます。

もう1つ。ポートフォリオは公開の場所に置いてください。ファイルで送る形だけにしておくと、探してもらえません。自分の作ったサイトに置くのが理想で、これ自体が実装の練習にもなります。

独学のデメリットを、正直に3つ書く

メリットだけ書くのは不誠実なので、デメリットを書きます。

1つ目は、フィードバックがないことです。これが最大の問題です。自分の作ったものを評価する基準を持っていない段階では、誤った方向に上達してしまいます。対策は3つあります。既存の優れたサイトと自分の作品を並べて差分を書き出すこと。制作物を公開して反応を得ること。そして、有料でもよいので添削を1回だけ受けることです。1回でも基準が分かると、その後の自己評価の精度が変わります。全部をスクールに任せる必要はありません。

2つ目は、期限がないことです。スクールには課題の提出期限がありますが、独学にはありません。人間は期限がないものを後回しにします。対策は、外から期限を持ち込むことです。制作物を公開する日を先に決める、コンテストに応募する、あるいは知人の小さな依頼を受ける。私は独立前、月末に必ず1本公開すると決めて、それを妻に宣言していました。効きます。

3つ目は、仕事の取り方を誰も教えてくれないことです。技術は教材にありますが、見積もりの出し方、要件の確認方法、修正回数の取り決め、請求のやり方は、教材にほとんど書かれていません。ここでつまずいて「技術が足りないから仕事が取れない」と誤解する人が多い。実際は、技術ではなく手続きの知識が足りていないケースが目立ちます。

対策として、最初の数件は条件を明文化する練習として受けてください。作業の範囲、修正の回数、納品の形式、支払いの時期。この4点を文章にして、相手と合わせる。これができるだけで、トラブルの大半は防げます。

学習の途中で、人に教える形の仕事を受けるのも有効です。自分が学んだ範囲を人に説明すると、理解の穴が明確になります。プログラミング・Webレッスンのお仕事には初学者向けの指導案件が含まれており、学習の途中段階でも受けられるものがあります。教えるために整理した知識は、そのまま自分の実務の説明力になります。

最初の案件までの道筋と、単価の考え方

独学の目的は資格でも修了証でもなく、仕事です。最初の1件をどう取るかを書きます。

現実的な入口は4つあります。

知人経由。最も成功率が高い入口です。地域の商店や、前職の取引先。すでに信用がある相手なので、実績がなくても任せてもらえます。ただし、身内価格になりやすいので、金額は最初にきちんと決めてください。安く受けると、その後の関係で単価を上げにくくなります。

小さな公募案件。バナー制作やロゴのように、範囲が限定された仕事から入ります。1件の金額は小さいですが、納品までの流れを一通り経験できる価値が大きいです。

制作会社の下請け。デザインの一部、あるいは実装の一部を請けます。自分で営業する必要がなく、実務の作法を学べます。単価は直接受注より低くなりますが、最初の半年は学習料として割り切る判断もあります。

継続の運用案件。既存サイトの更新、バナーの差し替え、記事ページの作成。金額は地味ですが、毎月入るため生活が安定します。独立を考えている方は、この種類の仕事を先に確保してから動くべきです。私は退職の1年前から副業を始め、辞める時点で継続の仕事を複数持っていました。ゼロからの独立ではなかったことが、精神的に一番大きかったです。

Webの運用や集客支援を含む案件の内容はWeb運営・Webマーケ支援のお仕事で確認できます。デザインだけでなく更新や改善まで含めて請けられると、継続の依頼に繋がりやすくなります。

単価の考え方も書きます。開発や制作の業務委託単価は、職種のくくりによって分布が違います。実装まで含めて請ける場合の相場感はソフトウェア作成者の年収・単価相場が参考になり、文章や編集を含めて請ける場合は著述家，記者，編集者の年収・単価相場のほうが近い水準になります。自分が受ける仕事がどちらの性質に寄っているかで、見積もりの基準を決めてください。

1日の学習時間から、逆算して計画を立てる

最後に、計画の立て方を具体的に書きます。ここを曖昧にしたまま始めると、進んでいるのか遅れているのかが分からず、不安だけが増えます。

まず、1週間に確保できる時間を数えてください。理想ではなく、実際に確保できる時間です。私は前職時代、平日1時間と休日3時間で週11時間でした。この数字を出したら、次の配分に当てはめます。

見る目を作る段階に、10時間。1日30分を2週間です。既存サイトを見て、余白と文字と色と視線の流れを3行で書く。この段階は他の作業と並行してよく、通勤中でも進められます。

ツールの基本操作に、20時間。図形、文字、色、書き出しの4つに絞れば、この時間で足ります。全機能を覚えようとすると100時間かかるので、絞ることが重要です。

模写に、80時間から100時間。1サイトあたり20時間で、4本から5本です。週11時間なら2ヶ月強かかります。ここが最も長く、最も効く段階です。

HTMLとCSSに、60時間。文法の基礎と、1ページを自分で組む作業まで含めます。無料の学習サイトで進められます。

オリジナル制作とポートフォリオに、60時間。3本作って公開まで持っていきます。

合計すると230時間から250時間です。週11時間なら約5ヶ月、週20時間取れるなら3ヶ月弱。この数字を見て、受験日のように「公開する日」を先に決めてしまってください。期限がないことが独学の最大の敵なので、自分で期限を作ります。

そして、この計画には仕事を探す時間が含まれていないことに注意してください。私が独立直後にやった失敗がこれです。学習と案件探しを同時に全力でやろうとして、締切のある案件のほうに時間が吸われ、学習が止まりました。週のうち学習に充てる曜日を固定して、そこは動かさない。予定表に先に入れておく。これだけで続きます。

20年市場を見てきた立場からの観察

運営者として在宅の仕事の市場を長く見てきた立場から、独学の方に伝えたいことを2つ書きます。

1つ目。長く続く人は、技術が抜きん出て高い人ではありません。連絡が早く、確認が丁寧で、想定より少し多く返してくる人です。デザインの技量が同等なら、発注側は例外なく後者を選びます。これは実力の話ではなく、仕事の進め方の話です。独学の段階から意識できることなので、最初の1件からやってください。

2つ目。単発の制作を積み上げる働き方は、思っているより消耗します。毎月ゼロから相手を探すことになるからです。長く続いている人は、1件を納めたあとに「更新はどうされますか」と一言足しています。この一言で、単発が継続に変わることが実際に多い。

手取りの話もしておきます。仲介の手数料が乗る経路では、発注側が同じ金額を出しても、受け手に届く額が削られます。中間マージンが乗らない直接の取引なら、依頼者は同じ予算でより多くを頼めて、受け手の手元に残る額は厚くなります。運営者として見てきた限りでは、この差が効くのは金額の大小ではなく、続けられるかどうかです。手取りが薄いと件数を増やすしかなくなり、1件あたりの丁寧さが落ちて、関係が続かなくなる。手数料0%の意味は、単価が上がることではなく、同じ仕事で手元に残る額が厚くなるという質の違いです。

最後に、独学を始める皆さんへ。準備さえすれば、40代からでも遅くはありません。私自身がそうでした。ただし、準備というのは教材を揃えることではなく、作ったものを人に見せて評価を受ける回数を積むことです。今日1本、小さくてもよいので完成させて、誰かに見せてください。そこから始まります。

よくある質問

Q. Webデザイナーは独学でも仕事にできますか？

できます。成果物で判断される仕事であり、資格が必須ではないためです。ただし独学の弱点は、作ったものへのフィードバックがない点です。既存の優れたサイトと自作を並べて差分を書き出す、制作物を公開して反応を得る、添削を1回だけ有料で受ける、といった形で基準を外から取り込んでください。

Q. 独学の学習期間はどれくらい見ておくべきですか？

最初の仕事を受けられる段階までで、半年から1年が現実的な目安です。見る目を作る2週間、ツールの基本操作に2週間、模写に3ヶ月前後、コードとオリジナル制作にさらに数ヶ月という配分になります。1日の学習時間が2時間未満の場合は、1年以上を想定したほうが計画が崩れません。

Q. コードはどこまで覚える必要がありますか？

HTMLとCSSは学ぶべきです。実装の仕組みを知らないと、再現しにくいデザインを作ってしまうためです。サイトを更新できる仕組みに組み込む作業まで扱えると、受けられる案件の幅が明確に広がります。一方で本格的なプログラミングまで進む必要はなく、その領域は実装担当と分業するのが一般的です。

Q. ポートフォリオは何本載せればよいですか？

3本から5本で十分です。見る側は最初の2本で判断するため、自信のある順に並べて弱いものは外します。1本ごとに、想定した依頼者と課題、自分が置いた方針、作り方、時間をかけた箇所の4点を書き添えてください。作品を並べるだけのギャラリー形式は、依頼に繋がりにくい形です。