講師：田中里枝
1限目
実技 ECサイトデザイン実習①
Photoshopの機能について
2限目
実技 ECサイトデザイン実習①
Photoshopの機能について
3限目
実技 ECサイトデザイン実習①
サムネイル画像 作成
4限目
実技 ECサイトデザイン実習①
サムネイル画像 作成
5限目
実技 ECサイトデザイン実習①
サムネイル画像 講評
サムネイル画像 について
サムネイル画像は、親指(サム)の爪(ネイル)のように小さい画像という意味で、実際に撮影した画像から解像度を下げたり、圧縮したりするなどの手法で、ファイルサイズを小さくしたデータです。 情報量が少ないので読み込みが早く、一覧表示で多くの画像を素早く見ることができます。
サムネイル画像作成し、
4限目終了までにご自身のポートフォリオサイトにアップしてください。
5限目に講評を行います。
※目標2つ以上で制作しましょう。
講師：田中里枝
1限目
学科 ECサイトデザイン基礎①
ECサイトとは？
2限目
学科 ECサイトデザイン基礎①
ECのお仕事とバナー作成について
3限目
学科 ECサイトデザイン基礎①
マスクについて
4限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集
5限目
学科 ECサイトデザイン基礎①
サムネイル制作に向けての情報収集
ECのお仕事を理解しましょう
ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。 複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。 ウィキペディア
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
1.「デザインの考え方」の教科書⑤.pdf
2. マスクについて.pdf
まずは様々な作品を見て見ましょう。
見て真似をしてまた見るの繰り返しが上達のコツです！
Photoshopのマスクのかけ方は、大きく分けて『レイヤーマスク』、『ベクトルマスク』と『クリッピングマスク』の3種類があります。
それと選択ツールの調整で使うクイックマスクモードがあります。
レイヤーマスクは、レイヤーに追加する機能です。画像の一部を隠したい場合に使用します。白黒に塗り分けられた画像から、表示する部分と、隠す部分の「マスク領域」を指定します。レイヤーマスク自体が、ドキュメントに表示されることはありません。対象となる画像の一部が、切り抜いた型紙を通り抜けて、背景に投影されるようなイメージです。
ベクトルマスクは、ペンツールやシェイプを使用して作成するマスクです。ベクトルマスクは、画像の拡大や収縮を繰り返しても、マスクが劣化しないので、解像度を気にすることなく編集できます。
パスパネル（ウィンドウ／パス）には、保存されたパスごとの名前とサムネール画像、現在の作業用パスおよび現在のベクトルマスクが一覧表示されます。サムネールの表示をオフにすると、パフォーマンスが向上します。パスを表示するには、まずそのパスをパスパネルで選択する必要があります。
クリッピングマスクとは、マスクが適用されるレイヤーをグループ化したものです。一番下のレイヤー（ベースレイヤー）がグループ全体の表示範囲を定義します。例えば、ベースレイヤーにシェイプがあり、その上のレイヤーに写真があり、一番上のレイヤーにテキストがあるとします。写真とテキストは、ベースレイヤー上のシェイプのアウトラインを通してだけ表示されると、ベースレイヤーの不透明度を継承します。
マスクはデータを維持したまま作業を進める方法として、最も使われる手法です。逆に他人が作成したデータを編集しなければならない時に、「わからない」が発生するポイントがここです。しっかりと理解を高めておきましょう。
スマートオブジェクトとは、「縮小と拡大を繰り返しても、劣化をしない画像データ形式」のことです。Photoshopで画像を扱うときにスマートオブジェクト化していない場合、1度でも縮小すると画像が劣化してしまいます。画像の質を保ったまま縮小・拡大をしたいときは、スマートオブジェクトに変換する必要があります。
スマートオブジェクトは画像を劣化させずに保つ形式なので、多用するとデータが重くなりがちです。スマートオブジェクトを解除することを「ラスタライズ」といいます。スマートオブジェクトをラスタライズすると、元のビットマップ画像に戻ります。
講師：湊 有加里
1限目
実技 WEBデザイン実習③
PCスペック確認
2限目
実技 WEBデザイン実習③
PCスペック確認
3限目
実技 WEBデザイン実習③
PCスペック確認
4限目
実技 WEBデザイン実習③
フォントカルタについて・カルタ大会
5限目
実技 WEBデザイン実習③
カルタ大会
グループワークです。楽しくやりましょう！
支給されたPCで作品制作を目指しましょう。
読み上げられたフォント名と解説をヒントに、そのフォントの札を取るというかるたゲームです。ゲーム形式でフォントの違いを見分ける感性を身に付けましょう！
講師：小谷祥吾
1限目
学科 デザイン概論②
インバウンドとは？
2限目
学科 デザイン概論②
WEBデザインとインバウンド
3限目
学科 デザイン概論②
PCスペックについて
4限目
学科 デザイン概論②
本日のまとめ
5限目
学科 デザイン概論②
本日のまとめ
WEBデザインにおけるインバウント需要を知っておきましょう！
インバウンド（inbound）という言葉には「到着する、入ってくる」という意味があります。この言葉の使われ方業界によってさまざまですが、旅行業などの業界では「外国からの旅行者」を指します。
つまりインバウンド需要とは、日本に訪れた外国人の日本国内で生み出された商品やサービスへの需要です。
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
1.インバウントについて.pdf
2.PCスペックについて.pdf
講師：
1限目
実技 ポートフォリオ作成実習③
成績考査
2限目
実技 ポートフォリオ作成実習③
成績考査
3限目
実技 ポートフォリオ作成実習③
成績考査
4限目
実技 ポートフォリオ作成実習③
成績考査
5限目
実技 ポートフォリオ作成実習③
成績考査・提出確認
成績考査です
作成したWebページのスクリーンキャプチャを取得して4限目終了までにご自身のWordPressに新規固定ページにパスワード付きでUPしてください。
（5時限目終了までは更新しても大丈夫です）
※投稿設定のパーマリンクのURLスラッグは
「grade-check_20250513」と設定して下さい。
※ポートフォリオサイトの1ページとして人に見せられるよう、
制作過程や説明などもまとめましょう。
作成するページは、ポートフォリオの作品紹介ページの作成訓練としてご自身がデザイン・サイト制作をしたという前提で作成してみてください。作品を効果的にアピールできるように以下の項目を考慮して説明文を考えてみてください。
・作品タイトル（サイト名）
・クライアント
・デザインコンセプト
・使用ソフト
・制作期間
・制作時に考慮した点 など
5/16(金)「WEBデザイン実習③」にて最新の職務経歴書をご提出ください。
以前に提出した内容からブラッシュアップを試みましょう。
ご自身のWordPressに成績考査用のスクリーンショットを投稿していただきます。
手順は以下の通りです。
以降のブロックに画像をブロックエディタ「画像」にてアップロードして下さい。
固定ページ設定のパーマリンクのURLスラッグに下記を設定して下さい。
「grade-check_20241203」
公開状態をパスワード保護にします。パスワードは「test」と設定して下さい。
固定ページ一覧に作成したページが出来ているか確認して下さい。
講師：湊 有加里
1限目
学科 HTML/CSS基礎⑩
練習問題について
2限目
学科 HTML/CSS基礎⑩
練習問題
3限目
学科 HTML/CSS基礎⑩
練習問題
4限目
学科 HTML/CSS基礎⑩
練習問題
5限目
学科 HTML/CSS基礎⑩
本日の講義のまとめ
練習問題を解いてみましょう
以下の練習問題は、実際のWebページ制作を対象とした練習問題になっています。各問題の進め方を動画で説明していますので各自で実施してみてください。
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題①.zip」
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題②.zip」
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題③.zip」
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題④.zip」
講師：平井美江
1限目
学科 WEBディレクション概論③
求人応募について
2限目
学科 WEBディレクション概論③
「人材紹介」や「人材派遣」について
3限目
学科 WEBディレクション概論③
求人応募に向けて
4限目
学科 WEBディレクション概論③
本日のまとめ
5限目
学科 WEBディレクション概論③
本日のまとめ
応募書類の作成に正解はありません。
もし正解があるとしたら「面接に呼んでいただく」です。そして、面接になったら聞いてみてください。「何で呼んでいただけましたか？」と各書類の狙いが上手くいっているか確認してみましょう。
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「求人応募について.pdf」
講師：湊 有加里
1限目
実技 WEBデザイン実習②
RWD 対応のサイトについて
2限目
実技 WEBデザイン実習②
メディアクエリについて
3限目
実技 WEBデザイン実習②
Webページ制作実践
4限目
実技 WEBデザイン実習②
Webページ制作実践
5限目
実技 WEBデザイン実習②
本日の講義のまとめ
Webページ制作実践で作成したページをRWD対応させましょう
Webページ制作実践で作成したページをレスポンシブWebデザイン対応をさせましょう。
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
レスポンシブWebデザインまで完了したファイルを下記に格納してあります。
必要に応じてダウンロードして確認してください。
「chapter5.zip」
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）
