月: 2022年2月

実技 XD実習

-本日のアジェンダ-

1限目
実技 XD実習
スマホサイトの制作について

2限目
実技 XD実習
プロトタイプのフロー設定と共有機能について

3限目
実技 XD実習
課題制作

4限目
実技 XD実習
課題制作

5限目
実技 XD実習
課題制作

本日のテーマ①

スマホサイトの制作について

スマホサイトの制作について

Adobe XDでは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションと言われています。デザイン、プロトタイプ、共有、すべてをXDでおこない活用することで、デザイナーはより早く、正確に、高い品質で作業できます。

ワンポイントアドバイス

XDを使ってスマホサイトのデザインを構築するのが、昨今のXD利用の最も実践的な利用方法でしょう。aiやpsdでも作れてXDでもワイヤーフレームやデザインラフを制作で来ていると理想的でしょう。

参考サイト

本日のテーマ②

XDの共有機能について

XDの共有機能について

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

ワンポイントアドバイス

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

※訓練施設のアカウントは施設アカウントなのでこのPCではやらないでください。お仕事の時やご自身のアカウントで行いましょう。

参考サイト

その他参考サイト

第5回成績考査について

3月3日(木)の5限目までに、Webページを提出してください。
提出は途中の段階でも結構です。
卒業までの期間を使って完成形を目指してみてください。

※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

学科 WEB動画基礎

-本日のアジェンダ-

1限目
学科　WEB動画基礎
YouTube利用について

2限目
学科　WEB動画基礎
WebサイトでYouTubeの 使い方について

3限目
学科　WEB動画基礎
課題作成

4限目
学科　WEB動画基礎
課題作成

5限目
学科　WEB動画基礎
課題作成

本日のテーマ

WebサイトでのYouTubeの活用法についてです。

YouTubeについて

YouTube （ ユーチューブ ） は、アメリカ合衆国・カリフォルニア州サンブルーノに本社を置く世界最大の動画共有サービス。Youは「あなた」、Tubeは「ブラウン管（テレビ）」という意味である。

Youtubeパートナーシッププログラムについて

 【資料】・・・DEAUアカデミー WEBデザイナー養成(午前)科 B教室 / 資料 /【5】運営 /「YouTubeパートナープログラムの手引き.pdf」

VIDEOとIFRAMEタグ

WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）

Dropboxの資料/運営/「動画基礎」 というフォルダをDLして下さい。
video.htmlがVIDEOタグで動画が埋め込まれているファイル、iframe.htmlがiframeタグが使用されてyoutube動画が埋め込まれているファイルです。
それぞれの記述の仕方・動作を確認してみましょう。

またiframe.htmlは練習用として使用してみて下さい。
ご自分でyoutube動画を埋め込んでみたり、またGooglemapもiframeタグが自動生成されますので、こちらも埋め込んでみましょう。

①IFRAMEタグを使用する（YOUTUBEなどの動画サイトから読み込む）

記述例
<iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

②VIDEOタグを使用する（動画ファイルをアップロードして読み込む）

記述例
<video src="sample.mp4"></video>

参考サイト

その他、埋め込みについては下記を参考に！

SNSの埋め込み方

練習課題

オンライン期間中のコーディング練習

Dropboxの練習用ファイルで力をつけましょう！
ファイル場所・・・資料 /【4】コーディング / 「コーディング練習 」
【練習①】「cording_saito_20201001.zip」
PDFにある問題を解いてみましょう。
【練習②】「cording_nakano_20210902.zip」
JPEGのデザインラフを目指して、CSSの「プロパティ」と「値」を組みましょう。

・完成したものは訓練中の成果としてポートフォリオに載せていただいて構いません。
・画像やバナーの入れ替えなど、自由にアレンジを加えていただいても構いません。
・提出課題ではありませんのでご自身のペースで挑戦してみて下さい。

本日の提出物はありません。