学科 CMS構築基礎⑤

-本日のアジェンダ-

1限目
学科 CMS構築基礎⑤
WordPressのテーマについて

2限目
学科 CMS構築基礎⑤
WordPressのテーマの役割について

3限目
学科 CMS構築基礎⑤
課題作成

4限目
学科 CMS構築基礎⑤
課題作成

5限目
学科 CMS構築基礎⑤
課題作成

本日のテーマ

WordPressのテーマの仕組みを確認しましょう。

【資料】

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

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP4】Webページの制作/「Wordpress活用法の教科書⑦.pdf」

【動画】「Wordpress活用法の教科書⑦」

WordPressについて

WordPress（ワードプレス）は、ブログやサイト（ホームページ）を作成できるソフトです。今や、世界中のサイトの約3分の1はWordPressで作られていると言われています。日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。

参考サイト

WordPressのテーマとは

WordPressのテーマは、Webサイトのデザインを決定するものですが、デザインに加えてサイト全体の構成や表示される機能にも影響します。単純に見た目のデザインだけで選ぶと操作がしにくかったりメンテナンスが大変だったりする場合もあります。
テーマの入手方法は、以下の種類があります。無料のテーマの中には、機能制限有りが無料で制限を解除する場合は、有料になる場合もあります。

  • 無料のテーマ（WordPress公式テーマ）
  • 無料のテーマ（WordPress非公式テーマ）
  • 有料のテーマ
  • 制作会社に発注
  • 自分で作成

参考サイト

HTML・CSSからオリジナルテーマを作成

WordPressのオリジナルテーマを作成する手順を理解しましょう。

参考サイト

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

学科 サーバーサイドプログラム基礎

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

WordPressのより深いお話です。

【資料】

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

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP4】Webページの制作/「Wordpress活用法の教科書⑥.pdf」

【動画】「Wordpress活用法の教科書⑥」

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

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

参考サイト

サーバーサイドの仕組み

Webページには固定のHTMLが設定されているページ（静的ページ）と要求発生時にHTMLを作成するページ（動的ページ）があります。静的ページと動的ページの違いを理解しましょう。

参考サイト

サーバーの契約と開設

サーバーサイドプログラミングを行うためにはレンタルサーバーとの契約が必要です。

参考サイト

ワンポイントアドバイス

サーバー選びは最初に行いましょう。
お仕事時に一番最初に確認すべき事としてどのサーバーを利用しているか？
そしてどのサーバーを利用するか？これは、企画初期に確認を行いましょう。 後から、出来る出来ない問題が発生してしまいます。

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

学科 PHP基礎

-本日のアジェンダ-

1限目
学科 PHP基礎
PHP について

2限目
学科 PHP基礎
WordPressのPHPでの役割について

3限目
学科 PHP基礎
課題作成

4限目
学科 PHP基礎
課題作成

5限目
学科 PHP基礎
課題作成

本日のテーマ

WordPressはphpで出来ています。

【資料】

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

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP4】Webページの制作/「Wordpress活用法の教科書⑤.pdf」

【動画】「Wordpress活用法の教科書⑤」

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

スクリプト（プログラミング）にはサーバー側で動くものとクライアント側（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を記述できるわけですから 必要性と使いどころをまずは理解して、一つ一つ理解してい くのが良いでしょう。

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

実技 ユーザーインターフェイス作成実習

-本日のアジェンダ-

1限目
実技 ユーザーインターフェイス作成実習
成績考査

2限目
実技 ユーザーインターフェイス作成実習
成績考査

3限目
実技 ユーザーインターフェイス作成実習
成績考査

4限目
実技 ユーザーインターフェイス作成実習
成績考査

5限目
実技 ユーザーインターフェイス作成実習
成績考査

本日のテーマ

成績考査です

本日の課題

コーディングしたサイト(LP)を、4限目終了までにご自身のWordpressに新規固定ページでUPしてください。

【パーマリンクのURL設定】
「grade-check_20230622」としてください。

パスワードには、「test」を設定してください。

ポートフォリオサイトの1ページとして人に見せられるよう、制作過程や説明などもまとめましょう。

実技 JavaScript(jQuery)実習

-本日のアジェンダ-

1限目
実技 JavaScript(jQuery)実習
jQueryの使い方について

2限目
実技 JavaScript(jQuery)実習
jQueryの導入

3限目
実技 JavaScript(jQuery)実習
課題制作

4限目
実技 JavaScript(jQuery)実習
課題制作

5限目
実技 JavaScript(jQuery)実習
課題制作

本日のテーマ

jQueryを自分のサイトに導入しましょう

jQueryの導入

jQueryを自分のサイトに導入して動きのあるサイトを作りましょう。

参考サイト

jQueryの利用方法（復習）

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery （実装したいキーワード）」で検索します。
良く使うキーワードの例は、以下の通りです。

  • スライダー
  • カルーセル
  • ハンバーガーメニュー
  • ライトボックス
  • ドリルダウン
  • フェード
  • スクロール　など

参考サイト

本日の課題

コーディングを進めましょう。
5限目の終わりまでに、
今日できたところまでのサイトをサーバに仮アップしましょう。

学科 JavaScript基礎

-本日のアジェンダ-

1限目
学科 JavaScript基礎
JavaScriptについて

2限目
学科 JavaScript基礎
jQueryの使い方について

3限目
学科 JavaScript基礎
課題制作

4限目
学科 JavaScript基礎
課題制作

5限目
学科 JavaScript基礎
課題制作

本日のテーマ

JavaScript(jQuery)についてです

jQueryについて

jQueryを利用する時の基本事項を理解しましょう。

参考サイト

【資料】

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

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP4】Webページの制作/「JavaScript(jQuery)の教科書.pdf」

【動画】「JavaScript(jQuery)の教科書」

jQueryの利用方法

jQueryを利用する時は実装するための参考サイトを検索し利用方法を理解しましょう。
検索は、「jQuery （実装したいキーワード）」で検索します。
良く使うキーワードの例は、以下の通りです。

  • スライダー
  • カルーセル
  • ハンバーガーメニュー
  • ライトボックス
  • ドリルダウン
  • フェード
  • スクロール　など

参考サイト

ワンポイントアドバイス

見本となるサイトがたくさんあるのがWebページの良いところです。
「こんな動きのページ作れますか？」のような依頼はよくあります。
その見本のサイトを解析できれば実装が可能です。

本日の課題

課題提出はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

学科 ユーザーインターフェイス基礎⑤

-本日のアジェンダ-

1限目
学科 ユーザーインターフェイス基礎⑤
様々なWebコンテンツについて

2限目
学科 ユーザーインターフェイス基礎⑤
ユーザビリティーとアクセシビリティー

3限目
学科 ユーザーインターフェイス基礎⑤
課題制作

4限目
学科 ユーザーインターフェイス基礎⑤
課題制作

5限目
学科 ユーザーインターフェイス基礎⑤
課題制作

本日のテーマ

Webサイトビジネスについて

【資料】

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

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP4】Webページの制作/「「デザインの考え方」の教科書⑧.pdf」

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

「ユーザビリティー」と「アクセシビリティー」

ユーザビリティとは？

ユーザビリティは、一般的には「使いやすさ」を示す言葉だが、国際規格のISO 9241-11では、「ある製品を、特定の利用者が、特定の目的を達成しようとするにあたって、特定の状況で、いかに効果的に、効率的に、満足できるように使えるかの度合い」としている。

アクセシビリティ

アクセシビリティは、英語では“Accessibility”で、「近づきやすさ」、「利用のしやすさ」、「便利であること」などと訳されています。 一般的には、「利用者が機器・サービスを円滑に利用できること」という場合に使われています。

参考サイト

ワンポイントアドバイス

Webコンテンツは様々は状況や条件、目的に合わせて利用されています。
その様々な要件定義に合わせた「デザイン」ができる人を目指し、成長に努めましょう。

本日の課題

提出課題はありません。
就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

学科 レイアウトデザイン基礎⑤

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎⑤
デバイスについて

2限目
学科 レイアウトデザイン基礎⑤
各デバイス検証について

3限目
学科 レイアウトデザイン基礎⑤
課題制作

4限目
学科 レイアウトデザイン基礎⑤
課題制作

5限目
学科 レイアウトデザイン基礎⑤
課題制作

本日のテーマ

デバイス検証は最後にしっかりと

デバイスとは？

ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。

【資料】

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

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP4】Webページの制作/「各デバイス検証.pdf」

【動画】「各デバイス検証」

実機検証 について

スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。

ワンポイントアドバイス

サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。

参考サイト

本日の課題

コーディングを進めましょう。
5限目の終わりまでに、
今日できたところまでのサイトをサーバに仮アップしましょう。

学科 レイアウトデザイン基礎④

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎④
ブラウザについて

2限目
学科 レイアウトデザイン基礎④
各ブラウザ検証について

3限目
学科 レイアウトデザイン基礎④
課題制作

4限目
学科 レイアウトデザイン基礎④
課題制作

5限目
学科 レイアウトデザイン基礎④
課題制作

本日のテーマ

ブラウザ検証についてです

ブラウザとは？

ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。 Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。

【資料】

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

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP4】Webページの制作/「各ブラウザ検証.pdf」

【動画】「各ブラウザ検証」

ワンポイントアドバイス

サイトが一通り形になったら特に使用する可能性の高いブラウザは必ず確認しましょう。

参考サイト

本日の課題

コーディングを進めましょう。
今日できたところまでのサイトをサーバに仮アップしてみましょう。

学科 WEB動画基礎

-本日のアジェンダ-

1限目
学科　WEB動画基礎
WEB動画とは？

2限目
学科　WEB動画基礎
Webサイトでの動画の使い方について

3限目
学科　WEB動画基礎
課題作成

4限目
学科　WEB動画基礎
課題作成

5限目
学科　WEB動画基礎
課題作成

本日のテーマ

Webサイトでの動画の活用法についてです。

WEB動画について

Web動画とは、WebサイトやYouTubeチャンネルなど、オンラインでの視聴を想定した動画全般を指します。 「Webムービー」と呼ばれることもあり、目的はブランディングや商品・サービスのプロモーション、広告配信など多岐にわたります。

参考資料

ドロップボックス
資料＞【STEP4】Webページの制作＞「WEB動画基礎20220818.pdf」をダウンロードしましょう。
ポイントをまとめた資料です。

【動画】「WEB動画運用基礎」

VIDEOとIFRAMEタグ

WEBサイトに動画を埋め込む方法は２つあります。
①iframeタグを使用する（youtubeなどの動画サイトから読み込む）
②videoタグを使用する（動画ファイルをアップロードして読み込む）

①IFRAMEタグを使用する（YOUTUBEなどの動画サイトから読み込む）

記述例
<iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

②VIDEOタグを使用する（動画ファイルをアップロードして読み込む）

記述例
<video src="sample.mp4"></video>

参考サイト

その他、埋め込みについては下記を参考に！

SNSの埋め込み方

本日の課題

課題提出はありません。
デザインラフを元にコーディングを進めていきましょう。