学科 HTML基礎①

-本日のアジェンダ-

1限目
学科 HTML基礎①
Webサイト制作の手順について

2限目
学科 HTML基礎①
Webサイト制作時の事前準備について

3限目
学科 HTML基礎①
Webサイト制作時の知識について

4限目
学科 HTML基礎①
HTMLの基本構造について

5限目
学科 HTML基礎①
本日の講義のまとめ

本日のテーマ

Webサイト制作の手順を理解しましょう

Webサイト（ページ）の制作について

お客様からWebサイト（ページ）の制作を依頼された場合に必要となる作業を工程別に理解しましょう。

参考サイト

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 ＞ 【STEP3】Webページの理解 ＞ Webサイト制作の手順の教科書.pdf
Webサイト制作の手順をまとめた資料です。

【動画】

Webサイト（ページ）の構成要素について

  • HTML
    Web ページ内の各要素の意味や文書構造を定義します。
  • CSS
    レイアウトデザインや各要素の装飾（色・サイズなど）を定義します。
  • JavaScript/jQuery
    動きを付けたり計算などの処理を行います。

ワンポイントアドバイス

Webサイトを作成するには、HTML、CSS、JavaScript/jQuery、画像ファイルなど、複数のファイルを管理する必要があります。作成するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理しましょう。

Webページ開発ツールについて

Webページ開発には、テキストエディタとブラウザが必要です。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、本訓練では、TeraPadとChromeを使用してWebページ開発を行います。TeraPadとChromeは、Windows標準ではインストールされていませんのでインストールを行ってください。

参考サイト

文字コードについて

日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用してください。

参考サイト

ファイルのパス指定について

ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法があります。それぞれの特徴を理解して使い分けましょう。

参考サイト

HTMLの基本構造について

タグの構造

<要素名 属性=”属性値”>

  • 要素名
    タグの種別を指定します。タグ名とも言われます。
  • 属性
    要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができます。
  • 属性値
    属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。

HTMLの基本構造

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

  • !DOCTYPE 宣言（ドキュメントタイプ宣言）
    ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。
  • HTML 要素（HTML の文書）
    html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。
  • HEAD 要素（文書情報）
    head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます。
  • BODY 要素（文書本文）
    body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。

doctype宣言とは？

HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。

DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となります。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要があります。 主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなります。

参考サイト

ワンポイントアドバイス

楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合があります。その場合やむを得ず、違う方法を使わなければならない場合がありますので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておきましょう。

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

実技 ポートフォリオ作成実習①

-本日のアジェンダ-

1限目
実技 ポートフォリオ作成実習①
WordPressサイトの掲載内容について

2限目
実技 ポートフォリオ作成実習①
アンサーページの作成方法について

3限目
実技 ポートフォリオ作成実習①
WordPressサイトに作品を掲載しましょう

4限目
実技 ポートフォリオ作成実習①
WordPressサイトに作品を掲載しましょう

5限目
実技 ポートフォリオ作成実習①
FTPコマンドの使用方法について

本日のテーマ

WordPressサイトの完成度を向上させましょう

WordPressサイトの掲載内容について

WordPressサイトには、以下の内容を掲載しましょう。

ポートフォリオサイト

ポートフォリオサイトとして活用できるように以下の項目を掲載してください。

  • ご挨拶
  • プロフィール（自己紹介）
    • 名前
    • 顔写真
    • 生年月日
    • 略歴
    • 仕事への姿勢や意気込み
    • 自己PR
  • 保有スキル
    • スキル項目
    • スキルレベル
  • ポートフォリオ
    • 作品
    • 作成の説明
    • 作品ツール
    • 作成時間
    • その他（苦労したこと、考慮したこと、学んだこと など）
  • 後書き

訓練ブログ

学んだことの復習や忘れてしまったことを思い出す資料として訓練ブログを作成してください。

  • 訓練の1日単位で投稿ページを作成してください。
  • ページのタイトルは、訓練内容がわかるようにしてください。

参考サイト

注意事項

  • テーマやプラグインを入れすぎるとサーバーのディスク容量が大きくなってしまうと同時にWordPressの動きが重たくなってしまうので不要になったテーマは削除するようにしましょう。

WordPressサイト作成時の注意事項

WordPressサイトの作成に当たっては、ポートフォリオとしての活用を中心に考えてサイト構成を考えてください。また、ポートフォリオの作成に当たっては、ポートフォリオを見る人の立場に立って考えてみましょう。

  • 採用担当者の立場になって作りましょう（採用担当者が何をみたいか考えてみましょう）
  • トップページは作品主体にしましょう（ポートフォリオとしてのトップページを意識してみましょう）
  • 操作性や導線を考慮しましょう（クリックの多すぎは見る気がしなくなります）
  • 未経験者の場合は「学校でこんな事を勉強してきました」、「私はこんなことができます」をわかるようにしましょう

アンサーページの作成について

求人票には「○○の出来る方」というような条件がついている場合があります。このような時は、指定された条件の回答となるページを作成して提示することで保有スキルをアピールすることができます。
訓練の中では、成績考査の提出物をアンサーページとして作成してもらうこともあります。

  1. アンサーページを固定ページで作成
  2. アンサーページを開くためのメニュー項目を追加
  3. 必要に応じてアンサーページを開くためのパスワードを設定

参考サイト

FTPコマンドの使用方法について

HTML/CSSで作成したWebサイトを公開するためには、作成したWebサイトデータをサーバーにアップロードする必要があります。サーバーへのアップロードを行うには、FTPコマンドを使用します。FTPコマンドを使用したサーバーへのアップロード方法を理解しましょう。訓練ではFTPコマンドとしてffftpという名称のコマンドを使用しますが実際には使用するPC環境に合ったコマンドをインストールして使用してください。

本日の課題

作成中のWordPressサイトのサイト構成の再確認と作品掲載を進めましょう。

実技　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)で氏名(漢字フルネーム)を入力して下さい。

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

④投稿設定のパーマリンクのURLスラッグに下記を設定して下さい。
http://deau000□□(出席番号).wp.xdomain.jp/grade-check_20230405

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

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

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

馴染んでください

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

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

ワンポイントアドバイス

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

本日の課題

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

バナーの作成しスクリーンショットした画像に当て込んで下さい。
作成した作品を4限目終了までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、bnr_○○○○_20230404.jpg

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

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習②
バナーの利用方法について

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

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

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

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

本日のテーマ

元データをしっかり意識しましょう。

デザイン素材の権利について

バナーなどの制作物のデータは、当然二次利用が可能です。データ納品となる場合は権利やデータの内容などの事から、価値が変わります。
初期の契約内容や会社での方針などしっかり確認しデータのやり取りをしましょう。

参考サイト

ワンポイントアドバイス

Webサイト利用のバナーは、様々なサイズで作成する技術が求められます。デザインの「レイアウト」「文字」「配色」をしっかりと継承したデザインを作成できるようにしましょう。また元データは、それに対応しやすいように計画的に整理整頓しておきましょう。

本日の課題

バナー作成練習 -バリエーション①-

バナーのレイアウト違いを作成して下さい。
作成したバナーを4限目終了までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、bnr001_○○○○_20230403.jpg

バナー作成練習 -バリエーション②-

バナーのレイアウト違いを作成して下さい。
作成したバナーを4限目終了までにドロップボックスにUPしてください。
5限目に講評を行います。
※ファイル名は、bnr002_○○○○_20230403.jpg

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

-本日のアジェンダ-

1限目
実技　ECサイトデザイン実習①
写真の権利について

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

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

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

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

本日のテーマ

権利を確認しておきましょう。

写真の権利について

著作権は、作品を創作した者が有する権利である。また、作品がどう使われるか決めることができる権利である。作者の思想や感情が表現された文芸・学術・美術・音楽などを著作物といい、創作した者を著作者という。知的財産権の一種。 ウィキペディア

参考サイト

本日の課題

-バナー作成練習 自由テーマ①-

ご自身で選んだジャンルで、「キャッチコピー」「商品名」「価格」などを入れた商品バナーを作成し、4時限目終了までに提出してください。
サイズ設定は自由です。
※提出先・・・提出＞【0555】バナー模写 3月31日(金)
※ファイル名は、bnr001_xxxx_20230331.jpg

-バナー作成練習 自由テーマ②-

ご自身で選んだジャンルで、「キャッチコピー」「商品名」「価格」などを入れた商品バナーを作成し、4時限目終了までに提出してください。
サイズ設定は自由です。
※提出先・・・提出＞【0555】バナー模写 3月31日(金)
※ファイル名は、bnr002_xxxx_20230331.jpg

学科 ECサイトデザイン基礎②

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎②
Photoshopの機能について

2限目
学科 ECサイトデザイン基礎②
Photoshopの機能について

3限目
学科 ECサイトデザイン基礎②
サムネイル画像 作成

4限目
学科 ECサイトデザイン基礎②
サムネイル画像 作成

5限目
学科 ECサイトデザイン基礎②
サムネイル画像 作成

本日のテーマ

サムネイル画像 について

サムネイル画像とは？

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

参考サイト

本日の課題

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

サムネイル画像の作成をして下 さい。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
提出先・・・ 提出 /【0555】サムネイル3月30日(木)
※ファイル名は、img001_xxxx_20230330.jpg

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

サムネイル画像の作成をして下さい。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
提出先・・・ 提出 /【0555】サムネイル3月30日(木)
※ファイル名は、img002_xxxx_20230330.jpg

昨日までの基本知識

ECサイトについて

ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。 複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。 ウィキペディア

参考サイト

バナー広告とは？

バナー はウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。 ウィキペディア

参考サイト

ワンポイントアドバイス

バナー作成はデザインの全ての要素が詰まっている作品です。
ポートフォリオに掲載する最も効果的なアイテムとなりますので、しっかりと良い作品作りが出来るように進めていきましょう。

バナー制作の進め方

覚えておくと良い基本操作

シェイプ・パス・ピクセル

【シェイプ】 
ベクトルデータで図形を描画します。塗り、線色、線幅を設定することが出来て、後で形状や塗りを変更することが出来ます。また、描画後に自動でベクトルレイヤーが作成されます。
【パス】 
アウトラインデータだけのシェイプです。塗り、線色、線幅が設定されていません。主に選択範囲を作成する際に使用します。
【ピクセル】 
ラスターデータで図形を描画します。後で形状や塗りを変更することが出来ません。

参考サイト

描画ツール

複数のアンカーポイントという点を結んだ線（パス）で描かれた図形のことです。
矩形や円、五角形などの所謂、図形を描いたり、カスタムシェイプツールを使って複雑な図形を描くことができます。 

  • 長方形ツール
  • 角丸長方形ツール
  • 楕円形ツール
  • 多角形ツール
  • カスタムシェイプツール

参考サイト

パス選択ツール

【Photoshop基本操作】［パス選択ツール］とは、アンカーポイントの移動や方向線の調整など、主にパスの操作を行うツールです。 その活用範囲は広く、他のツールからキー操作で切り替えて使用することも多いです。 クリックして選択が基本！ パス選択ツールの操作は、「掴んで離す」ようなドラッグ＆ドロップがほとんどです。

参考サイト

バナー制作で覚えておきたい復習

  • スマートオブジェクト
  • 調整レイヤー
  • トリミング復習
  • レタッチ復習
  • クリッピングマスク
  • レイヤーマスク
  • ベクトルマスク

バナー制作で覚えておきたい技術

  • 枠作成（レイヤースタイル）
  • グラデーション（レイヤースタイル）
  • 境界線（レイヤースタイル）
  • 光と影（レイヤースタイル）
  • レイアウト/文字/配色
  • カンバスサイズ
  • Web用に書き出し（ jpg / gif / png ）

学科 ECサイトデザイン基礎①

-本日のアジェンダ-

1限目
学科　ECサイトデザイン基礎①
ECサイトとは？

2限目
学科　ECサイトデザイン基礎①
ECのお仕事について

3限目
学科　ECサイトデザイン基礎①
バナー作成について

4限目
学科　ECサイトデザイン基礎①
バナー制作に向けての情報収集

5限目
学科　ECサイトデザイン基礎①
バナー制作に向けての情報収集

本日のテーマ

ECのお仕事を理解しましょう

ECサイト

ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。 複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。 ウィキペディア

参考サイト

【資料】

Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 / 【STEP2】デザインの理解・・・「デザインの考え方」の教科書⑤.pdf

【動画】「デザインの考え方」の教科書⑤

ワンポイントアドバイス

まずは様々な作品を見て見ましょう。
見て真似をしてまた見るの繰り返しが上達のコツです！

本日の課題

(課題提出はありません)
バナーのオリジナル制作に向けて、
集めた参考サイトや素材のリンクをメモしておきましょう。

学科 ECサイト運用基礎②

-本日のアジェンダ-

1限目
学科　ECサイト運用基礎②
Photoshopの機能について

2限目
学科　ECサイト運用基礎②
Photoshopの機能について

3限目
学科　ECサイト運用基礎②
バナー模写練習

4限目
学科　ECサイト運用基礎②
バナー模写練習

5限目
学科　ECサイト運用基礎②
バナー模写練習

本日のテーマ

まずはバナー「模写」で表現の完全コピーを目指しましょう

覚えておくと良い基本操作

Photoshop基本操作まとめページ　基本操作⑥

Photoshop基本操作

バナー制作で覚えておきたい復習

  • スマートオブジェクト
  • 調整レイヤー
  • トリミング復習
  • レタッチ復習
  • クリッピングマスク
  • レイヤーマスク
  • ベクトルマスク

本日の課題

バナー「模写」を作成してみましょう。
サイズは自由です。
作成したバナーを5限目終了までにドロップボックスにUPしてください。
※提出先・・・提出＞【0555】バナー模写 3月27日(月)
※ファイル名は、bnr001_xxxx_20230327.jpg、bnr002_xxxx_20230327.jpg

学科 ECサイト運用基礎①

-本日のアジェンダ-

1限目
学科　ECサイト運用基礎①
バナーとは？

2限目
学科　ECサイト運用基礎①
レイアウトデザインのポイント

3限目
学科　ECサイト運用基礎①
バナー制作に向けて

4限目
学科　ECサイト運用基礎①
バナー制作に向けての情報収集

5限目
学科　ECサイト運用基礎①
バナー制作に向けての情報収集

本日のテーマ

今後のバナー制作に向けて情報収集をしましょう。
※バナーの作成ソフトはPhotoshopです。

【資料】

Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 / 【STEP2】デザインの理解・・・「デザインの考え方」の教科書④.pdf

【動画】「デザインの考え方」の教科書④

バナー広告とは？

バナー はウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。 ウィキペディア

参考サイト

ワンポイントアドバイス

まずは模写をして徹底的に真似をしましょう。
そのバナーの制作者が意図していていた技術・技能・表現などを真似することによって自分のものにしましょう。またPhotoshopのソフトでどのようにすれば再現できる考えながら作成してみましょう。これまでの「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して真似をしてみましょう。

本日の課題

(課題提出はありません)
模写したいバナーを収集をしましょう。
バナー掲載先のページをメモしておいてください。