学習記録20250623


学科 デザイン概論④【オンライン】※フリーテーマ【夏目先生】

講師:夏目佳奈

-本日のアジェンダ-

1限目
学科 デザイン概論④
フリーランスのメリット・デメリット

2限目
学科 デザイン概論④
フリーランスの平均年収

3限目
学科 デザイン概論④
仕事をとるためには?

4限目
学科 デザイン概論④
仕事の取り組み方

5限目
学科 デザイン概論④
課題制作


本日のテーマ

フリーランスへの道・働き方

■フリーランスのメリット・デメリット

フリーランスって自由な時間でできて、好きな場所でできて楽しそう!
でも、光があれば影もあります。実際のどんな感じなのか見てましょう

■フリーランスの平均年収

実際にどんな金額でやっているのか?参考に見てみましょう

■仕事をとるために意識することは?

  • 企業とつながる
  • SNSの運用
  • 流行っているものを抑える(ティックトックやKindleなど…)
  • ポートフォリオ
  • イベントに出展する

参考サイト

■仕事が決まったら次にすること

営業のかいあって、仕事を頼みたいです!と言われました。
次にすることとは…?

  • 金額交渉
  • レスポンスは早く
  • 契約書をかわそう
  • 仕事の進め方
  • コミュニケーション能力
  • 信頼されること

参考サイト

■フリーランスになったらやらなきゃならない「確定申告」

確定申告とは、1月1日から12月31日までの1年間の所得と、その所得に対する所得税を計算し、税務署に申告・納税する手続きのことです。

学習記録20250620

学科 サーバーサイドプログラム基礎【オンライン】

講師:湊 有加里

-本日のアジェンダ-

1限目
学科 サーバーサイドプログラム基礎
PHP について

2限目
学科 サーバーサイドプログラム基礎
WordPressのPHPでの役割について

3限目
学科 サーバーサイドプログラム基礎
FTPについて

4限目
学科 サーバーサイドプログラム基礎
課題作成

5限目
学科 サーバーサイドプログラム基礎
課題作成


本日のテーマ

WordPressはphpで出来ています。

【資料】

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

下記のファイルをダウンロードしましょう。
WordPress活用法の教科書⑤.pdf」 
WordPress活用法の教科書⑥.pdf」

動画WordPress活用法の教科書⑤.pdf」 

動画WordPress活用法の教科書⑥.pdf」

サーバーサイドスクリプトとクライアントサイドスクリプト

スクリプト(プログラミング)にはサーバー側で動くものとクライアント側(PC側)で動くものがあります。違いについて理解しましょう。

参考サイト

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。Webサーバは必須ではありません。これは、Webブラウザ内でプログラムが実行されるためです。このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

PHP入門

PHPはプログラミング言語なのでIT技術者が利用するのが一般的です。但し、WordPressがPHPで作成されていることもありWordPressの独自テーマ作成などを行う時にPHPに接する機会もあります。

ワンポイントアドバイス

PHPはHTMLの延長と考えて、Wordpressの利用でよく見かける技術として今後に備えておきましょう。まずは、しっかりとHTML・CSSを理解しましょう。
PHPのファイルにHTMLを記述できるわけですから 必要性と使いどころをまずは理解して、一つ一つ理解してい くのが良いでしょう。

FTPソフトの使い方について

これからLPのコーディングに入ります。
サーバーアップを行う上でFTP接続について知っておきましょう。

FFFTP でサーバーに FTP 接続を行うためには、以下の情報が必要です。

【サーバー名】
接続するサーバーのドメイン名です。「サーバー名/ホスト名/FTP ホスト名」などと呼ばれています。

【ユーザー名】
接続するサーバーに登録されているユーザー名です。「ユーザー名/アカウント名」などと呼ばれています。

【パスワード】
接続するサーバーに登録されているユーザーのパスワードです。

訓練で使用するサーバーでは、「サーバー名」「ユーザー名」はアジェンダのサイドバーにある「 Serverリスト」に記載されています。

※パスワード設定について

学習記録20250618

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

講師:湊 有加里

-本日のアジェンダ-

1限目
学科 ポートフォリオ作成基礎④
費用とは?

2限目
学科 ポートフォリオ作成基礎④
デザイン費用とは?

3限目
学科 ポートフォリオ作成基礎④
選ばれるデザイナーになるには?

4限目
学科 ポートフォリオ作成基礎④
考える力について

5限目
学科 ポートフォリオ作成基礎④
本日のまとめ


本日のテーマ

とにかく「考える」です!

【資料】

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

下記のファイルをダウンロードしましょう。
デザイン費用について.pdf」 

【動画】

参考サイト

学習記録20250617

実技 WEBディレクション実習

講師:平井美江

-本日のアジェンダ-

1限目
実技 WEBディレクション実習
WEB業界の面接について

2限目
実技 WEBディレクション実習
模擬面接の実践

3限目
実技 WEBディレクション実習
模擬面接の実践

4限目
実技 WEBディレクション実習
応募用ページについて

5限目
実技 WEBディレクション実習
アンケート実施・FTPパスワード申請


本日のテーマ

模擬面接の実践です

模擬面接大会

まずはグループをつくり役割分担をしましょう

・面接担当者
・面接を受ける人
・オブザーバー

ローテーションでそれぞれの役割を1回はやってみましょう!

ワンポイントアドバイス

人前で話す、に慣れましょう

学習記録20250616

学科 WEBディレクション概論④【オンライン】

講師:平井美江

-本日のアジェンダ-

1限目
学科 ポートフォリオ作成基礎④
マーケティングとは

2限目
学科 ポートフォリオ作成基礎④
マーケティング活動と就職活動

3限目
学科 ポートフォリオ作成基礎④
業界の就職面接について

4限目
学科 ポートフォリオ作成基礎④
本日のまとめ

5限目
学科 ポートフォリオ作成基礎④
本日のまとめ


本日のテーマ

マーケティング活動と就職活動について

【資料】

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

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

動画①】

動画②】

本日のポイント

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

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

学習記録20250613

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

講師:龝谷 薫

1限目
実技 ポートフォリオ作成実習④
成績考査について

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

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

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

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


本日のテーマ

成績考査です

本日の課題①

バナー作成 -バリエーション展開-

バナーのサイズ違いを展開して作成して下さい。
【サイズ展開】
(幅width × 高さheight)
・750px × 290px
・250px × 250px
・320px × 100px
・320px × 50px
・120px × 600px (縦長)
今までに作成したバナーから、別サイズを展開してもOKです。

本日の課題②

LP(デザイン)の提出

今日までに作成したワイヤーフレームを提出してください。
※進んでいる人はデザインラフを提出しましょう。

WordPressへの成績考査の上げ方

ご自身のWordPressに成績考査用のページを作成していただきます。
4限目終了までに新規固定ページにパスワード付きでUPしてください。
(5時限目終了までは更新しても大丈夫です)
※投稿設定のパーマリンクのURLスラッグは
「grade-check_20250613」と設定して下さい。

手順は以下の通りです。

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

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

③以降のブロックにバナー画像をブロックエディタ「画像」にてアップロードし、キャプション部分にそのバナーサイズを記載して下さい。
キャプションが出ない場合は、その下に通常の文章の投稿でも構いません。
これをサイズ違いバナー、5種分繰り返して下さい。
バナーの後に、ワイヤーフレーム(進んでいる人はデザインカンプ)をアップロードしてください。

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

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

⑥公開にして終了です。固定ページ一覧に作成したページが出来ているか確認して下さい。

学習記録20250612

学科 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の買収を断念

学習記録20250606

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

講師:小谷祥吾

-本日のアジェンダ-

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

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

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

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

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


本日のテーマ

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

制作のポイント

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

参考サイト

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

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

Web用画像について

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

参考サイト

学習記録20250604

学科 ECサイトデザイン基礎⑤【オンライン】

講師:小谷祥吾

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎⑤
デザインラフとは?

2限目
学科 ECサイトデザイン基礎⑤
コーディングに向けての注意点

3限目
学科 ECサイトデザイン基礎⑤
XDの活用について

4限目
学科 ECサイトデザイン基礎⑤
課題制作

5限目
学科 ECサイトデザイン基礎⑤
課題制作


本日のテーマ

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

WEBサイト制作の流れ

ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング

デザインラフとは?

Webサイトの完成見本のことを指します。
ワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていきます。

ワイヤーフレーム製作前の手書きスケッチ(ラフ)とは別もので、デザインカンプと呼ばれることもあります。

ワンポイントアドバイス

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

【資料】

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

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

【動画】 

XD データ連携について

Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。

ワンポイントアドバイス

実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai(Illustrator)なのかpsd(Photoshop)がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。

参考サイト

【デザインラフの例①】

【デザインラフの例①】