学科 レイアウトデザイン基礎④【オンライン】

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎④
デバイスについて

2限目
学科 レイアウトデザイン基礎④
各デバイス検証について

3限目
学科 レイアウトデザイン基礎④
課題制作

4限目
学科 レイアウトデザイン基礎④
課題制作

5限目
学科 レイアウトデザイン基礎④
課題制作

本日のテーマ

デバイス検証は最後にしっかりと

デバイスとは?

ブラウザとは、インターネットを介してホームページ(Webサイト)をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。

【資料】

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

下記のファイルをダウンロードしましょう。
各デバイス検証.pdf」 

動画】「各デバイス検証」

実機検証 について

スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。

ワンポイントアドバイス

サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。

参考サイト

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

学科 レイアウトデザイン基礎③【オンライン】

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎③
ブラウザについて

2限目
学科 レイアウトデザイン基礎③
各ブラウザ検証について

3限目
学科 レイアウトデザイン基礎③
課題制作

4限目
学科 レイアウトデザイン基礎③
課題制作

5限目
学科 レイアウトデザイン基礎③
課題制作

本日のテーマ

ブラウザ検証についてです

ブラウザとは?

ブラウザとは、インターネットを介してホームページ(Webサイト)をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。

【資料】

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

下記のファイルをダウンロードしましょう。
各ブラウザ検証.pdf」 

動画

ワンポイントアドバイス

サイトが一通り形になったら特に使用する可能性の高いブラウザは必ず確認しましょう。

参考サイト

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

これからの時代マーケティング能力は必須!

デザイナーだけではなく様々なお仕事でマーケティング能力が高い、意識が高いというのはどんなビジネスにおいても求められる能力です。
就職活動は、努力や苦労した分だけ、一歩踏み出した分だけその後のお仕事と未来への自分へ帰ってくるでしょう。
やっぱり就職活動は大変です!!
ですがこれを乗り越えたら次の未来が待っています。
自分のペースで良いと思います。焦らず、少しでも前に進んでいきましょう。

【資料】

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

下記のファイルをダウンロードしましょう。
マーケティング「結局マーケティングって」.pdf」 

【動画】

実技 WEBデザイン実習③

-本日のアジェンダ-

1限目
実技 WEBデザイン実習③
オーサリングツールについて

2限目
実技 WEBデザイン実習③
Dreamweaver の使い方について

3限目
実技 WEBデザイン実習③
課題制作

4限目
実技 WEBデザイン実習③
課題制作

5限目
実技 WEBデザイン実習③
課題制作

本日のテーマ

Dreamweaverです。

Dreamweaverについて

Adobe Dreamweaver(アドビドリームウィーバー)は、ひとことで言うとホームページ制作ソフトです。
編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML+画像」なので、頑張れば「メモ帳+ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。

【資料】

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

下記のファイルをダウンロードしましょう。
WEBデザイン実習の教科書.pdf」 

ワンポイントアドバイス

Dreamweaverの歴史は長いです。いま世にいるデザイナーのほとんどの方がDreamweaverを過去に使った又は習った事のあるケースが多いです。ただし、昨今ではDreamweaverの需要は落ちています。
その理由は、様々ですがこれからの希望職に合わせて、習得してみてください。

参考サイト

本日の課題

コーディングの続きを作成しましょう。
今日の時点できたところまでの成果をWordPressにUPしてください。

学科 WEB動画基礎【オンライン】

-本日のアジェンダ-

1限目
学科 WEB動画基礎
WEB動画とは?

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

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

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

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

本日のテーマ

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

WEB動画について

Web動画とは、WebサイトやYouTubeチャンネルなど、オンラインでの視聴を想定した動画全般を指します。 「Webムービー」と呼ばれることもあり、目的はブランディングや商品・サービスのプロモーション、広告配信など多岐にわたります。

【資料】

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

下記のファイルをダウンロードしましょう。
「WEB動画基礎20220818.pdf」 

【動画】

VIDEOとIFRAMEタグ

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

①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の埋め込み方

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

多様化する動画の世界、まずは普段から楽しんで使いましょう。

目的を相手に伝えやすい媒体である動画(ムービー)はやっぱり需要が高い。

動画の特徴
・「興味を引きつける」
・「多くの情報を伝えられる」
・「記憶に残る」

動画コンテンツの種類
1.「商品・サービス紹介」
2.「動画広告」
3.「採用コンテンツ」
4.「社内向けコンテンツ」

未来のキーワード
・メタバース
・動画マーケティング
・AI
・5G

【資料】

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

下記のファイルをダウンロードしましょう。
動画の歴史について.pdf」 
WEB動画の未来について.pdf」 

【動画】動画の歴史について

参考サイト

【動画】WEB動画の未来について

参考サイト