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

【必須】Adobe XD『オーバーレイ』完全攻略|位置・ドロップダウン

本記事では現役Webデザイナーの筆者が『オーバーレイの使い方』を、Adobe XDを初めて使う人にもわかりやすく解説していきます。Adobe製品を使うのが初めての方も難しい操作は一切ないので安心してください。

この記事では、操作方法をより確実に最短で身につけていただくために『これだけ見れば安心』の無料で学べるAdobe公式動画をご紹介いたします。

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

 

  • Adobe XDのオーバーレイの使い方ってどうすればいいの・・
  • できれば最短で操作方法を身につけたいな・・

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

 

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

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

 

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

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

 

\ Webデザイナーの実務未経験OKリモート案件数トップクラスの求人サイト /
無料登録をして高単価案件を見てみる >>

 

【もう悩まない】Adobe XD『オーバーレイ』を完全攻略|位置・スクロール・背景・ぼかし・固定など

参考:【公式】Adobe XD オーバーレイの追加

オーバーレイとは任意のアートボードに別のアートボードで作ったコンテンツを重ねて、アニメーションを使って実際のWebページの動きをシュミレートできる画期的な機能です。(アニメーションの有無は選択可能)

 

ページ内で重ねたいコンテンツを複数のアートボードに複製する必要がなく、ドロップダウンリストやスライドアップパネルなどの効果をカンタンな操作で再現できてしまいます。

 

Webデザイナー界隈を見ていても、オーバーレイなどを使いこなした『動的なデザイン作成』ができる人はほんの一握りしかいません。今オーバーレイを習得することは、現役でバリバリ活躍中のWebデザイナーを追い越す大きなチャンスです!

 

今回は操作方法を見ながら手を動かしていただきたいので、テキストよりも効率的な『動画教材(Adobe XD公式チュートリアル)』をご紹介いたします。

筆者自身も今回紹介する講座でオーバーレイの使い方を習得したので是非お試しください。

 

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

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

 

\ Webデザイナーの実務未経験OKリモート案件数トップクラスの求人サイト /
無料登録をして高単価案件を見てみる >>

 

【Adobe XD Trail】オーバーレイを使用したプロトタイプの作成

【Adobe XD Trail】オーバーレイを使用したプロトタイプの作成

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

レッスン
全1講座

 

値段
無料

 

言語
日本語音声

 

この講座の特徴

この講座では、XDの『オーバーレイ』の使い方を学習できます。基本的な操作方法はもちろん、位置調整のやり方も内容に含まれています。

オーバーレイを自在に使えれば、キーボードパネルのスライドやドロップダウンなどの『動くデザイン』を簡単に作成することができてしまいます

実際にこの講座を見てみるとわかりますが、『ドラック&ドロップ』と『ボタンのクリック』だけで完了です。まるで本物のWebサイトが画面に写っているかのような本格的なシュミレートができる感動を味わってみませんか?

 

テキストで学習したい方は公式ドキュメントをご覧ください。

> Adobe XD 『オーバーレイの使い方』

 

注意

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

 

オーバーレイを使用したプロトタイプの作成

 

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

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

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

 

\ Webデザイナーの実務未経験OKリモート案件数トップクラスの求人サイト /
無料登録をして高単価案件を見てみる >>

 

【挫折を避けたいなら】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をインストールすることをおすすめします。

 

 講座の詳細ページ 

 

 

\ Webデザイナーの実務未経験OKリモート案件数トップクラスの求人サイト /
無料登録をして高単価案件を見てみる >>

 

まとめ

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

この記事のまとめ

 

1. 【もう悩まない】Adobe XD『オーバーレイ』を完全攻略

【Adobe XD Trail】オーバーレイを使用したプロトタイプの作成

 

2. 【絶対失敗したくない方へ】Udemy講座で『XDの使い方』を完全マスター

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

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

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

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

 

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

【無料】Adobe XD「公式オンライン講座」で独学習得|Adobe XD Trail【基本スキル】

 

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

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

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

 

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

【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ヶ月独学ロードマップ