学習記録20250717

実技 UI/UXデザイン実習

講師:小谷祥吾

-本日のアジェンダ-

1限目
実技 UI/UXデザイン実習
Photoshopの機能~GIFアニメーションの作り方について~

2限目
実技 UI/UXデザイン実習
GIFアニメーション制作

3限目
実技 UI/UXデザイン実習
GIFアニメーション制作

4限目
実技 UI/UXデザイン実習
GIFアニメーション制作

5限目
実技 UI/UXデザイン実習
講評(作品紹介タイム)


本日のポイント

息抜きです!

GIFアニメーション

GIFアニメーション(ジフアニメーション、GIF animation)は、Graphics Interchange Format (GIF) の「マルチイメージ」を使ったアニメーションアニメーションGIF (animated GIF) ともいう。

参考サイト

学習記録20250716

学科 WEBディレクション概論⑤【オンライン】田中先生

講師:田中里枝

-本日のアジェンダ-

1限目
学科 ポートフォリオ作成基礎⑤
新人デザイナーのマインドセット

2限目
学科 ポートフォリオ作成基礎⑤
経験を積むにつれて陥る罠

3限目
学科 ポートフォリオ作成基礎⑤
自分の仕事が世に出るという事

4限目
学科 ポートフォリオ作成基礎⑤
健康であれ

5限目
学科 ポートフォリオ作成基礎⑤
課題制作 or フリートーク


本日のテーマ

クリエイティブ職で生きていく上で忘れてほしくない事

現役でWEB業界でお仕事をしている先生のお話を聞いてみましょう。

【テーマ】
・新人デザイナーのマインドセット
・経験を積むにつれて陥る罠
・自分の関わった仕事が世に出るという事
・健康であれ

話題についてのリクエストや、ご質問も可能です。

・新人デザイナーのマインドセット:参考サイト
 新人デザイナー必見!先輩デザイナーに聞いた「誰もがぶつかるデザインの壁」
 批判は人格否定ではない。否定的フィードバックで絶望しないために

・経験を積むにつれて陥る罠:参考サイト
 安全地帯からの批判で、自分の「優秀さ」を確認したい人たち
 【仕事の嘘は必ずバレる】正直でいるための心構えと嘘をつかれたときの対処法

・自分の関わった仕事が世に出るという事:参考サイト
 頑張ってよかった! 仕事で努力が報われたと思う瞬間8選

・健康であれ:参考サイト
 谷川俊太郎さんが「よくできた詩とは思っていない」と言う代表作「生きる」は、なぜ愛され続けるのか?

学習記録20250712

学科 ポートフォリオ作成基礎⑤【オンライン】

講師:大浜信彦

-本日のアジェンダ-

1限目
学科 ポートフォリオ作成基礎⑤
Webデザイナーの仕事

2限目
学科 ポートフォリオ作成基礎⑤
Webデザイナーの仕事

3限目
学科 ポートフォリオ作成基礎⑤
プロジェクトの成功とは

4限目
学科 ポートフォリオ作成基礎⑤
課題制作

5限目
学科 ポートフォリオ作成基礎⑤
課題制作


本日のテーマ

Webデザイナーの実際の仕事について

プロジェクト事例

実際のWebサイトを見ながらWebデザイナーの仕事を考察しましょう。
皆さんが担当するつもりで考えてみてください。例えば、以下の項目です。
また、聞きたいこと(質問事項)なども考えてみてください。

  • 費用
  • 工期
  • 作業条件
  • 納品条件

参考サイト

プロジェクトの成功とは

プロジェクト(仕事)が成功するとは、どんな状態になることでしょうか。
プロジェクト管理の観点から考えてみましょう。

参考サイト

学習記録20250711

実技 ポートフォリオ作成実習⑤【成績考査⑤】

講師:湊 有加里

-本日のアジェンダ-

1限目
実技 ポートフォリオ作成実習⑤
成績考査

2限目
実技 ポートフォリオ作成実習⑤
成績考査

3限目
実技 ポートフォリオ作成実習⑤
成績考査

4限目
実技 ポートフォリオ作成実習⑤
成績考査

5限目
実技 ポートフォリオ作成実習⑤
成績考査


本日のテーマ

成績考査です

本日の課題

・企業への応募用作品ページを作成しましょう。

■Web制作に関連する職種の場合
コーディングしたWebページのスクリーンキャプチャを取得して4限目終了までにご自身のWordPressに新規固定ページにパスワード付きでUPしてください。
(5限目終了までは更新しても大丈夫です)
■それ以外の職種の場合
希望職種への応募を想定した作品を制作し、ページにご自身のWordPressに新規固定ページにパスワード付きでUPしてください。

【パーマリンクのURL設定】
grade-check_20250711」としてください。
ポートフォリオサイトの1ページとして人に見せられるよう、制作過程や説明などもまとめましょう。
・作品を効果的にアピールできるように以下の項目を考慮して説明文を考えてみてください。

・作品タイトル(サイト名)
・クライアント
・使用ソフト
・制作期間
・制作時に考慮した点 など

アンケートの実施について

「職業人講話」に向けたアンケートにご回答の上、
本日中に講師にご提出ください。

WordPressへの成績考査の上げ方

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

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

②タイトルと氏名の入力

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

③作品の挿入

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

④パーマリンク設定

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

⑤パスワード保護

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

⑥公開にして終了

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

学習記録20250710

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

講師:大浜信彦

-本日のアジェンダ-

1限目
学科 jQuery基礎
jQueryの使い方について

2限目
学科 jQuery基礎
jQueryの導入

3限目
学科 jQuery基礎
課題制作

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

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


本日のテーマ

jQueryを自分のサイトに導入しましょう

jQueryの導入

jQueryを自分のサイトに導入して動きのあるサイトを作りましょう。

参考サイト

jQueryの利用方法(復習)

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery (実装したいキーワード)」で検索します。
良く使うキーワードの例は、以下の通りです。

  • スライダー
  • カルーセル
  • ハンバーガーメニュー
  • ライトボックス
  • ドリルダウン
  • フェード
  • スクロール など

参考サイト

学習記録20250708

実技 WEBページ制作実習⑤

講師:湊 有加里

-本日のアジェンダ-

1限目
実技 WEBページ制作実習⑤
After Effects基本ツールについて

2限目
実技 WEBページ制作実習⑤
After Effects実践

3限目
実技 WEBページ制作実習⑤
After Effects実践

4限目
実技 WEBページ制作実習⑤
課題制作

5限目
実技 WEBページ制作実習⑤
課題制作


本日のテーマ

After Effectsで15秒動画を作成してみましょう

Premiere Pro で作った動画に効果を加えることも可能です!
PhotoshopやPremiere Pro等のAdobeソフトと連携がしやすいのがAfter Effectsの特徴です。タイトルの制作・画像の加工・エフェクトの作成・ゼロベースのアニメーション制作から、フィニッシュワーク(印刷業界における用語で、印刷物が印刷機から出た後に行われる後加工の工程全般を指します)まで用途は様々です。

After Effectsで動画制作5つの工程

01.コンポジション設定とファイルの読み込み
02.アニメーション
03.エフェクト
04.レイヤー
05.書き出し

参考サイト※再掲

学習記録20250707

学科 アニメーション制作基礎【オンライン】

講師:湊 有加里

-本日のアジェンダ-

1限目
学科 アニメーション制作基礎
Adobe After Effectsについて

2限目
学科 アニメーション制作基礎
ソフトの役割や特徴について

3限目
学科 アニメーション制作基礎
動画制作のポイント

4限目
学科 アニメーション制作基礎
課題制作

5限目
学科 アニメーション制作基礎
課題制作


本日のテーマ

動画制作ツール「Adobe After Effects」についてです

Adobe After Effects(アドビ アフターエフェクツ)

アドビが販売している映像のデジタル合成やモーション・グラフィックス、タイトル制作などを目的としたソフトウェアであり、この分野では代表的な存在である。「A.E.」「AE」「Ae」(えーいー)と略されることもある。After Effectsは主に映画やテレビ番組の映像加工、CM制作、ゲーム、アニメ、Webなどのコンテンツ制作に広く利用されている。

【資料】

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

下記のファイルをダウンロードしましょう。
アニメーション制作基礎について.pdf

【動画】

参考サイト