実技 XD実習

1限目
実技 XD実習
プロトタイプのフロー設定について

2限目
実技 XD実習
共有機能について

3限目
実技 XD実習
成績考査

4限目
実技 XD実習
成績考査

5限目
実技 XD実習
成績考査

本日のテーマ

実技XDと成績考査です

XDの共有機能について

「共有」は、作業チームのコミュニケーションをスムーズにしたり、情報伝達を容易にしたりする機能です。1つのWebサイトやアプリを作る際には、多くの人の意見をとりまとめたり、必要に応じて修正を加えたりする必要があります。Adobe XDにはそんなチームの共同作業をスムーズに進めるための各種機能が含まれています。

ワンポイントアドバイス

XDの共有機能は、会社にお勤めになってから利用すると良いですが、出来る事と出来ない事、注意点を確認しておきましょう。

参考サイト

本日の課題

作成したワイヤーフレームを4限目終了までにご自身のWordpressに新規固定ページにパスワード付きでUPしてください。
(5時限目終了までは更新しても大丈夫です)
進んでいる人はデザインラフを提出しましょう。

※投稿設定のパーマリンクのURLスラッグは
「grade-check_20240619」と設定して下さい。
※ポートフォリオサイトの1ページとして人に見せられるよう、
制作過程や説明などもまとめましょう。

WordPressへの成績考査の上げ方

ご自身のWordPressに成績考査用のバナーを投稿していただきます。
手順は以下の通りです。

①固定ページに新規投稿で作成します。

②タイトルと氏名の入力

  • タイトル(タイトルを追加の部分)に「第4回成績考査」
  • 次のブロックに見出し(H2)で氏名(漢字フルネーム)を入力して下さい。

③作品の挿入

以降のブロックにバナー画像をブロックエディタ「画像」にてアップロードして下さい。

④パーマリンク設定

投稿設定のパーマリンクのURLスラッグに下記を設定して下さい。
grade-check_20240619」

⑤パスワード保護

公開状態をパスワード保護にします。パスワードは「test」と設定して下さい。

⑥公開にして終了

固定ページ一覧に作成したページが出来ているか確認して下さい。

学科 XD基礎【オンライン】

-本日のアジェンダ-

1限目
学科 XD基礎
XDについて

2限目
学科 XD基礎
XDの使い方について

3限目
学科 XD基礎
データ連携について

4限目
学科 XD基礎
課題制作

5限目
学科 XD基礎
課題制作

本日のテーマ

adobe XD です。

adobe XD とは?

Adobe XDは、アドビが販売しているベクターベースのプロトタイピング作成ツールである。 ウィキペディア

参考サイト

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
1.AdobeXDの教科書.pdf」 
2.より幅を広げる為に.pdf」 

ワンポイントアドバイス

XDはまだ求人票で必要なスキルと掲載は少ないですが、取り入れている企業と、取り入れているデザイナーさんは増えています。
まずは、基本操作と利点などをしっかりと確認しておきましょう。

XD データ連携について

Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。

ワンポイントアドバイス

実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai(Illustrator)なのかpsd(Photoshop)がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。

参考サイト

【動画】

より幅を広げる為に (3:03)
無料ソフト活用のすすめ
https://youtu.be/7fg9S9zNoaE

ポートフォリオ掲載作品の充実のために (7:36)
キーとなるバナー制作のポイント
https://youtu.be/pIK8wjkmmAs

紹介ソフトについて (6:59)
https://youtu.be/lhtUiEAomk0

ソフト①バナー制作 Adobe Express (12:52)
https://youtu.be/VL1acGqeaRo

ソフト②バナー制作 Canva (7:30)
https://youtu.be/l2AV7Hd9_D8

アピールとしてさらに有効なランディングページ(=LP) (4:32)
https://youtu.be/T0ISDYl0fOg

紹介ソフトについて (9:30)
https://youtu.be/JyGSE4XoJGA

ソフト③LP制作 Adobe XD (9:48)
https://youtu.be/Zou2SvbGGJo

ソフト④LP制作 Figma (10:08)
https://youtu.be/hW1IlT7pR_4

まとめ・注意点 (11:13)
https://youtu.be/sCt73XRWQY8

参考サイト

  • ご紹介③・adobe XD
    【お知らせと注意点】
    以前は無料で利用できるプラン(スタータープラン)がありましたが、現在は公式サイトから見当たらなくなっています。Adobe XDは、2023年1月に単体販売が終了になりました。 現在はスタータープランはダウンロードできなくなっており、無料で利用する場合は7日間の無料体験版 のみになっています。
    ※こちらは教室でお試しください。別動画へ案内
  • ご紹介④ Figma
    ・コラボレーションインターフェースデザインツール –Figmahttps://www.figma.com/ja/

本日の課題

ワイヤーフレームからデザインラフの作成に向け、世の中のサイトを参考に情報収集しながらレイアウトやキャッチコピー、文書を考えておきましょう。
手書きでメモしておくと良いです。