営業ナシでWeb制作案件が舞い込んでくる”新世代”戦略 ▶︎

【決定版】Adobe XD『プロトタイプモード』使い方を完全攻略

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

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

記事後半では『プロトタイプモード』以外の無料でできる学習方法もご紹介しています。

 

この記事の信頼性(筆者はこんな人)

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

 

こんな悩みや疑問を解消できる記事内容になっています。

ふたご

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

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

 

突然ですが、Adobe XDをどうやって学習しようか迷っていませんか?

  • A. 本
  • B. 動画教材
  • C. インフルエンサーが作成したネット商材
  • D. Adobe XDチュートリアル

 

この4つのどれかで学習しようと考えいるかなと思います。Adobe XDの学習教材は多岐にわたるため、『今からXDを学習しよう』という未経験者の方にとってどれを選択するのが正解なのかがわかりづらくなっていますよね。もちろん最低限のコストもかかってしまいます。本や動画教材なら2,000円前後、個人が販売しているネット商材なら1~2万円ほど…!でもご安心ください。

 

Adobe XDの学習に高額投資は一切必要ありません。

XDは『Adobe XD公式チュートリアル』を使えば無料で学習できます。

 

筆者自身もAdobeの使い方は『公式チュートリアル』から学びました。

今ではAdobe XDを使いこなし、Web制作のみで月収80万円以上を稼ぐことができています。

 

Adobe XDを使えれば、自分自身のクリエイティブを自由自在に表現した『LP制作』や『ホームページ制作』なんかも思いのまま。

Adobe XDチュートリアルで学習すれば『0円投資で月30万円以上も稼げるスキルが習得可能』ということです。

 

ここまで読んでいただいた方はこんなふうにお思いではないでしょうか?

 

『無料で学べるってかなりお得かも』

『Adobe XDを身につけたら転職も独立も夢じゃないのかも』

『いったん試してみよっかな』

 

その心意気すばらしいです。

ここまできたらあとはやるだけです。

本記事ではXDチュートリアルの『プロトタイプモードの使い方』をご紹介いたします。

 

【決定版】Adobe XDチュートリアルで『プロトタイプモード』を完全攻略

Adobe XD公式チュートリアルでは『プロトタイプモード』だけでなく、ツールの使い方〜UIデザインまで幅広く学習可能です。

本章では、そんな公式チュートリアルの中に含まれる『プロトタイプモード』の使い方のみを取り上げます。

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

 

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

【最新版】Adobe XD『共有方法』を完全マスター | プロトタイプ

 

【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公式チュートリアルで『使い方』を完全マスター

超優秀なプロのWebデザイナーが未経験者向けにわかりやすく解説してくれるので筆者自身もかなり助けられました。あのAdobeの公式チュートリアルで、完全無料とは思えないほどのクオリティ。

有料級なのに完全無料』かつ『XD専用チュートリアルサイト』なので、初見の方は『え、これが無料..!?』と少し引くくらい有益です。

他のAdobeチュートリアルとは全くの別物です。とにかくまずは見てください。

 

【Adobe XD】公式チュートリアル 

 

『教材には極力お金をかけたくない』

『まずは無料で学んでみたい』

『超初心者向けの教材で学び始めたい』

 

こんな人のための無料教材です。完全初心者の方が「Webデザイン」の基礎を身につけるには十分すぎる内容なので、Adobe XDをインストールしたらまずは下記の『公式チュートリアル動画(Adobe XD Trail)』から学習を開始しましょう!

 

【Adobe XD】公式チュートリアル動画(Adobe XD Trail)

【Adobe XD】公式チュートリアル動画(Adobe XD Trail)

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

レッスン時間
全111講座

 

値段
無料

 

言語
日本語音声

 

この講座の特徴

有料商材2万円相当の内容。正直この講座で学習するデメリットも挙げたかったのですが、特にありません。無料でここまでXDを使いこなせるようになる教材は他では見たことがないです。ちなみに日本語音声で学べます。
Adobe XD Trailは、XD内のツールの使い方からプロジェクトの作成までの一連の流れを全て網羅しているため他の教材にお金をかける必要はありません。
また、Adobe XDを一度も触ったことのない方が何も前提知識なしでスキルを習得できる内容となっています。
まず失敗はしません。

 

筆者のレビュー

筆者自身もこの公式チュートリアル動画を視聴してXDの基礎を習得しました。
今ではWebデザイナーとして月収80万円以上を稼いでいますが、XDの基礎はこのチュートリアルのみで学習し、全く問題なく案件をこなせています。
確かにチュートリアル動画を学習しただけで現役Webデザイナーと同等のスキルを習得するのは難しいですが、基礎はなるはやで身につけて実践でスキルを磨いていけば高度なスキルは後から必ずついてきます。
大丈夫です。このチュートリアルを最後までやり抜けば確実にXDの基礎は習得できます。

 

MEMO

筆者はチュートリアル動画に加えて公式ドキュメント教材も併せて学習しました。Adobe XDチュートリアル動画で学習しながら読むとより理解が深まりますよ。

 

 

注意

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

 

【Adobe XD】公式チュートリアル 

 

 

まだAdobe XDのインストールが完了していない方は早速『Adobe XD (1,180 円/月)』で自分の思うがままにデザインを作っていきましょう!

 

Adobe XD を学習する

 

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

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

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

 

まとめ

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

 

この記事のまとめ

 

1. 【決定版】Adobe XDチュートリアルで『プロトタイプモード』を完全攻略

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

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

 

2. 【完全無料】Adobe XD公式チュートリアルで『使い方』を完全マスター

【Adobe XD】公式チュートリアル動画(Adobe XD Trail)

 

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

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

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

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

 

【完全無料】Adobe XD公式チュートリアルを使って本格的に学習を始めたい方は、下の記事で詳しく紹介しているので参考にしてみてください。(筆者は初見で『これが無料…!?』と仰天しました)

【絶対に損しない】Adobe XD公式チュートリアルで無料学習|Adobe XD Trail

 

Webデザイナーに必須のAdobeツールは『Adobe XD』の他にも 『Illustrator / Photoshop / Dreamweaver』があります。現役Webデザイナーの筆者も当然使っています。

(コンプリートプランならこれら全部が使い放題です)

しかも、その全てが無料で学習できます。
これ実はあまり知られていない情報なのであなたはかなりラッキーだと思います。。!

 

上で紹介したチュートリアルで学習を開始するために、まずはプラン料金を慎重に比較していきましょう。

【知らないと損する】Adobe製品の『料金プラン』を徹底比較 | Webデザイン

 

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

 

『CSSアニメーションやエフェクトだけではなくWebサイトをゼロから作って稼いでいきたい』

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

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

 

 

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

 

 

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

 


ロードマップの構成

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

 

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

 

 

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