202011開講-昼B-0330

2020年11月16日（月）

開講式・オリエンテーション

-本日のアジェンダ-

1限目
開講式・オリエンテーション

2限目
開講式・オリエンテーション

2020年11月17日（火）

学科 安全衛生 学科 就職支援

–本日のアジェンダ–

1限目
学科 安全衛生
データの管理方法と取り扱いについて

2限目
学科 就職支援
自己紹介について

3限目
学科 就職支援
他己紹介について

4限目
学科 就職支援
他己紹介の準備

5限目
学科 就職支援
他己紹介の準備

本日のポイント

ご挨拶について考えてみましょう

最初の準備として

【授業が終わったら…】PCは必ずシャットダウンをして「電源が切れたのを確認してから」モニターを閉じてください。

ジョブカードについて

ジョブ・カードとは、以下のとおり、「生涯を通じたキャリア・プランニング」及び「職業能力証明」の機能を担うツールであり、個人のキャリアアップや、多様な人材の円滑な就職等を促進するため、労働市場インフラとして、キャリアコンサルティング等の個人への相談支援のもと、求職活動、職業能力開発などの各場面において活用するものです。

参考サイト

ジョブ・カードとは｜ジョブ・

履歴書とは？

履歴書とは、学業や職業の経歴など人物の状況を記した書類のことで、就職や転職時に選考用の資料として用いられる。また、学歴や職歴によって給与や資格などを決定する手続きにおいて、それを証明する各種の書類とともに提出する。 ウィキペディア

参考サイト

職務経歴書とは？

職務経歴書は、当人が過去に従事した職務・職業上の地位、および当該職務の具体的内容を、当人の職歴として時系列的またはキャリア、プロジェクトタイプなどをベースに記載した書面のことで、第三者に提示するために使用され、時として履歴書とともに使用される。 ウィキペディア

参考サイト

自己紹介

自己紹介とは、初めて会う人などに、姓名・職業などを述べ自分が何者であるかを説明すること。 普通は“よろしく”という挨拶の意を兼ねる。その方法は大勢の前での口頭によるもの、名刺を差し出して行うもの、電話で自分の所属・地位・名前を述べるものなど様々である。 ウィキペディア

他己紹介

ある他人のことを大勢の人に対して紹介すること。 自分自身を紹介する「自己紹介」と対をなす語である。 主に、新入社員の研修の場や、学校教育のレクリェーションの場などで行われる。

ワンポイントアドバイス！

自己紹介（他己紹介）では、冒頭で簡潔に「現在」「過去」「未来」を入れてみましょう。

研修メモ

覚書

2020年11月18日（水）

学科 WEBプログラミング基礎①

-本日アジェンダ-

1限目
学科 WEBプログラミング基礎①
他己紹介の準備

2限目
学科 WEBプログラミング基礎①
他己紹介

3限目
学科 WEBプログラミング基礎①
他己紹介

4限目
学科 WEBプログラミング基礎①
他己紹介

5限目
学科 WEBプログラミング基礎①
WEBサイト制作の進め方について

本日のポイント

文章にする事もデザインです！

◆人間の性格の、長所を表す言葉
明るい、優しい、気の利く、きちんとしている、落ち着きのある、真面目、誠実
人懐っこい、協調性がある、前向き、向上心がある、我慢強い、努力家、ロマンチスト、かわいい、かっこいい

研修メモ

覚書

2020年11月19日（木）

学科 WEBプログラミング基礎②

-本日アジェンダ-

1限目
学科 WEBプログラミング基礎②
Webとは？  

2限目
学科 WEBプログラミング基礎②
Webとは？ 

3限目
学科 WEBプログラミング基礎②
ウェブサイトの企画

4限目
学科 WEBプログラミング基礎②
ウェブサイトの企画

5限目
学科 WEBプログラミング基礎②
ウェブサイトの企画

本日のポイント

企画を考えてみましょう！

世界・国内　いろいろシェア

研修メモ

覚書

2020年11月20日（金）

学科 WEBコンサルティング基礎 ①

-本日アジェンダ-

1限目
学科 WEBコンサルティング基礎①
企画のリサーチ

2限目
学科 WEBコンサルティング基礎①
企画のリサーチ

3限目
学科 WEBコンサルティング基礎①
企画のライティング

4限目
学科 WEBコンサルティング基礎①
企画のライティング

5限目
学科 WEBコンサルティング基礎①
企画のライティング

本日テーマ

最初のWebサイト制作の進め方

WEBサイト制作の進め方としてまずは、リサーチが大切です。
本日は、様々なサイトを見る事から始めてみましょう。

検索テクニックの小ネタとして

Webサイトの参考サイト集

サイトマップとは？

一般的に、Webサイトを制作する際には、Photoshopなどでデザインを始める前に、まずサイト内の情報設計を行います。
ざっくり言うとサイトの目的を果たすために、サイトの中に何を記載するか、どんな機能を設けるのかを決めること。

コンサルティングとは？

Web業界のお仕事について

WEBサイトを誰に見せるのか(ペルソナ)

ペルソナとは、サイトを使う（サイトに掲載されている製品を使う）ターゲットユーザーと、使って欲しいターゲットユーザーを明確にするための架空の人物像を指します。架空といっても実際に存在するかのように詳細なプロフィールを創り上げることで、ユーザーがどういう行動をするかを性格などを加味しつつ予測でき、活きたデータとして利用できます。 

研修メモ

覚書

2020年11月24日（火）

学科 WEBコンサルティング基礎 ②

本日アジェンダ-

1限目
学科 WEBコンサルティング基礎②
企画の発表

2限目
学科 WEBコンサルティング基礎②
企画の発表

3限目
学科 WEBコンサルティング基礎②
企画の発表

4限目
学科 WEBコンサルティング基礎②
企画の発表

5限目
学科 WEBコンサルティング基礎②
企画の修正

本日テーマ

企画を発表しましょう。

研修メモ

覚書

2020年11月25日（水）

学科 グラフィックデザイン基礎①

-本日アジェンダ-

1限目
学科 グラフィックデザイン基礎①
ファイルの作成方法について

2限目
学科 グラフィックデザイン基礎①
オブジェクト移動方法について

3限目
学科 グラフィックデザイン基礎① 
図形の描き方について

4限目
学科 グラフィックデザイン基礎①
描いてみましょう

5限目
学科 グラフィックデザイン基礎①
本日のまとめ

本日テーマ

まずは使ってみましょう。

本日のIllustratorの基本操作として

  • 新規作成・開く
  • 保存(ai)・別名で保存（pdf）
  • アートボード
  • 選択ツール
  • 長方形ツール
  • 楕円形ツール
  • 多角形ツール
  • スターツール
  • プロパティパネル

研修メモ

覚書

2020年11月26日（木）

学科 グラフィックデザイン基礎②

-本日アジェンダ-

1限目
学科 グラフィックデザイン基礎②
画像について

2限目
学科 グラフィックデザイン基礎②
トリミングについて

3限目
学科 グラフィックデザイン基礎② 
調整レイヤーについて

4限目
学科 グラフィックデザイン基礎②
色調補正について

5限目
学科 グラフィックデザイン基礎②
本日のまとめ

今日のテーマ

色調補正をしてより良い写真にしましょう。

よくつかう調整レイヤー

  • レベル補正
  • トーンカーブ
  • 明るさ・コントラスト
  • 色相・彩度
  • カラーバランス
  • 白黒

参考サイト

研修メモ

覚書

2020年11月27日（金）

学科 グラフィックデザイン基礎③

-本日アジェンダ-

1限目
学科 グラフィックデザイン基礎③
パスファインダーについて

2限目
学科 グラフィックデザイン基礎③
変形について

3限目
学科 グラフィックデザイン基礎③
直線ツールと曲線ツールについて

4限目
学科 グラフィックデザイン基礎③
簡単なイラストを描いてみましょう。

5限目
学科 グラフィックデザイン基礎③
本日のまとめ

本日のテーマ

簡単なイラストを描いちゃいましょう！

本日のキーワード

  • 選択ツール
  • 図形ツール
  • パスファインダー（合体・型抜き・交差）
  • シェイプ形成ツール
  • レイヤーパネル
  • リフレクトツール
  • 回転ツール
  • 変形の繰り返し「Ctrl+D」
  • 直線ツール
  • 曲線ツール

リフレクトツール

リフレクトツールはオブジェクトを反転させるツールです。鏡に映したような状態にするので鏡面反転ともいいます。反転したオブジェクトをコピーすることもできるので、左右対称のイラストなどを作る時に便利な機能です。

参考サイト

研修メモ

覚書

2020年11月30日（月）

学科 グラフィックデザイン基礎④

投稿者: 大淵 絵美 | 2020年11月30日0件のコメント

-本日アジェンダ-

1限目
学科 グラフィックデザイン基礎④
ヒストリーパネルについて

2限目
学科 グラフィックデザイン基礎④
レタッチについて

3限目
学科 グラフィックデザイン基礎④
レタッチについて

4限目
学科 グラフィックデザイン基礎④
作品制作

5限目
学科 グラフィックデザイン基礎④
本日のまとめ

本日のテーマ

本日はレタッチです。

レタッチ

  • スポット修復ブラシツール
  • 修復ブラシツール
  • コンテンツに応じた移動ツール
  • パッチツール
  • コピースタンプツール
  • ぼかしツール
  • シャープツール
  • 指先ツール

▼色々なツールで卵を消してみましょう
（スポット修復ブラシツール、修復ブラシツール、パッチツール、コピースタンプツール）

▼犬を移動させて、さらにコピーしてみましょう。
（コンテンツに応じた移動ツール、コピースタンプツール）

▼観葉植物を消してみましょう　※高度なリタッチ
（コピースタンプツールをうまく使って境目も細かくリタッチしましょう）

▼リードと靴を消してみましょう
（ツールを使い分けましょう）

▼レタッチしてみましょう。

研修メモ

覚書

2020年12月1日（火）

学科 グラフィックデザイン基礎⑤

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎 ⑤
ダイレクト選択ツールについて

2限目
学科 グラフィックデザイン基礎 ⑤ 
画像の配置について

3限目
学科 グラフィックデザイン基礎 ⑤  
トレースについて

4限目
学科 グラフィックデザイン基礎 ⑤  
作品制作

5限目
学科 グラフィックデザイン基礎 ⑤  
作品制作

本日のテーマ

本日は「トレース」です。

本日のキーワード

  • オブジェクトの塗りと線（オープンパス・クローズドパス）
  • プロパティパネル
  • 選択ツール
  • ダイレクト選択ツール
  • 曲線ツール
  • ペンツール
  • 図形ツール
  • アンカーポイントの切り替え・追加・削除
  • ハサミツール
  • パスの連結
  • 配置
  • レイヤーのロック
  • 新規レイヤーの作成
  • オブジェクトのグループ化・編集・解除
  • スポイトツール
  • カラーパネル
  • カラーピッカー

参考サイト

スポイトツール

llustratorとPhotoshopにはカーソルを合わせた部分の色情報を抽出する. 「スポイトツール」という便利機能があります。

参考サイト

研修メモ

覚書

2020年12月2日（水）

学科 グラフィックデザイン基礎⑥

投稿者: 大淵 絵美 | 2020年12月2日0件のコメント

-本日アジェンダ-

1限目
学科 グラフィックデザイン基礎⑥
スマートオブジェクトについて

2限目
学科 グラフィックデザイン基礎⑥
選択ツールについて

3限目
学科 グラフィックデザイン基礎⑥
クリッピングマスクについて

4限目
学科 グラフィックデザイン基礎⑥
作品制作

5限目
学科 グラフィックデザイン基礎⑥
作品制作

本日のテーマ

複数の画像でコラージュ作ってみましょう！

写真加工のおススメルール！

「ファイルから開く（加工したい写真を取り込む）」⇒
「レイヤーパネルで複製（レタッチがあれば作業）」⇒
「右クリックでスマートオブジェクトに変換」⇒
「背景のレイヤーを非表示」⇒
「保存」

本日のキーワード（範囲選択）

  • オブジェクト選択ツール
  • クイック選択ツール
  • 自動選択ツール（境界値と隣接）

参考サイト

非破壊データについて

非破壊編集とは、元の画像データの上書きをせずに画像を変更できるということです。 元の画像はそのまま保存されているので、必要に応じて復元することができます。 画像からデータが削除されないので、編集を行っても画質は低下しません。

  • 調整レイヤー
  • 属性パネル
  • 色調補正
  • クリッピングマスク

レイヤーマスクについて 

　　選択範囲が表示されている状態で、
　　レイヤーパネル下の「レイヤーマスクを追加」
　　サムネールで黒の部分が非表示になります。

クリッピングマスクについて 

　　「レイヤーパネル」で右クリック→「クリッピングマスク」
　　「クリッピングマスク」で真下のレイヤーの画像にだけ
　　　色調補正をかける事ができます。

▼選択ツールを使って、切り抜きをしてみましょう

▼自動選択ツールを使って背景を選択、背景色を変更してみましょう

研修メモ

覚書

2020年12月3日（木）

学科 グラフィックデザイン基礎⑦

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎⑦
作品制作

2限目
学科 グラフィックデザイン基礎⑦
文字について

3限目
学科 グラフィックデザイン基礎⑦
文字ツールについて

4限目
学科 グラフィックデザイン基礎⑦
フォント選びをしてみよう

5限目
学科 グラフィックデザイン基礎⑦
Adobe Fonts について

本日のテーマ

文字（フォント）について学ぼう

本日のキーワード

  • 配置（テンプレート）
  • プロパティパネル
  • オブジェクトの塗りと線（オープンパス・クローズドパス）
  • 図形ツール
  • 選択ツール
  • ダイレクト選択ツール
  • ペンツール
  • ハサミツール
  • 連結
  • アンカーポイントの切り替え・追加・削除
  • スポイトツール
  • レイヤーのロック
  • 新規レイヤーの作成
  • オブジェクトのグループ化・編集・解除
  • 文字ツール
  • 文字パネル
  • 書式のアウトライン

フォントについて

参考サイト

Typekit（ Adobe Fonts ）

Adobe Creative Cloudユーザーが利用できるサービスの一つです。
Webフォントとしてはもちろん、PC上のデスクトップフォントとしても使用可能です。（Photoshopやllustratorはもちろん、Microsoft OfficeなどAdobe以外のソフトにも対応しています。）

参考サイト

研修メモ

覚書

2020年12月4日（金）

学科 グラフィックデザイン基礎⑧

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎⑧
デザイナーの心得について

2限目
学科 グラフィックデザイン基礎⑧
グラフィックソフトのデータ管理について

3限目
学科 グラフィックデザイン基礎⑧
命名規則について

4限目
学科 グラフィックデザイン基礎⑧
ファイル整理について

5限目
学科 グラフィックデザイン基礎⑧
本日のまとめ

本日のテーマ

グラフィックソフトとの付き合い方について

グラフィックソフトのデータ管理について

企業で働く場合、PCが支給される事がほとんどです。
そんな時に気を付けておくポイントと同僚や上司がどんなところを見ているのか注意しなければならないのか、また面接で技術テストがあった場合、担当者がどんな所を見ているのかについて考えてみましょう。

1．グラフィックソフトのレイヤーについて

IllustratorやPhotoshopを使ってお仕事をしていく場合、一番大事なのは「リテイクに強い」ファイルを作れるかが最も重要になります。
面接での技術テストや、企業に勤めてから担当者や上司・同僚が見ている、見られているのはズバリ！「レイヤー」です。
大切なポイントとして、第3者が見ても解りやすレイヤー管理を気を付けて行ってみましょう。

ポイント！

・レイヤーパネルを常に表示できる状態で作業を行ってみましょう。
・グループ化を上手く利用してみましょう。
・制作時間の区切り毎などに整理をする事を心がけてみましょう。

2．ファイルの管理と整理について

ファイル管理の整備は作業効率を上げるのはもちろん、技術者として信頼や効率的にスキルアップするコツでもあり、様々な職場環境に対応するテクニックでもあります。特に以下の内容に気を付けてみましょう。

ポイント！

・ファイル名の付け方にルールを付けてみましょう
・保存先のルールを考えてみましょう
・PCに負担をかけない方法を徹底しましょう

3.PCの取り扱いと個人情報の取り扱いについて

お勤めになったら、企業からPCが支給されると思います。取り扱いと管理には十分に気を付けましょう。また、昨今はリモートで業務を行わなければならない事も多いです。ご自身でアップデートやネットワーク環境の整備を行っていく事も必要になるでしょう。正しい知識と調べ方と確認方法を確認しておきましょう。

ポイント！

・アップデートはこまめに確認しスケジュール確認しておきましょう。
・ネットワーク、インターネット環境を理解しておきましょう。
・会社環境でのPC環境のルールを把握しておきましょう。

研修メモ

覚書

2020年12月7日（月）

学科 グラフィックデザイン基礎⑨

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎⑨
作品制作

2限目
学科 グラフィックデザイン基礎⑨
クリッピングマスクについて

3限目
学科 グラフィックデザイン基礎⑨
選択ツールについて

4限目
学科 グラフィックデザイン基礎⑨
クイックマスクモードについて 

5限目
学科 グラフィックデザイン基礎⑨
合成写真を作りましょう 

本日のテーマ

精度の高い合成をしましょう。

本日のキーワード（範囲選択）

  • クイック選択ツール
  • 自動選択ツール（境界値と隣接）
  • クイックマスクモード

参考サイト

非破壊データについて

非破壊編集とは、元の画像データの上書きをせずに画像を変更できるということです。 元の画像はそのまま保存されているので、必要に応じて復元することができます。 画像からデータが削除されないので、編集を行っても画質は低下しません。

  • 調整レイヤー
  • 属性パネル
  • 色調補正
  • クリッピングマスク

クリッピングマスクについて

　　「レイヤーパネル」で右クリック→「クリッピングマスク」
　　「クリッピングマスク」で真下のレイヤーの画像にだけ
　　　色調補正をかける事ができます。

よくつかう調整レイヤー

  • レベル補正
  • トーンカーブ
  • 明るさ・コントラスト
  • 色相・彩度
  • カラーバランス
  • 白黒

参考サイト

研修メモ

覚書

2020年12月8日（火）

学科 グラフィックデザイン基礎⑩

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎⑩
作品制作

2限目
学科 グラフィックデザイン基礎⑩
線とアウトライン

3限目
学科 グラフィックデザイン基礎⑩
キャラクターを動かす

4限目
学科 グラフィックデザイン基礎⑩
オリジナルキャラクターを作りましょう

5限目
学科 グラフィックデザイン基礎⑩
バリエーションを作りましょう

本日のテーマ

オリジナルイラストを描いてみましょう

本日のキーワード

  • 配置（テンプレート）
  • プロパティパネル
  • オブジェクトの塗りと線（オープンパス・クローズドパス）
  • 図形ツール
  • 選択ツール
  • ダイレクト選択ツール
  • ペンツール
  • ハサミツール
  • 連結
  • アンカーポイントの切り替え・追加・削除
  • スポイトツール
  • カラーパネル
  • カラーピッカー
  • レイヤーのロック
  • 新規レイヤーの作成
  • オブジェクトのグループ化・編集・解除
  • 文字ツール
  • 文字パネル
  • 書式のアウトライン
  • パペットワープ
  • 線幅ツール
  • パスのアウトライン

パペットワープ

パペットワープの機能はPhotoshopやAfterEffectsではおなじみの機能となりますが、ついにIllustratorにも搭載されました。もともとパペットとは「人形」の意味で、ワープは「歪み」となり、主に人や動物など、関節の可動を再現する変形に使用すると便利なツールになります。何かの軸を起点に歪みや回転を適用させる変形に非常に便利ですので、その使い方をご紹介します。

参考サイト

線幅ツール

Illustrator CS5から追加された便利機能「線幅ツール」はペンツールや鉛筆ツールなどを使って描いたパスの線幅を自由に変えることができます。線に簡単に強弱がつけられるので、イラストに表情を持たせたり、ロゴに動きを出すのも容易です。

参考サイト

アウトライン

イラレで基本的に入力する文字フォントツールがありますが、そのフォントツールをアウトライン化することでオブジェクトにすることができます。
何が違うのかというと、フォントは文字情報、アウトライン化したのはオブジェクト(図形)情報ということです。
このアウトライン化をすれば、インストールしたフォントで別のパソコンで開く場合置き換わってしまうということを防ぐことができます。

Illustrator「アウトライン」という言葉で覚えておくの３つ！

「オブジェクト」＞「パス」＞「パスのアウトライン」
「書式」＞「アウトラインの作成」
「表示」＞「アウトライン（Ctrl+Ｙ）」

参考サイト

参考サイト

本日の課題

オリジナルキャラクターを作成し喜怒哀楽を表現してください。

参考サイト

研修メモ

覚書

2020年12月9日（水）

学科 グラフィックデザイン基礎⑪

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎⑪
作品制作

2限目
学科 グラフィックデザイン基礎⑪
3種類のマスク

3限目
学科 グラフィックデザイン基礎⑪
IllustratorにPhotoshopのファイルを配置する

4限目
学科 グラフィックデザイン基礎⑪
PhotoshopにIllustratorのファイルを配置する

5限目
学科 グラフィックデザイン基礎⑪
作品制作（ 写真とイラストを合わせてみましょう）

本日のテーマ

Photoshopのまとめ

■ビットマップデータとベクターデータ

すべての画像は①ビットマップ画像（ラスター画像）と②ベクトル画像（ベクター画像）のどちらかに分類されます。写真もイラストも図形もこの２つのどちらかに分けられるのです。

ビットマップデータとは？

「ビットマップデータ（Bitmap Data）」というのは、Photoshopの画像データやデジカメで撮影した写真のことで、画像を色のついた点（ドット）の羅列・集合として表現したデータのことです。分かりやすく説明すると、ビットマップデータで表現された写真を拡大すると、細かな格子状のマス目が見えますが、ビットマップデータはこのマス目のひとつひとつに色がついたものが集まって写真を作り上げています。
ちなみに、このマス目のひとつが「ピクセル」と呼ばれる最小単位で、ピクセル数が大きければ大きいほど美しい画像に仕上がります。ビットマップデータは別名で「ラスター形式」と呼ばれることもあります。
フォーマットでは、jpg(またはjpeg)・gif ・ png などがこれに当たります。

ベクターデータとは？

「ベクターデータ（Vector Data）」というのは、ビットマップデータのように画像を点の集合で表現するのではなく、点、線、多角形などの情報を使った複雑な計算式によって色や曲線などを表現したデータのことです。簡単に言えば、「数値を使って絵を描く」というイメージです。ベクターデータは別名で「ドロー形式」と呼ばれることもあります。
フォーマットは、pdfなどがこれに当たります。

ビットマップとは？ベクターとは？画像形式の意味と違いを図解

■Photoshopのシェイプとは？ピクセルとは？

【Photoshop】シェイプとは？ピクセルとは？パスとの違いは？

シェイプは点や線(パス)を組み合わせて作られた形で、イラストレーターでいうオブジェクトになります。 シェイプはベクトル画像なので、拡大・縮小・色の変更をしても画質が劣化することなく使用することができます。

■３大マスク

「クリッピングマスク」「レイヤーマスク」「ベクトルマスク」

Photoshopのクリッピングマスク・レイヤーマスク・ベクトルマスク基礎講座
Photoshopレイヤーマスク・ベクトルマスクの使い方【Photoshopのマスクまとめ後編】

IllustratorとPhotoshopを組み合わせる

■イラストレーターの配置

イラレでのリンク配置？埋め込み配置？これって何だろう？

■フォトショップの配置

Illustrator アートの Photoshop へのペースト

◆スマートオブジェクト
アートをベクトルスマートオブジェクトとしてペーストします。ベクトルスマートオブジェクトは、画質を下げずに拡大･縮小、変形、移動することができます。アートを配置するとき、アートのファイルデータは Photoshop ドキュメントの独立したレイヤーに埋め込まれます。

◆ピクセル
アートをピクセルとしてペーストします。Photoshop ドキュメントの専用のレイヤーにラスタライズして配置する前に拡大･縮小、変形、移動することができます。

◆パス
アートをパスとしてペーストします。ペンツール、パスコンポーネント選択ツール、またはパス選択ツールで編集できます。パスは、レイヤーパネルで選択されているレイヤーにペーストされます。

◆シェイプレイヤー
アートを新規シェイプレイヤー（描画色で塗りつぶされたパスを含むレイヤー）としてペーストします。

研修メモ

覚書

2020年12月10日（木）

学科 グラフィックデザイン基礎⑫

投稿者: admin | 2020年12月10日0件のコメント

-本日のアジェンダ-

1限目
学科 グラフィックデザイン基礎⑫
成績考査

2限目
学科 グラフィックデザイン基礎⑫
成績考査

3限目
学科 グラフィックデザイン基礎⑫
成績考査

4限目
学科 グラフィックデザイン基礎⑫
成績考査

5限目
学科 グラフィックデザイン基礎⑫
成績考査

本日のテーマ

イラストレーター とフォトショップの合作を作りましょう

■成績考査内容

ドロップボックスにある「grade-check_○○○○_20201210.ai」に
フォトショップで作成した「合成写真」とイラストレーターで作成した「イラスト」「文字」を配置し提出してください。喜怒哀楽を表現した2つの作品を１つのファイルにまとめてください。
※ファイルの「 ○○○○ 」はご自身の名前に変えて提出して下さい。
※ファイルはpdfで最小ファイルサイズでUPして下さい。
4限目終了まで（14時10分）に、ドロップボックス「第1回成績考査」のフォルダに提出してください。

研修メモ

覚書

2020年12月11日（金）

学科 DTP基礎

-本日アジェンダ-

1限目
学科 DTP基礎
Webコンテンツと印刷物の違いについて

2限目
学科 DTP基礎
RGBとCMYKについて

3限目
学科 DTP基礎
画像解像度について

4限目
学科 DTP基礎
企画立案について

5限目
学科 DTP基礎
スケジュール管理について

本日のテーマ

作業計画を整えましょう

DTPとは？

DTPとは、DeskTop Publishing（デスクトップパブリッシング）を略したもので、日本語では「机上出版」や「卓上出版」と言われています。DTPの主な役割は、パソコンでデータを作成し、実際に印刷物を作成することです。
かつて、DTPというものがなかった頃は、印刷物を制作する際に、版下の作成や製版、印刷などのいくつもある工程をそれぞれの専門家が手分けをして行っていました。そのため、印刷物には多くの人と時間が必要でした。しかし、DTPではこの作業を全てパソコン上で行うため、ひとりで手軽に行えるようになったのです。 

参考サイト

Webと印刷の違いについて

Webコンテンツと印刷物の違いは大きく分けて3つ
1.色（RGBとCMYK）
2.画像解像度（72と300など※媒体によって異なる）
3.単位（pxと㎜※媒体によって異なる）
以上の違いを踏まえて今後の制作を進めて行きましょう。

RGBとCMYK について

RGBとCMYKの違いを簡単に説明すると、RGBとはテレビやパソコンのディスプレイといった画面上で使う発色方式で、CMYKは紙などの印刷物に使う発色方式です。 … そして、CMYKは「色料の三原色」といわれるCyan（シアン）、Magenta（マゼンタ）、Yellow（イエロー）の3色に黒（K）を足したものです。

参考サイト

画像解像度について

英語から翻訳-画像解像度は、画像が保持する詳細です。この用語は、ラスターデジタル画像、フィルム画像、およびその他の種類の画像に適用されます。解像度が高いほど、画像のディテールが多くなります。 画像の解像度はさまざまな方法で測定できます。解像度は、線が互いにどの程度接近していても視覚的に解決できるかを数値化します。 ウィキペディア（英語)

参考サイト

単位について

参考サイト

研修メモ

覚書

2020年12月14日（月）

実技 イラストロゴ作成実習①

-本日のアジェンダ-

1限目
実技 イラストロゴ作成実習①
ピクトグラムについて

2限目
実技 イラストロゴ作成実習①
ピクトグラムについて

3限目
実技 イラストロゴ作成実習①
ピクトグラム制作

4限目
実技 イラストロゴ作成実習①
ピクトグラム制作

5限目
実技 イラストロゴ作成実習①
ピクトグラム制作

本日のテーマ

ピクトグラムを作ってみましょう

■ ピクトグラム（pictogram）とは 

一般に「絵文字」「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号（サイン）の一つである。地と図に明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられる。様々なマークが数多く存在する。 

■ ピクトグラム制作について

  1. 「リアリティの理解」「デフォルメの質」「情報の伝わりやすさ」 が大切です。
  2. 1つの施設や企業といったテーマで、共通の世界観を持たせてみましょう。
  3. 線の太さ・間隔の開け方・角丸カーブを揃えるなど 共通 のデザインルールを設けてみましょう 。

■ Illustrator操作のキーワード

  • 各図形ツール
  • ハサミツール
  • 回転ツール
  • リフレクトツール
  • レイヤーパネル
  • グループ化と解除（Ctrl + G ／ Ctrl + Shift + G ）
  • パスファインダー（合体・前面オブジェクトで型抜き・交差）
  • シェイプ形成ツール
  • ペンツール
  • 選択ツール
  • ダイレクト選択ツール

研修メモ

覚書

  • ピクトグラム 3×4=12個をPDFで提出

2020年12月15日（火）

実技 イラストロゴ作成実習②

投稿者: 大淵 絵美 | 2020年12月15日0件のコメント

-本日のアジェンダ-

1限目
実技 イラストロゴ作成実習②
ロゴとは

2限目
実技 イラストロゴ作成実習②
文字の変形

3限目
実技 イラストロゴ作成実習②
ロゴの内容決定

4限目
実技 イラストロゴ作成実習② 
ロゴ制作

5限目
実技 イラストロゴ作成実習②
ロゴ制作

本日のテーマ

ロゴを作ってみましょう

■ロゴとは

■提案

■ロゴ制作について

  • ロゴの内容
  • マークありorなし
  • どんなサービスか
  • コンセプト

■ Illustrator操作のキーワード 

  • 文字
  • カーニング
  • トラッキング
  • 書式のアウトラインの作成
  • アピアランスパネル
  • 整列
  • 効果（ワープ） 【New】 
  • アピアランスの分割 【New】 
  • パスファインダー
  • 合体
  • 前面オブジェクトで型抜き
  • 交差
  • レイヤーパネル
  • グループ化
  • シェイプ形成ツール
  • ペンツール
  • 選択ツール
  • ダイレクト選択ツール
  • aiのバージョン
  • pdfでの保存

研修メモ

覚書

  • ロゴ（沢山）をPDFで提出 → 挙手数を確認

2020年12月16日（水）

実技 イラストロゴ作成実習③

-本日のアジェンダ-

1限目
実技 イラストロゴ作成実習③
アイディアを絞り出す

2限目
実技 イラストロゴ作成実習③
ブラッシュアップについて

3限目
実技 イラストロゴ作成実習③
ロゴ制作

4限目
実技 イラストロゴ作成実習③
ロゴ制作

5限目
実技 イラストロゴ作成実習③
ロゴの発表

本日のテーマ

ロゴをブラッシュアップしましょう

レイアウト・フォント・配色を変えて、バリエーションを増やしましょう。

■ロゴを知る

研修メモ

覚書

  • ロゴ（6個）をPDFで提出 → 挙手数を確認

2020年12月17日（木）

実技 イラストロゴ作成実習④

-本日のアジェンダ-

1限目
実技 イラストロゴ作成実習④
アピアランスについて

2限目
実技 イラストロゴ作成実習④
クリッピングマスクについて

3限目
実技 イラストロゴ作成実習④
アクセスマップ制作

4限目
実技 イラストロゴ作成実習④
アクセスマップ制作

5限目
実技 イラストロゴ作成実習④
発表と講評

本日のテーマ

アクセスマップを作成してみましょう

■ アクセスマップの制作について

  1. ポイントはピクトグラムと同じく「情報の伝わりやすさ」「デフォルメの質」「リアリティの理解」です。
  2. 1 つの企業や施設・企画等で、共通ルールをもたせてみましょう。
  3. 集客力や施設の大きさによって必要な案内の内容が異なるところも気を付けてみましょう。
  4. サイトデザイン・チラシやパンフレット等のデザインバランスも考えて進めてみましょう。

■ アピアランス

■ クリッピングマスク

■ Illustrator操作のキーワード 

  • 「ペンツール」
  • 「スタイライズ」
  • 「書式のアウトラインの作成」
  • 「パスのアウトライン 」
  • 「アピアランスパネル」 【New】 
  • 「配置」
  • 「パスファインダー」
  • 「レイヤーパネル」
  • 「グループ化」
  • 「各種図形ツール」
  • 「文字ツール」
  • 「aiのバージョン」
  • 「保存・別名で保存」
  • 「選択ツール」
  • 「ダイレクト選択ツール」
  • 「変形（線幅と効果を拡大・縮小） 」【New】
  • （レイヤーの） クリッピングマスク」【New】

研修メモ

覚書

  • アクセスマップを作成してPDFで提出

2020年12月18日（金）

実技 イラストロゴ作成実習⑤

-本日のアジェンダ-

1限目
実技 イラストロゴ作成実習⑤
アクセスマップ制作の講評

2限目
実技 イラストロゴ作成実習⑤
入稿時のアウトライン化

3限目
実技 イラストロゴ作成実習⑤
アクセスマップの提案

4限目
実技 イラストロゴ作成実習⑤
アクセスマップ制作

5限目
実技 イラストロゴ作成実習⑤
アクセスマップ制作

本日のテーマ

アクセスマップを”提案”してみましょう。

■ アクセスマップの制作について

  1. ポイントはピクトグラムと同じく「情報の伝わりやすさ」「デフォルメの質」「リアリティの理解」です。
  2. 1 つの企業や施設・企画等で、共通ルールをもたせてみましょう。
  3. 集客力や施設の大きさによって必要な案内の内容が異なるところも気を付けてみましょう。
  4. サイトデザイン・チラシやパンフレット等のデザインバランスも考えて進めてみましょう。

■ アピアランス

■ クリッピングマスク

■ ILLUSTRATOR操作のキーワード 

  • 「ペンツール」
  • 「スタイライズ」
  • 「書式のアウトラインの作成」
  • 「アピアランスパネル」
  • 「パスのアウトライン 」 「アピアランスの分割」 【New】
  • 「配置」
  • 「パスファインダー」
  • 「レイヤーパネル」
  • 「グループ化」
  • 「各種図形ツール」
  • 「文字ツール」
  • 「aiのバージョン」
  • 「保存・別名で保存」
  • 「選択ツール」
  • 「ダイレクト選択ツール」
  • 「変形（線幅と効果を拡大・縮小） 」
  • （レイヤーの） クリッピングマスク」

■ aiデータの入稿用時の注意点

  • _ol.ai（アウトラインデータ）
  • パスのアウトライン
  • 文字のアウトライン
  • アピアランスの分割

【1】文字デザイン

文字や文章の｢読みやすさ｣は、可読性、視認性、判読性という３つの要素から成ります。「可読性」とは文章が読みやすいか、「視認性」とはパッと見た瞬間の認識しやすさ、「判読性」とは誤読がないか、という指標です。書体（≒フォント）の種類や文字のサイズを変えたり、行間や字間を調節することで、これらの要素を高めることができます。ただし、どの要素を優先させるかは資料の目的や状況によって変わります。プレゼンのPowerPointsスライドなどでは視認性と判読性を、申請書などのWord文書などでは可読性を重視します。

参考サイト

【2】レイアウトデザイン

見やすいレイアウト、わかりやすいレイアウトを作るときの重要なポイントは、ただ闇雲に文字や絵を配置するのではなく、発表者の頭の中にある「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置することです。関係性の強いもの同士は、近くに配置したり、同じ色を使ったり、線で結んだり、大切な事項を目立つ色にしたり、目立つ場所においたり、という簡単なことです。「理論やストーリーをレイアウトする」ことが大切であるということを忘れないでください。

参考サイト

【3】配色デザイン

スライドやポスターには「色」を欠かすことができません。白黒の単調なものよりも、いくつかの色を使ったものの方が魅力的ですし、理解を助けてくれることもしばしばあります。ですが、適当に色を選んだり、むやみにたくさんの色を使うことはよくありません。色の正しい使い方を覚えておくと、快適で見やすい発表資料ができます。

参考サイト

研修メモ

覚書

  • アクセスマップをブラシュアップしてPDFで提出

2020年12月19日（土）

実技 イラストロゴ作成実習⑥

-本日のアジェンダ-

1限目
実技 イラストロゴ作成実習⑥
自己紹介をデザインする事について

2限目
実技 イラストロゴ作成実習⑥
トリムマーク（トンボ）について

3限目
実技 イラストロゴ作成実習⑥
名刺作成

4限目
実技 イラストロゴ作成実習⑥
名刺作成

5限目
実技 イラストロゴ作成実習⑥
発表と講評

本日のテーマ

自己紹介をデザインする意味と目的

名刺デザインのポイント

名刺のデザインのポイントは「交換」と「管理」と「思い出す」の場面を想定して作成してみましょう。
企業としての名刺なのか個人としての名刺なので、個性的なデザイン特徴をどう出すか考えてみましょう。
印刷物としての特徴や入稿時の注意点なども考えた上で作成してみましょう。

本日のIllustrator操作のキーワード

名刺のサイズ 「91×55mm 」

  • 「図形ツール（数値指定）」
  • 「選択ツール」
  • 「ダイレクト選択ツール」
  • 「トリムマークの作成」【New】
  • 「パスのオフセット」 【New】
  • 「ガイドの作成」
  • 「文字ツール」
  • 「書式のアウトライン」
  • 「パスのアウトライン」
  • 「レイヤーパネル」
  • 「グループ化」
  • 「aiのバージョン」
  • 「保存]
  • 「別名で保存(pdf)」 

トリムマークについて

トリムマーク（トンボ）とは トリムマークとは、印刷時や、断裁位置を明確にするために必要不可欠な「しるし」のことです。 … 内トンボは仕上がり線を示しており、内トンボから外トンボの間は裁ち落としのための”塗り足し”部分を示しています。

参考サイト

パスのオフセット

「オフセット」という言葉にあまり馴染みはないでしょう。しかし、この機能を覚えておくと、イラレの使い方の幅が広がる可能性があります。 

参考サイト

研修メモ

覚書

  • 名刺を作成してトンボ（トリムマーク）付きのPDFで提出

2020年12月22日（火）

実技 写真合成・補正加工実習①

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習①
入稿用データについて

2限目
実技 写真合成・補正加工実習①
DM作成

3限目
実技 写真合成・補正加工実習①
DM作成

4限目
実技 写真合成・補正加工実習①
DM作成

5限目
実技 写真合成・補正加工実習①
発表と講評

本日のテーマ

ポストカードを作ってみましょう。

定型（郵便)はがきサイズ：100×148mm

DMについて

画像解像度について

解像度とは画像の密度、1インチ(2.54cm)あたりのピクセル数の事です。
dots per inchの略でdpiと表記されます。
72dpiの場合1インチあたり72ピクセル×72ピクセル=5184ピクセルであることになります。 
印刷用は300dpi〜が推奨

CMYKとRGB 

RGBカラーは、光の三原色「R（赤）・G（緑）・B（青）」のことです。
PCのモニターやデジカメ、スキャナなどは、このRGBカラーで色が表現されています。これらは混ぜれば混ぜるほど色が明るくなり、白色に近づいていくため『加法混色』と言われています。

CMYカラーは、色料の三原色「C（シアン）・M（マゼンタ）・Y（イエロー）」のことです。これらは混ぜれば混ぜるほど色が暗くなり、理論上は黒色に近づいていくため『減法混色』と言われています。理論上と書いたのには訳があり、実際にはどんどん濁った灰色になっていくのですが、一般的にイメージする『黒色』にはなってくれません。 プロセスカラー印刷では、黒の部分を引き締めるために、シアン(C)・マゼンタ(M)・イエロー(Y)にブラック(K)のインキを加えた4色（プロセスカラー）でフルカラーを表現しています。

DM制作のレシピ

１、下準備：Photoshopで写真の画像補正をする
（レタッチ→合成→色調補正）
RGB→CMYK・・・イメージ＞モード
画像解像度300dpi・・・イメージ＞画像解像度（再サンプルチェック無）

２、Illustratorでデザインを作る
（写真が入るところをグレーにしておく）
文字の大きさ、配色、レイアウト、余白に注意
強弱、バランス、メリハリ、統一を意識してみてください

３、Photoshopのpsdデータを配置
必要ならマスクをする

４、イラストレーターをPDFで保存し提出

研修メモ

覚書

  • DMを作成してトンボ（トリムマーク）付きのPDFで提出

2020年12月23日（水）

実技 写真合成・補正加工実習②

投稿者: 大淵 絵美 | 2020年12月23日0件のコメント

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習②
チラシの内容決定

2限目
実技 写真合成・補正加工実習②
手書きラフ

3限目
実技 写真合成・補正加工実習②
デザインカンプ制作

4限目
実技 写真合成・補正加工実習②
デザインカンプ制作

5限目
実技 写真合成・補正加工実習②
発表と講評

本日のテーマ

フライヤーに乗せる情報を考えましょう

フライヤーの内容

  • 目的
  • タイトル、キャッチコピー、ウリ、情報、注意書き
  • 伝える重要度

レイアウトデザイン

見やすいレイアウト、わかりやすいレイアウトを作るときの重要なポイントは、ただ闇雲に文字や絵を配置するのではなく、発表者の頭の中にある「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置することです。関係性の強いもの同士は、近くに配置したり、同じ色を使ったり、線で結んだり、大切な事項を目立つ色にしたり、目立つ場所においたり、という簡単なことです。「理論やストーリーをレイアウトする」ことが大切であるということを忘れないでください。

参考サイト

研修メモ

覚書

  • フライヤーの内容（企画書）として下記の検討を実施

【目的】
【タイトル】
【キャッチコピー】
【内容】
　①
　②
　③
　④
　⑤
【注意書き】

  • フライヤーの企画書（TXT）とワイヤーフレーム（PDF）を提出

2020年12月24日（木）

実技 写真合成・補正加工実習③

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習③
EPSとは

2限目
実技 写真合成・補正加工実習③
ラスタライズについて

3限目
実技 写真合成・補正加工実習③
チラシ制作

4限目
実技 写真合成・補正加工実習③
チラシ制作

5限目
実技 写真合成・補正加工実習③
チラシ制作

本日のテーマ

文字を意識してチラシを制作しましょう

チラシの作る工程

EPSとは？

EPS ファイルの読み込み Encapsulated PostScript（EPS）は、アプリケーション間でベクターアートワークを受け渡しするときに使用される一般的なファイル形式です。 … ただし、Illustrator で認識できないデータがファイルに含まれている場合、それらのデータは失われる可能性があります。 

QR生成サービス

QRコード作成【無料】URLをQRコードに

文字デザイン

文字や文章の｢読みやすさ｣は、可読性、視認性、判読性という３つの要素から成ります。「可読性」とは文章が読みやすいか、「視認性」とはパッと見た瞬間の認識しやすさ、「判読性」とは誤読がないか、という指標です。書体（≒フォント）の種類や文字のサイズを変えたり、行間や字間を調節することで、これらの要素を高めることができます。ただし、どの要素を優先させるかは資料の目的や状況によって変わります。プレゼンのPowerPointsスライドなどでは視認性と判読性を、申請書などのWord文書などでは可読性を重視します。

参考サイト

文字装飾

ラスタライズ

研修メモ

覚書

2020年12月25日（金）

実技 写真合成・補正加工実習④

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習④
グラデーションについて

2限目
実技 写真合成・補正加工実習④
パターンについて

3限目
実技 写真合成・補正加工実習④
チラシ制作

4限目
実技 写真合成・補正加工実習④
チラシ制作

5限目
実技 写真合成・補正加工実習④
チラシ制作

本日のテーマ

配色を意識してチラシを制作しましょう

配色デザイン

スライドやポスターには「色」を欠かすことができません。白黒の単調なものよりも、いくつかの色を使ったものの方が魅力的ですし、理解を助けてくれることもしばしばあります。ですが、適当に色を選んだり、むやみにたくさんの色を使うことはよくありません。色の正しい使い方を覚えておくと、快適で見やすい発表資料ができます。

伝えたいことが相手に伝わるデザインを！
主役を引き立たせる為のデザインを考えて見ましょう。

  • フォントの種類はそれで良いか。（タイトルは目立ち、テキストは読みやすく）
  • 文字のサイズ・色はそれで良いか。（強弱をつけましょう）
  • 行間、文字間を調整しましょう。
  • 文字装飾をつけて見ましょう。
  • 余白を揃えましょう。
  • 余白にゆとりがあるか(文字は枠の端から1文字分以上開ける)
  • 変化は大きく！少しの違いは気づかれないし、落ち着かない。
  • 背景色は主役を引き立たせる色になっているか。
  • 関連するイラストを配置してイメージを盛り上げましょう。

■Illustrator操作のキーワード 

スウォッチパネル

スウォッチパネルには、カラー・グラデーション・パターンの３種類を登録することができます。自分で作ったスウォッチは登録できるのでうまく使いこなしましょう。
※ グラデーションとパターンはグループ化できません。

カラーパネル

オブジェクトにカラーを適用する作業は、Illustrator ではよく行われる作業で、ある程度のカラーモデルとカラーモードに関する知識を必要とします。オブジェクトにカラーを適用するときは、最終的に出力する媒体に合わせて、適切なカラーモデルとカラー設定を使用する必要があります。Illustrator では、スウォッチパネル、カラーガイドパネル、カラーを編集／オブジェクトを再配色ダイアログボックスなどを使用して、簡単にカラーを試作したり適用したりすることができます。

グラデーションパネルとグラデーションツール

グラデーションツールまたはグラデーションパネルを使用してグラデーションを作成または変更できます。アートワークで直接グラデーションを作成または変更し、変更内容をリアルタイムで表示するには、グラデーションツールを使用します。

■グラデーションパネル
※「ウィンドウ」＞「グラデーション」にあります。
■グラデーションツール
※ツール群の中にあります。

スポイトツール

llustratorとPhotoshopにはカーソルを合わせた部分の色情報を抽出する. 「スポイトツール」という便利機能があります。

【おまけ】フリーグラデーションについて

「フリーグラデーション」 Illustrator CC 2019からの新機能です。

背景にパターンを使ってみましょう

印刷データの納品について

印刷データに不備がある場合は、納品できない事があります。
必ず印刷会社ごとに取り決めがありますので、注意点を必ず読み場合によっては直接問合せ等を行ってから印刷入稿ししましょう。

入稿の注意点

  1. サイズ・トリムマーク（トンボ）の設定
  2. カラーモードはCMYKで作成
  3. 塗り足し・文字切れについて
  4. モノクロ印刷の場合・グレースケールへの変換
  5. 画像のリンク配置と埋め込み配置
  6. アピアランスの分解
  7. フォントのアウトライン化
  8. オブジェクトアウトライン化
  9. 入稿のファイル形式（ai等の推奨保存設定）

研修メモ

覚書

  • フライヤーの完成版をアウトライン化してPDFで提出

2020年12月26日（土）

実技 写真合成・補正加工実習⑤

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習⑤ 
ストーリーの考え方

2限目
実技 写真合成・補正加工実習⑤
レイアウトデザインについて

3限目
実技 写真合成・補正加工実習⑤
文字デザインについて

4限目
実技 写真合成・補正加工実習⑤
配色デザインについて

5限目
実技 写真合成・補正加工実習⑤
ブラッシュアップについて

本日のテーマ

デザインの言語化をするには？

デザインの言語化を考える

商業デザインという業務において一番重要なのは、どう「具現化」するです。
そして、その「具現化」のズレの理由を解析する為に「レイアウトデザイン」
「文字デザイン」「配色デザイン」の3点に分けて解析・分析し、デザインを言語化出来るように考えてみましょう。
また「ポートフォリオ」の作品で何を伝えなければならないのか？
それは、「デザインの理由」です。
どうして、このデザインになったのか？を言葉（文面）で具現化する。そして、実際の商業デザインというお仕事では、依頼内容を「具現化」する能力が「デザイン」が出来る能力として評価されお仕事となります。

【究極のポイント！】
レイアウトデザイン　⇒　気にならない（気にさせない）
文字デザイン　⇒　違和感を無くす（それっぽい）
配色デザイン　⇒　色の意識はさせない（メッセージの邪魔をしない）

【レイアウトデザイン 】

見やすいレイアウト、わかりやすいレイアウトを作るときの重要なポイントは、ただ闇雲に文字や絵を配置するのではなく、発表者の頭の中にある「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置することです。関係性の強いもの同士は、近くに配置したり、同じ色を使ったり、線で結んだり、大切な事項を目立つ色にしたり、目立つ場所においたり、という簡単なことです。「理論やストーリーをレイアウトする」ことが大切であるということを忘れないでください。

【文字デザイン 】

文字や文章の｢読みやすさ｣は、可読性、視認性、判読性という３つの要素から成ります。「可読性」とは文章が読みやすいか、「視認性」とはパッと見た瞬間の認識しやすさ、「判読性」とは誤読がないか、という指標です。書体（≒フォント）の種類や文字のサイズを変えたり、行間や字間を調節することで、これらの要素を高めることができます。ただし、どの要素を優先させるかは資料の目的や状況によって変わります。プレゼンのPowerPointsスライドなどでは視認性と判読性を、申請書などのWord文書などでは可読性を重視します。

■おまけ
タイポグラフィ（英: typography）は、活字（あるいは一定の文字の形状を複製し反復使用して印刷するための媒体）を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。

【配色デザイン】

スライドやポスターには「色」を欠かすことができません。白黒の単調なものよりも、いくつかの色を使ったものの方が魅力的ですし、理解を助けてくれることもしばしばあります。ですが、適当に色を選んだり、むやみにたくさんの色を使うことはよくありません。色の正しい使い方を覚えておくと、快適で見やすい発表資料ができます。

【補足】3色の比率は70:25:5を意識してみましょう。

色数が増えるほどバランスを取るのが難しくなるので、色数は3色程度に制限したほうがいいでしょう。
相性の良い色を組み合わせても、色の配分がおかしかったり、無計画にたくさんの色を使用するとデザイン自体がまとまりのない印象を与えることになります。配色のコツは、色数を絞り使う色の割合をきちんと決めることです。

参考サイト

研修メモ

覚書

2020年12月28日（月）

実技 写真合成・補正加工実習⑥

-本日のアジェンダ-

1限目
実技 写真合成・補正加工実習⑥
成績考査

2限目
実技 写真合成・補正加工実習⑥
成績考査

3限目
実技 写真合成・補正加工実習⑥
成績考査

4限目
実技 写真合成・補正加工実習⑥
成績考査

5限目
実技 写真合成・補正加工実習⑥
発表

本日のテーマ

作品をブラッシュアップして提出しましょう。

■成績考査内容

ドロップボックスにある「grade-check_○○○○_20201228.ai」に
作品を配置し提出してください。
※ファイルの「 ○○○○ 」はご自身の名前に変えて提出して下さい。
※ファイルはpdfで最小ファイルサイズでUPして下さい。
4限目終了まで（14時10分）に、ドロップボックス「第2111回成績考査」のフォルダに提出してください。

研修メモ

覚書

2021年1月4日（月）

学科 ECサイト運用基礎①

投稿者: 大淵 絵美 | 2021年1月4日0件のコメント

-本日のアジェンダ-

1限目
学科 ECサイト運用基礎①
ECサイトについて

2限目
学科 ECサイト運用基礎①
バナーについて

3限目
学科 ECサイト運用基礎①
バナー作成

4限目
学科 ECサイト運用基礎①
バナー作成

5限目
学科 ECサイト運用基礎①
バナー作成

本日のテーマ

ECサイトとは？

ECサイトとは？

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

参考サイト

広告宣伝費について

広告宣伝費とは、事業や商品の広告を作る費用・宣伝にかかる費用のことを指します。 基本的に、広告宣伝費の消費税区分は「課税」です。 販促のためのポスターやチラシ・カタログ等の印刷物、 看板、試供品やティッシュのサンプリング、ダイレクトメール、 テレビ・ラジオ・インターネット広告にかける費用などがこれにあたります。

バナーとは？

バナー広告とは、インターネット広告のうち、画像やアニメーションによって表現する広告の総称である。 バナー広告では、あらかじめ決められたサイズ内でリンク付きの画像を表示し、クリックすることで広告主のWebサイトへ誘導されるようになっている。

セールバナーを作ってみましょう

【お題】WINTER SALE
サイズ：750×375px
使用色：赤・黄色・（白）・（黒）
文言：WINTER SALE 2021.1.1(FRI)START!! 全品70%OFF

【お題】新春セール
サイズ：750×375px
文言：2021 新春初売りセール開催！1月1日(金)〜1月5日(火)まで　今だけポイント10倍

▼どちらかの素材を使ってください。

▼良ければ素材で使ってください。（放射）

研修メモ

覚書

  • Winter Saleのバナーをjpgで提出
  • 新春セールのバナーをjpgで提出

2021年1月5日（火）

学科 ECサイト運用基礎②

-本日のアジェンダ-

1限目
学科 ECサイト運用基礎②
バナー作成

2限目
学科 ECサイト運用基礎②
バナー作成

3限目
学科 ECサイト運用基礎②
バナー作成

4限目
学科 ECサイト運用基礎②
バナー作成

5限目
学科 ECサイト運用基礎②
講評

本日のテーマ

季節のバナーを作りましょう

【お題】母の日バナー
サイズ：750×375px
リンク先：母の日用のギフトを集めた特集ページ
文言：Mother’s Day 5/9(SUN) 母の日ギフト特集　感謝の気持ちを伝えよう　お母さんありがとう Thank you mom!

【お題】バレンタインバナー
サイズ：750×375px
リンク先：バレンタイン用のチョコレートを集めた特集ページ
文言：St. Valentine’s Day バレンタインギフト　2.14　今すぐチェック Happy Valentine’s Day

研修メモ

覚書

  • 母の日バナーをjpgで提出
  • バレンタインバナーをjpgで提出

2021年1月6日（水）

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

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎①
バナー作成

2限目
学科 ECサイトデザイン基礎① 
バナー作成

3限目
学科 ECサイトデザイン基礎① 
バナーの講評

4限目
学科 ECサイトデザイン基礎① 
バナー作成

5限目
学科 ECサイトデザイン基礎① 
バナー作成

本日のテーマ

模作してコツを掴みましょう

【課題１】模写

下記のバナーの模写をしましょう。
Dropbox/提出/【作品】20210106_ユニクロバナー模写/見本の素材/見本.png

Photoshopで参考画像を開き、同じ場所に写真・テキストを配置してください。
色：スポイトで取りましょう
フォント：似ているフォントを選び、サイズ・文字間を調整しましょう

【課題２】レイアウト指定

下記のレイアウトでバナーを作成しましょう。

サイズ：600×400px
リンク先：ファッションECサイト
画像：任意の商品写真１つ
文言：New Collection (New Arrival)
2021 Spring&Summer
今なら全品送料無料（春夏新作続々入荷）（新作アイテムを今すぐCheck!）

研修メモ

覚書

2021年1月7日（木）

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

投稿者: 大淵 絵美 | 2021年1月7日0件のコメント

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎②
バナーの講評

2限目
学科 ECサイトデザイン基礎②
バナー作成

3限目
学科 ECサイトデザイン基礎②
バナー作成

4限目
学科 ECサイトデザイン基礎②
バナー作成

5限目
学科 ECサイトデザイン基礎②
バナーの講評

本日のテーマ

サイトに合ったバナーを作りましょう

  • お題：食品ジャンルの店舗に掲載するバナーを作成
  • 例）健康食品・おせち・スイーツ・果物など
  • 掲載場所：任意の店舗のトップページ
  • リンク先：商品ページ
  • サイズ：600×400px
  • 締め切り：14:10
  • 写真：店舗から
  • 文言：キャッチコピー、商品名、価格、その他

画像取得時の留意点

Chromeで、画像を右クリック＞「名前をつけて画像を保存」をしようとして、WebP形式のファイルだった場合
①画像を右クリック > 画像をコピー
②フォトショップで新規作成（カンバスサイズが画像のサイズになる）
③貼り付け（Ctrl +v）

研修メモ

覚書

  • 食品バナーをjpgで提出

2021年1月8日（金）

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

投稿者: 大淵 絵美 | 2021年1月8日0件のコメント

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎③
描画モードについて

2限目
学科 ECサイトデザイン基礎③
バナー作成

3限目
学科 ECサイトデザイン基礎③
バナー作成

4限目
学科 ECサイトデザイン基礎③
バナー作成

5限目
学科 ECサイトデザイン基礎③
講評

本日のテーマ

サイトに合ったバナーを作りましょう

乗算とは

乗算…と聞いて、まず思い浮かぶのが「かけ算」ですが、このブレンドモード「乗算」も、色のかけ算をしたような効果が得られます。

というのも、乗算モードは色の掛け合わせのようなもので、下レイヤーと上レイヤーを混ぜた色が結果色となります。

課題：デザイン要素の模写

  • お題：インテリア・雑貨の店舗に掲載するバナーを作成
  • デザインを参考にするバナーを元に、それとは別の商品のバナーを作成しましょう
  • 例）ソファ・収納家具・照明・タオル・調理器具など
  • 掲載場所：任意の店舗のトップページ
  • サイズ：参考バナーの大きさ
  • 締め切り：14:10
  • 写真：店舗から
  • 文言：自由

提出ファイルについて

①参考にしたバナー： work_〇〇〇〇_yymmdd_a1.jpg
②作成したバナー： work_〇〇〇〇_yymmdd_b1.jpg
※2個目の作成は、末尾にa2, b2 という名前を付けてください。

研修メモ

覚書

  • インテリア。雑貨バナーの前後をjpgで提出

2021年1月15日（金）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習①
アートボードについて

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

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

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

5限目
実技 ECサイトデザイン実習①
書き出しについて

本日のテーマ

サイズ違いでバナーをつくりましょう

課題：レイアウトの再思考

  • 内容を参考にするバナーを元にリデザインする。作り直したいバナーを750×375でデザインし直し作成。その後各サイズで展開する。
  • ジャンル：ECサイトならどのサイトでも、どのジャンルでも可。
  • サイズ：750×375、600×400、1000×150、450×450、200×600
  • 締め切り：14:10
  • 写真：他サイトからでもOK
  • 文言：自由

提出ファイルについて

別名保存でJPGで書き出し、１枚に全て表示した状態でアップロードしてください。

アートボードの書き出し

Retina対応について

Retinaディスプレイは、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。

研修メモ

覚書

2021年1月18日（月）

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

-本日のアジェンダ-

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

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

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

4限目
実技 ECサイトデザイン実習②
書き出しについて

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

本日のテーマ

作品をどんどん作りましょう！

アートボードの書き出し

Retina対応について

Retinaディスプレイは、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。

研修メモ

覚書

2021年1月20日（水）

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

投稿者: 大淵 絵美 | 2021年1月20日0件のコメント

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習③
データ互換について

2限目
実技 ECサイトデザイン実習③
バナーの内容決定

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

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

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

本日のテーマ

チラシの企画へリンクするバナー作成をしましょう

アートボードの書き出し

Retina対応について

Retinaディスプレイは、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている、ということから命名された。

課題：レイアウトの再思考

  • ご自身で企画したチラシへリンクするバナーを制作する。
  • サイズ：自由
  • 締め切り：14:10
  • 文言：自由　主題と目的を考えて文言を作成しましょう。

研修メモ

覚書

  • チラシをテーマとしたバナーをjpgで提出

2021年1月21日（木）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習④
タイムラインについて

2限目
実技 ECサイトデザイン実習④
パペットワープについて

3限目
実技 ECサイトデザイン実習④
gifアニメ制作

4限目
実技 ECサイトデザイン実習④
gifアニメ制作

5限目
実技 ECサイトデザイン実習④
gifアニメ講評

本日のテーマ

GIFアニメーションを作ってみましょう

GIFアニメーションについて

GIFアニメーションは、Graphics Interchange Format の「マルチイメージ」を使ったアニメーション。アニメーションGIF ともいう。 マルチイメージは GIF87a で導入された機能で、複数のフレームを順に表示できる。

参考サイト

■本日の操作のキーワード

  • タイムライン（Photoshop）【New】
  • トゥイーン （Photoshop） 【New】 
  • パペットワープ （Photoshop・Illustrator） 【New】 
  • レイヤーパネル
  • カンバスサイズ
  • Web用に保存（従来）

パペットワープ（Photoshop）

加工で写真のポーズを自由に変えたい人必見。Photoshop cs5で実装された「パペットワープ」で簡単にポーズが変えられます！座っている人が立ったり、ジャンプしたり。自由に動かして、写真の人物を元気に動き回らせることもできます。

参考サイト

パペットワープ（Illustrator）

パペットワープの機能はPhotoshopやAfterEffectsではおなじみの機能となりますが、ついにIllustratorにも搭載されました。もともとパペットとは「人形」の意味で、ワープは「歪み」となり、主に人や動物など、関節の可動を再現する変形に使用すると便利なツールになります。何かの軸を起点に歪みや回転を適用させる変形に非常に便利ですので、その使い方をご紹介します。

参考サイト

研修メモ

覚書

  • アニメーションGIFをgifで提出

2021年1月22日（金）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習⑤
複数ファイルの配置について

2限目
実技 ECサイトデザイン実習⑤
ブラッシュアップ

3限目
実技 ECサイトデザイン実習⑤
ブラッシュアップ

4限目
実技 ECサイトデザイン実習⑤
ブラッシュアップ

5限目
実技 ECサイトデザイン実習⑤
発表会

本日のテーマ

制作したバナーを発表しましょう

課題

これまで制作したバナーをブラッシュアップして、一つのファイルにまとめて提出してください。
サイズ：1366×768px

ファイル整理について

制作物はポートフォリオに載せますので、後々使用する時にわかりやすいようフォルダ分けをしっかりしておきましょう。
【元データ】PSDデータ(.psd) AIデータ(.ai)
修正する際に必要です。ラスタライズや文字のアウトラインをする前の状態で保存しましょう。また、写真を事前にスマートオブジェクト化しておくことによって、修正の時スムーズに行えます。
【書き出しデータ】jpg,png,gif,PDF
データの受け渡しに必要です。ソフトを開かずに確認できるので持っておくと便利です。

複数画像を一つのファイルにまとめる

スマートオブジェクトとラスタライズについて

【スマートオブジェクトのメリット】
・縮小→拡大しても画質が劣化しない（ただし元のサイズよりは大きくできない）
【ラスタライズのメリット】
・容量が軽い
・レタッチやブラシなど直接編集ができる

研修メモ

覚書

  • 今までに作成したバナーを1ページにまとめてjpgで提出

2021年1月25日（月）

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

-本日のアジェンダ-

1限目
実技　ユーザーインターフェイス作成実習①
WordPressについて・ユーザー作成

2限目
実技　ユーザーインターフェイス作成実習①
記事の投稿・更新について

3限目
実技　ユーザーインターフェイス作成実習①
テーマについて

4限目
実技　ユーザーインターフェイス作成実習①
WordPressでポートフォリオを作ってみよう

5限目
実技　ユーザーインターフェイス作成実習①
WordPressでポートフォリオを作ってみよう

本日のテーマ

WordPressで記事を公開できるようにしましょう

WordPressとは

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

WordPress の記事

WordPressのカテゴリーとタグについて

WordPressのテーマ

研修メモ（WordPress Day1）

WordPressについて・ユーザー作成

WordPressとは
  • CMSとは（利点）
  • WordPressの利用
  • ポートフォリオの重要性
  • ポートフォリオサイトとしての活用
ユーザー作成
  • 座席表のダウンロード
  • 管理画面の表示
  • ユーザーの作成（権限）
  • サイト運用

記事の更新について

記事
  • 投稿記事
  • 固定記事（投稿記事との違い）
  • 記事内容（見出し・段落・画像・カテゴリとタグ）
  • メディアライブラリィ
注意事項
  • 画像の自動生成

テーマについて

テーマ
  • テーマの検索（自作も可）
  • テーマの変更（Fukasawa／Noa Liteなど）
  • テーマのインストールしすぎに注意（不要なテーマは削除）
サンプルサイト紹介

事前準備

  • 「http://deau-b.spawn.jp/」へのカリキュラム掲載
  • WordPressサイト作成（16名分のサイト）
  • 座席表更新とDropBoxへのアップロード

2021年1月26日（火）

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

-本日のアジェンダ-

1限目
実技　ユーザーインターフェイス作成実習②
WordPressのインストール

2限目
実技　ユーザーインターフェイス作成実習②
WordPressのカスタマイズ

3限目
実技　ユーザーインターフェイス作成実習②
WordPressでのサイト作成

4限目
実技　ユーザーインターフェイス作成実習②
WordPressでのサイト作成

5限目
実技　ユーザーインターフェイス作成実習②
WordPressでのサイト作成

本日のテーマ

WordPressの仕組みを知ろう

WordPressサーバーのインストール

固定ページの活用

WordPressのプラグイン

研修メモ（WordPress Day2）

WordPressのカスタマイズ

カスタマイズ
  • 固定ページのホーム設定
  • アイキャッチ
プラグイン（紹介だけ／自己責任で使用）
  • コンタクトフォーム
  • セキュリティ
  • 画像圧縮

実際の講義内容

1日目のフォロー（質問が多かった内容）
  • 投稿ページ、固定ページ作成方法の再確認
    →カテゴリやタグの設定（カテゴリの例）：音楽（Music）、ビデオ（Video）、ゲーム（Game）
  • トップページに画像を表示（アイキャッチ画像の設定）
  • メニューの作成方法
    →固定ページの例
    　トップページ（Top）
    　プロフィール（Profile）
    　バナー（Banner）
    　カード・名刺（Card）
    　マップ（Map）
  • 固定ページをトップページに設定
  • トップページの画像を変更（カスタマイズ）
プラグインの説明
  • フォーム作成（Contact Form 7）
  • 表（テーブル）作成（Table Press）
  • ブロックエディタ（Classic Editor）
  • パスワード設定（Hide My Site）
    →Password Protected（xfreeとの相性が悪い）
    →学校のサイトはパスワードを設定しない（個人情報はマスク（伏せ文字）をかけておいてください）
表（テーブル）作成
  • プラグイン
  • ブロック エディタ
  • HTML記述
追加CSS
  • タイトルの色変更
  • 画像の角丸設定
  • 表の飾り（色や位置）
  • 追加CSSはテーマ変更を行うと消えてしまうのでバックアップ（保存）しておくこと
  • 追加CSSのためのプラグインも有り
  • 直接ソースを変更する方法もあるがバージョンアップ対応などの問題もありお勧めしない→子テーマを活用
サンプルサイト
  • http://deau00010.wp.xdomain.jp/（小松さん）
  • http://deau00001.wp.xdomain.jp/（九条さん）
  • http://deau00014.wp.xdomain.jp/（新井さん）
  • http://deau00002.wp.xdomain.jp/（中村さん）

2021年1月27日（水）

学科 HTML基礎①

-本日のアジェンダ-

1限目
学科 HTML基礎①
文字コードについて

2限目
学科 HTML基礎① 
HTMLの記述について

3限目
学科 HTML基礎① 
headについて

4限目
学科 HTML基礎① 
bodyについて

5限目
学科 HTML基礎① 
まとめ

本日のテーマ

実際にHTMLを記述してみましょう

ウェブサイトができるまで

00.依頼を頂いた
01.ご提案(企画をまとめる)
02.デザインに必要な素材の作成
03.デザインラフの作成
04.コーディング
– STEP01 素材の確認
– STEP02 マークアップ
– STEP03 CSSでデザインする
– STEP04 サーバにテストアップ
– STEP05 納品

【資料】Webサイト制作の手順の教科書.pdf

Webページの作成ツール

テキストエディタ・・・Terapad（HTMLとCSSを書く）
Atom,Brackets,Dreamweaver,Visual Studio Codeなど

ブラウザ・・・Google Chrome（ページを表示させる）
Safari,Firefox,Microsoft Edge,Microsoft Internet Explorerなど

マークアップとは？

HTMLマークアップとは、マークアップ言語である「HTML」を使ってファイルにソースコードを記述することです。
HTMLマークアップでは、定義されてる数多くの専用タグを使って、適切にソースコードを記述することが大切となります。

Terapadの設定

文字コードUTF-8の設定

①表示＞オプション「文字コード」の設定
②ファイル＞「文字/改行コード指定保存」での設定

文字コード・特殊文字

HTMLの基本構造

<!doctype html> ・・・DOCTYPE宣言
<html lang="ja">・・・HTML文書であることを示す
<head>・・・文書のヘッダ情報を表す
</head>
<body>・・・文書の本体を表す
</body>
</html>

◆DOCTYPE（ドックタイプ）宣言
どのバージョンで記述するか
この場合はHTML5

◆文書のヘッダ情報
その文書のタイトルや要素、著作権に関する情報など、
ページについての補足情報を記述

◆文書の本体
ブラウザで表示される情報を記述

lang 属性

どのような言語で記述されているかを表す。
jaは日本語を意味する

htmlの記述【基本タグ】

タグを書く時のルール

半角英数字で！全角は使わない。
特に全角スペースには注意。

大文字と小文字の区別はないが、小文字を推奨。

タグの書き方

<タグ>コンテンツ</タグ>
開始タグ　　　　終了タグ

head ヘッダ情報を記述してみましょう

<meta charset="utf-8">
<meta name="description" content="説明文">
<meta name="keywords" content="html,css,見本">
<meta name="author" content="作者情報">
<title>タイトル</title>

htmlの記述【head】

HTMLファイルを保存

index.htmlの名前で保存
サイトに訪れたときに最初に表示されるトップページのこと
補足：サイトのアドレス(URL)では”index.html”が省略されます。

.htmlをテキストエディタで開く設定にすると作業がしやすい

body 文書の本体を記述していきましょう

<!-- この間にコメントを書く-->
bodyの内容はブラウザに表示されます。

htmlの記述【body】

コメントアウト

後から見た時にわかりやすいようにメモなどを書いておく
ブラウザには表示されない

コメントアウト

文法チェック

文法に間違いがないかチェックしましょう

Gateway – Another HTML-lint 5

ブラウザで確認

index.htmlを右クリック＞プログラムから開く＞Chromeを選択
または
index.htmlをChromeへドラッグ&ドロップ

ブラウザ上で右クリック＞ページのソースを表示　でHTMLの記述を見ることができる

研修メモ

覚書

研修で使用したサンプル

2021年1月28日（木）

学科 HTML基礎②

-本日のアジェンダ-

1限目
学科 HTML基礎②
HTML基本構造の復習

2限目
学科 HTML基礎②
見出しタグについて

3限目
学科 HTML基礎②
段落タグについて

4限目
学科 HTML基礎②
画像タグについて

5限目
学科 HTML基礎②
まとめ

本日のテーマ

タグを理解しましょう

h 見出し

見出しを付ける

<h1>∼</h1>：１番大きな見出し
<h2>∼</h2>：２番目に大きな見出し
<h3>∼</h3>：３番目に大きな見出し
<h4>∼</h4>：４番目に大きな見出し
<h5>∼</h5>：５番目に大きな見出し
<h6>∼</h6>：６番目に大きな見出し

【ルール】
① h1〜h6を使う順番を守る
②h1タグの使用は1回だけにする

p 段落

ひとつの段落（パラグラフ）であることを表す

<p>∼</p>

br 改行

改行する

<br>

img 画像

画像を表示する

<img src="images/sample_img001.jpg" alt="" width="400" height="300">

画像

絶対パスと相対パス

絶対パス
サーバー（インターネット上）に上がっているファイル
http://やhttps://から始まる
【例】
http://samplesdl.me/training_html-css_190622_01/index.html
https://samplesdl.me/training_html-css/images/deau-academye_logo.png

相対パス
自分で管理していてフォルダの中にアクセスできる
または、自分のPCの中にあるファイル
【例】
index.html
deau-academye_logo.png

パス

a リンク

ハイパーリンクを指定する

<a href="外部リンク" target="_blank">∼</a>

htmlの記述【body】

▼HTML（bodyの中）

<p><img src="http://deau-b.spawn.jp/wp-content/uploads/2020/09/HIRA86_nekojyarasideasobu_TP_V-1024x682-3-1024x682-1.jpg" alt="子猫" width="600"></p>

<h1>猫のからだ</h1>
<p>猫のからだの特徴を説明します。</p>
<h2>目</h2>
<p>顔の大きさの割に、かなり大きい</p>
<h3>視力</h3>
<p>8m位の距離ならば人間の顔を識別できる。</p>
<h3>色覚</h3>
<p>基本的にはモノトーンの世界。</p>
<h2>鼻</h2>
<p>人間の数万から数十万倍といわれる嗅覚を持つ。</p>
<h2>尾</h2>
<p>脊髄と直結しているため、痛覚が強い</p>

<p><a href="https://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3" target="_blank">ネコについてのWikipedia</a></p>

▼CSS（今回はheadの中に書きます）

<style type="text/css">
h1 {
    background-color: black;
    padding: 1rem;
    color: white;
}
h2 {
    color: red;
    padding: 3rem 0 0.5rem 0;
    border-bottom: red 1px solid;
}
h3 {
    color: blue;
    padding: 0.5rem 0 0 3rem;
}
h3 + p {
    padding: 0 0 0 3rem;
}
h4 {
    color: green;
    padding: 0.5rem 0 0 6rem;
}
h4 + p {
    padding: 0 0 0 6rem;
}
h5 {
    color: orange;
    padding: 0.5rem 0 0 9rem;
}
h5 + p {
    padding: 0 0 0 9rem;
}
h6 {
    color: pink;
    padding: 0.5rem 0 0 12rem;
}
h6 + p {
    padding: 0 0 0 12rem;
}
</style>

研修メモ

覚書

研修で使用したサンプル

2021年1月29日（金）

学科 HTML基礎③

-本日のアジェンダ-

1限目
学科 HTML基礎③
タグの復習

2限目
学科 HTML基礎③
リストタグについて

3限目
学科 HTML基礎③
googlemapについて

4限目
学科 HTML基礎③
CSSについて

5限目
学科 HTML基礎③
googlefontについて

本日のテーマ

様々なタグを使ってみましょう

ファイル名の名付けのルール

拡張子 .html .css .jpg .pngなどのファイル名を付ける時には下記に気をつけましょう！

ファイル名に
日本語はNG
空白NG
\:<などの記号はNG

半角英数字、-(ハイフン)_(アンダースコア)で！

li リスト

順序のないリストを表示する

<ul>
<li>∼</li>
</ul>

順序のあるリストを表示する

<ol>
<li>∼</li>
</ol>

table 表

<table>∼</table>	・・・テーブル（表）を作成する
<caption>∼</caption>	・・・テーブル（表）にキャプションをつける
<tr>∼</tr>	・・・テーブル（表）の横一行を定義する
<th>∼</th>	・・・テーブル（表）の見出しセルを作成する
<td>∼</td>	・・・テーブル（表）のデータセルを作成する

dl 定義

定義・説明リストを表す

<dl>
<dt>∼</dt>
<dd>∼</dd>
</dl>

htmlの記述【body】

Google Map

Google Fonts

CSSを書いてみましょう

h1 {font-size:20px;}
p {color:red;}
セレクタ　プロパティ　値

HTMLファイルのヘッダー内に、styleタグを書く方法

<style type="text/css">
</style>

color

文字色（前景色）を指定する

color:#666666;
color:rgba(0,0,255,0.5);

text-align

ブロックコンテナ内の行の揃え位置・均等割付を指定する

text-align:center;

font-family

フォントの種類

font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;

CSSの記述【文字】

background-color

背景色を指定する

background-color:#333333;

CSSの記述【背景】

width

内容の幅

width:90%;

float

回り込み

float:left;

clear

回り込みを解除

clear:both;

overflow

ボックスからあふれた内容の処理

overflow:hidden;

CSSの記述【配置】

border

ボーダーのプロパティを一括で指定

border:solid 1px #ccc;
border-bottom:solid 1px #ccc;

padding

パディングに関する指定をまとめて行う
パディングとは、内容領域の外側にある「余白」

padding:5%;
padding-top:5%;

margin

マージンに関する指定をまとめて行う
マージンとは、要素の外側にある「余白」

padding:5%;
padding-top:5%;

CSSの記述【ボックス】

オススメのレストラン

あなたが知ってるレストランについて
店名、MENU、INFORMATION、ACCESSをマークアップしましょう。

▼HTML 例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>おすすめのレストラン</title>
</head>

<body>
<div>
  <h1>恵比寿焼肉　kintan</h1>
  <p>最近行った〝映える〟お店を紹介します。１人焼肉もできるおしゃれなお店です。特にランチがコスパが良くおすすめ！</p>
  <h2>MENU</h2>
  <p>写真を撮りたくなる見て楽しいお肉です！</p>
  <!--ここからテーブル-->
  <table>
    <tr>
      <th>写真</th>
      <th>メニュー</th>
      <th>価格</th>
    </tr>
    <tr>
      <td><img src="images/menu1.jpg" alt="プラチナタンとサーロインのユッケ ハーフ＆ハーフ" width="300"></td>
      <td>プラチナタンとサーロインのユッケ ハーフ＆ハーフ</td>
      <td>2,780円</td>
    </tr>
    <tr>
      <td><img src="images/menu2.jpg" alt="日本一の骨付きKINTANミスジステーキ" width="300"></td>
      <td>日本一の骨付きKINTANミスジステーキ</td>
      <td>4,980円</td>
    </tr>
    <tr>
      <td><img src="images/menu3.jpg" alt="牛タン&KINTAN塩ハラミセット" width="300"></td>
      <td>牛タン&KINTAN塩ハラミセット</td>
      <td>1,980円</td>
    </tr>
  </table>
  <h2>INFORMATION</h2>
  <!--ここから定義-->
  <dl>
    <dt>店名</dt>
    <dd>恵比寿焼肉・ｋｉｎｔａｎ</dd>
    <dt>住所</dt>
    <dd>東京都渋谷区恵比寿西1-10-3トラストリンク恵比寿ビル・1階～2階</dd>
    <dt>電話</dt>
    <dd>03-5428-8629</dd>
  </dl>
  <h2>ACCESS</h2>
  <!--ここからリスト-->
  <ol>
    <li>JR恵比寿西口を出て左に100m進みます。</li>
    <li>信号を渡ります。</li>
    <li>最初の角を右に曲がります。</li>
    <li>緑の看板が目印です。</li>
  </ol>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.1126272647284!2d139.70430291405904!3d35.67422868019593!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cbc77cfc555%3A0x8616d5c79d061f31!2z44CSMTUwLTAwMDEg5p2x5Lqs6YO95riL6LC35Yy656We5a6u5YmN77yR5LiB55uu77yR4oiS77yR77yS!5e0!3m2!1sja!2sjp!4v1474711678659" width="800" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>

head内にスタイルシートを記述し、色を変えてみましょう。

<style type="text/css">
/*ページ全体を囲む*/
div {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
/*見出し*/
h1 {
    background-color: #000000;
    padding: 10px;
    color: #ffffff;
    text-align: center;
}
h2 {
    color: #FF0004;
    padding: 30px 0 10px 0;
    border-bottom: #FF0004 1px solid;
    font-family: 'Josefin Slab', serif;
}
/*テーブル*/
th {
    background-color: #cccccc;
}
td {
    background-color: #eeeeee;
}
th, td {
    padding: 10px;
}
/*定義*/   
dl {
    overflow: hidden;
}
dt {
    padding: 10px 0;
    float: left;
    clear:both;
    width: 120px;
}
dd {
    padding: 10px 0;
    float: left;
}
</style>

色の名前とカラーコードです 
HTMLカラーコード: WEB色見本 原色大辞典

最後にGoogle FontsとGoogle Mapを追加しましょう

研修メモ

覚書

研修で使用したサンプル

2021年2月1日（月）

学科 HTML基礎④

投稿者: 大淵 絵美 | 2021年2月1日0件のコメント

-本日のアジェンダ-

1限目
学科 HTML基礎④
タグの復習

2限目
学科 HTML基礎④
CSSの書き方

3限目
学科 HTML基礎④
CSSのタグの解説

4限目
学科 HTML基礎④
font-sizeについて

5限目
学科 HTML基礎④
余白について

本日のテーマ

CSSについて学びましょう

インデント

入れ子構造（ネスト）がわかりやすく字下げをすることをインデントと呼びます。tabキーでタグの頭を字下げしてみましょう

【ルール】
親子の関係になるごとにタグを字下げする
開始タグと閉じタグの位置（ライン）を揃える

【TeraPadの設定】
見えない文字を見えるようにする。（タブ、改行、などすべてON）
⇒HTMLタグの直前または直後に入れた半角スペース・改行・タブは、Webページの表示に影響を与えない。

CSSを書いてみましょう

h1 {font-size:20px;}
p {color:red;}
セレクタ　プロパティ　値

CSSの書き方ルール

・半角英数字で！全角は使わない。
・大文字と小文字の区別はないが、小文字を推奨。

◆複数のセレクタに同じ装飾をする場合
→,(カンマ)で区切る
h1とpはどちらも文字色red

h1,p {color:red; }

◆１つのセレクタに複数の装飾をしたい場合
→;(セミコロン)で区切る
h1は文字色redかつフォントサイズ20px

h1 {color:red; font-size:20px;}

◆要素の中の要素に指定したい場合
→ (半角スペース)で区切る
pがdivの中にある場合のみ文字色red

div p { color: red;}

コメントアウト

<!-- 〇〇〇〇〇 --> ・・・HTML文章に記述
/* 〇〇〇〇〇 */ ・・・CSSファイルに記述

cssの3つの書き方

①スタイルシートのファイル（.css）を作成して、そのファイルを読み込んで使う方法

▼HTMLのhead
<link href="style.css" rel="stylesheet">
▼style.cssの一番上
@charset "utf-8";

②HTMLファイルのヘッダー内に、styleタグを書く方法

▼HTMLのhead
<style type="text/css">
　 h1 { color: red; font-size: 20px; }
</style>

③HTMLファイルの本文内に、直接スタイルシートを書く方法

▼HTMLのbody
<h1 style="color:blue;">ホームページに掲載する文章</h1>

①<②<③の順で優先順位が高くなる

余白

margin・・・要素の外側の余白
padding・・・要素の内側の余白

上・右・下・左の値を一括指定できます。
四辺全て：margin: 10px;・・・１つ
上下、左右：margin: 10px 20px;・・・２つ
上、左右、下：margin: 10px 20px 30px;・・・３つ
上、右、下、左：margin: 10px 20px 30px 40px;・・・４つ

線

border-style・・・枠線のスタイル（none,solid,dotted,doubleなど）
border-color・・・枠線の色（red,#ff0000など）
border-width・・・枠線の太さ（px,thin,medium,thickなど）

半角区切りで一括で指定できます。
border:solid 1px #ccc;

color

文字色（前景色）を指定する

color:#666666;
color:rgba(0,0,255,0.5);

text-align

ブロックコンテナ内の行の揃え位置・均等割付を指定する

text-align:center;

font-family

フォントの種類

font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;

CSSの記述【文字】

background-color

背景色を指定する

background-color:#333333;

CSSの記述【背景】

width

内容の幅

width:90%;

float

回り込み
※左に倣えで、横並びになる。浮くイメージ。

float:left;

clear

回り込みを解除
※タグの前に改行が入るイメージ

clear:both;

overflow

ボックスからあふれた内容の処理
※floatの親要素に指定してfloat解除に使われる事が多い

overflow:hidden;

CSSの記述【配置】

border

ボーダーのプロパティを一括で指定

border:solid 1px #ccc;
border-bottom:solid 1px #ccc;

padding

パディングに関する指定をまとめて行う
パディングとは、内容領域の外側にある「余白」

padding:5%;
padding-top:5%;

margin

マージンに関する指定をまとめて行う
マージンとは、要素の外側にある「余白」

padding:5%;
padding-top:5%;

CSSの記述【ボックス】

研修メモ

覚書

研修で使用したサンプル

2021年2月2日（火）

学科 HTML基礎⑤

-本日のアジェンダ-

1限目
学科 HTML基礎⑤
タグの復習

2限目
学科 HTML基礎⑤
flexboxについて

3限目
学科 HTML基礎⑤
floatについて

4限目
学科 HTML基礎⑤
リンクについて

5限目
学科 HTML基礎⑤
まとめ

本日のテーマ

横並びメニューを作りましょう

検証ツール

GoogleChromeのデベロッパーツール（要素の検証機能）は、CSSのデザインの検証やコードのチェックに便利です！

リンクの文字色

リンクの状態別に文字色を指定することができます。

a {
    color: black;
    text-decoration: none;
}
a:hover {
    color: red;
}

CSSの記述【疑似クラス・疑似要素】

flexboxで横並び

親要素の中に子要素を入れる。
親要素にdisplay: flex;だけ

▼html

<div class="container">
  <div class="item">ITEM1</div>
  <div class="item">ITEM2</div>
  <div class="item">ITEM3</div>
  <div class="item">ITEM4</div>
</div>
<div>ここからは違う要素</div>
▼css

.container {
    display: flex;
}
.item {
    background: red;
    margin: 10px;
    padding: 10px;
}

floatで横並び

flexboxと同様、親要素の中に子要素を入れる。
次の要素が回り込まない為、float解除を行う
親要素にoverflow: hidden;
子要素にfloat: left;

▼css

.container {
    overflow: hidden;
}
.item {
    background: red;
    margin: 10px;
    padding: 10px;
    float: left;
}

横並びのメニューを作りましょう

HTMLの記述ヒント

<h1>には「MY WEB SITE」
<ul>には<li>が３つ。左から「TOP」「ITEM」「MAP」リンク先はそれぞれ「index.html」「item.html」「map.html」
<p>には<img>、画像のソースは絶対パスで好きな画像。altは必須。画像の幅を600としてください。

▼HTMLの答え

<h1>MY WEB SITE</h1>
<ul>
  <li><a href="index.html">TOP</a></li>
  <li><a href="item.html">ITEM</a></li>
  <li><a href="map.html">MAP</a></li>
</ul>
<p><img src="https://cafict.com/wp-content/uploads/blog20180821_0.jpg" alt="" width="600"></p>

CSSの記述のヒント

body {
中の要素：中央
}
h1 {
フォントサイズ：32px
}
ul {
幅：600px
外余白(左)：自動
外余白(右)：自動
内余白：0 ※リセット
}
li {
リストスタイル(黒丸)：なし
幅：190px
外余白：上下 0、左右 5px
内余白：上下 5px、左右 0
背景色：aqua
角丸：5px
}
a {
文字の色：black
テキストの線：なし
}
a:hover {
文字の色：red
}
▼CSSの答え

body {
    text-align: center;
}
h1 {
    font-size: 32px;
}
ul {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 0; /*リセット*/
}
li {
    list-style: none;
    width: 190px;
    margin: 0 5px;
    padding: 5px 0;
    background-color: aqua;
    border-radius: 5px;
}
a {
    color: black;
    text-decoration: none;
}
a:hover {
    color: red;
}

研修メモ

覚書

研修で使用したサンプル

2021年2月3日（水）

学科 HTML基礎⑥

-本日のアジェンダ-

1限目
学科 HTML基礎⑥
タグの復習

2限目
学科 HTML基礎⑥
フォントサイズについて

3限目
学科 HTML基礎⑥
idとclassについて

4限目
学科 HTML基礎⑥
背景画像について

5限目
学科 HTML基礎⑥
ブロックとインライン

本日のテーマ

idとclassについて理解しましょう

基本フォルダ (html_●●●●_20210000)

①index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
</body>
</html>

②style.css

@charset "UTF-8";

③images(フォルダ)
.jpg .png など画像を入れる

フォントサイズ

font-size: 10px;
font-size: 150%;
font-size:  3rem;
font-size:  5em;
font-size:  small;

単位

px・・・画面上の最小単位を基準とした単位
%・・・親要素のサイズを基準とした単位
em（エム）・・・親要素のフォントサイズを基準とした単位
rem（レム）・・・ルート要素(html要素)のフォントサイズを基準とした単位
small,medium,large・・・キーワードで指定

クイズ

全部50pxに指定してみましょう

▼cssに下記の指定がある場合
html{font-size: 10px;}
div{font-size: 50px;}
p{font-size:50px;}

▼50pxにする為にはremとemの数値は？？
<div>
<p style="font-size: 50px;">これは50pxです。</p>
<p>これは50pxです。</p>
<p style="font-size: ●rem">これは50pxです。</p>
<p style="font-size: ●em">これは50pxです。</p>
<p style="font-size: 50%;">これは何pxでしょうか</p>
</div>

idとclass

同じ要素でも別のCSSを適用したい場合があります。そのような場合、HTMLのid属性とclass属性を利用します。
idやclassで名前をつけてその名前の要素にだけ装飾を指定できます。

◆id属性
同じWebページ内で1度だけ
優先順位が高い

▼html
<p id="blue"></p>
▼css
#blue { clolor: #0000ff}
p#blue { clolor: #0000ff}

◆class属性
何度でもOK
優先順位が低い

▼html
<p class="blue"></p>
▼css
.blue { clolor: #0000ff}
p.blue { clolor: #0000ff}

セレクタの得点

背景画像

背景画像に関するセレクタ「background」

background-image:url("images/bk-yellow.png");
background-size:100px;

繰り返しの指定

背景画像を一回だけ表示して繰り返さない

background-repeat: no-repeat;

画像

divとspan

デザイン上範囲の指定が必要な時に使います。

<div>∼</div> ・・・ひとかたまりの範囲として定義する
<span>∼</span> ・・・ひとつの範囲として定義する

divとspanの違い

divはブロック、spanはインラインです。

ブロック要素とインライン要素の違い

  • 幅と高さを指定できるかどうか
  • 前後に改行が入るかどうか
  • spanは文字の装飾などに便利！
  • spanの中にdivは入れない
  • 中に入れることのできるタグの違い

表示ルール

▼HTML

<h1> WEBだけ<span>で囲う
<ul><li>が４つ　liの中のテキストにリンクをつける
<ul><li>が４つ　liの中のテキストにリンクをつける
▼HTML（答え）

<h1>MY <span>WEB</span> SITE</h1>
    
<ul>
  <li><a href="index.html">TOP</a></li>
  <li><a href="item.html">ITEM</a></li>
  <li><a href="map.html">MAP</a></li>
  <li><a href="contact.html">contact</a></li>
</ul>

<ul>
  <li><a href="index.html">TOP</a></li>
  <li><a href="item.html">ITEM</a></li>
  <li><a href="map.html">MAP</a></li>
  <li><a href="contact.html">contact</a></li>
</ul>
▼css

body→ 背景画像bg.png 背景画像サイズ100px
h1→ 背景色khaki 内余白上下2%左右3% フォントサイズ24px
h1の中のspan→ 文字色green
ul→ 内余白0（リセット）
li→ リストスタイルなし　幅23% 外余白上下0左右1% 内余白上下1%左右0
※liを横並び(左ならえ)にして、ulにfloat解除
a→ 文字色red 下線なし
aオンマウス時→ 文字色blue
▼css（答え）idとclassをまだつけていない中間地点

body{ background-image: url("images/bg.png"); background-size: 100px;}
h1{ background-color: khaki; padding: 2% 3%; font-size: 24px;}
h1 span{ color: green;}
ul{ padding: 0; overflow: hidden;}
li{ list-style: none; float: left; width: 23%; margin: 0 1%; padding: 1% 0;}
a{ color: red; text-decoration: none;}
a:hover{ color: blue;}

個別にデザインする為に、idとclassで名前をつけます。
まずは、ulにid名をつけます。

▼HTML

１つ目のulにはid名「navi-1」を名付けます。
２つ目のulにはid名「navi-2」を名付けます。

「navi-1」と「navi-2」はこのページにそれぞれ１つずつしか存在しません。
→なのでidを使います！

▼CSS

id名「navi-1」の中のli→ テキスト中央　背景色skyblue
id名「navi-2」の中のli→ 背景色greenyellow

次に、liにclass名をつけます。

▼HTML

li４つを１つ目から「menu1」「menu2」「menu3」「menu4」と名付けます。
２つ目のulのliにも同様に「menu1」「menu2」「menu3」「menu4」と名付けます。

「menu1」は一つ目のulの中のliと、二つ目のulの中のli 両方に同じ名前が存在します。
→なのでclassを使います！

▼CSS

class名「menu1」→ 線(下)blueで5pxで実線
class名「menu2」→ 線(下)redで5pxで実線
class名「menu3」→ 線(下)greenで5pxで実線
class名「menu4」→ 線(下)purpleで5pxで実線
▼HTML（bodyの中）完成！

<h1>MY <span>WEB</span> SITE</h1>
<ul id="navi-1">
  <li class="menu1"><a href="index.html">TOP</a></li>
  <li class="menu2"><a href="item.html">ITEM</a></li>
  <li class="menu3"><a href="map.html">MAP</a></li>
  <li class="menu4"><a href="contact.html">contact</a></li>
</ul>
<ul id="navi-2">
  <li class="menu1"><a href="index.html">TOP</a></li>
  <li class="menu2"><a href="item.html">ITEM</a></li>
  <li class="menu3"><a href="map.html">MAP</a></li>
  <li class="menu4"><a href="contact.html">contact</a></li>
</ul>
▼css（答え）完成！

body{ background-image: url("images/bk-yellow.png"); background-size: 100px;}
h1{ background-color: khaki; padding: 2% 3%; font-size: 24px;}
h1 span{ color: green;}
ul{ padding: 0; overflow: hidden;}
li{ list-style: none; float: left; width: 23%; margin: 0 1%; padding: 1% 0;}
a{ color: red; text-decoration: none;}
a:hover{ color: blue;}
    
ul#navi-1 li{ background-color: skyblue; text-align: center;}
ul#navi-2 li{ background-color: greenyellow;}
    
li.menu1{ border-bottom: 5px solid blue;}
li.menu2{ border-bottom: 5px solid red;}
li.menu3{ border-bottom: 5px solid green;}
li.menu4{ border-bottom: 5px solid purple;}

【Advance】
id名「navi-2」の中のliにpadding-left: 1%;を指定してください。
その時溢れてしまうでの、計算してwidthを追加してください。

▼Advanceの答え

ul#navi-2 li{ background-color: greenyellow; width: 22%; padding-left: 1%;}

研修メモ

覚書

研修で使用したサンプル

2021年2月4日（木）

学科 HTML基礎⑦

-本日のアジェンダ-

1限目
学科 HTML基礎⑦
固定ページについて

2限目
学科 HTML基礎⑦
プラグイン活用について

3限目
学科 HTML基礎⑦
追加CSSについて

4限目
学科 HTML基礎⑦
作品の掲載について

5限目
学科 HTML基礎⑦
作品の掲載について

本日のテーマ

作品を掲載しましょう

固定ページの活用

プラグインの活用

追加CSS

研修メモ

覚書

2021年2月5日（金）

学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
デザイン中間レビューについて

2限目
学科 CSS基礎①
デザイン中間レビューについて

3限目
学科 CSS基礎①
デザインの完成度向上について

4限目
学科 CSS基礎①
デザインの完成度向上について

5限目
学科 CSS基礎①
デザインの完成度向上について

本日のテーマ

デザインの完成度を上げましょう

デザイン中間レビューについて

  • デザインの考え方を説明しましょう
  • 工夫したところ、苦労したところを発表しましょう
  • 良いところをほめましょう
  • 他の人のデザインの良いところは自分の作品の参考にしましょう

研修メモ

覚書

2021年2月6日（土）

学科 CSS基礎②

投稿者: admin | 2021年2月6日0件のコメント

-本日のアジェンダ-

1限目
学科 CSS基礎②
HTMLとCSSの歴史について

2限目
学科 CSS基礎②
HTMLの攻略法について

3限目
学科 CSS基礎②
CSSの攻略法について

4限目
学科 CSS基礎②
コーダーの攻略法について

5限目
学科 CSS基礎②
本日のまとめ

本日のテーマ

適当と厳密

HTMLとは？

HyperText Markup Language（HTML）
ハイパーテキスト マークアップ ランゲージ
拡張子は「.html」

HyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web において、ウェブページを表現するために用いられる。 ウィキペディア

参考サイト

CSSとは？

Cascading Style Sheets（CSS）
カスケーディング・スタイル・シート
拡張子は「.css」

Cascading Style Sheetsとは、HTML や XML の要素をどのように修飾するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 ウィキペディア

参考サイト

javascriptとは？

JavaScript
ジャバスクリプト
拡張子「.js」

JavaScriptとは、プログラミング言語のひとつである。Javaと名前が似ているが、全く異なるプログラミング言語である。 JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。 ウィキペディア

参考サイト

ファイルの作成方法について

  1. テキストエディタ（TeraPad等※Macなら「テキストエディット」等）を起動する
  2. ファイルの保存の時に拡張子を「.html」や「.css」や「.js」にする
  3. 文字コードを「UTF-8」（場合により違う文字コード）にする
  4. 再び保存
  5. ブラウザで確認

参考サイト

攻略法極意3点

タグチェックツール

デベロッパーツール

まとめサイト

研修メモ

覚書

2021年2月8日（月）

学科 CSS基礎③

投稿者: 大淵 絵美 | 2021年2月8日0件のコメント

-本日のアジェンダ-

1限目
学科 CSS基礎③
タグの復習

2限目
学科 CSS基礎③
レイアウトに関するタグ

3限目
学科 CSS基礎③
マークアップ

4限目
学科 CSS基礎③
まとめ

5限目
学科 CSS基礎③
まとめ

本日のテーマ

レイアウトに関するタグについて

タグを覚えましょう

▼HTML
<div>∼</div> ・・・ひとかたまりの範囲として定義する（ブロック要素）
<span>∼</span> ・・・ひとつの範囲として定義する（インライン要素）
▼HTML5から追加
<section>∼</section> ・・・一つのセクションであることを示す
<nav>∼</nav> ・・・ナビゲーションであることを示す
<article>∼</article> ・・・記事であることを示す
<aside>∼</aside> ・・・余談・補足情報のセクションであることを示す
<header>∼</header> ・・・ヘッダであることを示す
<footer>∼</footer> ・・・フッタであることを示す
<main>∼</main> ・・・メインコンテンツであることを示す

htmlの記述【body】

ページ全体をマークアップしてみましょう

<header>の中には<h1>でサイトの名前の「67Green」
<nav>の中には<ul>で<li>が３つ、<li>のテキスト「TOP、ITEM、MAP」には<a>でリンクを付ける
（リンク先はindex.html、item.html、map.html）
<main>の中には<p>と<section>
・<p>の中に画像(画像のパスはimagesフォルダの中のmain.jpg)、サイズの指定なし、altは店内写真
・<section>の中には<h2>で「MESSAGE」、<p>で「67Greenはグリーン専門店です。落ち着いた空間で、ゆっくりお過ごしください。」途中に改行を入れる
→<nav>と<main>と<div>で囲う
<footer>の中には<p>でコピーライト「Copyright 2016 67Green.」

▼main.jpg

なぜ<div>で囲うのか？

<header>と<footer>は横幅100%なので、特に指定しなくても良いが、
<nav>と<main>は横幅を指定する必要があるので、<div>で囲いブロックを作ります。
それに対してCSSでデザインを記述していきます。

アークアップ後、このような見た目になります。

▼htmlマークアップ【答え】インデントは参考に！

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
  <h1>67Green</h1>
</header>
<div>
  <nav>
    <ul>
      <li><a href="index.html">TOP</a></li>
      <li><a href="item.html">ITEM</a></li>
      <li><a href="map.html">MAP</a></li>
    </ul>
  </nav>
  <main>
    <p><img src="images/main.jpg" alt="店内写真"></p>
    <section>
      <h2>MESSAGE</h2>
      <p>67Greenはグリーン専門店です。<br>
        落ち着いた空間で、ゆっくりお過ごしください。</p>
    </section>
  </main>
</div>
<footer>
  <p>Copyright 2016 67Green.</p>
</footer>
</body>
</html>

これにCSSなどを記述して、ページが完成します。

テキストの意味を表すタグ

<em>∼</em>	 ・・・強勢する（アクセントを付ける）箇所を表す
<strong>∼</strong>	 ・・・強い重要性を表す
<small>∼</small>	 ・・・免責・警告・著作権などの注釈や細目を表す
<i>∼</i>	 ・・・声や心の中で思ったことなど、他と区別したいテキストを表す
<b>∼</b>	 ・・・文書内のキーワードや製品名など、他と区別したいテキストを表す
▼使用例
<em>アクセント</em>
<strong>重要</strong>
<small>注釈や細目</small>
<i>声や心の中で思ったこと</i>
<b>他と区別したいテキスト</b>

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス 
色の名前とカラーコードです 
　HTMLカラーコード: WEB色見本 原色大辞典 
Googleフォント（ウェブフォント）
　 Google Fonts

研修メモ

覚書

2021年2月9日（火）

学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
タグの復習

2限目
学科 CSS基礎④
背景画像について

3限目
学科 CSS基礎④
装飾に関するタグ

4限目
学科 CSS基礎④
CSSの記述

5限目
学科 CSS基礎④
タグの総まとめ

本日のテーマ

ページ全体のCSSを書いてみましょう

背景画像の指定のCSS（おさらい含む）

background-image   ・・・背景画像を指定する
【記述例】
background-image:url("images/sample_img001.jpg");

background-repeat   ・・・背景イメージの繰り返し方法を指定する
【記述例】
background-repeat:repeat;（繰り返して表示※初期値）
background-repeat:no-repeat;（繰り返さない＝一回だけ表示）
background-repeat:repeat-x; （横方向にのみ背景画像を繰り返し）
background-repeat:repeat-y; （縦方向にのみ背景画像を繰り返し）

background-position   ・・・背景イメージの位置を指定する
【記述例】
background-position:top left; （横方向・縦方向の位置を指定）

background-attachment   ・・・背景画像の固定・移動を指定する
【記述例】
background-attachment: scroll;（背景画像も移動※初期値）
background-attachment: fixed;（背景画像の位置が固定になる）

background-size   ・・・背景画像のサイズを指定する
【記述例】
background-size:auto;（自動的に算出※初期値）
background-size:contain;（背景領域に収まる最大サイズになる）
background-size:cover;（背景領域に収まる最小サイズになる）
background-size:●●px ●●px;（横縦の順で指定）

背景画像の指定をまとめて書く

【記述例】
background:#fff url("images/sample_img001.jpg") no-repeat top left fixed;

CSSの記述【背景】

border-radius ・・・角丸を指定する

【記述例】
border-radius: 10px;（簡単な角丸）
border-radius: 50%; （楕円形になる）
border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;
（スラッシュの前後に水平方向と垂直方向の半径の値を、左上・右上・右下・左下の順で指定）

box-shadow ・・・ボックスに影をつける

【記述例】
box-shadow: 5px 5px 5px #ccc;
（水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色）

CSSの記述【ボックス】

インラインとインラインブロックは横並び

単位のvwとvh

vw = viewport width
vw・・・画面の幅の1/100（100vw＝画面の幅いっぱい）
vh = viewport height
vh・・・画面の高さの1/100（100vh＝画面の高さいっぱい）

ビューポートについてはレスポンシブの講義で詳しく解説します。
今はviewport=画面と覚えておいてください。

【記述例】
height:100vh;（高さが画面いっぱいになります。）

最大・最小のmax-とmin-

max-width ・・・幅の最大値を指定する
min-width ・・・幅の最小値を指定する
max-height ・・・高さの最大値を指定する
min-height ・・・高さの最小値を指定する

【記述例】
max-width:100%;（幅が親要素よりも大きくならない。）
min-height:100vh;（高さが画面よりも小さくならない。）

実際に使ってみましょう

▼HTML(bodyの中)

<div>
  <h1>NO CAMERA NO LIFE</h1>
  <p>少し前に買った一眼レフカメラ。最近楽しくなってきたかも！</p>
  <a href="#">こどもの写真を見る</a> <a href="#">風景の写真を見る</a>
</div>
▼CSS

body {
    margin: 0; /*リセット*/
    background-color: beige; /*背景ー色：beige*/
    min-height:100vh;
}
div {
    text-align: center; /*中の要素が横中央*/
}
h1 {
    margin: 0; /*リセット*/
    padding-top: 10%; /*親要素の10%*/
    font-size: 300%; /*フォントサイズ300%*/
}
p {
    font-size: 150%; /*フォントサイズ150%*/
}
a {
    margin: 0.5em; /*外余白が0.5em*/
    padding: 1em 3em; /*内余白が上下1em左右3em*/
    background-color: darkorange; /*背景色がdarkorange*/
    display: ●●; /*インラインブロック要素にする＝上下のmarginが効く*/
    text-decoration: none; /*文字の装飾なし（下線が消える）*/
    color: #fff; /*文字色が#fff（白）*/
    border-radius: ●●; /*角丸10px*/
    box-shadow: ●●; /*ボックスの影：水平方向の距離5px 垂直方向の距離5px ぼかし距離10px 広がり距離-5px 影の色#666*/
}
a:hover { /*オンマウスした時*/
    background-color: orangered; /*背景色がrangered*/
}

STEP1：bodyの背景に下記の指定で画像を指定しましょう

背景ー画像：imagesフォルダの中のbg.jpg
背景ー繰り返し：繰り返しなし
背景ーサイズ：画像が切れても良いので画面いっぱい
背景ー配置：横中央、縦中央

STEP2：コメントアウトをヒントにCSSの●●に値を記述しましょう

研修メモ

覚書

2021年2月10日（水）

学科 CSS基礎⑤

投稿者: 大淵 絵美 | 2021年2月10日0件のコメント

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
タグの復習

2限目
学科 CSS基礎⑤
HTMLの総まとめ

3限目
学科 CSS基礎⑤
CSSの記述

4限目
学科 CSS基礎⑤
CSSの総まとめ

5限目
学科 CSS基礎⑤
CSSの総まとめ

本日のテーマ

CSSの総まとめです

透明の表現について

opacity ・・・要素の透明度を指定する

※セレクタ全体が透明になります。

【記述例】
opacity:0.7;

rgba・・・RGB +透明度（alpha）

新しいカラーの表現方法です。従来の色の表現に透明度が追加されました。

【記述例】
background:rgba(255,0,0,0.7);
color: rgba(255,0,0,0.7);

疑似クラス・疑似要素

要素名:nth-child(n)	・・・n番目の子となる要素
要素名:nth-last-child(n)	・・・後ろから数えてn番目の子となる要素
要素名:nth-of-type(n)	・・・n番目の要素
要素名:nth-last-of-type(n)	・・・後ろから数えてn番目の要素
▼HTML（bodyの中）

<div>
<h1>見出し１</h1>
<h2>見出し２の１つ目</h2>
<p>テキストテキストテキストテキストテキストテキスト</p>
<h2>見出し２の２つ目</h2>
<p>テキストテキストテキストテキストテキストテキスト</p>
<h2>見出し２の３つ目</h2>
<p>テキストテキストテキストテキストテキストテキスト</p>
<h2>見出し２の４つ目</h2>
<p>テキストテキストテキストテキストテキストテキスト</p>
</div> 
▼CSS

h1 {
    background-color: red;
    opacity: 0.5;/*透明*/
}
h2:nth-child(n) { /*子要素（兄弟）の中のn個目*/
    color: red;
}
h2:nth-of-type(n) { /*h2の中のn個目*/
    color: blue;
}

font-familyの正しい書き方！

左に書いたものから優先的に適用される。
フォントファミリー名に空白が含まれる場合は’ ‘または” “で囲う。
総称ファミリーには次の5種類があります。

  • sans-serif：ゴシック系のフォント
  • serif：明朝系のフォント
  • cursive：筆記体・草書体のフォント
  • fantasy：装飾的なフォント
  • monospace：等幅フォント

▼imagesに保存してからスタート！

67green CSSの記述　その①

h1{
文字色：green
文字サイズ：250%
}
div{
幅：640px
外余白(右)：自動
外余白(左)：自動
}
→中央に寄ります。
h1とh2とliとfooter{
中の要素：中央
}
li{
リスト装飾：なし
幅：33%
フロート：左ならえ
}
ul{
内余白：０（リセット）
フロート解除
}
→フロートの横並びは子要素にfloat:left;、親要素にoverflow:hidden;
liの中のa{
文字色：#000
}
liの中のaをマウスオーバーした時{
テキスト装飾：なし（下線が消える）
}

67green CSSの記述　その①の答え

h1{
color:green;
font-size:250%;
}
div{
width:640px;
margin-right:auto;
margin-left:auto;
}
h1,h2,li,footer{
text-align:center;
}
li{
list-style:none;
width:33%;
float:left;
}
ul{
padding:0;
overflow:hidden;
}
li a{
color:#000;
}
li a:hover{
text-decoration:none;
}

▼このような見た目になります。

67green CSSの記述　その②

header{
線(上)：実線、太さ10px、色#c2e08f
}
h2{
背景-画像：imagesフォルダの中のbg_h2.png
背景-繰り返し：繰り返ししない
背景-配置：横中央　縦下
背景-サイズ：横220px 縦28px
}
section{
ボックスの影：水平方向の距離0、垂直方向の距離0、ぼかし距離10px、広がり距離0、影の色#ccc;
外余白(上)：40px
内余白(上)：10px
内余白(右)：20px
内余白(下)：10px
内余白(左)：20px
}
→内マージンはまとめて書いてもOK

67green CSSの記述　その②の答え
（①の答えの下に追加されます。）

header{
border-top:solid 10px #c2e08f;
}
h2{
background-image:url(images/bg_h2.png);
background-repeat:no-repeat;
background-position:center bottom;
background-size:220px 28px;
}
section{
box-shadow:0 0 10px 0 #ccc;
margin-top:40px;
padding-top:10px;
padding-right:20px;
padding-bottom:10px;
padding-left:20px;
/* padding: 10px 20px; または　padding: 10px 20px 10px 20px; でもOK*/
}

最後にGoogle Fontsを適用してください。

▼htmlのheadの中に記述

<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">

▼CSSのh1,h2,li,footerに追加

font-family: 'Josefin Slab', serif;

▼完成です。

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス 
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト 
　CSS Flexboxチートシート
　【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！
色の名前とカラーコードです 
　HTMLカラーコード: WEB色見本 原色大辞典 
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG

研修メモ

覚書

2021年2月11日（木）

学科 CSS基礎⑥

-本日のアジェンダ-

1限目
学科 CSS基礎⑥
テーマのデザインとカスタマイズについて

2限目
学科 CSS基礎⑥
テーマのデザインとカスタマイズについて

3限目
学科 CSS基礎⑥
サイトデザインと作品掲載

4限目
学科 CSS基礎⑥
サイトデザインと作品掲載

5限目
学科 CSS基礎⑥
サイトデザインと作品掲載

本日のテーマ

WordPressサイトを完成に向けて編集・掲載を進めましょう

WordPressサイトのデザインを完成させコンテンツ（過去に作成した作品や教育記録）の掲載を行いサイトを完成させましょう。
明日（2月12日）の5時限目までにコンテンツを最新状態にしてください。（成績考査の対象）

参考サイト

テーマのデザインとカスタマイズ

研修メモ

大浜のポートフォリオサイトのカスタマイズ項目

  • シンプルなページに！
  • テーマは「Fukasawa」を使用
  • サイドバーのタイトルの置き換え（追加CSS）
  • サイドバーのメインメニューの置き換え（ウィジェットと追加CSS）
  • サイドバーの写真を丸く（追加CSS）
  • サイドバーのテーマ提供者表示の削除（追加CSS）
  • サイドバーを左側から右側に変更（追加CSS）
  • トップページを固定ページに置き換え（トップページのメニュー名変更）
  • トップページにアピールメッセージを記載
  • トップページの写真に縁取り（丸くするのは基本機能でOK、縁取りは追加CSS）
  • トップページの写真位置を中央（追加CSS）
  • トップページの写真のリンク明確化（追加CSSでhover時の透明度を指定）
  • プロフィールの表はブロックエディタの表機能を使用（幅設定と飾りは追加CSS）
  • 作品掲載の中の隙間調整（追加CSS）
  • 教育記録（ブロックエディタ、特定のカテゴリのみ表示）
  • 先頭に戻るボタンを追加（プラグイン）
  • URLをページ名称にするためにパーマリンクとスラッグを設定
  • サイトアイコンの設定（外観→カスタマイズ→サイトの基本情報→サイトアイコン）

2021年2月12日（金）

学科 CSS基礎⑦

投稿者: oohama | 2021年2月12日0件のコメント

-本日のアジェンダ-

1限目
学科 CSS基礎⑦
ブロックエディタの活用について

2限目
学科 CSS基礎⑦
ブロックエディタの活用について

3限目
学科 CSS基礎⑦
サイトデザインと作品掲載

4限目
学科 CSS基礎⑦
サイトデザインと作品掲載

5限目
学科 CSS基礎⑦
サイトデザインと作品掲載

本日のテーマ

WordPressサイトを完成させましょう（現時点での作品掲載）

WordPressサイトのデザインを完成させコンテンツ（過去に作成した作品や教育記録）の掲載を行いサイトを完成させましょう。
今日（2月12日）の5時限目までにコンテンツを最新状態にしてください。（成績考査の対象）
2月15日以降も引き続き教育記録の投稿を継続してください。

参考サイト

ブロックエディタの活用

研修メモ

ブロックエディタの活用

  • ブロックエディターのツールバーを上の固定位置に表示
  • 「段落、見出し、リスト」は、基本の項目
  • 「コード、整形済テキスト、詩」は同じようなブロック（複数の空白をそのまま表示）
  • 「テーブル」は、表組型式を作成
  • 「カバー」は、テキストをオーバレイした画像を配置
  • 「画像、ギャラリー」は、写真掲載の基本
  • 「ファイル」は、PDFファイルなどのダウンロードを配置
  • 「メディアと文章」は、写真と文章を並べる
  • 「カラム」は、横方向に複数欄を作成し、それぞれのメディアを指定可
  • 「続きを読む」は、抜粋に表示する範囲を指定
  • 「ページ区切り」は、別ページにする時に指定
  • 「区切り」は、文章と文章の間に水平線を表示
  • 「スペーサー」、空間を作成
  • 「ウィジェット」では、色々な表示部品を指定（Contact Form、カレンダー、カテゴリ、最新の投稿など）
  • 「ソーシャルアイコン」は、SNSへのリンクボタンを指定
  • 「埋め込み」の中では「YouTube」が使える

2021年2月15日（月）

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

投稿者: oohama | 2021年2月15日0件のコメント

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎①
Webサイト作成手順について

2限目
学科 レイアウトデザイン基礎①
サーバーへのアップロード について

3限目
学科 レイアウトデザイン基礎①
FFFTPの使い方について

4限目
学科 レイアウトデザイン基礎①
サイトレイアウト検討

5限目
学科 レイアウトデザイン基礎①
サイトレイアウト検討

本日のテーマ

FTPでサーバーコンテンツを操作できるようになりましょう

  • サーバー環境
  • FTPの仕組み
  • FTP（FFFTP）の設定
  • サーバーへの接続
  • サーバーへのアップロード／ダウンロード

参考サイト

Webサイトの作成手順

サーバーへのアップロード

FFFTPの使い方

サーバー接続情報（サーバー管理者から入手する情報）

ホスト名sv3.html.xdomain.ne.jp
ユーザー名deau01xx.html.xdomain.jp （xxは出席番号）
パスワード（申請値）

研修メモ

覚書

2021年2月16日（火）

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

投稿者: 大淵 絵美 | 2021年2月16日0件のコメント

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎②
サイトマップについて

2限目
学科 レイアウトデザイン基礎②
ワイヤーフレームについて

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

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

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

本日のテーマ

サイト制作にスケジュール管理は重要！

オリジナルサイト作成のスケジュール

①デザインカンプ作成

  • 内容決定
  • サイトマップ（今回は省略）
  • ワイヤーフレーム
  • デザインラフ
  • コーディングの設計図

②コーディング

  • マークアップ（HTML）
  • CSS記述

③レスポンシブ対応

  • %指定、max- min-指定
  • メディアクエリ

④アップロード（成績考査）

  • TOPページのみ完成

今週の提出物と提出先(dropbox)

①-1.内容決定

task_〇〇〇〇_20201119.txtのままで良い場合は、そのままアップ。
内容を変更する場合は、今日の日付でアップ。

【オリジナルサイト】20210216_内容決定

①-2.サイトマップ

「ホームページの内容と構成を整理するためにまとめられた構成図」と「検索エンジンがホームページ内のURLを集めるためのxmlサイトマップ」の２つがあります。

今回は省略

①-3.ワイヤーフレーム

まずは、カラム数とサイト幅を決めましょう。

ワイヤーフレームはフォトショップで作成します。提出はjpgです。
サイトの幅と高さは自由ですが、こだわりがなければ下記で作成しましょう。
サイト幅・・・960px
ファイル幅・・・1280px

１、フォトショップを開き、コンテンツ幅(960px)でファイルを新規作成※アートボードは外しておく
２、レイヤーを新規作成して、塗りつぶしツールで適当な色で全面を塗る
３、編集＞カンバスサイズでファイル幅（1280px）にする
４、塗りつぶしてできた四角の両端にガイドを引く
５、長方形ツール・グレースケールでレイアウトを決める

コピーライトの書き方
［©マーク（©は環境依存文字なので（C）でもOK）］［著作物を最初に発行した年］［著作権者の名前］

【オリジナルサイト】20210217_ワイヤーフレーム

研修メモ

覚書

  • 以前に作成したWebサイトの企画書の見直しを行い再提出

2021年2月17日（水）

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

投稿者: 大淵 絵美 | 2021年2月17日0件のコメント

-本日のアジェンダ-

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

2限目
学科 レイアウトデザイン基礎③
DTPとWEBの違い

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

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

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

本日のテーマ

「配置」「文字」「配色」を意識してデザインしましょう

①-4.デザインラフ

チラシ制作を思い出して、「配置」「文字」「配色」について考えてみましょう。

【配置＝レイアウト】

【文字】

※IllustratorやPhotoshopの単位の設定をpxにしてから作業を行うとスムーズです。

【配色】

DTPデザインとの違いは、ファイルの大きさ（特に高さ）が自由なこと、ファーストビューが重要視されること、後から変更ができることです。
この要素を意識してデザインしてみましょう。

ラフ段階ではファーストビューは高さ600px程度にしましょう。

文字の指定例

・フォントカラー　#333333
・フォントサイズ
　記事タイトル：40px
　大見出し：32px
　小見出し：24px
　本文：16px以上
・行間　1.5〜2.0
・一行に30文字〜50文字

CSSでの指定

body{
    color: #333333;
    font-size: 16px;
    line-height: 1.7;
}
h1{
    font-size: 40px;
}
h2{
    font-size: 32px;
}
h3{
    font-size: 24px;
}

【オリジナルサイト】20210218_デザインラフ

①-5.コーディングの設計図

コーディングの前にラフ上でマークアップを書いてみましょう。

１、ラフをJPGで書き出し、そのJPGをPhotoshopで開きます。
２、画像のレイヤーを透明度90%にする。
３、タグを書き込んでいきましょう。
４、別名で保存

どのタグが適切か考えましょう（使わないタグがあってもOKです）

▼レイアウトに関するタグ

<header>
<main>
<aside>
<footer>
<nav>
<section>
<article>
▼意味のある主なタグ

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<p>
<ul><li>
<ol><li>
<dl><dt><dd>
<table><tr><th><td>
<img>
▼必要になった時に使うタグ

<div>
<span>

意味がわからなくなったら下記のページを参考に！

htmlの記述【body】

【オリジナルサイト】20210219_設計図

研修メモ

覚書

  • ワイヤーフレームをJPGで提出

2021年2月18日（木）

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

投稿者: 大淵 絵美 | 2021年2月18日0件のコメント

-本日のアジェンダ-

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

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

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

4限目
学科 レイアウトデザイン基礎④
ラフの発表と講評

5限目
学科 レイアウトデザイン基礎④
ラフの発表と講評

本日のテーマ

デザインラフの発表会です。

課題の評価点

①隣接

要素をグループ化しましょう。画像とそのテキストの関係性の様に、関連する項目は近くに置く。別の項目とは距離を取る様に。

②グリッド

左寄せ、中央寄せ、右寄せ。揃えるとこを決めましょう。
頭を揃えましょう。

③ルール

同じレベルの物はデザインにルールを持たせましょう。

④コントラスト

文字の大きさや配色に強弱を付けましょう。
タイトルと本文のジャンプ率を意識する。色の組み合わせは読みやすいコントラストにしましょう。（例：黄色に白は避ける。）

⑤F型

ユーザーの目線の動きを意識しましょう。左から右へ、上から下へ目線が動きます。ファーストビューでサイトの要点が伝わる様に。

研修メモ

覚書

  • デザインカンプをjpgで提出

2021年2月19日（金）

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

投稿者: 大淵 絵美 | 2021年2月19日0件のコメント

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎⑤
リセットCSSについて

2限目
学科 レイアウトデザイン基礎⑤
マークアップについて

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

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

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

本日のテーマ

コーディングに向けて手順を確認しましょう

リセットCSS

リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。

おすすめCSS（リセットCSS +α）

最低限のリセットCSSと最初に記述した方が良い項目です。自分の使いやすい様に育てて行きましょう。

/*リセットCSS*/
* {
    box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd {
    margin: 0;
}
ul,ol {
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
    vertical-align: bottom;
    border: none;
}
/*ここまでは変更しない*/

/*全体の指定*/
body{
    color: #333333;
    font-size: 16px;
    line-height: 1.7;
}
a{
    color: inherit;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

【注意】

*（アスタリスク）は全要素に効きます
この場合、全要素にbox-sizing: border-box;（paddingとborderを幅(width)と高さ(height)に含めるの設定になっています。）

おすすめCSSの効果

【デフォルト】
不要な余白がある
不要な装飾がある
画像がはみ出てる（スクロールが出る）

【リセットCSS＋α】
余白が消えて、デザインを加えやすい
リストの装飾がない
リンクの装飾がない
画像が親要素に収まる

①-5.コーディングの設計図

コーディングの前にラフ上でマークアップを書いてみましょう。

１、ラフをJPGで書き出し、そのJPGをPhotoshopで開きます。
２、画像のレイヤーを透明度70%にする。
３、タグを書き込んでいきましょう。
４、別名で保存

どのタグが適切か考えましょう（使わないタグがあってもOKです）

▼レイアウトに関するタグ

<header>
<main>
<aside>
<footer>
<nav>
<section>・・・見出しが入ってる
<article>・・・それ自体で完結
▼意味のある主なタグ

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<p>
<ul><li>
<ol><li>
<dl><dt><dd>
<table><tr><th><td>
<img>
▼必要になった時に使うタグ

<div>
<span>

意味がわからなくなったら下記のページを参考に！

htmlの記述【body】

【オリジナルサイト】20210219_設計図

コーディング

②-1.マークアップ（HTML）

◆画像をimagesフォルダに書き出しましょう。
JPG・・・色数の多い写真
PNG・・・透過する写真、ピクトグラムやイラスト

【Photoshopでの書き出しかた】
レイヤーを右クリック＞書き出し形式
※複数レイヤーを一緒に書き出す場合は、フォルダにまとめて、右クリック

◆設計図を元にbody内にソースを書いて行きましょう。

最後にHTMLの記述をチェックしましょう
Gateway – Another HTML Lint

②-2.CSS記述

CSSの記述の順
リセットCSS→全体の設定→レイアウトの上から順に

/*リセットCSS*/
* {
    box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd {
    margin: 0;
}
ul,ol {
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
    vertical-align: bottom;
    border: none;
}
/*ここまでは変更しない*/

/*全体の指定*/
body{
    color: #333333;
    font-size: 16px;
    line-height: 1.7;
}
a{
    color: inherit;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

/*ヘッダー*/
header{}
h1{}

/*ナビとメインを囲む*/
div{}

/*ナビゲーション*/
nav{}
ul{}
li{}
li a{}
li a:hover{}

/*メイン*/
main{}
section{}
h2{}

/*フッター*/
footer{}

同じ要素で違うデザインの場合、idかclassで名前を付けます。
id・・・重要な事項。１ページに１度しか使えない。
class・・・何度でも使える。

横並びは、floatでもflexboxでも可能。

【オリジナルサイト】20210225_PCコーディング途中経過

研修メモ

覚書

  • デザインカンプにタグに該当する枠線を描いて設計図としてjpgで提出

2021年2月20日（土）

学科 XD基礎①

投稿者: mitsu | 2021年2月20日0件のコメント

-本日のアジェンダ-

1限目
学科 XD基礎①
【XD】基本操作について

2限目
学科 XD基礎①
【XD】アセットとレイヤー

3限目
学科 XD基礎①
【XD】アセットとコンポーネントの活用

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

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

本日のテーマ

XDを使ってみましょう

Adobe XDについて

XDを使用することで、デザイナーはより早く、正確に高い品質で作業できます。インタラクティブなプロトタイプをシームレスに反映し、Windows、Mac、iOS、Androidなどの様々なデバイスやプラットフォーム上でチームのメンバーやレビュー担当者と共有できるようになります。

研修メモ

覚書

2021年2月23日（火）

学科 XD基礎②

投稿者: mitsu | 2021年2月23日0件のコメント

-本日のアジェンダ-

1限目
基礎 ＸＤ基礎②
【XD】基本操作の復習と、UIキットの活用

2限目
基礎 ＸＤ基礎②
【XD】リピートグリッド（画像と文章）

3限目
基礎 ＸＤ基礎②
課題制作

4限目
基礎 ＸＤ基礎②
課題制作

5限目
基礎 ＸＤ基礎②
課題制作

本日のテーマ

XDでデザインラフを作ってみましょう

XD　UIキットの活用について

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト
　CSS Flexboxチートシート
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本 原色大辞典
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG

研修メモ

覚書

2021年2月24日（水）

実技 XD実習①

投稿者: mitsu | 2021年2月24日0件のコメント

-本日アジェンダ-

1限目
実技　ＸＤ実習①
【XD】プロトタイプについて

2限目
実技　ＸＤ実習①
【XD】プロトタイプ について

3限目
実技　ＸＤ実習①
課題制作

4限目
実技　ＸＤ実習①
課題制作

5限目
実技　ＸＤ実習①
課題制作

本日のテーマ

XDでプロトタイピングしてみましょう

プロトタイピング (prototyping) とは

「さっさと試作品を作って、それを変更していくやり方」が「プロトタイピング」です。

１．試作品を作る
２．作った試作品を見てもらう
３．試作品に対する意見をいただく
４．いただいた意見を試作品に反映する

を繰り返すことで、完成度を上げるやり方です。

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
必要な物は紙とペンだけ！ペーパープロトタイピングのススメ | Webクリエイターボックス
【30分】ペーパープロトタイピングで修行していた話

研修メモ

覚書

2021年2月25日（木）

実技 XD実習②

投稿者: mitsu | 2021年2月25日0件のコメント

-本日のアジェンダ-

1限目
実技　XD実習②
画像書き出しについて

2限目
実技　XD実習②
画像書き出しについて

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

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

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

本日のテーマ

XDで画像を書き出しましょう

便利ツール

HTMLの記述をチェックしてみよう
　Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
　CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
　HTML5リファレンス
CSS フレックスボックスの仕様
　CSS フレックスボックスレイアウト
　CSS Flexboxチートシート
色の名前とカラーコードです
　HTMLカラーコード: WEB色見本 原色大辞典
Googleフォント（ウェブフォント）
　 Google Fonts
画像圧縮ツール
　TinyJPG

研修メモ

覚書

2021年2月26日（金）

実技 WEBデザイン実習①

投稿者: 大淵 絵美 | 2021年2月26日0件のコメント

-本日のアジェンダ-

1限目
実技 WEBデザイン実習①
DWの機能

2限目
実技 WEBデザイン実習①
サイトの定義

3限目
実技 WEBデザイン実習①
課題制作

4限目
実技 WEBデザイン実習①
課題制作

5限目
実技 WEBデザイン実習①
課題制作

本日のテーマ

Dreamweaverを触ってみましょう

Adobe Dreamweaver

Adobe Dreamweaver（アドビ ドリームウィーバー）は、アドビシステムズが販売しているWebオーサリングツールです。旧称はMacromedia Dreamweaverであり、かつての開発会社はマクロメディアでした。高機能なWebオーサリングツールで、有償ツールの中では、最も有名なWEBオーサリングツールであり、デファクトスタンダードツールとして有名です。
※Webオーサリングツール＝いわゆるウェブページ作成ソフトのこと

メリット

ウェブサイトを作成するにあたって必要な下記ソフトの両方の機能が備わっていて、かつ高機能な為、効率的にコーディングができます。

  • テキストエディタ（Terapadなど）
  • FTPクライアント（FFFTPなど）

便利な機能

  • コードとデザインの分割
  • コードヒント
  • コメントの適用と削除
  • ソースフォーマット
  • インデント機能
  • リンクファイルとの連携
  • DOMパネル

サイト定義

Dreamweaver では、HTML ドキュメントおよびドキュメントに関連するイメージファイルや CSS ファイルなど、Web サイトを構成するすべての素材をひとつのフォルダにまとめて管理します。このすべてを含めたフォルダは “サイト” と呼ばれます。そして、Dreamweaver でこのフォルダの位置を指定することを “サイトを定義する” と表現します。

ローカルルートフォルダ
作業中のファイルを格納する、主にローカルコンピュータ上に配置されるフォルダです。Dreamweaver 上では、このフォルダを “ローカルサイト” として表示します。このフォルダはネットワークサーバ上に配置することもできます。

リモートフォルダ
通常、Web サーバが実行されているコンピュータ上に配置されるフォルダです。Dreamweaver 上では、このフォルダを “リモートサイト” として表示します。

研修メモ

覚書

2021年2月27日（土）

実技 WEBデザイン実習②

投稿者: 大淵 絵美 | 2021年2月27日0件のコメント

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
DOMについて

2限目
実技 WEBデザイン実習②
挿入について

3限目
実技 WEBデザイン実習②
課題制作

4限目
実技 WEBデザイン実習②
課題制作

5限目
実技 WEBデザイン実習②
課題制作

本日のテーマ

Dreamweaverでコーディングをしましょう

DOMパネル

HTML文書の構造がわかりやすい！

  • 複数をタグで囲う事ができる
  • タグを複製できる
  • id名、class名をつける事ができる
  • 要素名を変更できる

挿入パネル

HTMLの記述に便利です！

  • クリックでタグを挿入できる
  • 開始タグと終了タグをセットで記述できる
  • タグで囲う事ができる

CSSデザイナーパネル

CSSの記述に便利です！

  • スタイルシートの紐付けができる（ソース）
  • セレクタを追加できる
  • コードへ移動できる
  • CSSを追加・変更できる（プロパティ）

position

positionプロパティを使うと、場所を動かしたり固定したり重ねたりする事ができます。

  • position:static;・・・初期値（何も指定してないのと一緒。）
  • position:relative;・・・相対（本来いる場所からどの位動かすか。）
  • position:absolute;・・・絶対（画面の左上が基準。ただし親要素にrelativeを指定するとそこが基準になる。）
  • position:fixed;・・・固定（スクロールしても動かない。）
  • CSSのpositionを総まとめ！absoluteやfixedの使い方は？

positionで重ねてみましょう

▼HTML

<div class="wrap">
    <div class="area1">エリア１</div>
    <div class="area2">エリア２</div>
    <div class="area3">エリア３</div>
</div>
▼CSS

.wrap {
}
.area1 {
    background-color: yellow;
    width: 600px;
    height: 600px;
}
.area2 {
    background-color: pink;
    width: 300px;
    height: 300px;
}
.area3 {
    background-color: aqua;
    width: 150px;
    height: 150px;
}

ヘッダーやページトップボタンを固定してみましょう

Chromeの検証ツールを使って、見た目の変化をみましょう

position見本

z-index

z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

研修メモ

覚書

2021年3月1日（月）

実技 WEBデザイン実習③

投稿者: 大淵 絵美 | 2021年3月1日0件のコメント

-本日のアジェンダ-

1限目
実技 WEBデザイン実習③
CSSデザイナーパネルについて

2限目
実技 WEBデザイン実習③
CSSの記述

3限目
実技 WEBデザイン実習③
課題制作

4限目
実技 WEBデザイン実習③
課題制作

5限目
実技 WEBデザイン実習③
課題制作

本日のテーマ

DreamweaverでCSSを記述しましょう

CSSデザイナーパネル

CSSの記述に便利です！

  • スタイルシートの紐付けができる（ソース）
  • セレクタを追加できる
  • コードへ移動できる
  • CSSを追加・変更できる（プロパティ）
▼HTML

<div id="header-wrap">
    <header>
        <h1>ロゴ</h1>
        <ul>
            <li><a href="#">アイテム1</a></li>
            <li><a href="#">アイテム2</a></li>
            <li><a href="#">アイテム3</a></li>
            <li><a href="#">アイテム4</a></li>
            <li><a href="#">アイテム5</a></li>
        </ul>
    </header>
</div>
<div id="content-wrap">
    <main>新規 main タグの内容がここに入ります</main>
    <aside>新規 aside タグの内容がここに入ります</aside>
</div>
<footer><small>コピーライト</small></footer>
▼CSSデザイナーでセレクターを追加

#header-wrap {}
#header-wrap header {}
#header-wrap header h1 {}
#header-wrap header ul {}
#header-wrap header ul li {}
#header-wrap header ul li a {}
#content-wrap {}
#content-wrap main {}
#content-wrap aside {}
footer {}
footer small {}

おすすめCSSの記述の流れ

  • 横並びにする(flexboxでもfloatでも)
  • 背景色を指定
  • 幅を指定
  • 余白を指定
▼CSS 答え

/*リセットCSS*/
* {
    box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd {
    margin: 0;
}
ul, ol {
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
    vertical-align: bottom;
    border: none;
}
/*ここまでは変更しない*/
/*全体の指定*/
body {
    color: #333333;
    font-size: 16px;
    line-height: 1.7;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/*レイアウトの指定*/
#header-wrap {
    background: #eeeeee;
    padding: 30px 0;
    margin-bottom: 50px;
}
#header-wrap header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 960px;
    margin: 0 auto;
}
#header-wrap header h1 {
}
#header-wrap header ul {
    display: flex;
}
#header-wrap header ul li {
    margin-left: 30px;
}
#header-wrap header ul li a {
}
#content-wrap {
    display: flex;
    justify-content: space-between;
        width: 960px;
    margin: 0 auto 50px;
}
#content-wrap main {
    background-color: #cccccc;
    width: 700px;
    padding: 15px;
}
#content-wrap aside {
    background-color: #cccccc;
    width: 200px;
    padding: 15px;
}
footer {
    background: #000000;
    color: #ffffff;
    text-align: center;
}
footer small {
}

marginの相殺

ある条件下でmarginが効かない事があります。

研修メモ

覚書

2021年3月2日（火）

実技 WEBデザイン実習④

投稿者: 大淵 絵美 | 2021年3月2日0件のコメント

-本日のアジェンダ-

1限目
実技 WEBデザイン実習④
marginの相殺について

2限目
実技 WEBデザイン実習④
ファイルパネルについて

3限目
実技 WEBデザイン実習④
課題制作

4限目
実技 WEBデザイン実習④
課題制作

5限目
実技 WEBデザイン実習④
課題制作

本日のテーマ

DreamweaverでCSSを記述しましょう

marginの相殺

ある条件下でmarginが効かない事があります。

  • ケース1: 親と最初の子の上マージン
  • ケース2: 親と最後の子の下マージン
  • ケース3: 兄弟要素の下と上のマージン
  • ケース4: 空の要素

【回避方法】
①margin-topを使わない（縦方向はmargin-bottomのみを使う）
②paddingを使う

上下中央に配置

コンテンツを上下中央に配置するのは、左右中央よりとっても難しいです。
しかし、flexboxを使う事により、楽に指定ができます。

親要素に①display:flex;②align-items: center;を指定　→ 子要素が横並びになり、その上下が中央で揃う

viewportの記述

「viewport」とは、「表示領域」のことです。スマホでサイトを見ると、980pxに収まるように縮小されて表示されます。文字が小さく表示され読みにくいです。
下記のmetaソースを入れることによって、各デバイスの画面幅でサイトを表示できるようになります。

▼HTMLのhead内

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

viewportのあり・なしの違い

PC以外のデバイスで見てみてください。

なし（縮小されて全体が表示されます。）
http://deau0100.html.xdomain.jp/test-viewport/normal.html

あり（等倍で表示されます。）
http://deau0100.html.xdomain.jp/test-viewport/viewport.html

レスポンシブWebデザイン

PC、タブレット、スマートフォンなど、各画面幅に柔軟に対応して、どの画面サイズでも見やすいように表示することです。

可能な限り幅を%かvwで指定しましょう。

％・・・親要素を基準とした相対
vw・・・viewport width。画面幅を基準とした相対
pxではなく、相対単位にする事により、どんな画面幅にも対応できるようになります。

サイト幅をwidthからmax-widthに変更しましょう。

max-width:960px;は「最大値960px」の意味で、画面をどんなに大きくしても961px以上にはなりません。

demoの変更点

width:960px; → max-width:960px;
700px → 70%
220px  → 25%

ブレイクポイント

レスポンシブWebデザインでは、画面サイズのある地点を境目にデザインを切り替えます。その地点をブレイクポイントと呼びます。

サイトの作りによってブレイクポイントを決めましょう。ただし、ブラウザ間で誤差があるので余裕を持って大きい数値にしましょう。また、8の倍数にするのがおすすめです。（800px,560px,480pxなど）

メディアクエリ

ある画面幅の範囲で、通常とは異なるcssのスタイルを適用させる手法です。

【記述方法①】link要素として指定する場合
cssファイルを複数用意し、ある画面幅の時は異なるcssファイルを効かせる事ができます。

下記の例は画面幅が480px以下の時、style-sp.cssが適用されます。

▼HTML headの中

<link rel="stylesheet" href="style-sp.css" media="screen and (max-width:480px)">

【記述方法②】スタイルシートに指定する場合

１つのcssファイルに直接記述することもできます。

下記の例は画面幅1280px以下の時、bodyに別のスタイルが適用されます。

body{
	background:#ccc;
}
@media only screen and (max-width: 1280px){
	body {
		background:#999;
	}
}

レスポンシブWebデザイン見本

@media only screen and (max-width: 800px) {
    #content-wrap {
        flex-direction: column;
    }
}
@media only screen and (max-width: 800px) {
    #content-wrap main {
        width: 100%;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 800px) {
    #content-wrap aside {
        width: 100%;
    }
}
@media only screen and (max-width: 800px) {
    #header-wrap header {
        flex-direction: column;
    }
}


@media only screen and (max-width: 800px) {
	#header-wrap header ul {
		flex-wrap: wrap;
	}
	
}


@media only screen and (max-width: 800px) {
	#header-wrap header ul li {
		width: 31.333%;
		margin-left: 0;
		background:red;
		text-align: center;
		margin: 1%;
		border-radius: 5px;
	}
}
@media only screen and (max-width: 800px) {
    #content-wrap main {
        width: 90%;
		margin: 0 auto;
        margin-bottom: 30px;
		padding: 5%;
    }
}


@media only screen and (max-width: 800px) {
    #content-wrap aside {
         width: 90%;
		margin: 0 auto;
		padding: 5%;
    }
}

研修メモ

覚書

  • PC版のサイト間製版提出期限（ZIP）

2021年3月3日（水）

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

投稿者: 大淵 絵美 | 2021年3月3日0件のコメント

-本日のアジェンダ-

1限目
実技　スマートフォンサイト作成実習①
スマホラフについて

2限目
実技　スマートフォンサイト作成実習①
Retinaディスプレイについて

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

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

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

本日のテーマ

スマホ対応しましょう

オリジナルサイトをレスポンシブにする手順

①viewportをheadに記述

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

②可能な限り幅を%かvwで指定しましょう。
例）サイト幅 width:960px; → max-width:960px;
　横並びのmainとasideの幅を70%と25%に指定

③CSS内にメディアクエリを記述
下記の場合は、ブレイクポイントを800pxとしました。
画面幅が800px以下の時、headerの中の子要素(h1とul)が縦並びになります。

#header-wrap header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
}
    @media (max-width: 800px) {
        #header-wrap header {
            flex-direction: column;
            }
}

新たなプロパティを記述　→ スタイルが追加されます。
同じプロパティを記述　→スタイルが上書きされます。
プロパティを記述しない　→スタイルが継承されます。

レスポンシブWebデザイン見本

マルチデバイス問題

【問題その１】画面幅1200px未満の時スクロールバーが出ない、かつ幅80%となるようにしてください。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<title>クイズその１</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main {
    background: #cccccc;
    width: 1200px;
    margin: 0 auto;
    padding: 15px;
}
</style>
</head>
<body>
<main> このエリアはメインです。<br>
    幅1200pxに指定しています。<br>
    このままだと画面幅が1200px(厳密には1200px＋スクロールバー20px)未満の時
    スクロールバーが出てしまいます。<br><br>
    画面幅1200px未満の時スクロールバーが出ない、かつ幅80%となるようにしてください。<br>
    だだし、メディアクエリを使わずに指定してください。<br>
    ヒント:max-
</main>
</body>
</html>
▼答えのcss

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main {
    background: #cccccc;
	max-width: 1200px;
	width: 80%;
    margin: 0 auto;
    padding: 15px;
}

【問題その２】画面幅960px以下の時、3列×2になるようにしてください。
さらに560px以下の時、横いっぱいの縦並びになるようにしてください。
@mediaを２つ書きます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<title>クイズその2</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
p {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 0;
}
ul {
    overflow: hidden;
    list-style: none;
    width: 960px;
    margin: 0 auto;
}
ul li {
    float: left;
    width: 14.666%;
    margin: 0 1% 2%;
    padding: 10px 0;
    background: #cccccc;
    text-align: center;
    border-radius: 10px;
}
</style>
</head>
<body>
<p>下記のリストはfloatで横並びになっています。<br>
    画面幅960px以下の時、3列×2になるようにしてください。<br>
    【ヒント1】max-指定。liの幅の再指定。<br>
    さらに560px以下の時、横いっぱいの縦並びになるようにしてください。<br>
    【ヒント2】liの幅の再指定。左右の余白を0に。 </p>
<ul>
    <li>ナビゲーション1</li>
    <li>ナビゲーション2</li>
    <li>ナビゲーション3</li>
    <li>ナビゲーション4</li>
    <li>ナビゲーション5</li>
    <li>ナビゲーション6</li>
</ul>
</body>
</html>
▼答えのcss

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
p {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 0;
}
ul {
    overflow: hidden;
    list-style: none;
    max-width: 960px;
    margin: 0 auto;
}
ul li {
    float: left;
    width: 14.666%;
    margin: 0 1% 2%;
    padding: 10px 0;
    background: #cccccc;
    text-align: center;
    border-radius: 10px;
}
@media (max-width: 960px) {
ul li {
          width: 31.333%;
            }
}
@media (max-width: 560px) {
	ul li {
          width: 100%;
		margin: 0 0 2%;
            }
}
	}

各デバイスの画面サイズ

端末ポイントRetinaピクセル
iPhone X
iPhone XS
iPhone 11 Pro		375×81231125×2436
iPhone XR
iPhone 11		414×8962828×1792
iPhone 12
iPhone 12 Pro		390×84431170×2532
iPhone XS Max
iPhone 11 Pro Max		414×89631242×2688
iPhone 12 Pro Max428×92631284×2778

Photoshopの画像の書き出し（retina）

スマホラフの2倍で画像を書き出しましょう！この時、スマートオブジェクト化していないとボケてしまいます。

※最新機種を考えると３倍としたいところですが、表示スピードなど加味すると現段階では２倍でOKとします。

研修メモ

覚書

  • スマホ版のデザインカンプをjpgで提出

2021年3月4日（木）

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

投稿者: 大淵 絵美 | 2021年3月4日0件のコメント

-本日のアジェンダ-

1限目
実技　スマートフォンサイト作成実習②
ページのソースを表示

2限目
実技　スマートフォンサイト作成実習②
ハンバーガーメニューについて

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

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

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

本日のテーマ

他サイトを参考にしましょう

WEB制作では、他サイトからソースを参考にさせて頂くことがよくあります。
※ソースを参考にすることであり、全く同じ見た目で「パクる」とは違います。

google chromeでのソースの見方

  • 右クリック＞検証
  • 右クリック＞別名で保存
  • 右クリック＞ページのソースを表示

下記のページのソースを参考にハンバーガーメニューを作って見ましょう。

CSSでハンバーガーメニュー（ナビゲーションドロワー）の見本

ハンバーガーメニューの解説

メニュー(#global-menu)は、通常見えていて、画面幅960px以下で非表示になります。

#global-menu{
    display:block;
}
@media only screen and (max-width: 960px){
	#global-menu{
		display:none;
	}
}

メニュー(#nav-drawer)は、通常非表示で、画面幅960px以下で表示されます。

#nav-drawer{
    display:none;
}
@media only screen and (max-width: 960px){
	#nav-drawer{
		display:block;
	}
}

研修メモ

覚書

  • レスポンシブ対応版の途中経過提出（ZIP）

2021年3月5日（金）

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

投稿者: admin | 2021年3月5日0件のコメント

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習③
コーダーについて

2限目
実技 スマートフォンサイト作成実習③
コーディングの実践デモンストレーション

3限目
実技 スマートフォンサイト作成実習③
コーディングの実践デモンストレーション

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

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

本日のテーマ

コーダーという職業について

コーダーとは、WebデザイナーがデザインしたWebサイトを実際にインターネット上で見ることができるように、HTMLやCSS、JavaScriptといった言語を使用してコーディングする仕事です。

参考サイト

研修メモ

覚書

2021年3月8日（月）

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

投稿者: admin | 2021年3月8日0件のコメント

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習④
成績考査（Webサイト制作）

2限目
実技 スマートフォンサイト作成実習④
成績考査（Webサイト制作）

3限目
実技 スマートフォンサイト作成実習④
成績考査（デバックについて）

4限目
実技 スマートフォンサイト作成実習④
成績考査（補講）

5限目
実技 スマートフォンサイト作成実習④
成績考査（補講）

本日のテーマ

納品

Webサイト納品の注意点

  1. 各種デバイスでの検証を行いましょう。
  2. タグチェッカーでの検証を行いましょう。
  3. 必要に応じてテストページで納品しましょう。
  4. 必要に応じてパスワードの設定をしましょう。
  5. 修正対応に強いデータにしておきましょう。

参考サイト

研修メモ

覚書

2021年3月9日（火）

学科 SNS運用基礎

投稿者: 大淵 絵美 | 2021年3月9日0件のコメント

-本日のアジェンダ-

1限目
学科 SNS運用基礎
SNS運用について

2限目
学科 SNS運用基礎
SNS運用について

3限目
学科 SNS運用基礎
課題制作 

4限目
学科 SNS運用基礎
課題制作

5限目
学科 SNS運用基礎
課題制作

本日のテーマ

SNSの実態を知り、活用しましょう。

SNS とは?

SNSとは、Social Networking Service（ソーシャル・ネットワーキング・サービス）の略で、インターネットを介して人間関係を構築できるスマホ・パソコン用のサービスの総称です。

SNSの歴史と動向

SNSの最新ユーザー数

予想してみましょう！

https://www.youtube.com/watch?v=Yh1XSxQGybA

企業向けアカウント

WEBサービスに置いて、SNSは広報・宣伝・顧客とのコミュニケーションの手段です。
SNSで発信することで、利益に上手く繋げましょう。

企業向けアカウント備考
LINE8,600万LINE公式アカウント
（旧 LINE@）		公式の証明のアカウントバッジ
Twitter4,500万なし個人・企業の区別なし
Instagram3,300万プロアカウントクリエイターorビジネスに切り替え
認証バッジの申請が可能
Facebook2,600万Facebookページ個人用アカウントで管理

タイムラインの埋め込み

研修メモ

覚書

2021年3月10日（水）

学科 WEB動画基礎

投稿者: 大淵 絵美 | 2021年3月10日0件のコメント

-本日のアジェンダ-

1限目
学科 WEB動画基礎
WEB動画について

2限目
学科 WEB動画基礎
WEB動画について

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

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

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

本日のテーマ

「動画」の利用法と活用法

YouTubeにつて

YouTube （ ユーチューブ ） は、アメリカ合衆国・カリフォルニア州サンブルーノに本社を置く世界最大の動画共有サービス。Youは「あなた」、Tubeは「ブラウン管（テレビ）」という意味である。

videoとiframeタグ

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

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

<video src="sample.mp4"></video>
<video>
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
<video>タグの属性
「controls」「loop」「autoplay」「width」「height」を指定してみましょう。

記述例＞
<video controls loop autoplay width="500px" height="300px">

②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></iframe>

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

SNSの埋め込み方

研修メモ

覚書

2021年3月11日（木）

学科 JavaScript基礎

投稿者: 大淵 絵美 | 2021年3月11日0件のコメント

-本日のアジェンダ-

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

2限目
学科 JavaScript基礎
ドロップダウンメニューについて

3限目
学科 JavaScript基礎
作品制作

4限目
学科 JavaScript基礎
作品制作

5限目
学科 JavaScript基礎
作品制作

本日のテーマ

JavaScript (JQuery) とは

JavaScript とは？

JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。
利用される場面はWebサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで多岐にわたっている。
Javaと似た名称を持つが、異なるプログラミング言語である

https://ja.wikipedia.org/wiki/JavaScript

簡単に言うと、
◆HTMLで土台を作る
◆CSSでレイアウトや飾りをつける
◆JavaScriptで動きをつける。

jQuery とは？

ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。ロゴの下に表記されているキャッチコピーは「write less, do more」（「少ない記述で、もっと多くのことをする」の意）。

https://ja.wikipedia.org/wiki/JQuery

jQueryとは、「JavaScriptのライブラリ」です。JavaScriptを扱いやすくしてくれます。
JavaScriptは生の魚、jQueryは調理しやすいように捌いた魚。すぐに実装できるように用意してくれてます！

ドロップダウンメニューを作ってみましょう。

jQueryを使って作る方法です。jQueryを使わないと、記述が長くなり、動作の変更の際も知識が必要となり難しいです。

STEP.1 HTMLを書く

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">ファイル</a>
<ul>
<li><a href="#">新規</a></li>
<li><a href="#">編集</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">最新</a></li>
<li><a href="#">過去</a></li>
<li><a href="#">Top5</a></li>
</ul>
</li>
</ul>
<div class="content">
<p>メニュー部分へマウスを移動するとサイドメニューがドロップダウンメニューとして表示されます。</p>
</div>

STEP.2 CSSを書く

.nav {
overflow: hidden;
width: 600px;
margin: 0 auto;
padding: 0;
display: flex;
}
.nav li {
list-style: none;
}
.nav li a {
display: block;
width: 200px;
height: 40px;
text-align: center;
color: #fff;
font-size: 14px;
line-height: 2.8;
background: #51ff00;
text-decoration: none;
border-right: 1px solid #eee;
box-sizing: border-box;
}
.nav > li:hover > a {
color: brown;
}
.nav li ul {
width: 200px;
display: none;
margin-left: -40px;
position: absolute;
}
.nav > li li:hover > a {
color: gray;
}
.nav li ul li a {
border-top: 1px solid #eee;
}
.content {
width: 600px;
height: 150px;
background: #eee;
margin: 0 auto;
padding: 10px;
text-align: left;
box-sizing: border-box;
}

STEP.3 headでjqueryを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

STEP.4 bodyの中の一番下にjavascriptを書く

<script>
$(function() {
var nav = $('.nav');
$('li', nav)
.mouseover(function(e) {
$('ul', this).stop().slideDown('fast');
})
.mouseout(function(e) {
$('ul', this).stop().slideUp('fast');
});
});
</script>

jQueryを使わないで同じような動きを指定するには、下記サイトの手順を踏まなければなりません。

jQueryを使った方が、わかりやすいですね！

外部ファイルに記述してみましょう

STEP.1 新規ファイルに<script>〜</script>の中だけコピペ、○○○.jsで保存

STEP.2 下記のソースで読み込む

<script src="○○○.js"></script>

研修メモ

覚書

2021年3月12日（金）

実技　JavaScript（jQuery）実習①

投稿者: 大淵 絵美 | 2021年3月12日0件のコメント

-本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習①
jQueryのプラグイン

2限目
実技　JavaScript（jQuery）実習①
JavaScriptのアレンジ

3限目
実技　JavaScript（jQuery）実習①
作品制作

4限目
実技　JavaScript（jQuery）実習①
作品制作

5限目
実技　JavaScript（jQuery）実習①
作品制作

本日のテーマ

スライドショーを作成してみましょう

jQueryを使ったスライドショーはたくさん配布されています。その中でも今回は人気の「slick」と言うプラグインを実装します。

【配布元】※英語

【解説サイト】※日本語

解説サイトは、記述が省略されていたり、古い情報のままの場合があり、解説通りに記述しても上手くいかない場合があります。
それを念頭に、なるべく新しい記事を参考にする、複数の解説サイトを読むようにしましょう。

STEP.1 配布元からダウンロード

get it now > Download Now をクリックして「slick-1.8.1」をダウンロード

STEP2. slickフォルダをコピペ

「slick」フォルダには実装に必要ないものまで入っていますが、今回は全てコピーしましょう。

STEP3. HTMLのheadのstyle.cssのリンクの後に記述

<link href="slick/slick-theme.css" rel="stylesheet" type="text/css">
<link href="slick/slick.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

slick.jsとslick.min.jsは同じもので、slick.min.jsは圧縮版（minified）でファイルの容量を限りなく小さくして読み込み時間を高速化しています。
私たちは、JavaScriptの本体の記述を変えることはしないので、min.jsの方をリンクさせましょう。

STEP4. HTMLを記述

<ul class="slider">
    <li><a href="#"><img src="http://deau-b.spawn.jp/wp-content/uploads/2021/01/6173_s.jpg" alt="image01"></a></li>
    <li><a href="#"><img src="http://deau-b.spawn.jp/wp-content/uploads/2021/01/72148_s.jpg" alt="image02"></a></li>
    <li><a href="#"><img src="http://deau-b.spawn.jp/wp-content/uploads/2021/01/346401_s.jpg" alt="image03"></a></li>
    <li><a href="#"><img src="http://deau-b.spawn.jp/wp-content/uploads/2021/01/372256_s.jpg" alt="image04"></a></li>
</ul>

STEP5. JavaScriptを記述

<script>
$('.slider').slick({
    autoplay:true,
    autoplaySpeed:1000,
    });
</script>

上手くできない場合は、パスの書き方、記述場所に誤りがないか確認してください。
上手くできたら、これを元にアレンジして行きましょう！

STEP.6 slick-theme.cssの最後に見た目を整える為のcssを記述

ulの隙間をリセット。(style.cssにリセットcssが入ってる場合は不要)
スライダーの幅を画面の80%に。
矢印のアイコンをデフォルトが白なので黒に変更。

/*ここから追加*/

ul {
    padding: 0;
}
.slider{
    margin: 0 auto;
    width: 80%;
}
.slider img{
    height: auto;
    width: 100%;
}
.slick-prev:before,
.slick-next:before {
    color: #000;
}

注意点1. CDNについて

注意点2. httpsの省略について

パスを書く時オンラインだと、下記のようにhttps: または http: を省略することができます。ローカルでの構築段階では、省略すると動きませんので、https:を付けておきましょう。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

オプションを書きましょう(script)

{}の中にプロパティと値を書きます。
セレクタ:値,
例>autoplay:true,

.sliderの部分はHTMLのclass名またはid名と合わせましょう。

<script>
$('.slider').slick({

    });
</script>

矢印をカスタマイズ

prevArrow: '<button type=”button” class=”slick-prev”>Previous</button>',
nextArrow: '<button type=”button” class=”slick-next”>Next</button>',

矢印を画像にしてデザインを整えた例

画像を作成し、imagesフォルダに保存

オプションにimgタグで画像のパスを記述

  prevArrow: '<img src="images/arrow-pre.png" class="slide-arrow prev-arrow">',
  nextArrow: '<img src="images/arrow-next.png" class="slide-arrow next-arrow">',

slick-theme.cssの一番下に記述

.slide-arrow{
    position: absolute;
    top: 50%;
    margin-top: -50px; /*画像の高さの半分*/
    z-index:999999; /*ボタンを最前面へ*/
}
.prev-arrow{
    left: 0;
}
.next-arrow{
    right: 0;
}
img.prev-arrow,img.next-arrow{
    width: 50px;
    opacity:0.5;
}
img.prev-arrow:hover,img.next-arrow:hover{
    opacity:1.0;
}

研修メモ

覚書

2021年3月13日（土）

実技　JavaScript（jQuery）実習②

投稿者: admin | 2021年3月13日0件のコメント

-本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習②
クライアントサイドスクリプトについて

2限目
実技　JavaScript（jQuery）実習②
HTML・CSS・ JavaScript について

3限目
実技　JavaScript（jQuery）実習②
プログラムの権利について

4限目
実技　JavaScript（jQuery）実習②
作品制作

5限目
実技　JavaScript（jQuery）実習②
作品制作

本日のテーマ

Webデザイナーの業務について

言語について

HTMLとは？

HyperText Markup Language（HTML）
ハイパーテキスト マークアップ ランゲージ
拡張子は「.html」

HyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web において、ウェブページを表現するために用いられる。 ウィキペディア

参考サイト

XHTMLとHTML4.01について

XHTMLとは？

xhtmlはxmlというマークアップ言語から生まれた言語です。htmlとの融合と書きましたが、xmlの言語にhtmlの特徴をプラスしたといった方が近いでしょう。html言語はブラウザが解釈できれば、書き方が多少曖昧でも表示できます。しかしxmlはしっかりとルールどおりに記述しないと、表示ができないといった特徴があります。
xhtmlはxmlの「きちんと記述しないと表示できない」というルールをhtmlの記述に適用し、より言語としての定義をきっちりとしたものにした言語です。

HTML4.01とは？

HTML 4.01 とは、HTML5 が西暦2014年(平成26年)に勧告されるまで在来 HTML (XHTML でない HTML)として現行規格だった規格です。
初の XHTML となった XHTML 1.0
平成27年11月12日現在も HTML としては唯一の国際規格となっている ISO-HTML (ISO/IEC 15445:2000)
の元にもなっております。
HTML 4.01 は、西暦1997年(平成 9年)12月18日に HTML 4.0 として勧告された規格を西暦1999年(平成11年)12月24日に改訂したものです。
その後、長きに亘り規格として存在していましたが、平成30年 3月27日に正式に置換済(実質的には廃止)となりました。
このため、平成30年 3月27日以降はどの文書型であれ新規に HTML 4.01 文書を作成すべきではないと言う事になりました。

参考サイト

CSSとは？

Cascading Style Sheets（CSS）
カスケーディング・スタイル・シート
拡張子は「.css」

Cascading Style Sheetsとは、HTML や XML の要素をどのように修飾するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 ウィキペディア

参考サイト

CSS3とCSSの違いについて

CSS3はHTMLやXMLなどのWebページを装飾するCSSの仕様の一つです。CSSはWebページのデザインを施すスタイルシート言語で、次のように三つのレベルの仕様に分かれています。

参考サイト

javascriptとは？

JavaScript
ジャバスクリプト
拡張子「.js」

JavaScriptとは、プログラミング言語のひとつである。Javaと名前が似ているが、全く異なるプログラミング言語である。 JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。 ウィキペディア

参考サイト

ファイルの作成方法について

  1. テキストエディタ（TeraPad等※Macなら「テキストエディット 」等）を起動する
  2. ファイルの保存の時に拡張子を「.html」や「.css」や「.js」にする
  3. 文字コードを「UTF-8」（場合により違う文字コード）にする
  4. 再び保存
  5. ブラウザで確認

参考サイト

扱える言語の記載について

「職務経歴書」や「ポートフォリオ」に掲載する扱える言語については、応募する企業にあわせて、解りやすく記載しておきましょう。

参考サイト

研修メモ

覚書

2021年3月15日（月）

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

投稿者: mitsu | 2021年3月15日0件のコメント

-本日のアジェンダ-

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

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

3限目
学科 サーバーサイドプログラム基礎
作品制作

4限目
学科 サーバーサイドプログラム基礎
作品制作

5限目
学科 サーバーサイドプログラム基礎
作品制作

本日のテーマ

フォームを作成してみましょう

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。
これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。
何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。
Webサーバは必須ではありません。
これは、Webブラウザ内でプログラムが実行されるためです。
このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

必要な知識として

合わせて（更に上級編）

それを整理すると

  • 1.まずプログラムが動くサーバーを用意
  • 2.PHPやCGIのプログラムファイルを用意
  • 3.HTML・CSS （JavaScriptで動作） でデザインをカスタマイズする

参考サイト

WordPressとは

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

参考サイト

インストールしてみましょう。

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

研修メモ

覚書

2021年3月16日（火）

学科 PHP基礎

投稿者: mitsu | 2021年3月16日0件のコメント

-本日のアジェンダ-

1限目
学科 PHP基礎
学習環境の構築について

2限目
学科 PHP基礎
WordPressとPHP

3限目
学科 PHP基礎
WordPressとPHP

4限目
学科 PHP基礎
作品制作

5限目
学科 PHP基礎
作品制作

本日のテーマ

今日は雰囲気を理解してもらえればOK！

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。
これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。
何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。
Webサーバは必須ではありません。
これは、Webブラウザ内でプログラムが実行されるためです。
このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

必要な知識として

合わせて（更に上級編）

それを整理すると

  • 1.まずプログラムが動くサーバーを用意
  • 2.PHPやCGIのプログラムファイルを用意
  • 3.HTML・CSS （JavaScriptで動作） でデザインをカスタマイズする

参考サイト

WordPressとは

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

参考サイト

インストールしてみましょう。

学習環境のための参考サイト

研修メモ

覚書

2021年3月17日（水）

実技 CMS構築実習①

投稿者: mitsu | 2021年3月17日0件のコメント

-本日のアジェンダ-

1限目
実技 CMS構築実習①
XFREEでのWordPress環境構築

2限目
実技 CMS構築実習①
WordPress データの引越し

3限目
実技 CMS構築実習①
WordPress データの引越し

4限目
実技 CMS構築実習①
作品制作

5限目
実技 CMS構築実習①
作品制作

本日のテーマ

新しいWordPressの環境にデータを引越ししよう

WordPressについて

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

インストールしてみましょう。

学習環境のための参考サイト

WordPressの引越し

WordPressサイトはどうやって引っ越しする？移行方法を解説
※『WordPress　移行』等で検索

参考サイト

WordPress Codex 日本語版
【テーマ自作】WordPress オリジナルテーマの作り方と基本

研修メモ

覚書

2021年3月19日（金）

実技 CMS構築実習②

投稿者: mitsu | 2021年3月19日0件のコメント

-本日のアジェンダ-

1限目
実技 CMS構築実習②
WordPressの引越し

2限目
実技 CMS構築実習②
WordPressのテーマとテンプレートタグ

3限目
実技 CMS構築実習②
If構文とwhile構文

4限目
実技 CMS構築実習②
作品制作

5限目
実技 CMS構築実習②
作品制作

本日のテーマ

HTML/CSSをWordPressのテーマにしてみましょう

WordPressについて

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

インストールしてみましょう。

学習環境のための参考サイト

WordPressの引越し

WordPressサイトはどうやって引っ越しする？移行方法を解説
※『WordPress　移行』等で検索

参考サイト

WordPress Codex 日本語版
【テーマ自作】WordPress オリジナルテーマの作り方と基本

研修メモ

覚書

2021年3月20日（土）

職業人講話①

投稿者: admin | 2021年3月20日0件のコメント

-本日のアジェンダ-

1限目
職業人講話①
業界のお話について

2限目
職業人講話①
業界のお話について

3限目
職業人講話①
業界のお話について

4限目
職業人講話①
業界のお話について

5限目
職業人講話①
業界のお話について

ザクロバッカについて

ZAQRO-BACCA合同会社はサービス企業です。
私たちは怠慢になることをせず、常にお客様の事を考え顧客満足度を高めます。
プロ意識を持って、考え、行動し自己管理の下にお客様と共に成長していきます。

サイトURL

研修メモ

覚書

2021年3月22日（月）

学科 WEBマーケティング基礎

投稿者: mitsu | 2021年3月22日0件のコメント

-本日のアジェンダ-

1限目
学科 WEBマーケティング基礎
Googleアナリティクスについて

2限目
学科 WEBマーケティング基礎
Googleアナリティクスについて

3限目
学科 WEBマーケティング基礎
作品制作

4限目
学科 WEBマーケティング基礎
作品制作

5限目
学科 WEBマーケティング基礎
作品制作

本日のテーマ

アナリティクスについて

Googleアナリティクス

Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービス。 元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している。

Googleウェブマスターツール(
Google Search Console )について

研修メモ

覚書

2021年3月23日（火）

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

-本日のアジェンダ-

1限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

2限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

3限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

4限目
実技　ポートフォリオ作成実習
作品制作

5限目
実技　ポートフォリオ作成実習
作品制作

本日のテーマ

紙ポートフォリオを作成しましょう

紙ポートフォリオの必要性

  • 面接時は紙ポートフォリオが有用（迅速な対応が可能／面接担当者のデジタルリテラシーに非依存）
  • 掲載内容を相手に合わせて調整できる
  • 迫力がある（フライヤーや名刺などの紙媒体を現物に近い形で提示可能）

参考サイト

ポートフォリオの記載事項

  • 表紙
  • 目次
  • 自己紹介（氏名、生年月日、顔写真、経歴、保有資格、強みなど）
  • 保有スキル（業務スキルやスキルレベルも記載）
  • 作品（必要に応じて中扉／作品の説明やアピールポイントを記載）
  • 裏表紙

紙ポートフォリオの作成手順

  1. ポートフォリオ構成を決定
  2. 掲載する制作物を整理（必要に応じてカラー設定をCMYK、解像度を300～350ppiに変更）
  3. ページ割りを決定（見開きにする時は左右を意識）
  4. 表紙とページのラフデザインを決定
  5. ページデザインの作成
  6. 表紙、目次、中扉、裏表紙の作成

参考サイト

注意事項

  • 媒体型式：製本するかポケットファイルにするか（自作、ネット、店舗（キンコーズなど））
  • 大きさとページ数：A4で15～25ページ程度（背景色を付ける時はB4にトンボ付きで作成しカット）
  • 紙媒体：厚めの上質紙かコート紙

ワンポイント

サイトのファーストビューが見えるようにPCやスマホの画面キャプチャを入れるのが良いですが、よりデザイン性を高めるため機器のデバイスイメージにはめ込みをするのがお勧めです。（下記のサイトからのダウンロードは容量が大きいので自宅で実施してください／必要な人はUSBメモリで提供します）

研修メモ

覚書

  • デバイスイメージ活用例紹介
  • 大浜と橋本さんの紙ポートフォリオ紹介

2021年3月24日（水）

実技 デザイン総合制作実習①

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ①
HTML/CSS Tipsについて

2限目
実技　デザイン総合制作実習 ①
HTML/CSS Tipsについて

3限目
実技　デザイン総合制作実習 ①
ポートフォリオ制作

4限目
実技　デザイン総合制作実習 ①
ポートフォリオ制作

5限目
実技　デザイン総合制作実習 ①
ポートフォリオ制作

本日のテーマ

ポートフォリオの作成を進めましょう
（HTML/CSSのTipsを確認しましょう）

本日は、HTML/CSSのTipsを説明します。
DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210324.zip」をダウンロードしてください。
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。

満山先生からの連絡事項

カテゴリーページにてタイトルに『カテゴリー：』と出力されてしまう件（椋本さん）

アコーディオンメニュー実装の件（瀬戸口さん）

研修メモ

覚書

::afterと:afterの違い

注意事項

  • 本日の資料（PDF）の画像トリミングの例で縦方向のサイズに誤り有り（20px→200px）
  • HTMLの対象物を捜すボタン（スマホサイズボタンは大丈夫）

2021年3月25日（木）

実技 デザイン総合制作実習②

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ②
補足： WordPressのパーツファイルについて

2限目
実技　デザイン総合制作実習 ②
補足： WordPressのパーツファイルについて

3限目
実技　デザイン総合制作実習 ②
ポートフォリオ制作

4限目
実技　デザイン総合制作実習 ②
ポートフォリオ制作

5限目
実技　デザイン総合制作実習 ②
ポートフォリオ制作

本日のテーマ

ポートフォリオの作成を進めましょう
（レンタルサーバーの仕様を確認しましょう）

本日は、レンタルサーバーの仕様を確認してみましょう。

レンタルサーバー比較

3月14日現在（キャンペーン情報を含みますので申し込み時は確認願います）

名称Xfreeスターサーバー（フリープラン）XREA Free
URLhttps://www.xfree.ne.jp/https://www.star.ne.jp/free/https://www.xrea.com/
運営会社エックスサーバー株式会社ネットオウル株式会社GMOデジロック株式会社
費用無料無料無料
ディスク容量2GB2GB1GB
独自ドメイン5個1個10個
独自SSL不可不可可
メールアカウントなしなし100個
広告表示PC：なし
タブレット/スマホ：有り		PC：なし
タブレット/スマホ：有り		あり
その他
名称XserverスターサーバーXREA PlusLOLIPOP
URLhttps://www.xserver.ne.jp/https://www.star.ne.jp/https://www.xrea.com/https://lolipop.jp/
運営会社エックスサーバー株式会社ネットオウル株式会社GMOデジロック株式会社GMOペパボ株式会社
費用900円～/月200円～/月191円～/月275円～/月
ディスク容量300GB50GB100GB100GB
独自ドメイン無制限50個64個100個
独自SSL無料無料無料無料
メールアカウント無制限500個100個無制限
広告表示なしなしなしなし
その他ドメイン無料
初期費用無料		ドメイン無料
初期費用無料		ドメイン無料
初期費用無料

参考サイト

プラン比較

JavaScript訓練の教材先行提供について

JavaScriptを理解するための教材を先行提供します。
内容を確認して頂いて質問がある場合は訓練当日に説明します。
DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210325.zip」をダウンロードしてください。
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。
以下の4つの教材が格納されています。

  • timer：キッチンタイマー
  • bingo：ビンゴマシーン
  • puyopuyo：ぷよぷよゲーム

キッチンタイマーとビンゴマシーンは自作なので自由に使用して頂いて問題ありません。
ぷよぷよゲームについてはJavaScriptの勉強用に提供されているものです。
使用にあたっては以下のサイトを確認してください。

研修メモ

資料

・アジェンダが間違っている！

2021年3月26日（金）

実技　デザイン総合制作実習 ③

投稿者: admin | 2021年3月26日0件のコメント

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ③
就職に向けてのお話

2限目
実技　デザイン総合制作実習 ③
ポートフォリオ制作

3限目
実技　デザイン総合制作実習 ③
ポートフォリオ制作

4限目
実技　デザイン総合制作実習 ③
ポートフォリオ制作

5限目
実技　デザイン総合制作実習 ③
ポートフォリオ制作

本日のテーマ

仕事を取るにはその1「市場調査をしましょう」

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年3月29日（月）

実技　デザイン総合制作実習 ④

投稿者: mitsu | 2021年3月29日0件のコメント

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習 ④
就職に向けてのお話

2限目
実技　デザイン総合制作実習 ④
ポートフォリオ制作

3限目
実技　デザイン総合制作実習 ④
ポートフォリオ制作

4限目
実技　デザイン総合制作実習 ④
ポートフォリオ制作

5限目
実技　デザイン総合制作実習 ④
ポートフォリオ制作

本日のテーマ

仕事を取るにはその1「市場調査をしましょう」

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年3月30日（火）

実技　デザイン総合制作実習⑤

投稿者: admin | 2021年3月30日0件のコメント

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑤
就職に向けてのお話

2限目
実技　デザイン総合制作実習⑤
修了制作

3限目
実技　デザイン総合制作実習⑤
修了制作

4限目
実技　デザイン総合制作実習⑤
修了制作

5限目
実技　デザイン総合制作実習⑤
修了制作

本日のテーマ

仕事のやり取りとタイミング

決算について

決算とは、一定期間の収入・支出を計算し、利益又は損失を算出すること。一般的には予算の対義語であるが、財政学では予算過程の一つとして捉えられる。 ウィキペディア

就職活動と決算時期について

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年3月31日（水）

実技　デザイン総合制作実習⑥

投稿者: admin | 2021年3月31日0件のコメント

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑥
就職に向けてのお話

2限目
実技　デザイン総合制作実習⑥
修了制作

3限目
実技　デザイン総合制作実習⑥
修了制作

4限目
実技　デザイン総合制作実習⑥
修了制作

5限目
実技　デザイン総合制作実習⑥
修了制作

本日のテーマ

仕事のやり取りとタイミング

決算について

決算とは、一定期間の収入・支出を計算し、利益又は損失を算出すること。一般的には予算の対義語であるが、財政学では予算過程の一つとして捉えられる。 ウィキペディア

就職活動と決算時期について

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年4月1日（木）

実技　デザイン総合制作実習⑦

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑦
Webアプリの作成方法を理解しましょう

2限目
実技　デザイン総合制作実習⑦
Webアプリの作成方法を理解しましょう

3限目
実技　デザイン総合制作実習⑦
修了制作

4限目
実技　デザイン総合制作実習⑦
修了制作

5限目
実技　デザイン総合制作実習⑦
修了制作

本日のテーマ

修了制作を進めましょう
（Webアプリ（JavaScript）の作成方法を理解しましょう（その1））

Webアプリ（JavaScript）訓練の教材について

DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210401.zip」をダウンロードしてください。
（3月25日に提供した教材に音を鳴らす部分を修正を加えてあります）
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。
以下の3つの教材が格納されています。

  • timer：キッチンタイマー
  • bingo：ビンゴマシーン
  • puyopuyo：ぷよぷよゲーム

キッチンタイマーとビンゴマシーンは自作なので自由に使用して頂いて問題ありません。
ぷよぷよゲームについてはJavaScriptの勉強用に提供されているものです。
使用にあたっては以下のサイトを確認してください。

研修メモ

覚書

2021年4月3日（土）

実技　デザイン総合制作実習⑧

投稿者: admin | 2021年4月3日0件のコメント

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑧
就職に向けてのお話

2限目
実技　デザイン総合制作実習⑧
修了制作

3限目
実技　デザイン総合制作実習⑧
修了制作

4限目
実技　デザイン総合制作実習⑧
修了制作

5限目
実技　デザイン総合制作実習⑧
修了制作

本日のテーマ

お仕事への準備

Webデザイナーという仕事に向けて、出来る事としっかりした準備を整えていきましょう。

参考サイト

決算について

決算とは、一定期間の収入・支出を計算し、利益又は損失を算出すること。一般的には予算の対義語であるが、財政学では予算過程の一つとして捉えられる。 ウィキペディア

就職活動と決算時期について

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年4月5日（月）

実技　デザイン総合制作実習⑨

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑨
Webアプリの作成方法を理解しましょう

2限目
実技　デザイン総合制作実習⑨
Webアプリの作成方法を理解しましょう

3限目
実技　デザイン総合制作実習⑨
修了制作

4限目
実技　デザイン総合制作実習⑨
修了制作

5限目
実技　デザイン総合制作実習⑨
修了制作

本日のテーマ

修了制作を進めましょう
（Webアプリ（JavaScript）の作成方法を理解しましょう（その2））

Webアプリ（JavaScript）訓練の教材について

DropBoxを開いて「資料 → 【4】コーディング」から「task_ohama_20210401.zip」をダウンロードしてください。
（4月1日に提供した教材なのでダウンロード済の時は、そちらを使用してください）
ダウンロードが完了したらzipファイル内のフォルダをデスクトップにコピーしてください。
以下の3つの教材が格納されています。

  • timer：キッチンタイマー
  • bingo：ビンゴマシーン
  • puyopuyo：ぷよぷよゲーム

キッチンタイマーとビンゴマシーンは自作なので自由に使用して頂いて問題ありません。
ぷよぷよゲームについてはJavaScriptの勉強用に提供されているものです。
使用にあたっては以下のサイトを確認してください。

研修メモ

覚書

2021年4月6日（火）

実技　デザイン総合制作実習⑩

投稿者: admin | 2021年4月6日0件のコメント

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑩
就職に向けてのお話

2限目
実技　デザイン総合制作実習⑩
修了制作

3限目
実技　デザイン総合制作実習⑩
修了制作

4限目
実技　デザイン総合制作実習⑩
修了制作

5限目
実技　デザイン総合制作実習⑩
修了制作

本日のテーマ

交渉の心得

ポートフォリオはコミュニケーションの機会です。

本当によく考えられているポートフォリオは「伝え方」「伝える情報」に無理や無駄がなく、それでいてそれを作った本人の魅力を十分に備えているとよいでしょう。

参考サイト

お仕事の順として

未経験者の場合、Webデザイン会社に入社して、いきなり初日からWebデザインを任されることはほとんどありません。
何をするかのイメージをしっかりと準備を進めていきましょう。

参考サイト

決算について

決算とは、一定期間の収入・支出を計算し、利益又は損失を算出すること。一般的には予算の対義語であるが、財政学では予算過程の一つとして捉えられる。 ウィキペディア

就職活動と決算時期について

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年4月7日（水）

実技　デザイン総合制作実習⑪

投稿者: admin | 2021年4月7日0件のコメント

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑪
就職に向けてのお話

2限目
実技　デザイン総合制作実習⑪
修了制作

3限目
実技　デザイン総合制作実習⑪
修了制作

4限目
実技　デザイン総合制作実習⑪
修了制作

5限目
実技　デザイン総合制作実習⑪
修了制作

本日のテーマ

交渉の心得その2

ポートフォリオはコミュニケーションの機会です。

本当によく考えられているポートフォリオは「伝え方」「伝える情報」に無理や無駄がなく、それでいてそれを作った本人の魅力を十分に備えているとよいでしょう。

参考サイト

お仕事の順として

未経験者の場合、Webデザイン会社に入社して、いきなり初日からWebデザインを任されることはほとんどありません。
何をするかのイメージをしっかりと準備を進めていきましょう。

参考サイト

決算について

決算とは、一定期間の収入・支出を計算し、利益又は損失を算出すること。一般的には予算の対義語であるが、財政学では予算過程の一つとして捉えられる。 ウィキペディア

就職活動と決算時期について

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年4月8日（木）

実技　デザイン総合制作実習⑫

投稿者: admin | 2021年4月8日0件のコメント

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑫
就職に向けてのお話

2限目
実技　デザイン総合制作実習⑫
修了制作

3限目
実技　デザイン総合制作実習⑫
修了制作

4限目
実技　デザイン総合制作実習⑫
修了制作

5限目
実技　デザイン総合制作実習⑫
修了制作

本日のテーマ

見せ方を工夫してみましょう

ポートフォリオはコミュニケーションの機会です。

本当によく考えられているポートフォリオは「伝え方」「伝える情報」に無理や無駄がなく、それでいてそれを作った本人の魅力を十分に備えているとよいでしょう。

参考サイト

お仕事の順として

未経験者の場合、Webデザイン会社に入社して、いきなり初日からWebデザインを任されることはほとんどありません。
何をするかのイメージをしっかりと準備を進めていきましょう。

参考サイト

決算について

決算とは、一定期間の収入・支出を計算し、利益又は損失を算出すること。一般的には予算の対義語であるが、財政学では予算過程の一つとして捉えられる。 ウィキペディア

就職活動と決算時期について

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年4月9日（金）

実技　デザイン総合制作実習⑬

投稿者: admin | 2021年4月9日0件のコメント

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑬
修了制作

2限目
実技　デザイン総合制作実習⑬
修了制作

3限目
実技　デザイン総合制作実習⑬
修了制作

4限目
実技　デザイン総合制作実習⑬
修了制作

5限目
実技　デザイン総合制作実習⑬
セミナーについてのお話など

本日のテーマ

デザイナーとしての生活について

セミナーとは？

  1. 大学の教育方法の一つ。先生の指導のもとに学生が集まってする共同研究。演習。
  2. 一般に、研究講習会。 「経営―」▷ 「ゼミナール」とも言う。 seminar

【ワンポイント！】
技術セミナーは最低6割知っている知識の内容のセミナーに参加しましょう。
質疑応答はありますが、登壇者は決められたセッション（時間内）に話す内容が決まっているので、基本知識が無いと意味不明で終わることがあります。

スクールとは？

スクール (school) は英語で「学校」の意味。ギリシャ語のscholé（学ぶ場所）に由来。

また日本では、法律上「学校」と称すことができない無認可校が「スクール」と称することがある。

【ワンポイント！】
スクールは有料で高額です。何を学びたいのか、後にどうなるのかを明確にしておかないと得をしないケースが多いです。

書籍について

【ワンポイント！】
技術には賞味期限があります。ただ基本の1～10を学ぶのには丁度よかったりもします。これもセミナーと同じく最低6割以上基本知識知っている書籍を選んで読んでみると良いかと思います。
一番のおススメは、立ち読みです！

ネット検索について

【ワンポイント！】
便利でピンポイントの情報を調べられますが、「誤報」が多いです。
更新履歴や情報の発信元などに注意して調べてみましょう。

セミナー・スクール等の一例

ポートフォリオはコミュニケーションの機会です。

本当によく考えられているポートフォリオは「伝え方」「伝える情報」に無理や無駄がなく、それでいてそれを作った本人の魅力を十分に備えているとよいでしょう。

参考サイト

お仕事の順として

未経験者の場合、Webデザイン会社に入社して、いきなり初日からWebデザインを任されることはほとんどありません。
何をするかのイメージをしっかりと準備を進めていきましょう。

参考サイト

決算について

決算とは、一定期間の収入・支出を計算し、利益又は損失を算出すること。一般的には予算の対義語であるが、財政学では予算過程の一つとして捉えられる。 ウィキペディア

就職活動と決算時期について

主な求人媒体

※求人サイトは必ず会員登録をしましょう！

その他参考サイト

研修メモ

覚書

2021年4月12日（月）

実技　デザイン総合制作実習⑭

-本日のアジェンダ-

1限目
実技　デザイン総合制作実習⑭
成績考査

2限目
実技　デザイン総合制作実習⑭
成績考査

3限目
実技　デザイン総合制作実習⑭
成績考査

4限目
実技　デザイン総合制作実習⑭
成績考査

5限目
実技　デザイン総合制作実習⑭
成績考査

本日のテーマ

修了制作を完成させましょう（成績考査）

修了制作（成績考査）ファイルの提出について

本日は、終了制作（成績考査）ファイルの提出日です。
5時限目までに紙ポートフォリオのPDFファイルを提出をしてください。
DropBoxを開いて「提出 → 【0330】第5回成績考査」にアップロードしてください。
ファイルはPDF（最小サイズ）でファイル名を「grade-check_〇〇〇〇_20210412.pdf」（〇〇〇〇はご自身の名前）に設定してください。

研修メモ

覚書

2021年4月13日（火）

実技　デザイン総合制作実習⑮

投稿者: admin | 2021年4月13日0件のコメント

1限目
実技　デザイン総合制作実習⑮
発表会

2限目
実技　デザイン総合制作実習⑮
発表会

3限目
実技　デザイン総合制作実習⑮
発表会

4限目
実技　デザイン総合制作実習⑮
発表会

5限目
実技　デザイン総合制作実習⑮
発表会

本日のテーマ

本日は発表会です。

本日の訓練最後にPCにあるの個人データは削除してください。
また、ドロップボックスも訓練後に削除します。
明日の修了式はPCは使えないのでご注意してください。

研修メモ

覚書

2021年4月14日（水）

修了式・職業人講話②

投稿者: admin | 2021年4月14日0件のコメント

1限目
職業人講話②
就職に向けての話

2限目
修了式

3限目
修了式