学科 UI/UXデザインツール概論【オンライン】

-本日のアジェンダ-

1限目
学科 UI/UXデザインツール概論
adobe XDについて

2限目
学科 UI/UXデザインツール概論
adobe expressについて

3限目
学科 UI/UXデザインツール概論
canvaについて

4限目
学科 UI/UXデザインツール概論
LP(ランディングページ)を作るポイント

5限目
学科 UI/UXデザインツール概論
Figmaについて


本日のテーマ

あくまでも、IllustratorとPhotoshopが扱える前提で試してみましょう。

【注意点として】
基本的に商業デザインをビジネスとしている企業がフリーソフトを使って商売をするのはいかがでしょうか?
教室で、有料のソフト(アプリケーション)IllustratorとPhotoshopを扱っているという事を前提に
「やむを得なく使っている」という意識はお忘れなく!
そして、企業が欲しいのはあくまで「作品の質」と「作品の内容」と「作品の目的」である事をアピールできるように進めていきましょう。

参考サイト

【資料】

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

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

【動画】より幅を広げる為に

【動画】LPの作り方(XDについて)

参考サイト

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

本日の課題

提出課題はありません。
ワイヤーフレームからデザインラフの作成にあたり、情報収集しながらレイアウトやキャッチコピー、文書を推敲しましょう。

第4回成績考査について

課題はバナーのバリエーション展開と、今できているところまでのワイヤーフレーム(進んでいる人はデザインラフ)です。

実技 ECサイトデザイン実習⑤

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習⑤
デザインラフ制作に向けて

2限目
実技 ECサイトデザイン実習⑤
XD実践

3限目
実技 ECサイトデザイン実習⑤
XD実践

4限目
実技 ECサイトデザイン実習⑤
課題制作

5限目
実技 ECサイトデザイン実習⑤
課題制作


本日のテーマ

コーディングの準備をしましょう。

制作のポイント

実務ではデザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案(最低2パターン)をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。

参考サイト

デザインラフが出来たら・・・

コーディングに向けて画像を保存(=準備と整理)しておきましょう。

Web用画像について

「jpg」「gif」「png」「svg」について
まず悩んだら「jpg」、透過表現を必要とするなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」=複雑な画像は重たくなるので条件次第で使う。
と良いでしょう。

参考サイト

本日の課題

デザインラフを製作しましょう。
できたところまでのデザインラフをポートフォリオサイトに投稿しましょう。