商品情報にスキップ
1 3

Adobe XDではじめる「動くプロトタイプ」Webデザイン講座

通常価格 ¥4,730
通常価格 セール価格 ¥4,730
(税込)
セール 売り切れ
Adobe XD MdN × Bau-ya® UI/UX Webデザイン Web制作 プロトタイプ

講師:松下絵里(まつした・えり) /

Webデザイナー 松下絵梨氏登壇。Adobe XDで「動くプロトタイプ」を制作しチームでイメージを共有してWebやアプリのUI/UXに活かすまでの方法をやさしく実践的に解説する講座。XDのアセットやレスポンシブサイズ変更などの機能を活用して効率よくWebデザインを行い、自動アニメーションで「動くプロトタイプ」を制作して、Web制作の円滑なコミュニケーションを実現できます。

[この講座の概要]
●2時間のオンデマンドビデオ講座
●サンプルデータダウンロード
●学習期間の制限なし
PCモバイルからアクセス
  • 学べること、得られること

    ■ レスポンシブWebデザイン
    ■ 動きのある画面遷移のプロトタイプ制作方法
    ■ アニメーションするマイクロインタラクションのプロトタイプ制作方法
    ■ 動くプロトタイピングの共有方法
    ■ Adobe XDの基本操作が理解できる
    ■ Adobe XDを使い効率よくWebデザインが行えるようになる
    ■ Adobe XDを使い、画面遷移(プロトタイプ制作)が行えるようになる

  • こんな方におすすめ

    ■ Webデザイン初学者
    ■ グラフィックデザイナー
    ■ PhotoshopやIllustratorで制作を行っているWebデザイナー

折りたたみ可能なコンテンツ

本講座について

本講座は、「MdNの教室 MdN × Bau-ya」で2021年11月25日にオンラインセミナーとして開催された
「Adobe XDではじめる「動くプロトタイプ」Webデザイン講座」(講師:松下絵里)
https://www.street-academy.com/myclass/123934
を収録したものを、オンデマンド講座として再編集してご提供するものです。

※本講座は2021年11月当時の情報を元に講座としてご提供しているものです。これ以降になされた事実および情報の変更によっては、講座の中で取り上げた内容と異なる場合があります。登壇者、および株式会社エムディエヌコーポレーションは、本動画の中で紹介した内容によって生じたいかなる損害に一切の責任を負いかねますので、あらかじめご了承ください。

講座の内容

Webデザインにおける「プロトタイプ」とは、Webサイトやアプリなどの「試作品」を意味します。
Webは静止画とは違い、画面遷移したり、インタラクション機能など「動き」が求められるため、プロトタイプは、見た目以上にWebサイトやアプリのUI/UX、つまり操作性を評価するために使われます。

Webデザインの初心者やプロトタイピングツールが現在ほど一般的ではなかった時期から「見た目のWebデザイン」を中心に行っていたデザイナーの中には、プロトタイピング専門のツールではなく、Adobe Photoshopや、Adobe Illustratorといった静止画用のグラフィックツールをWebデザインに起用していた方も少なくありません。

しかし、現代のWebやアプリのUI/UXでは、見た目のデザインだけでなく「動き」をチームで共有してWebサイト制作を進めることが必須となっています。
では、どうしたら「動き」を表現するためのデザインをすることができるのでしょうか?

Adobe XD™は、Webページやアプリをデザインするために、ワイヤーフレーム、ビジュアルデザイン、そして「動くモックアップ」であるプロトタイプを効率よく制作し、チームで共有することで、プロジェクトのコミュニケーションを円滑にするUI/UXのプロトタイピングツールです。

Adobe XD
https://www.adobe.com/jp/products/xd.html

この講座では、Webデザイナー,UIデザイナーとして豊富な実績を持ち、「Adobe XD ユーザーグループ 大阪」の代表を務め、『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』の著者としても知られる松下絵梨氏を招聘。
自らの体験を踏まえて京都造形芸術大学をはじめとする教育機関でWebデザインを教える氏に、Webデザインの初心者のために、Adobe XDを使って、「動くプロトタイプ」を制作してチームでイメージを共有し、最終的なWebやアプリのUI/UXに活かすまでの方法を解説していただきます。

また講座の中では、アセットやレスポンシブサイズ変更などの機能を活用して効率よくWebデザインを行い、自動アニメーションで「動くプロトタイプ」を制作してチーム内で共有し、コンセンサスを取る方法についても解説していきます。

本講座を受講することで、今まで静止画でデザインをして動きを表現することのできなかった方も最終イメージに近い「動くプロトタイプ」を制作し、より円滑なコミュニケーションを実現することができるようになるでしょう。

● 書籍情報
『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』(翔泳社)
https://www.shoeisha.co.jp/book/detail/9784798158716

●協賛企業・ブランド
Adobe XD ユーザーグループ 大阪
https://xdug.jp/osaka/
フォントワークス株式会社
https://fontworks.co.jp
フォントワークス LETS
https://lets.fontworks.co.jp/fontworks

#mdnbauya48

Keywords: Web, アプリ, デザイン, UI, UX, プロトタイプ, インタラクション, Adobe XD, マイクロインタラクション, トランジション, アセット, コンポーネント, 自動アニメーション

コースの内容

●講座を受講する前に
・受講に際しての要件
・参考資料
・著作権および本講座提供のプログラムについて
●本編動画
・前編(52分19秒)
・後編(47分35秒)
●講師から受講者のみなさまへ

受講に際しての要件

□ オンラインで受講いただく場合は、インターネット環境とコンピュータなどのデバイスおよびWebブラウザ。
□ ハンズオンスタイルで受講の方は、以下のアプリケーションがインストールされたコンピュータ。
・最新バージョンのAdobe XD
※ OSやWebブラウザ、各種アプリケーションなどは、最新のバージョンのものをご使用ください。
※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。
ーーー
●本講座の内容についてのご質問につきまして
 
[MdN × Bauya]オンデマンド収録講座プログラムは、過去に開催したリアルタイムセミナーの収録動画のためご質問は受け付けておりません。ご了承いただければ幸いです。動画本体が見られない、またダウンロードデータの破損など、内容以外のご質問につきましては「お問い合わせ」よりご連絡ください。

講師:松下絵里(まつした・えり)

ウェブデザイナー,UIデザイナー,講師

大阪出身大阪在住のウェブ/UIデザイナー 
東京理科大学理工学部卒業 

京都造形芸術大学 非常勤講師 
デジタルハリウッド大阪校 主幹講師 
コンピュータ専門学校HAL 非常勤講師 

通信機器メーカーで開発・サポート業務に従事したのち、デザイン・広報秘書業務に転身。
2010年よりフリーランスとして独立し、DTP、ウェブ、アプリデザイン、ディレクションを行なっている。 

ウェブに関する様々なセミナーを行っているCSS Niteでは、「CSS Niteベスト・セッション2018」「CSS Niteベスト・セッション2019」でベスト10セッションに選出された。 

『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』著者
https://book.tsukiakari.design/xd/

CSS Nite in Osaka 実行委員長 

Adobe XD ユーザーグループ大阪 代表 

Twitter
https://twitter.com/matsu_eri

「MdNの教室 MdN × Bauyaとは?」 

グラフィックデザインやウェブデザインなどのクリエイションをはじめ、生活や暮らしなどさまざまなジャンルのノウハウと可能性を伝える出版社MdNが、お馴染みの人気著者やトップクリエイターを招聘し『最新のノウハウ』と『実践的なテクニック』を講座を通してお伝えします。

MdN × Bauya教室ページ https://bit.ly/MdN-Bauya

■ MdNの著者が講座に登壇
MdNの人気書籍の著者や著名クリエイターを招聘。
ベストセラーやロングセラーでお馴染みの執筆陣が登壇します。
紙面だけでは伝えられないテクニックや、最新情報が満載です。

■ クリエイターの学び舎、Bau-ya®が全面協力
クリエイティブ分野の講座開催で急成長を遂げるBau-ya®(バウヤ)が、MdNとコラボレート。
講座の企画・運営や参加者の皆さまを、強力にバックアップします。
Bau-ya® 教室ページ http://bit.ly/bauya

MdN × Bau-ya® 収録講座プログラム