【最新版】Adobe XD『ステート機能』完全習得｜ハンバーガーメニュー・カルーセル

※当サイトには一部宣伝が含まれます。

ゆうけん

現役フリーランスWebデザイナー
Web制作の最高月収100万超
Twitterフォロワー2,000人超
毎月10万円超のブログ収益

Adobe XDのステートの使い方ってどうすればいいの・・
できれば最短で使い方を身につけたいな・・

こんな悩みや不安を抱えている方に向けて記事を書きました。

また、XDを初めて使う人でもわかりやすく解説していきます。Adobe製品を使うのが初めての方も難しい操作は一切ないので安心してください。

ちなみに、Adobe XDを使ったお仕事として代表的なWebデザイナーのお仕事は下のように明記されています。

具体的な仕事内容をまだ知らない方は目を通しておきましょう。

【引用】

企業、学校、官公庁などがインターネット上に設けたWeb（ウェブ）サイトの企画・デザイン・制作を行う。Webクリエイターとも呼ばれる。小さなサイトの場合は一人ですべてをこなすこともあるが、企業などが作成する数百ページにも及ぶサイトの場合などは、ページのデザイン、画像の作成、サイト制作の進行管理など、分業して制作を行う。

出典：厚生労働省>職業情報提供サイト>Webデザイナー

この記事をご覧になっているということは、Webデザイナーとして就職または独立したいと考えているかと思います。

そんな方のために現役Webデザイナーの筆者が事前に知っておくべき知識を記事にまとめたので、後で「知っておけばよかった…」となる前に読んでおきましょう！

【末路】「Webデザイナーはきついし病む」１５の真実

無理？「実務未経験でWebデザイナー就職は厳しい」３つの理由

Webデザイナー執筆。Webデザインスクールは無駄？３つの理由と解決策

現実。「Web制作の副業はもう稼げない」8つの真実｜現役Webデザイナーが解説

30人を調査！Webデザイナーになれなかった・諦めた人の共通点3つ【解決策あり】

【最新版】Adobe XD『ステート機能』の使い方｜ハンバーガー・アコーディオン・スライダー・アニメーション

ステート機能は2019年にXDの大幅アップデート時に新機能としてリリースされた注目機能です。

ステートを使いこなせば、ホバーアクションやカルーセル、ハンバーガーメニューなどのコンポーネントにアニメーション・エフェクト（インタラクション）を簡単に再現できるようになります。使ってみるとわかりますが、まるで本物のWebサイトのような動きをします。

筆者はWeb制作会社に所属するデザイナーさんとお仕事する機会が多いのですが、まだまだ『ステート』を使える人は多くありません。今ステートを習得しておけばクライアントから重宝されること間違いなしです！

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

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

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

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

【Adobe XD Trail】コンポーネントへの複数ステートの追加

値段

(5.0)

学習しやすさ

(5.0)

わかりやすさ

(5.0)

熟練度

(4.5)

初心者向け

(5.0)

オススメ度

(5.0)

総合評価

(5.0)

この講座のポイント

レッスン
全３講座

値段
無料

言語
日本語音声

この講座の特徴

この講座では、XDの『ステート機能』の使い方を学習ができます。ステート機能を使えるようになれば、あらゆるコンポーネントを自由自在に動かすことができるようになります。今までは静的なデザインしか作れず、仕様書などでアニメーションやエフェクトの動きを説明する必要がありましたが、ステートの登場で状況が一変しました。これからは動的なデザインを作ることが主流になってくると思うので、今のうちに習得しておくとかなりお得ですよ。

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

> Adobe XD 『コンポーネントへの複数ステートの追加』

注意

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

コンポーネントへの複数ステートの追加 1/3（ホバーステート）

コンポーネントへの複数ステートの追加 2/3（インタラクションの追加）

コンポーネントへの複数ステートの追加 3/3（リピートグリッドでの応用）

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

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

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

【学習が落ち着いてきた方へ】現職おすすめの求人サイトを３つご紹介！

Webデザインの実務は未経験だけど、転職やフリーランス案件を獲得したい方は下の記事から求人サイト・エージェントを確認してみるといいですよ◎

現役Webデザイナーの筆者が実際に使ってみた中でも選りすぐりの求人サービスを紹介しています。

>> 【未経験OK】エンジニア・デザイナー向け「無料」求人サイト3選

Web系の転職・副業が3倍「楽」になる！「無料」求人サイト4選

まとめ

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

この記事のまとめ

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

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

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

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

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

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

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

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

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

Adobeを無料で学ぶ

> Adobe Illustrator公式チュートリアルで学ぶ

> Adobe Photoshop公式チュートリアルで学ぶ

> Adobe Dreamweaver公式チュートリアルで学ぶ

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

【Webデザイナー必須】Adobeおすすめ料金プランを徹底比較。｜比較表あり

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

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

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

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

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

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

【ロードマップの構成】

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

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

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

以下Twitterでの評判

web制作で稼ぎたい”未経験者”は全員見てほしい。

あとは実行するだけ。こんなに詳細に教えてくれるゆうけんさんに感謝です😭

本当に稼げるのか、未経験の僕が今日から発信していきます！
まずAdobeCCの契約・Udemy教材購入は完了した！ https://t.co/d4Kx5bZdLs

— マル│デザイン×マーケ (@tytmtytm) April 27, 2021