月収80万円超の現役フリーランスWebデザイナーの筆者が『Adobe XDをゼロから最短で習得する無料学習ロードマップ』を作成いたしました。Adobe XDの習得に必要なプラン選択、インストール方法、無料で学習する方法、実務で必要なスキル習得までを全網羅できる内容となっております。
このロードマップに沿って学習を進めていけば、XDで必要な知識とスキルを実務レベルまで一気にUPさせることができるはずです。
この記事の信頼性(ゆうけんブログの筆者はこんな人)
- 現役Webデザイナーが執筆
- 継続して月収80万円超のフリーランス
- 完全未経験から独学でWeb制作スキルを習得
- Twitterフォロワー数1,900人超(→@twinzvlog_yk)
- Web制作のメンター経験多数
- 認定ランサー(ランサーズ最高ランク)
この記事をご覧になっているということは、Webデザイナーとして就職または独立したいと考えているかと思います。
そんな方のために現役Webデザイナーの筆者が事前に知っておくべき知識を記事にまとめたので、後で「知っておけばよかった…」となる前に読んでおきましょう!
【末路】「Webデザイナーはきついし病む」15の真実 無理?「実務未経験でWebデザイナー就職は厳しい」3つの理由 Webデザイナー執筆。Webデザインスクールは無駄?3つの理由と解決策 現実。「Web制作の副業はもう稼げない」8つの真実|現役Webデザイナーが解説 30人を調査!Webデザイナーになれなかった・諦めた人の共通点3つ【解決策あり】
目次
【STEP1】Adobe XDのはじめ方|無料・有料プラン、インストール方法
XDを初めて使う方は、まずはXDのプラン選択をする必要があります。XDのプランには大きく分けて2つありますが、初心者の方にはどちらがお得なのかがわかりづらいんです。。そこでプランの選択で損しないために読んでおくべき記事を用意いたしました。
サクッと読める内容なのでXDのプランをどうしようか迷っている方は是非読んでみてください。
【メモ】今なら無条件での14日間の全額返金保証付き。
インストールして始める
それではまず、Adobe XDをインストールしましょう。下のボタンからAdobe公式サイトに移ると、様々なプランがありますが、まずは「Adobe XD単体プラン」を契約しておけば大丈夫です◎
\Webデザイン初心者は必須のデザインソフト/
Adobe XDをインストール >>
14日間の全額返金保証あり
インストール方法がわからない方は下の記事をご覧ください。
プランと学習方法を確認してみる
【失敗しない】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『アセットパネル』で文字スタイルの操作方法プロが解説。Adobe XD『アートボード』の移動方法を3分で解決!【最新版】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『レスポンシブデザイン』作り方|スマホ
【STEP3】Adobe XDでプロトタイプを作成
Adobe XDの基本テクニックを習得したら実践的なプロトタイプを作成して応用力を身につけていきましょう。紹介する記事に記載のことを実行すれば確実に実際の案件でもそのまま使えるレベルのプロトタイプを作れるようになります。
内容としては、実際に手を動かして覚えるUI/UXプロトタイピングと初級から高度テクニックまで全てを学ベます。
\ Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /
無料登録をして高単価案件を見てみる >>
【STEP4】Adobe XDの理解度を自己分析
Adobe XDには『Adobe XD 検定』という無料診断ツールがあります。
これが本当に有益でして、XDの理解度をグラフとテキストで診断結果として『見える化』してくれるんです。
この診断ツールの結果を基に自分の得意分野や足りない分野を洗い出せるので、Webデザイナーへのステップを大幅にショートカットすることができます。早速XDの理解度を測ってみましょう!
\ Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /
無料登録をして高単価案件を見てみる >>
【関連記事】
【誰も知らない】Adobe XDを無料で学習する方法|Adobe XD Trail【誰も知らない】Adobe XDの使い方を『無料』で完全攻略|初心者〜経験者 【Webデザイナー必見】Adobe公式チュートリアルで無料動画学習|日本語対応 【Webデザイナー必須】Adobeおすすめ料金プランを徹底比較。|比較表あり
XDの学習が完了した方なら問題なく案件をこなしていける段階なので、一旦どんなWebデザイン案件があるのかチェックしておきましょう!(10万円くらいの高単価案件も存在します)
正直、クラウドソーシングで案件を提案していくのも一つの手なのですが、最近だと競合となるフリーランスが多すぎてあまり推奨はできません。なので現役Webデザイナーの筆者が実際に使ってみて『これなら大丈夫!』と判断した求人サイト『クラウドテック』が断然おすすめです。
完全無料で使える求人サイトなのでまずは登録だけしてみて、どんな案件があるのかを見てみるといいですよ。サポートも手厚いので初心者の方でも大丈夫です。
\ Webデザイナーの実務未経験OK・リモート案件数トップクラスの求人サイト /
無料登録をして高単価案件を見てみる >>
未経験可!クラウドテックの評判・口コミを徹底調査!マージンも
Web制作学習で挫折した経験はありませんか?
『Webサイトをゼロから作って稼いでいきたい』
『3ヶ月くらいで最低でも月10万円は稼ぎたい』
『営業とかやったことないけどWeb制作だけで稼いでいきたい』
こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。
少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)
【ロードマップの構成】
- Web制作に特化した『確実に身に付く』学習方法
- Web制作会社が喰いつく理想的なポートフォリオの作成手順
- 返信率10%以上!Web制作会社へのメール営業
有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。
2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!
以下Twitterでの評判
web制作で稼ぎたい”未経験者”は全員見てほしい。
あとは実行するだけ。こんなに詳細に教えてくれるゆうけんさんに感謝です😭
本当に稼げるのか、未経験の僕が今日から発信していきます!
まずAdobeCCの契約・Udemy教材購入は完了した! https://t.co/d4Kx5bZdLs— マル│デザイン×マーケ (@tytmtytm) April 27, 2021
はじめまして、参考にさせていただきました(^^)
わかりやすくてワクワクするロードマップありがとうございます!!— けーやん@webデザイン勉強中 (@MvBjNIqjZ95o04h) April 4, 2021
初めまして!
記事読ませていただきました✨
具体的で初心者には有難い内容です😭❤️これからも投稿楽しみにしておりますね♡
— 𝒦𝒶𝑜かお | Webデザイナー目指す三つ子ママ👩🏻🌈 (@Kaomama_design) April 24, 2021
この記事を読んでいる時点であなたは相当な熱意と行動力をお持ちなので、確実にスキルを習得できると断言します。独学だろうが未経験だろうが関係ありません。あとはやるだけです。
Webデザイン・Web制作3ヶ月独学ロードマップ|5ステップ