投稿者: master

学科 ユーザーインターフェイス基礎③【オンライン】

-本日のアジェンダ-

1限目
学科 ユーザーインターフェイス基礎③
デザインラフについて

2限目
学科 ユーザーインターフェイス基礎③
HTML/CSSをイメージしたレイアウト考案について

3限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

4限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

5限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

本日のテーマ

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

デザインラフとは？

ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。

【資料】

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

下記のファイルをダウンロードしましょう。
「「デザインの考え方」の教科書⑦.pdf」　

【動画】　

ワンポイントアドバイス

ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成しましょう。

本日の課題

課題提出はありません。
今後のデザインラフ制作とコーディングに向けて、レイアウトのブラッシュアップや掲載内容（細かい文言など）を考え、まとめておきましょう。

実技 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_20231216」と設定して下さい。
※ポートフォリオサイトの1ページとして人に見せられるよう、
制作過程や説明などもまとめましょう。

学科 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 express
    バナー無料作成ツール オンラインでカスタムバナーをデザインhttps://www.adobe.com/jp/express/
  • ご紹介②　canva
    バナー作成が無料！作り方もアプリで簡単！https://www.canva.com/ja_jp/create/banners/
  • ご紹介③・adobe XD
    【お知らせと注意点】
    以前は無料で利用できるプラン（スタータープラン）がありましたが、現在は公式サイトから見当たらなくなっています。Adobe XDは、2023年1月に単体販売が終了になりました。 現在はスタータープランはダウンロードできなくなっており、無料で利用する場合は7日間の無料体験版 のみになっています。
    ※こちらは教室でお試しください。別動画へ案内
  • ご紹介④　Figma
    ・コラボレーションインターフェースデザインツール –Figmahttps://www.figma.com/ja/

本日の課題

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

実技 ポートフォリオ作成実習②

-本日のアジェンダ-

1限目
実技 ポートフォリオ作成実習②
WordPressサイトの掲載内容について

2限目
実技 ポートフォリオ作成実習②
WordPressサイト中間チェック

3限目
実技 ポートフォリオ作成実習②
WordPressサイト中間チェック

4限目
実技 ポートフォリオ作成実習②
WordPressサイトを拡充しましょう

5限目
実技 ポートフォリオ作成実習②
WordPressサイトを拡充しましょう

本日のテーマ

WordPressサイトの中間チェックです

WordPressサイトの掲載内容について

WordPressサイトには、以下の内容を掲載しましょう。

ポートフォリオサイト

ポートフォリオサイトとして活用できるように以下の項目を掲載してください。

  • ご挨拶
  • プロフィール（自己紹介）
    • 名前
    • 顔写真
    • 生年月日
    • 略歴
    • 仕事への姿勢や意気込み
    • 自己PR
  • 保有スキル
    • スキル項目
    • スキルレベル
  • ポートフォリオ
    • 作品
    • 作成の説明
    • 作品ツール
    • 作成時間
    • その他（苦労したこと、考慮したこと、学んだこと など）
  • 後書き

訓練ブログ

学んだことの復習や忘れてしまったことを思い出す資料として訓練ブログを作成してください。

  • 訓練の1日単位で投稿ページを作成してください。
  • ページのタイトルは、訓練内容がわかるようにしてください。

参考サイト

注意事項

  • テーマやプラグインを入れすぎるとサーバーのディスク容量が大きくなってしまうと同時にWordPressの動きが重たくなってしまうので不要になったテーマは削除するようにしましょう。

WordPressサイト作成時の注意事項

WordPressサイトの作成に当たっては、ポートフォリオとしての活用を中心に考えてサイト構成を考えてください。また、ポートフォリオの作成に当たっては、ポートフォリオを見る人の立場に立って考えてみましょう。

  • 採用担当者の立場になって作りましょう（採用担当者が何をみたいか考えてみましょう）
  • トップページは作品主体にしましょう（ポートフォリオとしてのトップページを意識してみましょう）
  • 操作性や導線を考慮しましょう（クリックの多すぎは見る気がしなくなります）
  • 未経験者の場合は「学校でこんな事を勉強してきました」、「私はこんなことができます」をわかるようにしましょう

本日の課題

ポートフォリオサイト、訓練ブログの完成度を上げてください。