実技 スマートフォンサイト作成実習

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習
RWDの歴史・基本設定Viewportについて

2限目
実技 スマートフォンサイト作成実習
Media Queries・UI/UXについて

3限目
実技 スマートフォンサイト作成実習
課題制作

4限目
実技 スマートフォンサイト作成実習
課題制作

5限目
実技 スマートフォンサイト作成実習
課題制作・講評

本日のテーマ

スマホ対応はCSSの延長線です。

レスポンシブWEBデザイン（RWD）とは？

「レスポンシブWEBデザイン（Responsive WEB Design）」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML（ワンソース）で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

サンプルページ（レスポンシブWebデザイン基礎）

【資料】

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

［保存場所］
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 /
【STEP3】/Webページの理解/「マルチデバイス対応の教科書①.pdf」・・・資料①【STEP4】/Webページの制作/「マルチデバイス対応の教科書②.pdf」・・・資料②

【動画】「マルチデバイス対応の教科書①」

【動画】「マルチデバイス対応の教科書②」

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

参考サイト

Viewport とは？

viewport（ビューポート）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。

ワンポイントアドバイス

viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。

参考サイト

Media Queries とは？

メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。

ワンポイントアドバイス

メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。

参考サイト

本日の課題

ワイヤーフレームから「デザインラフ」の作成に進み、
5限目終了時にポートフォリオサイトにUPしておきましょう。

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

-本日のアジェンダ-

2限目
学科 レイアウトデザイン基礎②
成績考査

2限目
学科 レイアウトデザイン基礎②
成績考査

3限目
学科 レイアウトデザイン基礎②
成績考査

4限目
学科 レイアウトデザイン基礎②
成績考査

5限目
学科 レイアウトデザイン基礎②
成績考査

本日のテーマ

成績考査です

本日の課題

作成したワイヤーフレームを、4限目終了までにご自身のWordpressに新規固定ページでUPしてください。
作成方法は過去の成績考査と同様の手順です。（不明の場合は2023年2月22日のアジェンダをご確認下さい）
投稿設定のパーマリンクのURLスラッグには
grade-check_20230525
と設定して下さい。
ポートフォリオサイトの1ページとして人に見せられるよう、制作過程や説明などもまとめましょう。

実技 XD実習

1限目
実技 XD実習
スマホサイトの制作について

2限目
実技 XD実習
プロトタイプのフロー設定と共有機能について

3限目
実技 XD実習
課題制作

4限目
実技 XD実習
課題制作

5限目
実技 XD実習
課題制作

本日のテーマ

XDの共有機能について

XDの共有機能について

「共有」は、作業チームのコミュニケーションをスムーズにしたり、情報伝達を容易にしたりする機能です。1つのWebサイトやアプリを作る際には、多くの人の意見をとりまとめたり、必要に応じて修正を加えたりする必要があります。Adobe XDにはそんなチームの共同作業をスムーズに進めるための各種機能が含まれています。

ワンポイントアドバイス

XDの共有機能は、会社お勤めになってから利用すると良いですが、出来る事と出来ない事、注意点を確認しておきましょう。

※訓練施設のアカウントは施設アカウントなのでこのPCではやらないでください。お仕事の時やご自身のアカウントで行いましょう。

参考サイト

本日の課題

ワイヤーフレームを作成し、
5限目までにドロップボックスにUPしてください。

今日の時点できたところまでの成果を必ず上げるようにしてください。
※ファイル名は、work_xxxx_20230524.jpg
※ワイヤーフレームができたら、デザインカンプ制作に入っても良いです。

学科 XD基礎

-本日のアジェンダ-

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

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

3限目
学科 XD基礎
データ連携について

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

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

本日のテーマ

adobe XD です。

adobe XD とは？

Adobe XDは、アドビが販売しているベクターベースのプロトタイピング作成ツールである。 ウィキペディア

参考サイト

【資料】

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

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

ワンポイントアドバイス

XDはまだ求人票で必要なスキルと掲載は少ないですが、取り入れている企業と、取り入れているデザイナーさんは増えています。
まずは、基本操作と利点などをしっかりと確認しておきましょう。

XD データ連携について

Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。

ワンポイントアドバイス

実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai（Illustrator）なのかpsd（Photoshop）がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。

参考サイト

本日の課題

ワイヤーフレームを作成し、
5限目までにドロップボックスにUPしてください。

今日の時点できたところまでの成果を必ず上げるようにしてください。
※ファイル名は、work_xxxx_20230523.jpg
※ワイヤーフレームができたら、デザインカンプ制作に入っても良いです。

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎①
ワイヤーフレーム制作の準備

2限目
学科 レイアウトデザイン基礎①
ワイヤーフレーム制作のポイント

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

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

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

本日のテーマ

早速作ってみましょう。

制作のポイント

情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。

ワンポイントアドバイス

ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。

本日の課題

白黒のワイヤーフレームを作成し、
5限目までにドロップボックスにUPしてください。
今日できたところまでで大丈夫です。
※ファイル名は、work_xxxx_20230522.jpg

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

-本日のアジェンダ-

1限目
学科 ユーザーインターフェイス基礎③
Webサイト・LPについて

2限目
学科 ユーザーインターフェイス基礎③
ワイヤーフレームについて

3限目
学科 ユーザーインターフェイス基礎③
レイアウトのポイントについて

4限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

5限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

本日のテーマ

Webサイト制作にあたり、まずはワイヤーフレームの制作のコツを学びましょう。

【資料】

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

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

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

LP（ランディングページ）とは？

ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 ウィキペディア

参考サイト

ワンポイントアドバイス

未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。

ワイヤーフレームとは？

ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。単に「ワイヤー」と呼ぶことも多いです。

参考サイト

ワンポイントアドバイス

ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。

制作のポイント

・使用ソフトはPhotoshopです。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・まずは色を入れず、白黒で制作しましょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える 手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。

本日の課題

ワイヤーフレーム作成に向けての準備

白黒のワイヤーフレーム作成に向け、世の中のサイトを参考に情報収集しながらレイアウトを考えましょう。
手書きでメモしておくと良いです。
5月22日(月)の学科 レイアウトデザイン基礎①から実際に作成します。

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

-本日のアジェンダ-

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

2限目
実技 ポートフォリオ作成実習②
WordPressサイト中間チェック

3限目
実技 ポートフォリオ作成実習②
WordPressサイト中間チェック

4限目
実技 ポートフォリオ作成実習②
WordPressサイトを拡充しましょう

5限目
実技 ポートフォリオ作成実習②
WordPressサイトを拡充しましょう

本日のテーマ

WordPressサイトの中間チェックです

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

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

ポートフォリオサイト

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

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

訓練ブログ

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

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

参考サイト

注意事項

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

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

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

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

本日の課題

ポートフォリオサイト、訓練ブログの完成度を上げてください。
修了式前の7月21日（金）に発表会を行います。

学科 CSS基礎⑥

-本日のアジェンダ-

1限目
学科 CSS基礎⑥
ボックスモデルについて

2限目
学科 CSS基礎⑥
ボックスモデルについて

3限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

4限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

5限目
学科 CSS基礎⑥
本日の講義のまとめ

本日のテーマ

Box modelについて（レスポンシブWEBデザイン）

Box modelについて（RWD）

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 ＞ 【STEP3】Webページの理解 ＞ マルチデバイス対応の教科書①.pdf
Box model（レスポンシブWEBデザイン）の手順をまとめた資料です。

【動画】

RWD 対応のサイトについて

  • 幅広デザインでの Web ページ作成
  • viewport 定義の指定
  • 横幅変動時のコンテンツ幅を設定
  • Media Querie でデザインを整える
  • 画面サイズに合わせた表示部品の導入

本日の課題

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

学科 CSS基礎⑤

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
練習問題の説明

2限目
学科 CSS基礎⑤
Webページ運用・作成の困った問題

3限目
学科 CSS基礎⑤
練習問題の解説

4限目
学科 CSS基礎⑤
擬似クラスと擬似要素について

5限目
学科 CSS基礎⑤
本日の講義のまとめ

本日のテーマ

レイアウトデザイン練習問題④（Webページ運用・作成の困った問題）

練習問題：Webページ運用・作成の困った問題

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 ＞ 【STEP3】Webページの理解 ＞ レイアウトデザイン 練習問題④
Webサイト制作のWebページ運用・作成の困った問題の練習資料です。

【動画】

擬似クラス系セレクタ

  • link 擬似クラス（未訪問リンクスタイル）
  • visited 擬似クラス（訪問済リンクスタイル）
  • hover 擬似クラス（オンカーソルスタイル）
  • active 擬似クラス（アクティブスタイル）
  • first-child/last-child 擬似クラス（先頭・最終の子要素指定）
  • nth-child 擬似クラス（n 番目の子要素指定）
  • nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
  • not 擬似クラス（指定値以外の要素指定）

擬似要素系セレクタ

  • first-letter 擬似要素（要素の 1 文字目を指定）
  • first-line 擬似要素（要素の 1 行目を指定）
  • before/after 擬似要素（要素の直前・直後にコンテンツの挿入）

本日の課題

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

学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
レイアウト系のプロパティについて

2限目
学科 CSS基礎④
レイアウト系のプロパティについて

3限目
学科 CSS基礎④
ボーダー／パディング／マージンのプロパティについて

4限目
学科 CSS基礎④
その他のプロパティについて

5限目
学科 CSS基礎④
本日の講義のまとめ

本日のテーマ

Webページを自由に配置できるようになりましょう

レイアウト系プロパティ

  • width プロパティ（内容の幅）
  • max-width プロパティ（幅の最大値）
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）
  • clear プロパティ（回り込みを解除）
  • position/top/left/bottom/right プロパティ（要素の配置方法）
  • z-index プロパティ（重なりの順序方法）
  • display プロパティ（要素の表示方法）
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

ボーダー系プロパティ

  • border-style プロパティ（ボーダースタイル）
  • border-color プロパティ（ボーダー色）
  • border-width プロパティ（ボーダー幅）
  • border プロパティ（ボーダー一括指定）
  • border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）

パディング系プロパティ

  • padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
  • padding プロパティ（パディング一括指定）

マージン系プロパティ

  • margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
  • margin プロパティ（マージン一括措定）
  • マージンの相殺
  • マイナスマージン
  • ボックスの中央配置
  • ボックスの右端配置

その他のプロパティ

  • border-radius プロパティ（ボーダーの丸み）
  • box-shadow プロパティ（ボックスの影）
  • box-sizing プロパティ（ボックスサイズ計算）
  • content プロパティ（挿入コンテンツ）
  • object-fit プロパティ（画像トリミング）
  • object-position プロパティ（画像の配置位置指定）

本日の課題

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