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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習③
成績考査

2限目
実技 ECサイトデザイン実習③
成績考査

3限目
実技 ECサイトデザイン実習③
成績考査

4限目
実技 ECサイトデザイン実習③
成績考査

5限目
実技 ECサイトデザイン実習③
成績考査・提出確認

本日のテーマ

成績考査です

本日の課題

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

バナーのサイズ違いを展開して作成して下さい。
【サイズ展開】
(幅width × 高さheight)
・750px × 290px
・250px × 250px
・320px × 100px
・320px × 50px
・120px × 600px (縦長)
今までに作成したバナーから、別サイズを展開してもOKです。
作成したバナーを4限目終了までにご自身のWordpressに新規固定ページを作成してUPしてください。
5限目に提出チェックを行います。

②WP(ポートフォリオ)サイトチェック

バナー投稿が終わったら、残りの時間でポートフォリオサイトを整理しましょう。

WordPressへの成績考査の上げ方

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

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

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

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

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

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

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

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

– 本日のアジェンダ –

1限目
実技 ECサイトデザイン実習②
クライアント確認について

2限目
実技 ECサイトデザイン実習②
バナー作成

3限目
実技 ECサイトデザイン実習②
バナー作成

4限目
実技 ECサイトデザイン実習②
バナー作成

5限目
実技 ECサイトデザイン実習②
バナー 講評


本日のテーマ

馴染んでください

クライアントへの確認方法

デザインした制作物をクライアント(発注者)に確認を入れる場合は、そのまま見せる事が最も解りやすい方法です。バナーを作成したらページにそのまま当て込んで(テストアップ等)確認をとります。

ワンポイントアドバイス

バナーを作成したら、スクリーンショットしたページに当て込んでみましょう。違和感が無かったら成功です。ページに馴染むようにデザインの基本ルール「レイアウト」「文字」「配色」に気を付けて作成してみてください。

本日の課題

バナー作成練習 -あて込み-

ご自身で選んだジャンルのバナーを作成し、ページ画像に当て込んで下さい。
4時限目終了までにご自身のポートフォリオサイトにアップしましょう。
5限目に講評を行います。

※バナーサイズ設定は自由です。
※目標2つ以上で制作しましょう。

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

– 本日のアジェンダ –

1限目
実技 ECサイトデザイン実習①
Photoshopの機能について

2限目
実技 ECサイトデザイン実習①
Photoshopの機能について

3限目
実技 ECサイトデザイン実習①
サムネイル画像 作成

4限目
実技 ECサイトデザイン実習①
サムネイル画像 作成

5限目
実技 ECサイトデザイン実習①
サムネイル画像 作成

本日のテーマ

サムネイル画像 について

サムネイル画像とは?

サムネイル画像は、親指(サム)の爪(ネイル)のように小さい画像という意味で、実際に撮影した画像から解像度を下げたり、圧縮したりするなどの手法で、ファイルサイズを小さくしたデータです。 情報量が少ないので読み込みが早く、一覧表示で多くの画像を素早く見ることができます。

参考サイト

本日の課題

-サムネイル画像 作成練習 –

サムネイル画像作成し、
4限目終了までにご自身のポートフォリオサイトにアップしてください。
5限目に講評を行います。

※目標2つ以上で制作しましょう。