■テーマ・プラグイン変更記録■
■portfolio入口■
（日付 オレンジリンク付き）
7月17日（木）
・開校式 オリエンテーション
７月18日（金）
・安全衛生
・就職支援
7月21（月）
・ディレクション概論①
7月22日（㈫）
・CMS構築基礎①
7月25日（金）
・グラフィックデザイン基礎①
メモ： テーマを選びカレンダーのウェジットを入れたが表示されず
7月26日（土）
・グラフィックデザイン基礎②
日程を間違えて欠席
翌日、その日の講義の資料やユーチューブやPDFを見てworldpressの自己紹介等
編集し公開
メモ： Shift+enter で改行（enterだと次のブロックに移る）
7月28日（月） 登校
・マルチデザイン基礎①
メモ： テーマの更新日が古いものよりは新しいものを
7月30日（木）登校
・ディレクション概論②
自己紹介
メモ：持ち時間５分があまると思ったが意外と足りなかった。
ブロックとブロックの行間を開ける
↓
＿＿＿+＿＿＿をクリック → すべて表示 → スペーサー
・グラフィックデザイン基礎③
・ポイントとShift同時押しで正角形、正円ができる
8月2日（土）オンライン 欠席
・グラフィックデザイン基礎④
8月6日（水）登校 欠席
・グラフィックデザイン基礎⑤
8月8日（木）登校
・グラフィックデザイン基礎⑥
Photoshop
8月9日（金）オンライン
Photoshop
トレース用の画像の準備
http://esterly.jp/くつろぎ猫のカラフルミニキャライラスト-1
・グラフィックデザイン基礎⑦
illustrator トレースについて
illustratorの生成AI
レイヤーの理解
基本の画像の他に
レイヤーを部分ごとに作成して編集していく
オープンパス・クローズドパス
ペンツールでアンカーポイント曲線を描く
直線ツールでポイントを掴んで曲線を描く
リフレクトツールで簡単に画像を反転させる
回転ツールで同じ画像を連続で描く
花びらを連続で描く
花びらを選択
回転ツール
花びらの（芯）基準値を決める
Ctrl＋D で花びらのコピーが出来る
シェイプ形成
部分的に削除 Altを押すと「＋」が「－」になり消せる
オブジェクトの回転
角にカーソルを合わせ上下カーブの矢印を掴む
コンテキストタスクバーの表示方法
ウィンドウ>コンテキストタスクバーで表示を選択します
パスを編集（ダイレクト選択ツールへ切り替え）
リピート（ラジアル・グリッド・ミラー）
オブジェクトを複製（同じ位置にコピー）
ロック
・実技 ポートフォリオ作成実習①【成績考査①】
パスワード付き固定ページ作成
段落-小見出しに自分の名前
・タイトル-パーマリンク スラッグにURLを入力（タイトル文字消してから）
・ワードプレス 固定ページを作成 課題をUP
課題提出２点 フォトショップ イラストレーター
それぞれの作品と使用ソフト名・制作時間を記入してUP
・後に見たら、アルファベットの文字が間違えていたり、ノートPCが
見ずらいので何かで調整したい
Photoshop
保存→書出し→WEBように書き出し
illustrator
拡大縮小→虫眼鏡→コントロール＋クリックで拡大
8月12日（火）登校 小谷先生
・グラフィックデザイン基礎⑧
AIとトレースで作品づくり「あんぱんまん」
毎日illustratorを触ってないと機能を忘れてしまう
8月15日（金）登校 若松先生
・ポートフォリオ作成基礎①
テーマを変更した（COCOON）
英語のものより分かり易い
8月16日 若松先生 オンライン
・就職支援②
履歴書・職務経歴書・ポートフォリオ
履歴書は細部までチェック 折らない
何で転職したのか、何が出来るのか、何をこの仕事につなげたいのか等
AIで動機等の文章を作成して参考にしてみる。
多様な文章生成記事、小説、詩、メールなど、様々な種類の文章を作成可能学習能力膨大なデータを学習し、人間らしい自然な文章を生成効率化人間の作業を補助し、文章作成の効率化に貢献創造性新しいアイデアや表現を生み出す可能性を秘める
代表として
ChatGPT（チャットジーディーピー）https://chatgpt.com/
Gemini（ジェミニ）https://gemini.google.com/
Copilot（コパイロット）（Windows エッジを立ち上げ右上にある）
・AI実習
AIに質問 職務経歴書について
「WEBデザイナー未経験で現在、職業訓練校でWEBデザインを学んでいる所の職務経歴書を
書いてください」
8月20日（水） 小谷先生 オンライン
・ユーザーインターフェイス基礎①
ピクトグラムの作成
・誰もがそう見える用に作る
クライアントに納品するプロセス
特徴を掴み明確に、特徴の整理をしておく
illustratorで5分で作成出来るイメージ
デザイナーの役割 単純に伝える用にする
8月21日（木） 登校 小谷先生
・イラストロゴ作成実習①
ピクトグラムの作成＆発表
・書式とオブジェクトのアウトライン
・ガイドラインの出し方
・作品発表 ラーメン
８月24日（土） 若松先生 オンライン
・ユーザーインターフェイス基礎②
ロゴの制作 納品する作品の準備
ロゴの作り方 考え方
・ポイントは「特徴を掴む」＋「目的の表現」
「飲食店のロゴ」なら商品内容、価格、歴史、場所
「製品のロゴ」なら、製品の特長、使用頻度、価格、歴史
そうすると、例にある「価格」や「歴史」
Illustratorを使うときならば、この機能を使えば作れる。
という操作イメージをしっかり整えておく
・何パターンか出し提案し、お客様の意見を頂く。
依頼者との打ち合わせ→デザイン案の作成→プレゼン→決定
８月25日（土） 若松先生 登校
・イラストロゴ作成実習②
illustrator復習
文 字
・範囲のパスを選択
・段落
・字形パネル
・整列
・パス上文字ツール
・アウトライン表示
・エリア内文字ツール
・作品発表 お米
2025年8月26日 若松先生 オンライン
・ユーザーインターフェイス基礎③
私 あなた 誰か が分かるように
その方が理解できるように表現
まず箇条書きで文字起し
何処に配置するのか
目的地 何処からくるか
「レイアウトデザイン」「文字デザイン」「配色デザイン」の全てを意識して制作
レイアウト5つの基本原則
余白 整理 グループ化 強弱をつける 繰り返す
し交通機関のイメージ
・線パネル Window → 線
（路線の白黒のようなもの）
・アピアランス 原型はそのままでデザインを変えられる
（円をふちをギザギザにしたり、影をつけて立体的等）
分割編集できる
（部分的に変形できる等）
作成したアピアランスを登録できる
（Window → グラフィックスタイルパネル → ドラック）
・マップの下書き作成
候補：ハローワーク大森 スタイル：簡略シンプルなマップ
2025年8月27日 小谷先生 登校 （日誌当番）
・イラストロゴ作成実習②
アクセスマップの作成
アピアランスパネル
スタイライズ
クリッピングマスク
アウトライン
アピアランスの分割
2025年8月29日 若松先生 オンライン
・ユーザーインターフェイス基礎④
名刺作成 ラフ作成
・目的地に対して②何処から③どこを通って④どのくらいの距離を⑤どのように
ロゴ考案のポイントの「特徴を掴む」＋「目的の表現」アクセスマップの「私」「あなた」「誰か」の主語を意識してとにかく覚えてもらう為「読みやすい」作品にしましょう。
アクセスマップ・ピクトグラムの作成時を参照に
サイズ 91×55 ﾐﾘ
名刺は「覚えてもらうもの」
①最初のベースは白背景に黒でデザインでまずレイアウトをしっかり作成
②文字のデザインを考える
③配色でふいんきを変える（印象が変わるので赤・青等最後に）
illustrator
・トリムマーク（トンボ）
印刷物を作るときに必要
紙を切る断裁の余白を作る
・パスのオフセット
線の作り方 角が線で表現されているが実際には
０．５ポイント外に出ているので、きっちり線の内側にそろえる
オブジェクト → パスのオフセット
配置
2025年9月2日 若松先生 登校
・イラストロゴ作成実習④ 名刺作成＆発表
先生よりのアドバイス
上下の空白の幅をそろえると良い
名前をもう少し大きくすると良い
トリムマーク（トンボ作成）→ 外側（プラス）＋３ミリ
①パスのオフセット □のオブジェ選択
（トンボはこの線の外側、実線はこの線の内側）
②ガイドの作り方 トンボをガイドにする
④トリムマーク
④画像をマスクをかけ配置する（レイヤー）
➄パスのオフセット 実線（印刷できる範囲 文字とか）
（マイナス） -3 で設定
この線もガイドにする
・QRコードの作成は１センチ以内だと読み取りずらい
025年9月3日 若松先生 オンライン
・DTP基礎【オンライン】
ＤＭ制作 Photoshop
・「写真」と「文字」を組み合わせても読みやすく
・「フルカラー」と「ベタ塗り」
・写真とベタ塗りの文字やイラストを組み合わせたときに「読みやすさ」や「見やすさ」を意識
配色デザインを意識した作品配色デザインを意識した作品
・「名刺」「DM］等、コンピュータを使った印刷物制作
illustrator 一枚もの
DTP 頁に特化している 処理能力等
画素（ピクセル）と画像サイズ
改造度数
ｗEB上の解像度 72 （これ以上ない）
・色の３属性 ３つの組み合わせで色合いが決まる
H 色相(Hue)
S 彩度(Saturation)
B 明度(BrightnessもしくはValue)
グラデーションは安易につかうと素人ぽっくなる
「陰影」と「柄」の使い分けを意識しましょう。
・レーザープリンタとインクジェットプリンタ
・トンボと塗り足し
外側 ３ミリ 塗り足し（３ミリ）をつくり、断裁部分まで塗っているように
内側 ３ミリ 、断裁時に切れてしまう可能性があります。それを防ぐ為に必ず内側3mm 以内へ
デザインを行います
・ 色調補正について 調整レイヤー
調整レイヤーとは、下にあるレイヤーに対して、色合いの変更やエフェクト（効果）の付与などの
調整を行うためのレイヤーです。
Photoshopのマスク機能の
「レイヤーマスク」「ベクトルマスク」「クリッピングマスク」
コントラスト レベル補正 トーンカーブ 色相・彩度 カラーバランス 色黒
アンシャープマスク
1.陰影の調整2.色味の調整3.鮮明度の調整
025年9月5日 小谷先生 登校
・DMの作成 課題提出
作成したものの説明 何のためにどういう意図か 何をつたえたいのか
作品 写真と文字の組み合わせ等
自分が受け取ったときにどうかんじるか
ユーザーに対して何のアクションを起こしてもらいたいのか
ビットマップデータ
ピクセルの集合体 画素数 ピクセルが多いほどきれいになる→解像度
繊細な色使いが出来る
ベクター
淡色に強い
72dpi web用
350～400dpi 印刷用
色調調整
Photoshop
＜調整レイヤー＞
・パーツ事色調が変えられる 元のデーターを変えるので変更できない
□ででかこむ コピー＆ペースト → レイヤー → 色調補正 → 明るさ・コントラスト
（レイヤーができている）
・明るさを変更できる 再編集に強い
□でかこむ → レイヤーの下の 〇マーク（塗りつぶし又は新規作成）
・チャンネルミキサーも調整レイヤーと同じ操作
画像の色を構成する各カラーチャンネル（RGBの赤、緑、青など）の混合比率を調整する機能
イメージ → 色調補正 → チャンネルミキサー
レイヤの下の〇マーク → レッド グリーン ブルーバーを動かして調整
illustrator
・オブジェクトの整列
水平方向中央の整列（アイコン選択で中央に持ってこれる）
ガイドの色変更
・編集 → 環境設定 → ガイド グリッド で円の色が変えられる
2025年9月6日 アキヤ先生 オンライン
・レイアウトデザイン基礎【オンライン】
レイアウト ５つの法則
・余白をとる
・近接 情報をグループ化して項目を分けていけるよう
・整列
・反復 整列がしっかり見えてきたりする
・コントラスト 何をめだたせたいのか 順番をきめていく
レイアウトの基本
・写真の反転にきよつける 着物の合わせ等
・身体に背景の一部が刺しているものは置かない
・カットするときは首できらず肩あたりで
・要素が近すぎなくそれぞれ際立つように
・人物の名前 赤色は×
・英数字 全角半角まぜない
文字デザイン
可読性 文章が読みやすいか
視認性 パッと見た瞬間の認識しやすさ
判読性 誤読がないか
2025年9月8日 アキヤ先生 オンライン（11：11より）
・ポートフォリオ作成基礎②
2025年9月9日
ポートフォリオ作成実習②【成績考査②】
2025年9月10日 夏目先生 オンライン
就職支援③就職支援③
職務経歴書作成
・クリエ―たっぽい履歴書
・デザイナーぽいと思わせる
・自分らしく作り上げる
・職務経歴書を苦労してつくったなと思わせる
・過去どんな貢献をしてきたか、未来にたいしてどう貢献していけるか
・ChatGTPを利用してみる
・フォーマットを利用してみる DUDA CANVA Adobeexpress
・WordpressでTOPページの下に固定ページを作る方法
固定 → 表示設定
・TOPページのイラストサイズ
横 1920～ × 縦 500～1000
2025年9月12日 小谷先生 登校
フォトショプ 課題提出
・生成ぬりつぶし
・生成拡張
プロンプトに指示
・具体的にな記述 スタイルを指定 複数のキーワードを組み合わせる
2025年9月13日 穐谷先生 オンライン
デザインとアートについて
デザインとは
「図案」「模様」「設計」「造形」「構想」などと言い換えられる
目的設定・計画策定・仕様表現からなる一連のプロセス人・ユーザー・
社会にとって価値ある目的を見出し、計画し、他者が理解できる仕様として表現する行為「美しさ」「使いやすさ」を実現するための創意工夫、またはその成果の見た目や機能
アートとデザインの違い
アート（芸術）
特殊な素材や手段を使い、技巧を駆使して美を表現・創造する人間活動および作品。感情を重視し、直感的・天性的な側面が強い。
自分の内にあるものをデザイン
デザイン
作ろうとするものの形態を、機能や生産工程を考慮して構成すること。
誰かの目的の為の主に商業デザイン
デザイン論
1 レイアウト 地取り、配置、割付け
2 フォント 見やすく、伝わりやすく、読みとりやすく」
3 カラー 人の感情に作用し、デザインの効果を左右する重要な要素です。
■他 サイトのプラグイン・テーマ・設定等変更記録のページ作成
WEBデザイナー訓練記録要点の日付に日々別のサイトにリンクで飛べるよう徐々に変更
2025年9月18日 神崎先生 ECサイトデザイン基礎① オンライン
・ECサイトとは？
「Electronic」の略であり、「eコマース」とはつまり、「Electronic Commerce」のこと。
Ｂ＝Business（ビジネス）企業・業者・仕事
Ｃ＝Customer（カスタマー）一般消費者・顧客・お客様
・ECの仕事
商品登録について プロモーション作業 店舗経営
・バナー作成
バナーとは、広告や宣伝のために使う画像で、クリックしてもらって、
あらかじめ設定しておいたリンク先のページを見せることが目的です。
「数多く見て作る」
1.メッセージ（端的な文書やコピー）文字（文字列）で伝えなければならない事を表現しましょ
う。端的に伝わる文言を考えてみましょう。
2.イメージ（雰囲気を持つ写真やイラスト）イメージ、画像やイラストを使って雰囲気を表現しま
しょう。パッと見ただけで世界観が伝わるようにしましょう。
3.アテンド（ご案内の内容）詳しくはこちらや、応募期間を記載して、コンテンツを求めている方
をしっかりとご案内しましょう。
他のWebページからの誘導 検索からの誘導 メルマガやSNSからの誘導
Illustrator
切り抜いて、部分的に非表示にし（隠し）印刷しないようにする機能
Photoshop
図形を作るときはシェイブで
マスクとは、画像を直接修正・編集することなく余分な箇所を覆い隠す機能のことです。
非表示ができるので後からの修正したい時に非常に便利な機能になります。
■レイヤーマスク
ますくについて07
グラデーションとかに向いている
■ベクトルマスク
ますくについて08
パスからとる パスで切り取る 制度が良くなる 奇麗なライン 修正調整簡単だが
淡い表現は不便だが
左上か画像を「パス」にする（現在の状況をみから）
アンカーポイントをたてる「＋」
パス選択ツールを使えばパスの変更できる（ダイレクト選択ツール）
単純な切り取り画像のような感じ 毛並みは不向き モデルさんのライン
■パスパネル
ますくについて09
選択範囲の作成 パスの描画と編集 ベクトルマスクの作成
■クリッピングマスク 仮のエリアの作成ができる
Illustrator 上のオブジェクトで下のオブジェクトを
Photoshop 下のレイヤーで上のレイヤーを切り抜くという点で重ね順序が逆
■クイックマスクモード ブラシをつかってトリミング 切り取るための工程
■シェイプマスク 画像をドラック＆ドロップするだけのマスクです
2025年9月19日 夏目先生 登校 課題提出
・ECサイトデザイン実習① Photoshop
サムネイル
下の●ブラシツールで 左の色選択の□■の⇔をクリックすると
下になった画像を消したり戻したりマスク効果を調整出来る
選択して スマートオブジェクトにして画像を複製するまで
まず。レイヤーの所をクリック
↓
スマートオブジェクトにする（きれいな画像で編集できる Photoshopで開けない画像もある）
↓
出来ない時はレイヤーをラスタライズする
↓
スマートオブジェクト
・選択ツール〇や□で切り抜きたい形を選択で囲む（オブジェクト選択ツール）で選択
（レイヤーの□＋●）
クリッピングマスク
図形を作る→レイヤーの画像を右クリックしクリッピングマスクを作成
（作成できているとレイヤーに矢印ができる）
色かえ べた塗 グループ化 複製等
・クリック選択し持ち替え ＋になっているのでALT＋を押すと －になるので
その部分が消える
・レイヤーマスクしてある レイヤーの〇のべた塗を選択 色調の調整画できる
・べた塗＋右クリックでクリッピングマスク Ctr＋G
・オブジェクトを選択したまま右のレイヤーをグループ化する
・レイヤーのできたグループを開く（フォルダーマークで作成ドラックできていれば
グループに入っている）
・左上の移動ツールを選択→自動選択の→をレイヤーからグループに変える
複製したオブジェクトを動かすと二つ目が出来ている
文字 カーニング
文字と文字の間の幅サイズを変える ALT ＋ →← （方向キー）
2025年9月20日 夏目先生 オンライン
・バナー制作に向けての情報収集 「デザインの考え方」の教科書④
模写によるバナー制作
「文字の見やすさ」と「レイアウト」「文字」「配色」
「面積の意識」
「配置した内容のグループ化」
グループ化のポイント①近接(Proximity) ②整列(Alignment) ③反復(Repetition)
「アクセント」デザインの特徴、作品の象徴的な部分を考えてみる。 脇役と主役
①コントラスト(Contrast) ②ジャンプ率を変える（サイズの比較）③③アイキャッチを考える
文字のデザイン
可読性 文章が読みやすいか
視認性 パッと見た瞬間の認識しやすさ
判読性 誤読がないか
配 色
「色相」「彩度」「明度」
１．CMYK（印刷物）とRGB（Web）では色数が大きく異なります。
２．色の3属性は「陰影」として表現するのか「柄」として表現するのかをしっかりと見極め
たうえで使い分けましょう。
３．グラデーションの使い方は十分に気を付けましょう。安易なグラデーションは違和感で
しかありません。配色にも意味がある事をしっかりと意識してみましょう。
2025年9月23日 夏目先生 ECサイトデザイン実習② 登校
作成準備 同じサイズで画像をふやす
■Photoshopに元画像をドロップ
↓
■レイヤー右上 三 ３本マーク
↓
■「レイヤーからのアートボード」
↓
■新規作成（書き出し形式を選択）
↓
■名前を付ける
↓
■画面の〇＋を押すと同じサイズの画像ができる
＜復 習＞
クリッピングマスク ALTで部分だけ変えられる
レイヤー選択→図形選択→レイヤー配置換え
レイヤ―マスク □●でにかける。縄とかAIが変えてくれる
レイヤーマスク 写真選択→マスク選択→マスクの橋を触る
(白黒の□■白から黒に変更）
ブラシに切り替えてマスクをかける
ベクトルマスク ペンツールを使用してその部分を抜ける
グラデーションマスク 写真選択→マスク選択（レイヤーの中）→
マスクの端を触り□■白から黒に変える→
ブラシに切り替え引き直せる
2025年9月24日 小谷先生 ECサイトデザイン基礎③ オンライン
バナー作成について
次の授業の為の準備
＜あてこみ＞ 出来たバナーを実際に商品と合わせてみる事
・どの分野で作っていくか選んでおく
・どのサイトに載せるかを想定
・忠実にその人の思うところを再現
・方向性等、クライアントの関係性でも変わる
・同じバナーのサイズ違いでもOK
2025年9月26日（金） 小谷先生 ECサイトデザイン実習③ 登校
Photoshop バナー作成
あてこみして作成したものを見てみる
コマンドでchromeのページをそのまま長くスクリーンショットをとる方法
chrome上で右クロックし検証をクリック
Ctr ＋ Sift ＋ P
↓
表示がでたら、run>にfull と入力 run>full
↓
スクリーンショットの中に入っている
2025年9月27日（金） 平井先生 ECサイトデザイン基礎④ オンライン
LP（ランディングページ）とは？
インターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。
「広告の飛び先ページ（リンク先ページ）」
・ワイヤーフレーム
ワイヤーフレーム（WF）はWebサイトやアプリの設計図のことです。スケッチ・ラフ
画面内にどの情報を/ページ内のどこに/どのように配置するかが記載されています。Webサイトの目的に沿って、サイトの企画を設計する基本
『ワイヤーフレーム』の制作のコツ
https://nandemo-nobiru.com/web-5695
・デザインカンプとは？
デザインカンプは「Design Comprehensive Layout」の略で、Webサイトのデザインの完成見本のことを指します。ワイヤーフレームで決めた構成を基に、色や画像などのビジュアルを具体的にデザインしていきます。
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える
手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。
■書きでスケッチ（ラフ）を作成
■Photoshop 全画面 横1280px 縦3000px位 余白
作成画面 横 960px
■フォント 標準16ピクセル（12ポイント）
ガイド ガイドにスナップします。
グリッド グリッドにスナップします。グリッドが表示されていない場合、
このオプションは選択できません
レイヤー レイヤー内のコンテンツにスナップします。
スライス スライスの境界にスナップします。スライスが表示されていない場合、
このオプションは選択できません。
ドキュメントの端 キュメントの境界にスナップします。
すべて 「スナップ先」のすべてのオプションが選択されます。
なし 「スナップ先」のすべてのオプションが選択解除されます。
2025年9月30日 小谷先生 ECサイトデザイン実習④ 登校
■LP ワイヤーアイヤーフレーム
・巻き戻しがないようにヒヤリング
・CV コンバージョン ユーザーの目標として設定した行動をしてもらう
・キラースペース（ファストビュー）アクセスしたら誰でも見る1番上のページ
2025年10月1日 若松先生 ECサイトデザイン実習④ オンライン
WEBサイト制作の流れ
コーディングの準備 画像・テキストを探す
ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング
ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。サイトの完成イメージを画像でお客様に見せる為です。
ここでOKが出たらコーディングに進みます。
コーディングでは「デザインラフ通りに再現する事」が求められます。
コーディングに向けての注意点
フォントについて
配色デザイン
2025年10月2日 若松先生 ECサイトデザイン実習⑤ 登校
デザインラフの作成
2025年10月3日 小谷先生 UI/UXデザインツール概論 オンライン
UI/UXデザインツール概論
フリーソフトについて
ご紹介① adobe express
バナー無料作成ツール オンラインでカスタムバナーをデザインhttps://www.adobe.com/jp/express/
使い方資料URL
ご紹介② canva
バナー作成が無料！作り方もアプリで簡単！https://www.canva.com/ja_jp/create/banners/
ご紹介③・adobe XD
【お知らせと注意点】
以前は無料で利用できるプラン（スタータープラン）がありましたが、現在は公式サイトから見当たらなくなっています。Adobe XDは、2023年1月に単体販売が終了になりました。 現在はスタータープランはダウンロードできなくなっており、無料で利用する場合は7日間の無料体験版 のみになっています。
※こちらは教室でお試しください。別動画へ案内
ご紹介④ Figma
・コラボレーションインターフェースデザインツール –Figmahttps://www.figma.com/ja/
2025年10月7日 UI/UXデザインツール概論 登校
成績考査③
バナーのサイズ違いを展開して作成
【サイズ展開】
(幅width × 高さheight)
・750px × 290px
・250px × 250px
・320px × 100px
・320px × 50px
・120px × 600px (縦長)
2025年10月8日 柴山先生 UI/UXデザインツール概論 オンライン
ポートフォリオ「応募編」について
テーマとポートフォリオ作成が中心になっていく
・先生オススメサイト
Cocoon公式サイト
Lightning公式サイト https://kitsunecode.net/blog-homepage/lightning/
Fukasawa https://ja.wordpress.org/themes/fukasawa/
2025年10月10日 穐谷先生 マルチデザイン基礎② オンライン
求人応募について
「人材紹介」や「人材派遣」について
スキル整理(スキルの洗い出し） なんのソフトをどういう目的でどこまで使えるかを明確にしておきましょう！
得意領域と挑戦したい領域の整理
・自分はどの領域に強いのか？
・自分のどの領域のスキルが強いのか？
・今後はどの領域に挑戦したいのか？
ポートフォリオに掲載する内容は（一例です。）
1 : 8: 1
：プロフィール ： 制作物とその制作過程 ： 業界への熱量
今後チャレンジしたい領域を整理
・自分はどの領域に強いのか？
・自分のどの領域のスキルが強いのか？
・今後はどの領域に挑戦したいのか？
2025年10月14日 柴山先生 デザイン概論② オンライン
WEBデザインにおけるインバウント需要
インバウンドデザインは、単に言葉を変えるだけでなく、文化や価値観を理解し、多様な人々に配慮することが重要です
・インバウント向け
シンプルで分かりやすいデザイン 多文化理解に基づいたデザイン 日本の魅力を伝えるデザイン
・翻訳ツールについて
・PCスペックについて
2025年10月15日 小谷先生 マルチデザイン実習①
フォントカルタについて・カルタ大会
低スペックPCを使用してグループワーク
チラシの依頼
サッカーチームを作りました
部員募集のチラシを作ってください
「小谷フットボールクラブ」です
A４チラシ 電話番号 住所 SNSなどはまだ未定
仮の番号等いれてください
3チームに分かれて作業
・ヒアリングする人
・ラフを書く
・写真を探す
・ワイヤーフレーム
・デザインラフ
ラフを２案出してヒアリングにより決定、役割がこのように出来て進めていました。
2025年10月18日 大浜先生 HTML/CSS基礎① オンライン
HTML-CSS 入門講座
https://html-css.hamaya2020.com/index.html（HTML-CSS 入門講座 大浜先生）
１）依頼を受ける
２）何を目的としたコンテンツを作るのか
３）デザインに必要な要素
３）デザインに必要な要素
５）コーディング4）デザインラフの作成
６）【サーバにテストアップ】
７) 納品
■３つのツールをダウンロードする
★テキストエディタ― ソースコード
★ブラウザ chrome
★FTPソフト Webサイトにアップロードするソフト
他
A5.2 Windows 環境 開発ツール
A5.2.1 テキストエディタ（TeraPad）
A5.2.2 テキストエディタ（サクラエディタ）
A5.2.3 テキストエディタ（Visual Studio Code/VS Code）
A5.2.4 ブラウザ（Chrome）
A5.2.5 ブラウザ（Edge）
A5.2.6 FTP ソフト（FFFTP）
A5.2.7 FTP ソフト（FileZilla）
HTML の基本構造と主要な要素を説明
2025年10月22日 大浜先生 HTML/CSS基礎② 登校
HPと作るには 「エディター」「ブラウザー」「FTPソフト」
ディタ― VSコード Microsoftがわりといい 学校ではTera Pad 使用
奇麗なコードで他の人が見ても分かり易くかく
WEBサイトは広くソースコードが公開されている
2025年10月23日 大浜先生HTML/CSS基礎③ オンライン
編集中
レッスン４
スタイルシートを見に行って何を書くか見る
HTMLとCSSの紐づけする
HTML メタ要素
CSS @maki set”utf-8″;
セレクタ
どこに p[ pだぐは
なにを color 赤く
どうする red なれ
/* /* 始まり終わり
.Class クラス名 フォントサイズを２０PXに
#id-1 padding：10ｐｘ 隙間10あけて
★HTMLにスタイルを直接書くことができる ３種類
インライン方式：ＨＴＭＬよりスタイルを書く その間に直接ＣＳＳを書くことができる
複数のＨＴＭＬに適応させられる
HTML要素の開始タグにstyle属性で直接記述
内部スタイルシート：ＨＴＭＬのタグに １ｓｔｙｌｗ＝”width:600 等直接かける
そのタグだけに書くことができる
HTMLの<head>タグ内に<style>タグを置き、その中にCSSを記述
外部スタイルシート:その場祖だけにかける
:CSSを別ファイル（.css）に記述し、<link>タグでHTMLファイルに読み込ませます。
例 <p style=”color: blue; font-size: 16px;”>これは青い文字です</p>
開業入れ高く 一行にかけるが見やすく奇麗に各
どこに
（＊）アスタリスク 全てに
HTMLのタグ名で指定（一般的）
id名 頭にハッシュをつけるP
埔里小戸クラス名で書く
セレクタの横を空白 親子関係ができる 絞り込むには並べて書く
子だけ 孫だけ色をかえるとか指定できる
<div class=”selector1″>親
<div class=”c1″> 子1
<p class=”g1″> 孫1</p>
<p class=”g2″> 孫2</p>
<p class=”g3″> 孫3</p
</div>
と
<div class=”c2″> 子2
<p class=”g1″> 孫1</p>
<p class=”g2″> 孫2</p>
<p class=”g3″> 孫3</p>
</div>
</div>
なにをする
複数のものは「、」カンマで区切って書く
フォントサイズ 30 数字の後ろに ｐｘつける
高さ 300ｐｘ
親のタイル洲比率 ％ ％ 割合で指定
親に対して横幅を子を３０％の幅にする
親 20PX
子
em 親の何倍
rem HTMLラング＝対応 に指定されたものの何倍
フォントサイズの標準は１６ｐｘ その何倍
画面の横幅のサイズの割合
横幅 100vw
角度の指定 度数または回転数で指定
dig 一周３６０度 生時計 府 逆時計回り
計算する calc 関数（値の計算
親のサイズから４０ピクセル引いた数値を出してください等
色の指定
色の名前で指定
色コード
#ハッシュの後ろに １６審でコードをかく
アルファ―値 透明度を指定
１０進数で指定する数値
付録１ にカラー一覧あり 色の名前で覚えるとよい
https://html-css.hamaya2020.com/appendix-1.html
グラデーション
一方向 放射 円錐 反復（一方向 丸さ）等
リセット CSS /* Reset CSS */
ブラウザは色々な初期値をもっている
だんだんと文字を小さくしていく
デザインかんぷ１つくったあとコーディングしていくが
ブラウザが手大小適当にしてくるのでブラウさの初期値を一回リセットするためのCSS
例 chromeでHTMLで表示でゴシック マックは明朝体で表示される
どのブラウザで見てもゴシックで見れるようにとかリセットする
自分のCSSを育てる
/* Reset CSS */
*,*::before,*::after {
box-sizing: border-box;
セレクタの得点
高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。
スタイルシートにどこになにをどうする を書く
矛盾を訂正していく
class １０点 p 1点
例 #main p.main-text 100（id）+1（要素）+10（class） 111点
！（インポータント）
他の計算しなくていいので最優先（あまりすすめない）
HTMLの中にスタイルかく（riv）１０００点なので強い
style属性 <div style=”font-size:140%;”>
Lesson-7 CSS で飾りを追加しましょう
CSSの本体について
背景の色指定のプロパティ 画面右クリック→検証を開く
background-colo
写真などを背景に置くことができる
繰り返して背景模様が作れることができる
背景の大きさの指定ができる
バックグラントアタッチ面と 背景をスクロールさせるかさせないかの指定
一括指定 background だけ書く
例
background: url(‘images/hamaya.png’) pink no-repeat;
background: url(‘images/hamaya.png’) pink no-repeat; background-size: contain;
background: url(‘images/hamaya.png’) pink no-repeat; background-size: cover;
隙間を作らない 縦サイズは切れる
background: url(‘images/hamaya.png’) pink no-repeat; background-size: 100px;
サイズ指定
background: url(‘images/hamaya.png’) pink; background-size: 100px;
小さいものを並べる
https://html-css.hamaya2020.com/lesson-6.html#L6-2-22
テキスト系プロパティ
カラーの後ろにうろをかく 薄目 等
文字を寄せる 左右真ん中 横幅のサイズ調整
テキストのインデント
先頭行の頭を開ける
テキストシャドー
文字に影をつける
指定する値 縦横ぼかしの半径色等 難渋にもつけれる
写真の上に文字を乗せる
テキストデコレーション
文字の下にアンダーラインを引く
L6.2.22 text-underline-offset プロパティ（下線のオフセット）
フォントの文字飾りの表示位置に下線
フォントの種類 字体の指定
実際に表示されるのは端末によって変わる
「MS」マックでは表示できない
「Googleフォント」 サーバーからフォントとして表示できるがネットに繋げる必要がある
L6.4.1 list-style-type プロパティ（リストマーカーの種類）
リスト系のプロパティ リストスタイルタイプ
list-style プロパティ（リストマーカーの一括指定）でも指定可能です。list-style-image プロパティを同時に指定した場合には list-style-image プロパティが優先されます。
Lesson-5 CSS でレイアウトを作りましょう
レイアウトのプロパティ
https://html-css.hamaya2020.com/lesson-5.html
ボックスモデル
paddingの隙間の外にborderそのすきまにmargin その３つの間にBOXがつくれる
BOX の場所 top left right bottom
レイアウトのタグ
コンテンツのタグ
文字の単語の種別のタグ
埋め込みイメージタグ
レイアウトとコンテンツはブロック属性
単語 インライン 横に並ぶ
インライン インラインブロック 内容の大きさ ブロックの時は横並びもできる
れいあうと 縦に並ぶ
L5.2.1 width プロパティ（要素の横幅）
親の要素の％を表示
width: auto; width: 50%; width: calc(100% / 3); width: calc(100% / 3);
L5.2.2 max-width プロパティ
横幅の最大値を指定
ブラウザを府いろげていった時にそれ以上広くならない（横幅に隙間ができる）
min-width プロパティ（横幅の最小値）
これより小さくならない
width: 40%; min-width: auto;（初期値）
子要素（width: 40%; min-width: auto;）
width: 40%; min-width: 250px;
子要素（width: 40%; min-width: 250px;）
height プロパティ（要素の高さ）（ほとんど使用しない）
文字が入る高さの指定
正方形の高さが指定できる
height: auto;（初期値）
height: 160px;
aspect-ratioプロパティ（幅と高さの比率）
横幅変わるといの高さは変えられないので指定する
箱を並べる float プロパティ（回り込み） 論文の画像と文章によく使用される
画像が左寄せになって文字が回り込み
.float {
width: 60%;
background-color: pink;
}
画像が右寄せになって文字が回り込み
.float img {
width: 200px;
height: 200px;
}
最近はFlex box使用で簡単にできる
clear プロパティ（回り込み解除）
右も左も回り込みを終える
left左方向の回り込みを解除します。right右方向の回り込みを解除します。both左右の回り込みを解除します。（通常は、本値を使用します）none（初期値）回り込みの解除を行いません。
position/top/left/bottom/right/inset プロパティ（要素の配置方法）
どこになんでも表示される （パターンで覚える）
何処に配置したいかで配置が換わる
position: 配置方法; 元より相対的に表示（上下左右）
top: 上からの位置;
bottom: 下からの位置;
left: 左からの位置;
right: 右からの位置;
inset: 配置位置;
1）元より相対的に表示（上下左右） 画面で開いた基準より
２）親要素からの相対値に配置 （親要素基準に背景の色を変えたり 例：表示されている白い部分）
３）ページ（画面の見えている範囲のどこかに表示される）全体からの位置に配置
スクロールしても固定の位置に配置
４）画面上の固定位置に配置 条件があったらその場にとどまる
例：メニューとか
スマフォ対応に大変になるので乱用はしない
z-index プロパティ（重なりの順序）どちらの部品が上に表示さっるの？
大きな値が全面にくる
display プロパティ（要素の表示方法）
インラインでもあってもその箱はブロック属性になる
display non 表示が消える
overflow プロパティ（ボックスからあふれた内容の処理方法）
箱からコンテンツがあふれた時にどうするの？
はみ出たコンテンツを見えなくさせる
スクロールバーで見えれるようにする（横幅ははみ出てしまう時）
border-color プロパティ（ボーダー色）
枠線を指定するのは
実線 二重 破線 幅
一括指定 色 線 幅
4辺それぞれ違う色で指定できる
border-top: 20px #f00 solid; border-right: 20px #0f0 solid;
border-bottom: 20px #00f solid; border-left: 20px #f0f solid;
ボーダーらでぃうす 角を丸くする
角をそれぞれ違う丸みにする
例
左上を基準に指定
時計回りに指定
左上基準で高さを指定
padding プロパティ（パディング一括指定） ボーダーの隙間の指定 4辺を一括指定
padding-top: 上のパディング幅;
padding-bottom: 下のパディング幅;
padding-left: 左のパディング幅;
padding-right: 右のパディング幅;
１つだけ ４つの辺全部 二つ 上下 ・ 左右 等
margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
パディングには使えないものがある
マージンとマージンがくっついている場合
相殺という機能がある
マイナスの値が使える マイナス分ずれる
BOXを中央に配置したい時 箱を真ん中にしたい時
L5.5.2 margin プロパティ（マージン一括措定）
マージンで左側にすると結果として右側になる
マージンの特殊な特性については「margin プロパティの注意事項」でも説明していますので合わせて確認してください。
子や親でも大きさが関係する
重ねさせることもできる
L7.4.2 box-shadow プロパティ（ボックスの影）
ボックスのデザイン
L7.4.6 opacity プロパティ（透明度）
下が透けて見える 文字が読みにくくなる
背景の色に対して指定すれば文字がくっきりする
L5.7.1 box-sizing プロパティ（ボックスサイズ計算）
初期値を変えない
ボーダーボックスまでの指定にする（content padding borderまで 改定された)
L5.7.2 object-fit プロパティ（画像はめ込み）
箱の大木をに合わせて画像を埋め込む その位置合わせ
2025年10月24日 大浜先生 HTML/CSS基礎④登校（欠）
CSSの記述・検証ツールの活用
■CSSの基本構造について【復習】
■リセットCSS
■トレーニング02 cssの修正 動物園のHP
2025年10月25日 大浜先生 HTML/CSS基礎⑤オンライン
レイアウト系プロパティを理解しましょう
＜HTML チェック＞（L1.1.6 HTML/CSS のチェック）
作成した HTML に誤りがないかを以下のサイトを使用してチェックしてください。
The W3C Markup Validation Service
Another HTML Lint – Gateway
https://html-css.hamaya2020.com/lesson-7.html#L7-5
記述の前に「.」ピリオドを付ける
クラスセレクタ クラスに対して装飾をする
HTML側: スタイルを適用したい要素（例：<p>、<div>など）にclass属性を指定します。
<p class=”special-text”>このテキストにスタイルを適用する</p>
CSS側: .の後に、HTMLで指定したclass名を記述します。
.special-text {
color: blue;
font-weight: bold;
}
■カーソルやclickの動きに対応する色を指定する
■要素の左右中央に表示
■table 表組
■form 端末とサーバーに分けて記述する必要がある
■type ボタン 年月 メール パスワード 電話 検索キーワード 送信ボタン等
■select 選択式のメニュー option 要素を使用して定義します。
■flex 横並びのBOXの配置場所
■align-items 引き延ばしと配置場所
■align-content 縦に伸ばす その配置場所
■justify-content Flex アイテムの配置 全体右左中央上下均等等へ配置
■column-gap カラムの隙間
■gap: 10px; のびりつ 隙間を作りたくない時 各子要素にたいして割り当てを指定
■order（Flex アイテム並び順）オーダー 並び順をかえたいとき
■flex-grow のびりつ 隙間を作りたくない時 各子要素にたいして割り当てを指定
■ flex-shrink 子要素の幅 子が横の合計に入りきれない場合、親の％で指示 一括しても可
■Lesson-10 グリッドレイアウト Excelのセルをつかって図を作る感じ flexと似ている
■Lesson-11 CSS アニメーションを活用しましょう 動きの変化 消える背景と浮かぶ文字等
2025年10月28日 大浜先生 HTML/CSS基礎⑤ 登校
training-3，4 実習
文法の復習
flex 横並び
hover カーソルが乗ったときに変化する
10／24日の修正 htmlにcssがうまく反映せずにいた
１）HTML ファイルとは別に記述する場合 の訂正
2025年10月29日 大浜先生 サーバーサイドプログラム基礎 オンライン 登校
training-4 実習
サーバー側で動くプログラム言語 サーバーサイドプログラム基礎【オンライン】
WordPress PHPというサーバーワイドで動いている言語
CMC デジタルコンテンツを統合・体系的に管理し、配信など必要な処理を行うシステムの
総称。コンテンツマネージメントシステム
WordPressの仕組みについて
MySQL PHP vaScrip それぞれの働きと違い
2025年10月30日 大浜先生 実技 WEBページ制作実習① 登校
training-5 実習
FTPソフトの使い方について training-5
準備：サーバ・ホスト名・ユーザー名・パスワード・FTPソフト
① 接続出来たらUPしたいフォルダーをドラック
② ワードプレスのドメインまで削除してUPするフォルダー名を入力
③ 一般に公開できるサイトができ上る
ポートフォリオに変更したときはバックUPをとると良い
ワードプレス プラグイン AIOSEOを打ダウンロードしていれる
レスポンシブＷＥＢデザイン（ＲＷＤ） スマフォ用 様々な機種に対応
■ボックスモデルに関わるセレクタ
■横スクロールを発生させない esson12.2.2 ～
スマフォの文字を大きくする
Lesson12.2.2 Viewportのmeta
スマフォ等のサイズ改善し大きな文字で見える
横スクロールをなんとかする
ヘッダータグに横幅960なるようにかいてあるが
400しかないのに９６０表示する指定がされている
2025年10月31日 柴山先生 SNS運用基礎 オンライン
・SNSについて
・SNSの歴史について
・動画の歴史について
・SNSの未来について
■ビジネスモデルは変わらない
「人を集める」⇒「宣伝が出来る」⇒「売買が生まれる」
■自分自身の自己認識 柔軟な対応が必要 アイデンティティの変化させ対応
■ＳＮＳのデザインの留意点
■WEBマーケティング
トレーニング５ レスポンシブ対応（スマフォ） 実習
2025年11月4日 柴山先生 UXデザイン基礎 オンライン（遅）
UXとUIの違い
・UXとはユーザー体験 ユーザーがサイトを利用する際の体験全体を指します。
・UIはUser Interface ユーザーが直接触れるインターフェースの設計に焦点を当てたもの
ボタンやアイコン、レイアウトなどの視覚的・対話的要素を指す
あたり罫と罫ぬき DTP界隈でよく使用されている言葉
各ポイント
■ imgとbackground-imageの違い
■ 動的プログラムは表示スピードを低下させます。
■background-imageの違い
■ 動的プログラムは表示スピードを低下させます。
■ WEBフォントの利用
■ 独自のCMSはサーバーに負担を欠けている事もある
2025年11月5日 大浜先生 ポートフォリオ作成実習④ 登校
第4回成績考査 デザインカンプ
2025年11月10日 若松先生 ポートフォリオ作成基礎④ オンライン
ディレクション概論④ デザイン費用について
♦デザイン費用 デザイン技術に対する単価♦
費用と経費
デザイン製作費
デザインを「考える力」
2025年11月12日 若松先生 マルチデザイン基礎③ オンライン
■マーケティングとは 商品やサービスが売れる仕組みを作るこ
2025年11月14日 若松先生 マルチデザイン実習② 登校
Adobe Xd
Adobe Creative CloudAdobe より Xd をダウンロード
■ワイヤーフレームからデザインカンプ作成に適している
■Photoshopとillustratorを足したような機能
■HTMLやCSSは使用できないが、プラグインを入れればHTML書き出し可能
■AdoveXdの教科書
■ローカルドキュメントとして保存するとクラウドに残らない
■書き出し アセットを書き出し➡選択したオヴジェクトを書き出し➡統一して書き出される
■フレームにドラックするだけでOK グループかは解除してから
2025年11月15日 若松先生 デザイン概論③ オンライン
■コンサルティングというお仕事
■Webコンサルタントに必要なスキル
2025年11月18日 柴山先生 生成AI基礎① オンライン
■生成AIの歴史と未来
■AIとAGIの違いとは？
■AGIとChatGPTの関係
■プロンプトデザインについて
■生成AI 実践
2025年11月19日 柴山先生 プロンプトデザイン実習 登校
■様々なAIで画像を生成実習 課題提出
2025年11月25日 若松先生 生成AI基礎② オンライン
■生成AIイラストの描き方 illustrator
ポイント
Illustratorの生成AI機能の注意点7選
1. インターネット接続が必要
2. 生成AI使用時の料金
3. プロンプトの対応言語
4. 商用利用
5. クレジット数
6. AI生成の処理速度
7. 生成ボタンが表示されない
Illustratorの生成AI機能で、テキストからベクター生成する手順4STEP
1. オブジェクトを用意する
2. 生成ベクター(Beta)を選択
3. テキストを入力
4. イラストを選択する
Illustratorの生成AI機能の特徴6選
1. ベクター画像を生成できる
2. 4種類作成できる
3. ディテールを調整できる
4. 既存のデータを参照できる
5. 生成再配色機能
6. モックアップを簡単に作成できる
2025年11月26日 若松先生 イラストレーター実習① 登校
■トリムマークを後から作成する （トンボ）
■ A4チラシのサイズ一覧
■チラシ制作のポイント
■illustratorのAIを使用してチラシ作成
2025年11月27日 若松先生 生成AI基礎③ オンライン
■illustrator 背景画の描き方
１）テキストからベクター生成
この機能は、テキストで指示を与えるだけで、その内容に沿ったベクターイラストを自動生成します。背景画のベースとなる要素や抽象的な背景を作成するのに適しています。
２）生成塗りつぶし（シェイプ）(Beta)
この機能は、既存のベクター画像をもとに、AIが新しい要素を生成したり、スタイルを適用したりします。既存の素材をベースに背景画を制作したい場合に便利です。
2025年11月28日 若松先生 イラストレーター実習② 登校
■生成AIでチラシの作成
■生成AIでチラシの作成 パーツの準備
2025年12月3日 若松先生 DTP・グラフィックデザイン実習 登校 課題提出AIチラシ
■生成AI実践 課題提出 主にillustratorとAIで作成したチラシ
チラシ２部作製
■生成AIを使用して紙のportfolioの作成
・AI指示を水平思考と指示→柔軟な考え方に表現
■生成AIを使用してチラシ・紙のportfolioの作成
■生成AIを使用してチラシ・紙のportfolioの作成
課題提出
成績考査5
・印刷物の改造度等おさらい
・画像解像度
・Photoshopの機能～GIFアニメーションの作成
小谷先生のお話 WEB業界でお仕事の進め方等
誰もがぶつかるデザインの壁 https://webnaut.jp/design/562.html
・作品について伝えたいこと 「なぜ」そうなったのか説明できるように
・全体の作成する時間から逆算してみる
使える時間を出してみる
・状況報告 自分の確認がてら進捗情報等メモがてらでも報告等
2025年12月12日 穐谷先生 マルチデザイン基礎④ オンライン
・クリエイターに求められるスキル
・ヒアリングについて
・ペルソナの設計
デザ2025年12月13日 穐谷先生 デザイン概論④ オンライン
プランディングの成功
・SNSの独自のブランディングを確立しプロモーション
・ブランドのコンセプト 一貫性を持たせている
・独自性の高いブランドイメージのコンテンツを提供している
2025年12月17日 小谷先生 ポートフォリオ作成基礎⑥サーバーについて オンライン
・ポートフォリオ完成度向上について
・サーバーについて サーバーお引越しのお話と実技
・先生の職場体験談等
・システムのクリーンアップ
2025年12月20日 夏目先生 WEB動画基礎① オンライン
・Adobe After Effectsで１５秒動画の作成
・基本操作の説明等
・素材集め
。After Effectsで15秒動画の作成 作品UP
2025年12月23日 平井先生 アニメーション制作基礎① オンライン
・Premiere Proで15秒動画の作成
・素材探し
動画の埋め込みタグについて VIDEOとIFRAMEタグ
・Premiere Proで15秒動画の作成 作品UP
・素材・操作・リンク等
2025年12月26日 大浜先生 CMS構築基礎② オンライン
・WordPress活用法
・サーバ引っ越しについて
（現時点で無料のサーバーはなくなっている）
2025年12月27日 松井先生 WEBマーケティング基礎① オンライン
・マーケティングとは
Google Analytics 解析 行動が一目でわかる
Google Search Console 分析 訪れた後の行動
なにかしらの収益を上げたい等に
何処に向けて
分析の使い方
・SEOとは
検索エンジンの検索結果で自社サイトを上位表示させるための「検索エンジン最適化」のこと
集客増加
継続的なリード獲得や売上増加
価値の高い情報を提供
・SEO対策の種類
内部対策 コード（HTML）、ページの構成
外部対策 自社サイトへのリンク（被リンク）を獲得し、サイトの評価を高める
コンテンツ制作 ユーザーの悩みや疑問を解決、高品質で最新の情報が載ったコンテンツ
・なぜSEOが必要なのか
サイトの信頼性と認知度を高める
ニーズが明確なユーザーにアプローチできるため、高い成約率
。メリット
広告費をかけずに継続的な集客を目指すマーケティング手法として重要視されている。
2026年1月6日 大浜先生 WEBマーケティング基礎② オンライン
・WebデザイナーとしてのWebマーケティング
・WEBマーケティング施策の進め方
・Webマーケティングの歴史
・サーバーにUP方法復習
・ワードプレスのテーマを作る・カスタマイズ
・サーバーの候補
ドメインを取ることでサーバー代が無料になる所がある
2026年1月8日 平井先生 WEBマーケティング基礎③ オンライン
・マーケティングAI 「見込み顧客のデータの分析」
・Webデザイナー＋WebマーケティングAI
例：バナー広告の自動生成
「ADVANCED CREATIVE MAKER（アドバンストクリエーティブメーカー）
・感性価値分析・訴求力向上を実現する「感性AI」
・AIが画像・動画の編集加工・素材生成を行う「cre8tiveAI（クリエイティブAI）」
・Adobe Firefly
・AIができることの業務
・HTML+CSSコーディング業務のAI
・AIを活用した設計力が必要
2026年1月12日 若松先生 マルチデザイン基礎⑤ オンライン（リンク無し）
2026年1月13日 若松先生 デザイン総合制作実習②（リンク無し）
2026年1月14日 若松先生 デザイン概論⑤ オンライン （リンク無し）
サーバーの選び方
最安値 広告入り 無料１０ギガ AREA タダサーバー WordPress.com
littleサーバー（ちょっと古い）
ロリポップ
１ギガ 無料でWordPressOK
独自ドメイン必要 スタードメイン
★バックアップを取っておいてサーバーが決まったらインポートすればよい
コメント