Winスクールは全国各地に展開しております。

Winスクール
お役立ち情報

やりたいコトをすぐカタチに!
初めてでもUI・UXを設計できる!
Adobe XD講座のご紹介

投稿日:

更新日:

やりたいコトをすぐカタチに!初めてでもUI・UXを設計できる!Adobe XD講座のご紹介

現役デザイナーはもう使ってる!
Adobe XDってどんなソフト?

「これ、作って。週末アップね。」
「えっ!?ホームページ?私、デザイナーでもエンジニアでもないんですけど!?

突然Webサイトリニューアルを担当することになったAさん。「えっ!?ホームページ?…私、デザイナーでもエンジニアでもないんですけど!?」

日々進化するデジタル環境、新たな取り組みが求められる現代社会、そして叫ばれるDX。
予想もしなかった業務を突然任されかねないのが昨今の職場事情です。

そう、Aさんは普段からトレンドに敏感でネットショップも良く利用しているところを見込まれ、
ある日突然自社サイトのリニューアル担当に抜擢されたのです。

DXってよく聞くけど、何?そう思われたらこちらの記事が参考になります。

DX すべて教えます!その1ビジネスパーソンならそろそろ知っておきたいDX 早わかり入門編!
DX すべて教えます!その1 ビジネスパーソンならそろそろ知っておきたいDX 早わかり入門編!

経済産業省が示しているDXの定義や、実際のDXの例などをこちらの記事でご紹介していますので合わせてご覧ください。

そもそも事の起こりはひょんな一言から。

「うちのサイトって使いづらくないですか?スマホで見るとボタンが小さいし、写真ももっとア○ゾンみたいにこう…」

周りがなんとかしてくれると思ってAさんが呟いた内容がたちまち社内を駆け巡り、気付いた時にはAさん自身がWeb担当者の席に座ることになってしまったのです。

「よし、がんばってみよう!」そう思ったAさん。色々なサイトを見たり本を読んだりしてイメージやアイディアは浮かんできたのですが、知識もスキルもないため、それを伝えるすべを知りません。
かといって、デザインを一から学ぶ時間も予算もありません...

Adobe XD講座のご紹介

そんな時におすすめしたいのがアイデアを「さくっと」カタチにできるUIデザインツール、Adobe XDです!

シンプルかつ軽量な使用感が売りのAdobe XD。2016年に登場して以来、様々な制作の現場で確実にシェアを伸ばしています。正式名称は「Adobe Experience Design CC」。Experienceは日本語で経験、経験と言えばユーザーエクスペリエンス!つまりAdobe XDは、UI/UXデザインの為に登場したアプリケーションと言えます。

Aさんが感じた「使いづらい」「わかりにくい」といった疑問、これがまさにWebサイトのUI/UXデザインの考え方に繋がります。Adobe XDはユーザーの目に触れる部分(UI)と、ユーザーの体験(UX)両方をデザインすることが可能なアプリケーションです。そして作ったアイデアをリアルに表現する機能が備わっています。
Webサイトやアプリケーションの「見た目のデザイン」と「動きのデザイン」両方ができるツールと言えばイメージしやすいでしょうか?

Adobe XD を学習すべき理由
他のデザイン系ソフトにはない
3つの機能!

Adobe XD講座のご紹介

おススメ機能①
難しい知識も操作も不要!インタラクティブな動きを表現できる

[自動アニメーション]

Adobe XDを使用すれば下の画像のようなラインアニメーションが簡単に作成できます。
難しいCSSを書く必要もなければ、AfterEffectsのような本格的な動画アプリも使用しません。
しかもクリックやスクロールに反応してアニメーションをスタートさせるなどのインタラクティブな動きも簡単に設定できるので、あなたのアイデアをすぐさま形にして伝えることが可能です!

おススメ機能②
時短に嬉しい!繰り返し要素をあっという間に作成

[リピートグリッド]

Webサイト上のボタンや画像など、一定のルールで繰り返し配置されているものを良くみかけます。Adobe XDのリピートグリッド機能を使用すれば、様々なデザインの繰り返し要素をあっという間に作成できます。しかも修正・変更も自在に可能なので作業の効率がぐんとアップすること間違いなし!

おススメ機能③
HTMLもCSSも必要なし!瞬時にブラウザの表示を再現

[プロトタイプモード]

デザインが完成した後、HTMLやCSS、JavaScriptなどのコーディングからサーバーアップロードを経てようやくブラウザでの動作を確認できることになります。そこに至るまでには相応の時間や予算、人手が必要になる訳ですが、Adobe XDならプロトタイプモードを使用してデザインと動きが同時進行で確認できるので、サイト内のページ遷移やボタンが反応するタイミングなど、細かな修正の手戻りを減らすことができます。プロトタイプはほぼ完成に近い形を素早く公開できるので、今後のWeb制作のワークフローには欠かせない要素になるでしょう。

こんな方におすすめ、
Adobe XD講座!

現役のWebデザイナーの方にはもちろんですが、制作に関わっているすべての方やWeb業界以外の方にもAdobe XDはおすすめです。これまでExcelやPowerPointで資料やサイトマップを作成してデザイナーに渡していた方など、思わぬ時間短縮やコストカットが実現するかもしれません!

WinスクールのAdobe XD講座
どんなことが学べるの?

Adobe XD講座のご紹介

●現場のワークフローに基づいた実践的カリキュラム

要件定義からデザイン、コーディングという実制作の流れに沿って学習を進められるので、XDの操作を学びながらWebデザイン・UI/UXデザインの現場の仕事の手順も理解できます。ワイヤーフレーム・デザインカンプ・プロトタイプといった現場での専門用語もしっかり学習できます。

●楽しみながら作り上げていく実践教材

本講座ではスマートフォン向けのネットショップをサンプルに従って作成していただきます。リピートグリッドや自動アニメーション機能など、XDならではの直感的な操作で華やかなWebサイトがみるみるうちに仕上がっていきます。

●初心者はもちろん、デザイナー・ディレクター・コーダーにもおすすめ!

初心者でも簡単にインタラクティブな動きを作成できるのがXDの特徴ですが、本講座では現職の制作メンバーにとってもありがたい便利機能が沢山紹介されています。コンポーネントやデザインスペック、レスポンシブ機能など業務効率アップに貢献してくれるツールが盛りだくさん。 「ディレクション〜デザイン〜コーディング」のリアルな制作フローに即して解説しているので、Adobe XDを導入して得られるメリットも含めて理解できます。

現役Webデザイナーに聞きました。
Webデザインの現場の「声」

Adobe XDは実際に制作現場でどのくらい普及しているのでしょうか?
Web制作会社でディレクター・デザイナーを務めるBさんに聞いてみました。

Adobe XD講座のご紹介

「近年、発注側にも相応の知識を持った担当者が増え、デザインの現場は「短納期&高クオリティ」を求められる一方です。私たちデザイナーはクライアントの持つイメージをスピーディに形にしていく必要があります。今、Adobe XDで作成する「プロトタイプ」はデザインのたたき台として、クライアントとの間の共通言語となりました。何なら打ち合わせをしながら『こんな感じですか?』『そうそう!』と作ってみせることもできます。Adobe XDはWebサイト・アプリケーションの楽しさをデザインするUI/UXツールとしてだけでなく、制作をスムーズに進めるためのコミュニケーションツールとして重宝しています。デザイナー・コーダーの負担を減らし、時短・コストカットの観点からも、制作に関わる人全てに学習していただきたいコラボレーションツールです。」

これからAdobe XDを学ぶなら…

いかがでしたでしょうか?アプリケーションの使い方だけでなく、Webサイトの制作フローを学べるWinスクール Adobe XD講座は全9章。
そして本講座とは別にAdobe XD講座の基本操作をさくっと150分で体験できるオンラインセミナーもご用意しております。

もしこの記事を読んで少しでも興味を持ってくださった方、詳しく説明をお聞きになりたい方はぜひWinスクールへお問い合わせください。 専門のカウンセラーより丁寧に説明をさせていただきます。 まずはお近くの教室で「無料体験・説明会」にご参加いただくか、「電話・オンライン説明会」で、今困っていることやどんなことがしたいか聞かせてください。Winスクールの経験豊富なスタッフが、最適な講座やコースをご提案します。当日予約も可能です。

Adobe XD講座

サイトのUI/UXデザインに特化した最新ツールを習得

Adobe XD
受講概要

WebサイトやモバイルアプリのUI/UXをデザインできるツールである「Adobe XD」の基本操作から、 実際に
レスポンシブデザイン対応のWebサイトのUIを制作する実習を通して実践的な操作までを学習します。

学習時間

150分×6回(15時間)

受講期限:2ヶ月

学べる講座
ホームページ制作
が学べるおすすめコース

プラスαのデザインテクニックを習得

WEBデザイナー
受講概要

WEBデザインの基礎であるHTMLとCSSの学習に加えて、
レスポンシブデザインに対応したWebサイトの制作と、
グラフィックデザイン必須のIllustratorとPhotoshopを
総合的に学べるコースです。

学習時間

150分×28回(70時間)

受講期限:7ヶ月

学べる講座