【月10万稼ぐ】本物のWeb制作3ヶ月独学ロードマップ

【Adobe XD】最短で習得する独学ロードマップ|オンライン講座

月収80万円超の現役フリーランスWebデザイナーの筆者が『Adobe XDをゼロから最短で習得する無料学習ロードマップ』を作成いたしました。Adobe XDの習得に必要なプラン選択インストール方法無料で学習する方法実務で必要なスキル習得までを全網羅できる内容となっております。

このロードマップに沿って学習を進めていけば、XDで必要な知識とスキルを実務レベルまで一気にUPさせることができるはずです。

 

この記事の信頼性(ゆうけんブログの筆者はこんな人)

  • 現役Webデザイナーが執筆
  • 継続して月収80万円超のフリーランス
  • 完全未経験から独学でWeb制作スキルを習得
  • Twitterフォロワー数1,900人超(→@twinzvlog_yk
  • Web制作のメンター経験多数
  • 認定ランサー(ランサーズ最高ランク)

 

【STEP1】Adobe XDのはじめ方|無料・有料プラン、インストール方法

XDを初めて使う方は、まずはXDのプラン選択をする必要があります。XDのプランには大きく分けて2つありますが、初心者の方にはどちらがお得なのかがわかりづらいんです。。そこでプランの選択で損しないために読んでおくべき記事を用意いたしました。
サクッと読める内容なのでXDのプランをどうしようか迷っている方は是非読んでみてください。

【メモ】今なら無条件での14日間の全額返金保証付き。

インストールして始める

Adobe XDをインストール >>

14日間の全額返金保証あり

インストール方法がわからない方は下の記事をご覧ください。

Adobe「コンプリートプラン」できること・値段・インストール手順|学生必見

 

プランと学習方法を確認してみる

【失敗しない】Adobe XD『プラン選び』と『インストール方法』【完全無料】Adobe XD『スタータープラン』徹底解説|できること・インストール方法【要注意】Adobe XD『無料版・有料版』違いを比較|期間は?【絶対に損しない】Adobe XDの料金プランを徹底比較|月額高い?【無料】Adobe XD「公式オンライン講座」で独学習得|Adobe XD Trail【基本スキル】

 

【STEP2】Adobe XDの基本テクニック・使い方|何ができる?

Adobe XDのインストールを完了したら早速XDの基本テクニックを学んでいきましょう。上から順番に学んでいっても、気になる内容から始めてみてもOKです。紹介する記事を全て学習すれば、XDの基礎を身につけるには十分な内容となっているので少し多いですがサクッと進めていきましょう!

基礎をしっかりと身につけるには、『自分の手を動かしながら』学んでいくのがコツです。

基本テクニックだけでなく実務レベルのスキルまで一気に身につけたい方は、Udemyのオンライン講座で学習することをおすすめします。

Udemyで実務レベルのテクニックまで習得する

【もう迷わない】Udemy『Adobe XD』おすすめ講座+本|初心者必見

 

無料で基本テクニックを習得する

【必見!】Adobe XD『動くボタン』作成方法 | ステート・ホバー・クリック【最新版】XD『スクロールグループ』作り方 | スライダー・縦横【必読】Adobe XD『グリッド表示』設定方法 | レイアウト・方眼・非表示【完全版】XD『マウスオーバー』でアニメーション作成|ボタン【最新版】Adobe XD『ホバーアクション』の作成方法 | ステート【簡単】Adobe XD『点線(破線)・波線・実線』作り方|枠線・太さ【30秒で完了】Adobe XD『ドロップシャドウ』の設定方法【必須】Adobe XD『オーバーレイ』完全攻略|位置・ドロップダウン【必見】XD『アセットパネル』操作方法|カラー・文字・スタイル【完全版】XD『アートボード』操作方法|サイズ変更・移動等【最新版】Adobe XD『ステート機能』完全習得|ハンバーガーメニュー・カルーセル【必見】XD『ガイド』引けない?使い方を完全攻略|初心者向け【必見】XD『マスク解除』できない?解除・作成方法を解説|画像【注目】XD『トリミング』画像の切り抜き方法|切り取り【攻略】Adobe XD『マスク・クリッピングマスク』|画像・シェイプ【裏ワザ】Adobe XD『ハンバーガーメニュー』作り方|アニメーション【裏ワザ】Adobe XD「リピートグリッド」完全攻略|繰り返しオブジェクト【Web制作で使える】Adobe XD『書き出し』方法|PDF・画像・2倍にしたい等【完全攻略】Adobe XD『プラグイン』使い方|おすすめ【無料】Adobe XD『UIキット』使い方・入れ方|テンプレート付・スターターキット【最新版】Adobe XD『共有方法』|コメント・アカウント・リンク等【攻略】Adobe XD『プロトタイプモード』使い方|アニメーション等【攻略】XD「自動アニメーション」できない?ループ・スクロール・時間・フェードイン【注目】XD『レスポンシブデザイン』作り方|スマホ【Udemy含む】

 

【STEP3】Adobe XDでプロトタイプを作成

Adobe XDの基本テクニックを習得したら実践的なプロトタイプを作成して応用力を身につけていきましょう。紹介する記事に記載のことを実行すれば確実に実際の案件でもそのまま使えるレベルのプロトタイプを作れるようになります。

内容としては、実際に手を動かして覚えるUI/UXプロトタイピングと初級から高度テクニックまで全てを学ベます。

【もう迷わない】Udemy『Adobe XD』おすすめ講座+本|初心者必見

 

【STEP4】Adobe XDの理解度を自己分析

Adobe XDには『Adobe XD 検定』という無料診断ツールがあります。

これが本当に有益でして、XDの理解度をグラフとテキストで診断結果として『見える化』してくれるんです。

この診断ツールの結果を基に自分の得意分野や足りない分野を洗い出せるので、Webデザイナーへのステップを大幅にショートカットすることができます。早速XDの理解度を測ってみましょう!

【無料診断】公式『Adobe XD 検定』理解度を自己分析|使い方

 

【関連記事】

【誰も知らない】Adobe XDを無料で学習する方法|Adobe XD Trail【誰も知らない】Adobe XDの使い方を『無料』で完全攻略|初心者〜経験者 【Webデザイナー必見】Adobe公式チュートリアルで無料動画学習|日本語対応 【Webデザイナー必須】Adobeのおすすめ料金プラン?比較表あり

 

XDの学習が完了した方なら問題なく案件をこなしていける段階なので、一旦どんなWebデザイン案件があるのかチェックしておきましょう!(10万円くらいの高単価案件も存在します)

正直、クラウドソーシングで案件を提案していくのも一つの手なのですが、最近だと競合となるフリーランスが多すぎてあまり推奨はできません。なので現役Webデザイナーの筆者が実際に使ってみて『これなら大丈夫!』と判断した求人サイト『クラウドテック』が断然おすすめです。

完全無料で使える求人サイトなのでまずは登録だけしてみて、どんな案件があるのかを見てみるといいですよ。サポートも手厚いので初心者の方でも大丈夫です。

【辛口】クラウドテックの評判は?未経験OK?口コミ・メリット公開

 

Web制作学習で挫折した経験はありませんか?

『Webサイトをゼロから作って稼いでいきたい』

『3ヶ月くらいで最低でも月10万円は稼ぎたい』

『営業とかやったことないけどWeb制作だけで稼いでいきたい』

こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。

少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)


ロードマップの構成

  • Web制作に特化した『確実に身に付く』学習方法
  • Web制作会社が喰いつく理想的なポートフォリオの作成手順
  • 返信率10%以上!Web制作会社へのメール営業

有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。

2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!

以下Twitterでの評判

 

 

 

この記事を読んでいる時点であなたは相当な熱意と行動力をお持ちなので、確実にスキルを習得できると断言します。独学だろうが未経験だろうが関係ありません。あとはやるだけです。

【高評価】Web制作・Webデザイン3ヶ月独学ロードマップ|Webデザイナー監修