【営業不要】Web制作で月30万を安定的に稼ぐ近道 >>

【攻略】Adobe XD『プロトタイプモード』使い方|アニメーション等

本記事では現役Webデザイナーの筆者が『Adobe XDプロトタイプモードの使い方』をどこよりも詳しく解説していきます。

XDのプロトタイプ機能を全網羅したい方は是非最後まで読んでいってくださいね。

記事後半ではお得かつ独学でAdobe XDを完全習得するのに最適な、『UdemyのAdobe XD講座』をご紹介しています。

 

  • Adobe XDのプロトタイプモードを使いこなしたいな・・
  • 無料で学習できれば最高だけど・・

そんな疑問は全て払拭できます。

 

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

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

 

Adobe XDを無料で本格的に学習したい方は、筆者が3ヶ月かけて作った独学ロードマップで一緒に転職・独立を勝ち取りましょう!

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

 

【完全攻略】Adobe XD『プロトタイプモード』使い方|リンク共有・削除・縦横スクロール・モーダル・録画など全網羅

筆者自身も今回紹介する講座でXDのプロトタイプモードの使い方を身につけたので是非お試しください。

 

Adobe XDのプロトタイプやデザインの共有方法もついでに学習したい方は下の記事をご覧ください。

【最新版】Adobe XD『共有方法』|コメント・アカウント・リンク等

 

まだAdobe XDのインストールが済んでいない方は学習前に下の記事からインストールしておきましょう!(今なら14日間の全額返金保証付き)

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

 

【Adobe XD Trail】プロトタイピング

【Adobe XD Trail】プロトタイピング

値段
(5.0)
学習しやすさ
(5.0)
わかりやすさ
(5.0)
熟練度
(4.5)
初心者向け
(5.0)
オススメ度
(5.0)
総合評価
(5.0)
この講座のポイント

レッスン
全17講座

 

値段
無料

 

言語
日本語音声

 

この講座の特徴

この講座では、XDのプロトタイプモードでの『プロトタイプの作成方法』や『リピートグリッドの使い方』、『アニメーション』などかなり幅広く学習ができます。この講座で学習すればプロトタイプモードの基礎は十分に身に付くことを保証します。

 

注意

この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。

 

さっそく始めてみる

 

ADOBE XD TRAIL 部屋キャンプ! インタラクションを操る

ADOBE XD TRAIL 部屋キャンプ! インタラクションを操る

値段
(5.0)
学習しやすさ
(3.5)
わかりやすさ
(4.0)
熟練度
(4.5)
初心者向け
(4.5)
オススメ度
(4.5)
総合評価
(4.5)
この講座のポイント

レッスン時間
30分41秒

 

値段
無料

 

言語
日本語音声

 

この講座の特徴

この講座は2021年2月に公開されたものなので筆者が学習教材として使ったわけではありませんが、プロトタイプモードの基本を習得するにはこれ以上ないくらいに必要な内容が網羅されているためご紹介します。他のチュートリアル動画とは違い、『ワークショップ』の動画なので雑談箇所を飛ばして見ると効率的です。

 

この講座の内容

  • 【 1. プロトタイプ作成の基本】
    XDのプロトタイプモードの基本的な使い方を学びます。
  • 【 2. ページ内インタラクションの作成】
    オーバーレイ表示やアンカーリンクをデザインする手順を紹介します。
  • 【 3. ちょっと高度なプロトタイプ】
    ドラッグ操作ができて表示が自動的に切り替わるUIのつくり方を紹介します。
  • 【 4. 表現力の豊かなアニメーション】
    3D変形やパスのアニメーションなどの作成手順を紹介します。

 

注意

この講座はAdobe XDを使って学習していくので、講座を受講する前にAdobe公式ページからXDをインストールしておきましょう。

 

さっそく始めてみる

 

まだAdobe XDのプラン選びでどれにしようか悩んでいる方もいるかと思います。

そんな方は下の記事で得する『プラン選び〜インストール』までを徹底解説しているので是非参考にしてみてください。

【失敗しない】Adobe XD『プラン選び』と『インストール方法』

 

【独学なら】Udemy講座で『XDの使い方』を完全マスター|オンライン講座

  • Adobe XDを絶対に完全マスターしたい・・
  • 独学でできるだけ安い方法で習得したい・・
  • 『Adobe XD』初心者でも独学でWebデザイナーになれるかな・・

こんな疑問や不安をお持ちの方は今回紹介するUdemy講座に目を通しておいて損はありません。

「Udemyって何?」という方もいらっしゃるかと思いますので簡単にUdemyを使うメリットを説明いたします。

 

【Udemyを使うべき5つの理由】

  1. 新規受講生割引
    Udemy新規登録で6時間限定のセール発生。ほぼ全講座が90%割引
  2. 30日間の返金保証
    理由問わず30日間の返金保証。気に入らないなら即返金
  3. 動画の速度調整
    0.5, 0.75, 1, 1.25, 1.5, 1.75, 2倍で速度を調整可能。学習時間の短縮
  4. 講座購入後の学習期限なし
    Udemyアカウントを持っている限り、購入後はいつまでも講座を受講できる
  5. 毎月不定期に発生する大特価セール
    通常価格の90%OFFが基本。セール中を狙って購入するのが鉄則

 

筆者自身、Web制作の必須スキルのほとんどをUdemy講座で身につけました。

ありがたいことに、Udemyで応用力のあるスキルを身につけたことで実際の案件対応ではほとんど困ることはありませんでした。

またTwitterのDMで相談を受けることが多いのですが、Webデザイン初学者にはUdemy講座で学習するように薦めています。

理由としては安易にスクールや高額商材に手を出すよりも確実にスキルを習得できるからです。

「安かろう悪かろう」

確かに普通ならそうかもしれません。

しかしUdemyは元値20,000円以上する講座がほとんどです。

その高額な講座でも、Udemyを初めて利用する方なら最大95%OFFで受講できます。

 

Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ
値段
(4.0)
学習しやすさ
(5.0)
わかりやすさ
(5.0)
学習効率
(4.0)
費用対効果
(5.0)
汎用性
(5.0)
オススメ度
(5.0)
総合評価
(5.0)
この講座のポイント

レッスン時間
約12時間

 

値段
19,800円(セール中94%OFF*)
※セール情報については→【注目】Udemyセールにならない?安くなるタイミングはいつ?

 

Udemy公式サイト
Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ

 

この講座の特徴

通学スクール30万円相当の内容。この講座では最新の『Adobe XD』を基礎から徹底的に学習できます。『Adobe XD』の基本的な使い方から、デバイスごとのワイヤーフレーム作成や実践的な内容まで全てをたったの12時間弱で習得できる『Adobe XD』学習の決定版。XDを習得したい方は迷わず受講して大丈夫です。

 

筆者のレビュー

この講座は『Webデザイナーとして本気で稼ぎたい!』と思っている方以外にはおすすめしません。なぜなら、『Adobe XD』を使えなくても『そこそこのWebデザイナー』としてならやっていけるからです。

ただそれだと、ワイヤーフレーム(サイトの骨組み)を作れないのでWebサイト全体の制作案件は受注できません。

前置きが長くなりましたが、つまりは『Adobe XD』を習得して『Webサイトのワイヤーフレームからデザイン作成全般を担いたい』という方のみ『Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ』を受講してください。そんなあなたにはこれ以上ない講座です。実際にWebデザイナーとしてフリーで働いている筆者が保証します。

 

注意

この講座は『Adobe XD』を使って学習していくので、講座を受講する前にAdobe XDをインストールすることをおすすめします。

 

 講座の詳細ページ 

 

 

まとめ

最後まで読んでいただきありがとうございます。

この記事のまとめ

 

1. 【完全攻略】Adobe XD『プロトタイプモード』使い方|アニメーション等

【Adobe XD Trail】プロトタイピング

ADOBE XD TRAIL 部屋キャンプ! インタラクションを操る

 

2. 【独学なら】Udemy講座で『XDの使い方』を完全マスター|オンライン講座

いかがでしたでしょうか?

初心者の方が絶対に失敗することなく、Adobe XD『プロトタイプモード』の使い方をマスターできるよう書かせていただきました。

少しでもお役に立てたのなら本望です。。

もし何かご不明点や『ひとりだと挫折してしまうから、メンターとしてサポートしてほしい』という方がいましたら、TwitterからDMをいただければご相談に乗ります。

 

上で紹介したUdemy講座で本格的に学習を開始する前に、プラン料金を慎重に比較していきましょう。

【Webデザイナー必須】Adobeのおすすめ料金プラン?比較表あり

 

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

 

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

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

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

 

 

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

 

 

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

 


ロードマップの構成

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

 

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

 

 

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

 

以下Twitterでの評判

 

 

 

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

 

Webデザイナー監修。Web制作で10万稼ぐ3ヶ月独学ロードマップ