【通常1万円→無料公開】
プログラミング学習3ヶ月ロードマップ >>

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

ゆうけん

  • 現役フリーランスWebデザイナー
  • Web制作の最高月収100万超
  • Twitterフォロワー2,000人超
  • 毎月10万円超のブログ収益
  • Adobe XDのステートの使い方ってどうすればいいの・・
  • できれば最短で使い方を身につけたいな・・

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

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

 

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

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

【引用】

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

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

 

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

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

「Webデザイナーはきつい・やめとけ」の5つの理由。現役デザイナーが徹底解説 採用担当に聞いた!Webデザイナー未経験の就職が厳しい理由3つ|現職が解説 Webデザイナー執筆。Webデザインスクールは無駄?3つの理由と解決策 現実を話します。「Web制作の副業で稼げない人」の共通点3つ|Webデザイナー解説 30人に聞いた!Webデザイナーになれなかった人の共通点3つ。【解決策あり】

 

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

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

 

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

 

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

今回は操作方法を見ながら手を動かしていただきたいので、テキストよりも効率的な『動画教材(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)
この講座のポイント

レッスン
全3講座

 

値段
無料

 

言語
日本語音声

 

この講座の特徴

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

 

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

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

 

注意

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

 

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

 

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

 

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

 

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

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

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

 

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

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

 

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

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

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

 

まとめ

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

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

初心者の方が絶対に失敗することなく、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デザイナー3ヶ月独学ロードマップ6ステップ