2020年1月24日（金）

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

-本日のアジェンダ-

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

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

お知らせ

-欠席・遅刻等のご連絡について-

やむを得ずお休みの場合は、まずは必ずメールにてご連絡をお願いいたします。
当日、やむを得ず遅刻等する場合も、必ずメールにて必ず連絡をしてください。
ご協力をお願いいたします。
ご連絡のメールアドレスは下記になります。
deau_a@samplesdl.me

2020年1月27日（月）

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

–本日のアジェンダ–

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

2限目
学科（就職支援）
データの管理方法と取り扱いについて

3限目
学科（就職支援）
自己のプレゼンについて

4限目
学科（就職支援）
他己紹介

5限目
学科（就職支援）
他己紹介

本日のポイント

これからの準備をしましょう。

参考サイト

研修メモ

小森さん他己紹介

本日は他己紹介をいたします。
 他己紹介とは？ Google検索すると…
 他己紹介とは、自分で自分を紹介する自己紹介ではなく、他人を紹介することです。 
 社会人になるまであまりこのような機会はないかもしれませんので、馴染のない言葉かもしれません。 
 新人研修では他己紹介などを取り入れるケースが多く、自己紹介にはない要素の練習に繋がる事がその要因となっています。
 紹介サイト
 https://uranaru.jp/topic/1049586
 https://lovely-media.jp/posts/2658
 https://myjobstep.jp/854
 他己紹介のルール
 1.4人1組で行います。
 2.AさんがBさんを紹介、BさんがCさんを紹介、CさんがDさんを紹介、DさんがAさんを紹介するという形でお願いいたします。
 3.ヒアリングのルールとして、AさんがBさんのヒアリングしている時は、CさんとDさんはフォローしてください。
 例えば…
 Aさん【質問する方】
 ・相手の良いところを聞き出してみてください。
 ・伝わりやすい言葉を選んでみてください。
 ・自分が理解できなかった事はもう一度聞いてみてください。
 Bさん【質問される方】
 ・相手の質問に対して良い事を伝えてください。
 ・伝わりやすい言葉を選んでみてください。
 ・ちゃんと伝わったか不安な時は、もう一度伝えてみてください。
 CさんとDさんと【質問する方と質問される方のフォロー】
 ・AさんとBさんの会話を聞いて、質問の抜けが無いか見ていてください。
 ・AさんとBさんの会話を聞いて、うまく伝わっているか伝える事が出来ているか確認してください。
 ・AさんとBさんの会話を聞いて、言葉足らずかな？思ったら足してあげてください。
 
 ヒアリングの後、発表する方の「発表内容」を文面にまとめて頂きます。
 その際は、発表者とご本人が相談して「発表内容」をまとめてください。
 まとめた、「発表内容」は、ドロップボックスの＞【0521】WEBデザイナー養成(午前)科 ＞ 課題 ＞ ご本人の名前のフォルダにUPしてください。
 
 【ポイント！】
 お話をするのが苦手な人は、文面で書きましょう。
 面接や打合せで、上手く話せないというのであれば、文面で上手に伝えられるようにしてみましょう。
 
 -他己紹介の主な発表内容-
 ・お名前
 ・簡単な経歴
 ・趣味・特技
 ・WEBのお仕事への意気込み
 ・その他
 ※全て話せる範囲で構いません。
 
 ■■　行動力がありチャレンジャーな小森さんを紹介します　■■
 ◆名前
 　小森　雄介さん（こもり　ゆうすけさん）
 　「北海道千歳市」出身の３０歳です。
 ◆経歴
 　大学卒業後に北海道でドラックストアやコールセンタなどの仕事を８年ほどしていました。
 　新しいことをしようと思い立ち、昨年の１１月に彼女と２人で東京に行くことにしました。
 　東京に行くのであれば面白いことをしたいと思い、車での移動を考えました。
 　千歳から函館まで移動し青函連絡船を使って海を渡りました。
 　青森からも一直線で東京ではなく、あっちこっちを見たいという思いもあり大阪や愛知を回って東京にたどり着きました。
 　まだ３か月程度の東京生活ですが、東京では１６名のシェアハウスに住んでおり、その中の１２名は海外の方なので国際的な環境で生活しています。
 　現在は、スポーツジムでアルバイトを始めました。
 ◆趣味・特技
 　ネットゲームが大好きです。
 　シェアハウスに共有の無線ＬＡＮがありますが速度が遅いので独自の有線ＬＡＮを引いてネットゲームを楽しんでいます。
 　インドア系の生活なので新しい挑戦としてスポーツジムの社員特典である無料のジム設備で体を鍛えることも挑戦したいとのことです。
 ◆ＷＥＢの仕事への意気込み
 　昔にホームページを作成してほしいと言われたことがあり、ちょっと勉強してみましたが、うまくいかずにあきらめました。
 　将来的には、独立できる仕事がしたいと思いＷＥＢデザイナーの勉強をすることを考えました。
 　齋藤先生のような仕事ができることを目標に頑張りたいとのことです。
 ◆小森さんの雪の話
 　小森さんは、千歳市出身なので雪のある生活をしていました。
 　中学校時代は、仲の良い友人４人と雪のトンネルを掘るのが毎年の恒例行事でした。
 　家の近くの雪が積み上げてあるところに集合しスコップを使い縦穴、横穴をひたすら堀続けます。
 　このトンネル堀りに意味があるわけではありませんが達成感だけの毎年の恒例行事でした。
 　ある時、このトンネルに犬が落ちたことがありましたが横穴を使って無事脱出できたようです。
 　この行事を桜の咲くころに行ってみたかったですが桜の咲く頃は雪も溶け出しており、かなわぬ夢でした。
 ◆その他
 　私（大浜）から見た小森さんの印象ですが、仕事を決める前に東京に出ることや東京への移動で大阪や愛知を回ったことなどのお話をお聞きし行動力がありチャレンジーな方と感じました。
 　私も北海道出身で小森さんの出身地である千歳市から車で３０分程度の場所です。
 　錦糸町の学校で同郷の方と机を並べて勉強できるなんて今年最初のビックリです。

大浜の他己紹介

本日は他己紹介をいたします。
 他己紹介とは？ Google検索すると…
 他己紹介とは、自分で自分を紹介する自己紹介ではなく、他人を紹介することです。 
 社会人になるまであまりこのような機会はないかもしれませんので、馴染のない言葉かもしれません。 
 新人研修では他己紹介などを取り入れるケースが多く、自己紹介にはない要素の練習に繋がる事がその要因となっています。
 紹介サイト
 https://uranaru.jp/topic/1049586
 https://lovely-media.jp/posts/2658
 https://myjobstep.jp/854
 他己紹介のルール
 1.4人1組で行います。
 2.AさんがBさんを紹介、BさんがCさんを紹介、CさんがDさんを紹介、DさんがAさんを紹介するという形でお願いいたします。
 3.ヒアリングのルールとして、AさんがBさんのヒアリングしている時は、CさんとDさんはフォローしてください。
 例えば…
 Aさん【質問する方】
 ・相手の良いところを聞き出してみてください。
 ・伝わりやすい言葉を選んでみてください。
 ・自分が理解できなかった事はもう一度聞いてみてください。
 Bさん【質問される方】
 ・相手の質問に対して良い事を伝えてください。
 ・伝わりやすい言葉を選んでみてください。
 ・ちゃんと伝わったか不安な時は、もう一度伝えてみてください。
 CさんとDさんと【質問する方と質問される方のフォロー】
 ・AさんとBさんの会話を聞いて、質問の抜けが無いか見ていてください。
 ・AさんとBさんの会話を聞いて、うまく伝わっているか伝える事が出来ているか確認してください。
 ・AさんとBさんの会話を聞いて、言葉足らずかな？思ったら足してあげてください。
 
 ヒアリングの後、発表する方の「発表内容」を文面にまとめて頂きます。
 その際は、発表者とご本人が相談して「発表内容」をまとめてください。
 まとめた、「発表内容」は、ドロップボックスの＞【0521】WEBデザイナー養成(午前)科 ＞ 課題 ＞ ご本人の名前のフォルダにUPしてください。
 
 【ポイント！】
 お話をするのが苦手な人は、文面で書きましょう。
 面接や打合せで、上手く話せないというのであれば、文面で上手に伝えられるようにしてみましょう。
 
 -他己紹介の主な発表内容-
 ・お名前
 大浜信彦さん
 ・簡単な経歴
 北海道出身の60歳です。電機メーカーで55歳まで働かれて、そこから知り合いの方の紹介で入社したソフト会社で5年間、定年まで働かれました。
 ・趣味・特技
 趣味は写真です。一眼レフを持って旅行などに出かけて、旅先の風景などを撮影されています。
 ご自宅には写真を収めたディスクが山積みになっていて、それだけ写真に没頭されているということです。
 また、運動不足解消のために毎日10キロ以上も歩かれています。
 こちらに通うときも、最寄りの錦糸町駅ではなく、押上駅でわざわざ降りて、ここまで歩いて来られているそうです。
 ・WEBのお仕事への意気込み
 ソフト会社以前に働かれていた電機メーカーでもソフトに携わっておられたので、ソフト屋としてはとても長いキャリアをお持ちです。
 そのソフト屋としてのスキルに、これから学ぶWebのスキルを足し合わせることで、
 Web関連の仕事だけではなく、より広い視野を持ってこれからの就職に活かしていきたいそうです。
 また、現在は趣味で撮り溜めた写真をうまく整理できていないということで、その写真をサイトで公開することで整理していこうと考えているそうです。
 そのサイトの作成や運営にも、ここで学んだことを活かしていきたいということです。
 ・その他
 一つの質問に対して情報をきちんと整理してすらすらと話されるところや、雑談の中で出てくるちょっとしたアドバイスなどから、社会経験の豊富さが伺えました。
 ・雪に関するエピソードトーク
 北海道の農家の家では、家の前の田んぼに水をまいて、自家製のスケートリンクを作って遊ぶ文化があるそうです。
 大浜さんも子供のころ、農家の友達の家にスケートをしに行っていたそうなのですが、
 その友達の家に行く時に通る国道もかちかちに凍っていたので、自宅の玄関でスケートのシューズを履いて、
 国道を滑って行って、友達の家でまたスケートをするという少年時代を過ごされたそうです。
 ※全て話せる範囲で構いません。

2020年1月28日（火）

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

-本日アジェンダ-

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

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

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

4限目
学科 WEBプログラミング基礎①
WEBとは？について

5限目
学科 WEBプログラミング基礎①
WEBとは？について

2020年1月29日（水）

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

-本日アジェンダ-

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

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

3限目
学科 WEBプログラミング基礎②
Webとは？について

4限目
学科 WEBプログラミング基礎②
企画提案について

5限目
学科 WEBプログラミング基礎②
企画提案について

研修メモ

作品制作イメージ（task_○○○○_200129.txt）

あなたのおススメを紹介した作品の制作イメージを考えてみましょう。
 ※4ヶ月の中で変更しても全然かまいません。
 ※現時点で思い描くプランをまとめてみましょう。
 【制作のポイント】
 ・ご自身の趣味・趣向に走って構いません。
 ・ポートフォリオの最後のページに掲載できるような作品になるようにしてみましょう。
 ・訓練校の4ヶ月の成果とご自身の自己表現を掛け合わせた作品の方向性をまとめてみましょう。
 
 【タイトル】
 
 【見出し1】
 
 【キャッチコピー】
 
 【内容の解説】
 
 【ポイント①】
 
 【内容の解説】
 
 【ポイント②】
 
 【内容の解説】
 
 【ポイント③】
 
 【内容の解説】
 
 【備考・その他】
 -----------------------------------------------------------------
 例えば…
 ◆見積り内容
 --ロゴ制作費用として--
 ・ロゴデザイン費用         20,000円
 --名刺作成費用として--
 ・名刺費用             20,000円
 --フライヤー制作費用として--
 ・フライヤー制作（表面）     20,000円
 ・フライヤー制作（裏面）     20,000円
 --Webサイト制作費用として--
 ・トップページ            100,000円
 ・会社概要             20,000円
 ・制作実績             20,000円
 ・アクセス             20,000円
 ・新着情報            100,000円
 ・お問合せ             70,000円
 その他
 ・サーバー設定             60,000円
 ・サーバー管理             60,000円
 ・SEO（6ヶ月）             60,000円
 ・進行管理             20,000円
 ・ライティング費用         20,000円
 合計                630,000円
 消費税                 50,400円
 総合計                680,400円
 
 参考サイト
 URL：

大浜の作品イメージ

あなたのおススメを紹介した作品の制作イメージを考えてみましょう。
 ※4ヶ月の中で変更しても全然かまいません。
 ※現時点で思い描くプランをまとめてみましょう。
 【制作のポイント】
 ・ご自身の趣味・趣向に走って構いません。
 ・ポートフォリオの最後のページに掲載できるような作品になるようにしてみましょう。
 ・訓練校の4ヶ月の成果とご自身の自己表現を掛け合わせた作品の方向性をまとめてみましょう。
 =================================================================
 【はじめに】
 ・趣味の写真撮影で撮りためた写真コンテンツの有効活用を考えました。
 ・Ｗｅｂサイトとしての基本的なテクニックを習得できるサイトにしたいと思います。
 
 【タイトル】
 錦糸動物園
 
 【見出し1】
 錦糸町駅から徒歩１分の動物園
 
 【キャッチコピー】
 動物の勉強になる、かわいい動物写真がいっぱいの動物園サイト
 
 【内容の解説】
 錦糸町駅近くにあった錦糸公園跡地にオープンした錦糸動物園を紹介するサイトです。
 ・トップページ
 　お知らせ、ニュース、イベント情報などを掲載しています。
 ・施設情報ページ
 　開園時間、利用料金、交通案内などの施設情報を掲載しいます。
 ・園内マップページ
 　園内のマップを掲載しています。
 ・動物紹介ページ
 　園内で飼育している動物の写真と説明を掲載しています。
 ・園長ブログページ
 　園長が自宅で飼っている猫達の育成情報を掲載しています。
 　０１　トップページ
 　　０１－０１　トップバナー
 　　０１－０２　メニュー
 　　０１－０３　お知らせ
 　　０１－０４　ニュース
 　０２　施設情報
 　　０２－０１　開園時間
 　　０２－０２　入場料
 　　０２－０３　アクセス
 　　０２－０４　食堂・売店
 　　０２－０５　企業情報
 　０３　園内マップ
 　　０３－０１　園内マップ
 　　０３－０２　各施設の説明
 　０４　動物紹介
 　　０４－０１　動物写真
 　　０４－０２　動物解説
 　０５　園長ブログ
 　　０５－０１　猫紹介
 　　０５－０２　猫日記
 
 【ポイント①】
 かわいい動物写真がいっぱい！
 
 【内容の解説】
 ・動物園のような構成になっていますが実は動物写真の掲載サイトです。
 
 【ポイント②】
 動物の解説付き！
 
 【内容の解説】
 ・動物の写真に加えて、その動物の説明も掲載されています。
  （調べられる範囲で動物の解説を記載）
 
 【ポイント③】
 猫がいっぱい！
 
 【内容の解説】
 ・園長ブログでは、園長宅で飼っている８匹の猫達が紹介れています。
 
 【備考・その他】
 ・基本的な構成にすることでＷｅｂサイト作成の基本を身に着けます。
 　－トップページ    →見やすく、目立つバナーを中心としたトップページ構成を習得
 　－施設情報ページ    →会社紹介などで利用できる表組などの基本スタイルを習得
 　－園内マップページ    →イラストなどの作成手法を習得（実は、絵心がありません）
 　－動物紹介ページ    →写真加工や写真表示効果などの手法を習得
 　－園長ブログページ    →写真と文章を併記したブログの基本形を習得
 ・Ｗｅｂページを見やすく、使いやすくするテクニックを勉強します。
 　－レスポンシブ
 　－画像の表示効果
 　－スライドショー
 　－ＳＮＳ連携
 　－多国語化
 　－サイト内検索
 　－パンくずリスト
 　－　・・・
 -----------------------------------------------------------------
 ◆見積り内容
 ■見積り条件
 ・以下の５ページの作成費用となります。
 　－トップページ
 　－施設情報ページ
 　－園内マップページ
 　－動物紹介ページ
 　－園長ブログページ
 ・作成で使用する写真素材は、提供していただけるものとします。
 ・作成は、ＨＴＭＬ、ＣＳＳの新規作成とします。（ＣＭＳは使用しません）
 ・Ｗｅｂサイト構成作成費用には、ページの概略デザインおよび３回のお打合せ費用が含まれます。
 ・ドメイン取得やサーバー契約、構築、運用費用は含まれません。
 ・作成する内容が大幅に変更となる場合は、再度見積りをさせていただきます。
 ■見積り費用
 
                 　単価     時間  　金額
 ・Ｗｅｂサイト構成作成        5,000円/H     40H    200,000円
 ・ロゴ作成            5,000円/H      8H     40,000円
 ・トップページ作成        5,000円/H     32H    160,000円
 ・施設情報ページ作成        5,000円/H      8H     40,000円
 ・園内マップページ作成        5,000円/H     16H     80,000円
 ・動物紹介ページ作成        5,000円/H     40H    200,000円
 ・園長ブログページ作成        5,000円/H     16H     80,000円
 　　　　合　計            5,000円/H    160H    800,000円（税抜き）
 
 参考サイト
 URL：
 東武動物公園
 http://www.tobuzoo.com/zoo/
 旭山動物園
 https://www.city.asahikawa.hokkaido.jp/asahiyamazoo/
 東山動植物園
 http://www.higashiyama.city.nagoya.jp/04_zoo/
 富士サファリパーク
 富士サファリパーク 公式サイト

 円山動物園
 http://www.city.sapporo.jp/zoo/

2020年1月30日（木）

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

-本日アジェンダ-

1限目
学科 WEBコンサルティング基礎①
コンサルタントとは？

2限目
学科 WEBコンサルティング基礎①
WEBサイト制作の見積りについて

3限目
学科 WEBコンサルティング基礎①
サイトマップについて

4限目
学科 WEBコンサルティング基礎①
企画を考えてみましょう

5限目
学科 WEBコンサルティング基礎①
企画を考えてみましょう

コンサルタントとは？

コンサルティングとは、企業などの役員に対して解決策を示し、その発展を助ける業務のこと。または、その業務を行うこと。対応する日本語はない。社会的に、コンサルティング会社は、特定の事業に特化した事業会社とは区別され、コンサルティングファームと呼ばれる。ウィキペディア

参考サイト

研修メモ

Ｗｅｂデザイナー業界の状況
Ｗｅｂサイト企画（企画を考える時のポイント）
コンサルティング基礎（コンサルタントは「相談役」である！）
見積時の注意点
Ｗｅｂサイト開発のネタ検討

2020年1月31日（金）

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

-本日アジェンダ-

1限目
学科 WEBコンサルティング基礎②
サイトマップについて

2限目
学科 WEBコンサルティング基礎②
企画をまとめてみましょう

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

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

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

サイトマップ（情報設計）とは？

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

研修メモ

サイトマップとワイヤーフレーム
あおり医院
よね屋
兎丸（大森研一）

2020年2月3日（月）

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

-本日のアジェンダ-

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

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

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

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

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

本日テーマ

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

本日のIllustratorの基本操作

新規作成・開く
保存(ai)・別名で保存（pdf）
アートボード
選択ツール
長方形ツール
楕円形ツール
多角形ツール
スターツール
パスファインダー（合体・型抜き・交差）
プロパティパネル
ズームツール

研修メモ

Adobeイラストレータ基本操作
Adobe製品は、アカデミック版の購入可

task-ai-ohama-20200203-03 ダウンロード

2020年2月4日（火）

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

-本日のアジェンダ-

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

2限目
学科グラフィックデザイン基礎②
画像の加工方法について

3限目
学科グラフィックデザイン基礎②
画像の加工方法について

4限目
学科グラフィックデザイン基礎②
合成写真を作ってみましょう

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

本日のテーマ

「トリミング」をして合成写真を作りましょう。

■写真加工のおすすめルール
（非破壊データで作業しましょう）

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

■写真素材（練習用）

■無料写真素材のサイト

研修メモ

Adobe Photoshop基本操作
トリミング

2020年2月5日（水）

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

-本日のアジェンダ-

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

2限目
学科グラフィックデザイン基礎③
シェイプ形成ツールについて

3限目
学科グラフィックデザイン基礎③
レイヤーパネルについて

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

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

本日のテーマ

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

■本日のキーワード

選択ツール
ダイレクト選択ツール
図形ツール
パスファインダー（合体・型抜き・交差）
シェイプ形成ツール
レイヤーパネル
リフレクトツール
回転ツール
アンカーポイント切り替えツール
ハサミツール
消しゴムツール
変形の繰り返し「Ctrl+D」

研修メモ

Adobe Illustrator基本操作

task-ai-ohama-20200205-02 ダウンロード

2020年2月6日（木）

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

-本日のアジェンダ-

1限目
学科グラフィックデザイン基礎④
ラスタライズについて

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

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

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

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

本日のテーマ

本日はレタッチです

レタッチとは、画像の色の補正や汚れの除去、合成といった画像の修整や加工作業のこと。

■本日のキーワード

スマートオブジェクト・ラスタライズ
ヒストリーパネル

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

■写真素材（練習用）

■無料写真素材のサイト

研修メモ

2020年2月7日（金）

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

-本日アジェンダ-

1限目
学科グラフィックデザイン基礎⑤
文字入力について

2限目
学科グラフィックデザイン基礎⑤
オブジェクトの塗りと線・描画色と背景色

3限目
学科グラフィックデザイン基礎⑤
シェイプ・ピクセルについて

4限目
学科グラフィックデザイン基礎⑤
写真とイラストを合わせてみましょう。

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

本日のテーマ

本日はIllustratorとPhotoshopの両方です。

■本日のキーワード

・文字について
・オブジェクトの塗りと線
・描画色と背景色
・シェイプとピクセル
・配置

文字ツール

「文字ツール」. 名前の通り、文字を入力するツールです。文字ツールでの入力方法は、大きく分けて2種類あります。

参考サイト

文字パネル

文字を入力する前にテキスト属性を設定したり、属性をリセットして、テキストレイヤーにおける選択した文字の表示形式を変更することもできます。個々の文字に書式を設定するには、それらの文字を選択します。テキストレイヤー内の 1 文字、一定範囲の文字、またはすべての文字を選択できます。

参考サイト

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

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

ベクターデータとは？

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

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

シェイプは点や線(パス)を組み合わせて作られた形で、イラストレーターでいうオブジェクトになります。

シェイプはベクトル画像なので、拡大・縮小・色の変更をしても画質が劣化することなく使用することができます。

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

研修メモ

task-ai-ohama-20200207-02 ダウンロード

2020年2月10日（月）

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

-本日アジェンダ-

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

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

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

4限目
学科グラフィックデザイン基礎⑥
より精度の高い合成写真を作ってみましょう。

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

本日のテーマ

本日は色調補正です。

※注意：非破壊データで作業を行いましょう！

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

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

■本日のキーワード（色調補正）

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

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

参考サイト

色調補正と調整レイヤーについて

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

「レイヤーパネル」で右クリック→「クリッピングマスク」
Photoshopの「調整レイヤー」で色調補正を行いましょう。調整レイヤーをコピー、結合したり「クリッピングマスク」で真下の画像にだけ色調補正をかける事ができます。

色調補正の手順（参考）

【手順①】

「レベル補正」「トーンカーブ」で白黒の調整をしましょう。
「明るさコントラスト」は簡易的なツールなので狂った調整にならないように注意

【手順②】

「カラーバランス」「色相・彩度」で色の調整をしましょう。
選択範囲を上手く利用して、部分的に変える事も必要に応じて利用しましょう。

【手順③】

デザイン要素の追加は上の手順①、②の後にしてみましょう。
「白黒」「グラデーション」「パターン」「べた塗り」「フィルター」

【手順④】

仕上げ「アンシャープマスク」をかけてみましょう。

研修メモ

2020年2月11日（火）

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

-本日アジェンダ-

1限目
学科グラフィックデザイン基礎⑦
カラーについて

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

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

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

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

本日のテーマ

色

カラー

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

Photoshop では、ペイント、塗りつぶしおよび選択範囲の境界線の描画には描画色が使用され、消去された領域やグラデーションには背景色が使用されます。描画色と背景色は、他の特殊効果フィルターにも使用されます。
スポイトツール、カラーパネル、スウォッチパネルまたは Adobe カラーピッカーを使用して、新しい描画色や背景色を指定することができます。

参考サイト

スウォッチパネル

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

参考サイト

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

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

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

参考サイト

スポイトツール

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

参考サイト

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

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

参考サイト

研修メモ

デザインの3要素は、「文字（フォント）、色、構成」です。

task-ai-ohama-20200211-02 ダウンロード

2020年2月12日（水）

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

-本日アジェンダ-

1限目
学科グラフィックデザイン基礎⑧
アウトライン化について

2限目
学科グラフィックデザイン基礎⑧
ベジェ曲線

3限目
学科グラフィックデザイン基礎⑧
パペットワープ

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

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

本日のテーマ

オブジェクトをより自由に

本日キーワード

アウトライン化
パペットワープ
曲線ツール
ペンツール
線幅ツール
ブラシツール

アウトライン

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

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

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

ベジェ曲線について

ベジェ曲線またはベジエ曲線とは、N 個の制御点から得られる N − 1 次曲線である。フランスの自動車メーカー、シトロエン社のド・カステリョとルノー社のピエール・ベジェにより独立に考案された。ド・カステリョの方が先んじていたが、その論文が公知とならなかったためベジェの名が冠されている。

参考サイト

ペンツール

ペンツールによる直線セグメントの描画ペンツールを使用して作成できる最も単純なパスは直線です。ペンツールをクリックして 2 つのアンカーポイントを作成すると、それらのアンカーポイントを結ぶ直線が作成されます。

参考サイト

曲線ツール

曲線ツールを使用すると、パスの作成と描画を簡単で直感的に行うことができます。新しいツールでは、スムーズポイントまたはコーナーポイントの作成、切り替え、編集、追加または削除を行うことができます。

参考サイト

線幅ツール

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

参考サイト

パペットワープ

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

参考サイト

研修メモ

印刷物の入稿を行うときは、フォントをアウトライン化すること！
文字をアウトラインにするときは、「書式→アウトラインを作成」を実施
線をアウトライン化するには、「オブジェクト→パス→パスのアウトライン化」を実施
作品を確認するときは、Ctrl+Yでアウトライン表示を行って確認のこと

task-ai-ohama-20200212-01 ダウンロード

2020年2月13日（木）

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

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習①
ピクトグラムとは？

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

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

4限目
実技イラストロゴ作成実習①
本日の課題

5限目
実技イラストロゴ作成実習①
本日の課題

本日のテーマ

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

ピクトグラムとは？

ピクトグラムあるいはピクトグラフとは、一般に「絵文字」「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号の一つである。地と図に明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられる。

JIS規格とは

日本工業規格は、工業標準化法に基づき、日本工業標準調査会の答申を受けて、主務大臣が制定する工業標準であり、日本の国家標準の一つである。JISまたはJIS規格と通称されている。JISのSは英語 Standards の頭文字であって規格を意味するので、「JIS規格」という表現は冗長であり、これを誤りとする人もある。ウィキペディア

参考サイト

■本日のキーワード

「パスファインダー（合体）（前面オブジェクトで型抜き）（交差）」
「シェイプ形成ツール」
「各図形ツール」
「ハサミ」
「回転ツール」
「リフレクトツール」

「ペンツール」
「アンカーポイント切り替えツール」
「曲線ツール」
「選択ツール」
「ダイレクト選択ツール」

「レイヤーパネル」
「整列パネル」
「定規（ガイド）」
「プロパティパネル」
「グループ化」
「環境設定（キー入力）」
「aiのバージョン」
「pdfでの保存」
「Webで保存」

研修メモ

work_deau-a_200213 ダウンロード

task-ai-ohama-20200213-01 ダウンロード

2020年2月14日（金）

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

-本日のアジェンダ-

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

2限目
実技イラストロゴ作成実習②
パス上文字ツールについて

3限目
実技イラストロゴ作成実習②
アピアランスパネルについて

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

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

本日のテーマ

ロゴを作ってみましょう

ロゴとは？

ロゴタイプは、図案化・装飾化された文字・文字列のことで、団体名、商号、商品名、雑誌名、書名などを印刷・表示する際に使用される。ロゴと略すこともある。

■本日のキーワード

「パスファインダー（合体）（前面オブジェクトで型抜き）（交差）」
「シェイプ形成ツール」
「各図形ツール」
「ハサミ」
「回転ツール」
「リフレクトツール」

「ペンツール」
「アンカーポイント切り替えツール」
「曲線ツール」
「選択ツール」
「ダイレクト選択ツール」

「文字」
「カーニング」
「トラッキング」
「書式のアウトラインの作成」
「パス上文字ツール」

「効果（ワープ）」
「アピアランスパネル」
「アピアランスの分割」
「レイヤーパネル」
「整列パネル」
「定規（ガイド）」
「プロパティパネル」
「グループ化」
「環境設定（キー入力）」
「aiのバージョン」
「pdfでの保存」

参考サイト

研修メモ

Ａ４サイズ　210×297（12マスだと　70.0×74.25）

work_deau-a_200214 ダウンロード

task-ai-ohama-20200214-01 ダウンロード

2020年2月17日（月）

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

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習③
ロゴについて

2限目
実技イラストロゴ作成実習③
Adobe Fontsについて

3限目
実技イラストロゴ作成実習③
変形パネルと整列パネルについて

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

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

本日のテーマ

ロゴを更に深めて作成してみましょう

Adobe Fonts （ Typekit ）

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

参考サイト

整列パネル

ラストレーターでデザインを行う際、「オブジェクトなどの位置を正確に揃える」ということはとても重要な事です。整列パネルを使用すると、簡単に複数のオブジェクトを揃えたり、均等な間隔に並べることもできます。

参考サイト

変形パネル

Illustrator の変形パネルでは、オブジェクトの位置、サイズおよび方向を設定します。パネルに値を入力することで、選択したオブジェクトの位置や大きさ、角度を変更することができます。また、変形の基準点を変更したり、オブジェクトの縦横比を固定したまま拡大・縮小したりすることが可能です。

参考サイト

■本日のキーワード

「パスファインダー（合体）（前面オブジェクトで型抜き）（交差）」
「シェイプ形成ツール」
「各図形ツール」
「ハサミ」
「回転ツール」
「リフレクトツール」

「ペンツール」
「アンカーポイント切り替えツール」
「曲線ツール」
「選択ツール」
「ダイレクト選択ツール」

「文字」
「カーニング」
「トラッキング」
「書式のアウトラインの作成」
「パス上文字ツール」

「効果（ワープ）」
「アピアランスパネル」
「アピアランスの分割」
「レイヤーパネル」
「整列パネル」
「定規（ガイド）」
「プロパティパネル」
「グループ化」
「環境設定（キー入力）」
「aiのバージョン」
「pdfでの保存」

参考サイト

研修メモ

「漢字タイポス４１５ Std」
「源ノ明朝」、「源ノゴシック」は、無料で資料可能

task-ohama-20200217-03 ダウンロード

2020年2月18日（火）

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

-本日のアジェンダ-

1限目
実技　イラストロゴ作成実習④
ロゴの講評

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

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

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

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

本日のテーマ

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

参考サイト

クリッピングマスク

クリッピングマスクは、その形状によってほかのアートワークをマスクするオブジェクトです。クリッピングマスクの内側にあるエリアのみが見えるように、アートワークをマスクの形状にクリップします。クリッピングマスクとマスクされたオブジェクトは、クリッピングセットと呼ばれます。

参考サイト

本日のキーワード

「パスファインダー（合体）（前面オブジェクトで型抜き）（交差）」
「シェイプ形成ツール」
「各図形ツール」
「ハサミ」
「回転ツール」
「リフレクトツール」
「変形パネル ■角を拡大・縮小　■線幅と効果を拡大」

「文字」
「カーニング」
「トラッキング」
「書式のアウトラインの作成」
「パス上文字ツール」

「ペンツール」
「アンカーポイント切り替えツール」
「曲線ツール」
「選択ツール」
「ダイレクト選択ツール」

「レイヤーパネル」
「グループ化」
「クリッピングマスク」

「効果（ワープ）」
「アピアランスパネル」
「スタイライズ」
「アピアランスの分割」
「整列パネル」
「定規（ガイド）」
「プロパティパネル」
「環境設定（キー入力）」
「画像の配置」
「aiのバージョン」
「pdfでの保存」
「Webで保存」

研修メモ

線路の作成は、「アピアランス」を使用する。
アピアランスパネルの左下の□を押下すると線を重ねられる。
上の線を白の細い破線にして、下の線を黒の太線にする。

ガイドを動かしたい時は、「表示→ガイド→ガイドをロック」のチェックをはずすこと。

task-ohama-20200218-04 ダウンロード

2020年2月19日（水）

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

-本日のアジェンダ-

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

2限目
実技イラストロゴ作成実習⑤
アクセスマップ作成のコツについて

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

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

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

本日のテーマ

アクセスマップを作ってみましょう2日目

参考サイト

クリッピングマスク

参考サイト

本日のキーワード

「パスファインダー（合体）（前面オブジェクトで型抜き）（交差）」
「シェイプ形成ツール」
「各図形ツール」
「ハサミ」
「回転ツール」
「リフレクトツール」
「変形パネル ■角を拡大・縮小　■線幅と効果を拡大」

「文字」
「カーニング」
「トラッキング」
「書式のアウトラインの作成」
「パス上文字ツール」

「ペンツール」
「アンカーポイント切り替えツール」
「曲線ツール」
「選択ツール」
「ダイレクト選択ツール」

「レイヤーパネル」
「グループ化」
「クリッピングマスク」

「効果（ワープ）」
「アピアランスパネル」
「スタイライズ」
「アピアランスの分割」
「整列パネル」
「定規（ガイド）」
「プロパティパネル」
「環境設定（キー入力）」
「画像の配置」
「aiのバージョン」
「pdfでの保存」
「Webで保存」

追加おまけ

「連結ツール」と「パスの単純化」について

参考サイト

研修メモ

文字に枠線（縁取り線）を付けるときも「アピアランス」を使用する。
文字の回りをぼかすときは、アピアランスの左したのfxを押下してスタイライズの光彩を使う。

task-ohama-20200219-03 ダウンロード

2020年2月20日（木）

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

-本日のアジェンダ-

1限目
実技イラストロゴ作成実習⑥
成績考査

2限目
実技イラストロゴ作成実習⑥
成績考査

3限目
実技イラストロゴ作成実習⑥
フォントについて

4限目
実技イラストロゴ作成実習⑥
フォントについて

5限目
実技イラストロゴ作成実習⑥
フォントについて

本日のテーマ

第1回成績考査です。

成績考査内容

ドロップボックスの
「提出」￥「【成績考査】第1回20020220」￥「grade-check_○○○○_200220.ai」
をDLし、各内容のもと提出してください。

ファイル名○○○○をご自身の名前に変更
ファイル内上部○○○○をご自身の名前に変更
ピクトグラム（4作品以上）を掲載
ロゴ（4作品以上）を掲載
アクセスマップ（1作品以上）を掲載
提出ファイルの形式をpdfにしてドロップボックス
「【成績考査】第1回20020220」にUPしてください。

2限目の11時20分まで時間厳守です！

研修メモ

Ｎｏｔｏフォント（無料）　　← 現在、お勧めのフォント！！
　源ノ角ゴシック
　源ノ明朝（２０１７年５月）
　ＧｏｏｇｌｅにＡｄｏｂｅが協力して使えるようにしている。
　Ｗｅｂフォントを使用すれば、使用しているＰＣに依存することなく
　同一の形状表示が可能になる。

font190519 ダウンロード

grade-check_ohama_200220 ダウンロード

2020年2月21日（金）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習①
アクセスマップ講評

2限目
実技写真合成・補正加工実習①
名刺とは？

3限目
実技写真合成・補正加工実習①
トリムマークについて

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

5限目
実技写真合成・補正加工実習①
名刺制作

本日のテーマ

入稿用データ「トリムマーク」

アートボードツール

アートボードツールを使用して、アートボードを様々なサイズで作成したり、サイズを変更したりできます。画面上の任意の場所に配置したり、相互に重ねたりすることもできます。

参考サイト

トリムマーク

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

参考サイト

パスのオフセット

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

参考サイト

文字パネル

文字パネル（ウィンドウ／書式／文字）を使用してオプションを適用し、ドキュメント内の個々の文字に書式を設定することができます。

【1】文字デザイン

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

参考サイト

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

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

参考サイト

【3】配色デザイン

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

参考サイト

研修メモ

Adobeキャプチャ（ロゴの判定）アプリは、面白いです。
名刺のサイズは、「91mm×55mm」です。

work_deau-a_200221 ダウンロード

task-ohama-20200221-02 ダウンロード

2020年2月24日（月）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習②
名刺講評

2限目
実技写真合成・補正加工実習②
ポストカードとは？

3限目
実技写真合成・補正加工実習②
文字の配置について

4限目
実技写真合成・補正加工実習②
ポストカード制作

5限目
実技写真合成・補正加工実習②
ポストカード制作

本日のテーマ

「ポストカード」大喜利です！

写真ページはこちら
※pass

■写真加工のおすすめルール
（非破壊データで作業しましょう）

色調補正の手順（参考）

【手順①】

「レベル補正」「トーンカーブ」で白黒の調整をしましょう。
「明るさコントラスト」は簡易的なツールなので狂った調整にならないように注意

【手順②】

「カラーバランス」「色相・彩度」で色の調整をしましょう。
選択範囲を上手く利用して、部分的に変える事も必要に応じて利用しましょう。

【手順③】

デザイン要素の追加は上の手順①、②の後にしてみましょう。
「白黒」「グラデーション」「パターン」「べた塗り」「フィルター」

【手順④】

仕上げ「アンシャープマスク」をかけてみましょう。

■本日のキーワード（レイヤー）

スマートオブジェクト・ラスタライズ
ヒストリーパネル

■本日のキーワード（レタッチ）

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

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

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

■本日のキーワード（色調補正）

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

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

画像解像度について

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

CMYKとRGB

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

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

参考サイト

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

ベクターデータとは？

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

シェイプは点や線(パス)を組み合わせて作られた形で、イラストレーターでいうオブジェクトになります。

シェイプはベクトル画像なので、拡大・縮小・色の変更をしても画質が劣化することなく使用することができます。

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

アートボードツール

参考サイト

トリムマーク

参考サイト

パスのオフセット

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

参考サイト

文字パネル

文字パネル（ウィンドウ／書式／文字）を使用してオプションを適用し、ドキュメント内の個々の文字に書式を設定することができます。

【1】文字デザイン

参考サイト

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

参考サイト

【3】配色デザイン

参考サイト

研修メモ

はがきのサイズは、100mm×148mmです。

■写真素材ページ

DEAUアカデミー WEBデザイナー養成(午前)科
保護中: 大喜利特設ページ
大喜利のルール
下記の画像を使って次のお題に応えましょう。

■無料写真素材のサイト

【2019年版】フリー写真素材のおすすめサイト完全まとめ58選【商用利用無料】
無料写真素材　写真AC
無料の写真素材はフリー素材のぱくたそ
フリー写真素材フォトック

2020年2月25日（火）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習③
作品の講評

2限目
実技写真合成・補正加工実習③
デザインカンプについて

3限目
実技写真合成・補正加工実習③
余白について

4限目
実技写真合成・補正加工実習③
フライヤー制作

5限目
実技写真合成・補正加工実習③
フライヤー制作

本日のテーマ

レイアウトデザイン

デザインカンプとは？

デザインカンプは、このワイヤーフレームを元に色をつけ、画像やテキストを挿入して、Webサイトの完成イメージとなるものを指します。 デザインカンプを作るポイントは、Webサイトの目的や狙いを決めることです。

さて、今回の印刷業界用語は「カンプ」です。

ざくっと説明すると「印刷物の仕上がった状態」の見本です。

Comprehensive layoutを略してカンプと言われるようになったのだとか。どんな印刷物でも、印刷物を作る時には校了紙が必要です。

カンプは、校了（全てのチェックの最終関門を終えたもの）の仕上がり見本で「この通りに印刷して下さい」という、デモテープのようなものだと考えればよいでしょう

校了とは、誤字脱字のチェックや記載されている内容の確認、レイアウトの調整などの校正作業が終了したことを指し、校正に修正箇所がまったくないことを意味します。これにより編集作業が完了し、次工程へと進みます。

参考サイト

パスのオフセット

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

参考サイト

【1】文字デザイン

参考サイト

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

参考サイト

【3】配色デザイン

参考サイト

研修メモ

task-ohama-20200225-02 ダウンロード

2020年2月26日（水）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習④
デザインカンプ講評

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

3限目
実技写真合成・補正加工実習④
文字選びについて

4限目
実技写真合成・補正加工実習④
フライヤー制作

5限目
実技写真合成・補正加工実習④
フライヤー制作

本日のテーマ

フォントデザイン

画像解像度について

CMYKとRGB

参考サイト

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

ベクターデータとは？

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

シェイプは点や線(パス)を組み合わせて作られた形で、イラストレーターでいうオブジェクトになります。

シェイプはベクトル画像なので、拡大・縮小・色の変更をしても画質が劣化することなく使用することができます。

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

アートボードツール

参考サイト

トリムマーク

参考サイト

パスのオフセット

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

参考サイト

【1】文字デザイン

参考サイト

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

参考サイト

【3】配色デザイン

参考サイト

研修メモ

task-ohama-20200226-04 ダウンロード

2020年2月27日（木）

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

-本日のアジェンダ-

1限目
実技写真合成・補正加工実習⑤
デザインカンプ講評

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

3限目
実技写真合成・補正加工実習⑤
配色選びについて

4限目
実技写真合成・補正加工実習⑤
フライヤー制作

5限目
実技写真合成・補正加工実習⑤
フライヤー制作

本日のテーマ

配色デザイン

CMYKとRGB

参考サイト

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

ベクターデータとは？

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

シェイプは点や線(パス)を組み合わせて作られた形で、イラストレーターでいうオブジェクトになります。

シェイプはベクトル画像なので、拡大・縮小・色の変更をしても画質が劣化することなく使用することができます。

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

アートボードツール

参考サイト

トリムマーク

参考サイト

パスのオフセット

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

参考サイト

【1】文字デザイン

参考サイト

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

参考サイト

【3】配色デザイン

参考サイト

研修メモ

task-ohama-20200227-06 ダウンロード

2020年3月2日（月）

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

-本日のアジェンダ-

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

2限目
実技写真合成・補正加工実習⑥
フライヤー制作

3限目
実技写真合成・補正加工実習⑥
フライヤー制作

4限目
実技写真合成・補正加工実習⑥
フライヤー制作

5限目
実技写真合成・補正加工実習⑥
フライヤー制作

本日のテーマ

ブラッシュアップについて

【1】文字デザイン

参考サイト

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

参考サイト

【3】配色デザイン

参考サイト

研修メモ

task-ohama-20200302-08 ダウンロード

2020年3月3日（火）

学科 DTP基礎

-本日アジェンダ-

1限目
学科 DTP基礎
フライヤー発表会

2限目
学科 DTP基礎
フライヤー発表会

3限目
学科 DTP基礎
フライヤーの修正

4限目
学科 DTP基礎
印刷物の入稿について

5限目
学科 DTP基礎
印刷物の入稿について

本日のテーマ

入稿の流れについて

DTPとは？

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

参考サイト

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

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

入稿の注意点

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

参考サイト

Photoshopの「再サンプル」とは？

再サンプルとは、画像のピクセル数または解像度を変更することによって画像データ量を変更することです。ダウンサンプル（ピクセル数の削減）を行った場合は、画像の情報が削除されます。

参考サイト

研修メモ

デザインの３要素→文字、配置（レイアウト）、配色

task-ohama-20200302-08 ダウンロード

2020年3月4日（水）

学科 ECサイト運用基礎

-本日のアジェンダ-

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

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

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

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

5限目
学科 ECサイト運用基礎
発表会

本日のテーマ

ECサイト

ECサイトとは？

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

参考サイト

広告宣伝費について

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

バナーとは？

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

Photoshop　レイヤースタイルについて

レイヤーに対して手軽に様々な表現が可能になる必須テクニックです。

Photoshop　アンシャープマスクフィルター

Retina対応について

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

本日の課題

昨日作成したフライヤーを元にバナーを作成しましょう。
まずは横長サイズで作成してみましょう。
提出は、jpg形式です。
～　バナーサイズ　～
横長：「w300px × h150px（ w600px × h300px ）」
bnr_〇〇○○200304_600x300.jpg

縦長：「w150px × h300px （ w300px × h600px ）」
bnr_〇〇○○200304_300x600.jpg

正方形：「w250px × h250px （ w500px × h500px ）」
bnr_〇〇○○200304_500x500.jpg

※ フライヤー（A4サイズ）に比べ、情報の掲載スペースがグッと小さくなるので、実寸（ブラウザ100％表示）での文字の視認性やレイアウトに留意しながら作成してみましょう。

研修メモ

Yahooショッピングは、出展料がかからない。（ただし、梱包などの作業は自分でする必要がある）
Amaonは、何もしなくて良いが売り上げの30%は、Amazonがとる。

ECサイトについてダウンロード

2020年3月5日（木）

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

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎①
元データついて

2限目
学科 ECサイトデザイン基礎①
解像度対策について

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

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

5限目
学科 ECサイトデザイン基礎①
発表会

本日のテーマ

元データの管理について

ECサイトとは？

参考サイト

広告宣伝費について

バナーとは？

レイヤースタイル（Ps）について

レイヤーに対して手軽に様々な表現が可能になる必須テクニックです。

マスクについて

Photoshopのマスクのかけ方は、大きく分けて、『クリッピングマスク』、『レイヤーマスク』、『ベクトルマスク』の3種類があります。
それと選択ツールの調整で使うクイックマスクモードがあります。

参考サイト

Retina対応について

研修メモ

レイヤーマスク：選択→レイヤーマスク（必要に応じて選択範囲を反転）
・マスクがビットマスクなので白黒を塗ることでマスクを修正できる
・選択範囲で右クリックし「境界線をぼかす」を行うことでぼかした切り抜きを行うことができる
・切り抜いた後にぼかす場合は、レイヤースタイル（レイヤーの右側をダブルクリック）を用いて光彩を与えればよい
・レイヤーマスク後が連携（鎖マーク）になっているので、連携をはずせば、個別に動かすことができる
・白紙のレイヤーマスクを作成してグラデーションツールをかけたマスクを作成することで自然に切り替わる画像を作成することができる
クリッピングマスク：図形（シェイプ）や文字を描く→その描いたものを下のレイヤーに移動→レイヤーのクリッピングマスクを実施
・文字そのものをマスクにできるので文字で切り抜くことができる（文字に枠線を付けることで文字効果も可能）
ベクトルマスク：図形をパスで描く→レイヤーのベクトルマスクを実施
・マスクがパスなのでアンカーの追加・削除や曲線の作成が可能
・パスパネルを表示しておくことで選択範囲をパスに変換することができる

課題は楽天のレディーストップスでサイズは400×180です。

2020年3月6日（金）

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

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎②
マスクの種類ついて

2限目
学科 ECサイトデザイン基礎②
マスクの使いこなし方について

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

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

5限目
学科 ECサイトデザイン基礎②
発表会

本日のテーマ

マスクのおさらいをしておきましょう

マスクについて

参考サイト

クリッピングマスク【Ai】

「対象のオブジェクトを選択」⇒
※マスクする形（オブジェクト）は上
「レイヤー」⇒
「グループ化」⇒
※親のレイヤーを選択
「クリッピングマスク」を選択

※同時利用のキーワード

レイヤーパネル
グループ化
各図形ツール

クリッピングマスク【Ps】

「対象のオブジェクトのレイヤーを選択」⇒
※マスクする形（オブジェクト）は下
「対象のレイヤー右クリック」⇒
「クリッピングマスク」を選択

※同時利用のキーワード

調整レイヤー
各図形ツール
レイヤースタイル

レイヤーマスク【Ps】

「選択範囲を取る」⇒
「レイヤーを選択」⇒
「レイヤーマスク」を選択
※マスク後レイヤーで白～黒のピクセルで調整可能

※同時利用のキーワード

パスパネル
ブラシツール
レイヤースタイル

ベクトルマスク【Ps】

「パスを作成」⇒
「レイヤーを選択」⇒
「タブよりレイヤー」⇒
「ベクトルマスク」を選択
※マスク後パス選択ツール等で調整可能

※同時利用のキーワード

ペンツール各種
パスパネル
パス選択ツール

パスパネル【Ps】

パスパネルを利用することで
「選択範囲」⇔「パス」
また、パスの保存が可能

クイックマスクモード【Ps】

クイックマスクモードで
「選択範囲」をブラシ（白～黒）で調整可能

研修メモ

2020年3月9日（月）

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

-本日のアジェンダ-

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

2限目
実技 ECサイトデザイン実習①
デザインテーマ（アパレル）

3限目
実技 ECサイトデザイン実習①
発表会

4限目
実技 ECサイトデザイン実習①
デザインテーマ（ファッション）

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

本日のテーマ

デザインジャンルごとの特徴について

バナーデザインのコツについて

デザインはまず真似をする事が上達の近道です。
今日の課題は、「参考バナー」と「企画バナー」を融合して
「オリジナルバナー」を作成してみましょう。

バナーの参考サイト

制作のポイント！

デザインの3要素をしっかり見抜いてみましょう。

【1】文字デザイン
【2】配色デザイン
【3】レイアウトデザイン

参考サイト

研修メモ

2020年3月10日（火）

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

-本日のアジェンダ-

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

2限目
実技 ECサイトデザイン実習②
デザインテーマ（食品）

3限目
実技 ECサイトデザイン実習②
発表会

4限目
実技 ECサイトデザイン実習②
デザインテーマ（飲食）

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

本日のテーマ

食品関連のデザインの特徴について

バナーの参考サイト

制作のポイント！

デザインの3要素をしっかり見抜いてみましょう。

【1】文字デザイン
【2】配色デザイン
【3】レイアウトデザイン

参考サイト

研修メモ

背景を作る時は、一部を切り取って拡大すると、それっぽくできる。
Shiftを押下しながら拡大すると良い。

2020年3月11日（水）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習③
商品画像について

2限目
実技 ECサイトデザイン実習③
物撮りについて

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

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

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

本日のテーマ

物撮りについて

サムネイル画像とは？

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

参考サイト

バナーの参考サイト

制作のポイント！

デザインの3要素をしっかり見抜いてみましょう。

【1】文字デザイン
【2】配色デザイン
【3】レイアウトデザイン

参考サイト

研修メモ

写真の角度を変更する場合は、切り抜きツールで角度補正を行うことができる。
明かるさの補正は、レベル補正のスポイトで暗い所と明るい所を指定して補正する。

2020年3月12日（木）

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

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習④
デザイン画像の提出について

2限目
実技 ECサイトデザイン実習④
当て込んでみましょう

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

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

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

本日のテーマ

実際にあるサイトに当て込んでみましょう

本日はバナーデザインの総決算として作品を発表してください。

バナーの参考サイト

制作のポイント！

デザインの3要素をしっかり見抜いてみましょう。

【1】文字デザイン
【2】配色デザイン
【3】レイアウトデザイン

参考サイト

デベロッパーツールについて

研修メモ

2020年3月13日（金）

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

-本日のアジェンダ-

1限目
実技ユーザーインターフェイス作成実習①
GIFアニメーションについて

2限目
実技ユーザーインターフェイス作成実習①
GIFアニメーション作成

3限目
実技ユーザーインターフェイス作成実習①
GIFアニメーション作成

4限目
実技ユーザーインターフェイス作成実習①
GIFアニメーション作成

5限目
実技ユーザーインターフェイス作成実習①
作品発表

本日のテーマ

GIFアニメーション

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

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

本日のキーワード

GIF画像で保存
GIFアニメ
Photoshop「タイムライン」
トゥイーン
レイヤーパネル
パペットワープ
カンバスサイズ

参考サイト

パペットワープ（Photoshop）

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

参考サイト

パペットワープ（Illustrator）

参考サイト

研修メモ

パペットワープ：関節を作って曲げることができる。
photoshopでは、編集メニュー→パペットワープを選択

2020年3月16日（月）

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

-本日のアジェンダ-

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

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

3限目
実技ユーザーインターフェイス作成実習②
作品発表

4限目
実技ユーザーインターフェイス作成実習②
Webサイトデザインについて

5限目
実技ユーザーインターフェイス作成実習②
Webサイトデザインについて

本日のテーマ

第2回成績考査

研修メモ

色
緑：088138
薄オレンジ：f2d48d
オレンジ：ea5413
横長　468×60

2020年3月17日（火）

学科 HTML基礎①

-本日のアジェンダ-

1限目
学科 HTML基礎①
HTMLとは？

2限目
学科 HTML基礎①
htmlの記述【基本タグ】

3限目
学科 HTML基礎①
htmlの記述【head】

4限目
学科 HTML基礎①
htmlの記述【body】

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

本日のテーマ

まずは基本的な仕組みを理解していきましょう

学習の準備

皆さんそれぞれのサイトURLの最後に
「wp-login.php」
と入力してください。。すると。。。

引用元サイト

無料レンタルサーバー【XFREE(エックスフリー)】

研修メモ

WordPressのテーマは、「Pet Business by Theme PalaceのA DOG’S LIFE」を使用しています。

2020年3月18日（水）

学科 HTML基礎②

-本日のアジェンダ-

1限目
学科 HTML基礎②
HTMLとは？

2限目
学科 HTML基礎②
htmlの記述【基本タグ】

3限目
学科 HTML基礎②
htmlの記述【head】

4限目
学科 HTML基礎②
htmlの記述【body】

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

本日のテーマ

基本タグについて

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

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

参考サイト

研修メモ

■WordPressの投稿でのリンクの貼り方

リンクの貼る文字列を反転（選択）
→ リンクボタン（鎖マーク）を押下 → URLを入力→確定
外外部ページにリンクする場合は、「新しいタブで開く」を設定しておくと良い。
リンクを解除する場合は、再度、リンクボタンを押下する。

■講義内容

HTML5からは装飾はCSSの仕事なのでHTMLからは装飾系のタブは廃止された。
Webページは、HTML、CSS、JavaScriptの3つで出来ている。
HTMLの装飾系タブは、書けば動くが検索エンジンでNGとなる。
ブラウザも将来的には、未サポートになるかもしれない。
HTMLとCSSの話 → HTMLとCSSの基礎をまとめたサイト
マルチデバイス対応の話 → 本日資料：マルチデバイス対応の教科書.pdf

■使えそうな無料WordPressテーマ

Luxeritas Theme（ルクセリタス）
Cocoon（コクーン）
Simplicity2（シンプリシティ2）
Xeory Base（セオリーベース）
LION MEDIA（ライオンメディア） / LION BLOG（ライオンブログ）
ポートフォリオサイトのお勧め

最初の基本的なHTML（HTMLは書かれていないが）

マルチデバイス対応の教科書ダウンロード

2020年3月19日（木）

学科 HTML基礎③

-本日のアジェンダ-

1限目
学科 HTML基礎③
HTMLとは？

2限目
学科 HTML基礎③
htmlの記述【body】

3限目
学科 HTML基礎③
htmlの記述【body】

4限目
学科 HTML基礎③
htmlの記述【body】

5限目
学科 HTML基礎③
本日のまとめ

本日のテーマ

bodyの中身について

HTMLとは？

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

参考サイト

CSSとは？

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

参考サイト

javascriptとは？

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

参考サイト

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

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

参考サイト

研修メモ

■講義内容

学ぶ内容の中でCSSの記述の「配置」が重要！
「DOCTYPE!」は、必ず書くものと覚える → HTML5からは「」で良い
タグのチェックはタグチェッカーを使用 → Gateway ? Another HTML-lint 5

■参考情報

viewportをちゃんと理解する

最初の基本的なHTML（本当のHTML）

2020年3月20日（金）

学科 HTML基礎④

-本日のアジェンダ-

1限目
学科 HTML基礎④
htmlの記述【a（リンク）】

2限目
学科 HTML基礎④
htmlの記述【img（画像）】

3限目
学科 HTML基礎④
外部ファイルについて

4限目
学科 HTML基礎④
外部ファイルについて

5限目
学科 HTML基礎④
本日のまとめ

本日のテーマ

外部ファイルについて

研修メモ

HTMLの基本形

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>錦糸動物園 - 錦糸町駅前の楽しく元気な動物園</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1><img src="images/logo_deau01.png" alt="サンプルページ（ロゴ）" width="400" height="100%"></h1>
<p>これはサンプルサイトです。</p>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="profile.html">プロフィール</a></li>
<li><va href="access.html">アクセス</a></li>
</ul>
<p>メイン画像の掲載</p>
<img src="images/home_main_img01.jpg" alt="メイン画像" width="480" height="100%">
<h2>新着情報
NEWS</h2>
<ul>
<li>2020年3月20日　新着情報新着情報新着情報新着情報新着情報</li>
<li>2020年3月20日　新着情報新着情報新着情報新着情報新着情報</li>
<li>2020年3月20日　新着情報新着情報新着情報新着情報新着情報</li>
<li>2020年3月20日　新着情報新着情報新着情報新着情報新着情報</li>
<li>2020年3月20日　新着情報新着情報新着情報新着情報新着情報</li>
<li>2020年5月01日　錦糸動物園 グランドオープン<br><a href="http://deau001.wp.xdomain.jp/" target="_blank"><img src="images/bnr_kinshizoo01.jpg" alt="錦糸動物園" width="468" height="100%"></a></li>
</ul>
<h2>ワンポイントアドバイス</h2>
<ol>
<li>コーディングはまずしっかりマークアップを行いましょう。</li>
<li>マークアップが正しくできたら次は、CSSでデザインをする為のタグ入れを行います。</li>
<li>フッターにはコピーライトを入れましょう。</li>
</ol>
<h3>【コピーライト】について</h3>
<p>参考リンク</p>
<p><a href="http://deau-a.spawn.jp/copyright" target="_blank">http://deau-a.spawn.jp/copyright</a></p>
<h3>【特殊文字】について</h3>
<p>参考リンク</p>
<p><a href="http://www.htmq.com/text/" target="_blank">http://www.htmq.com/text/</a></p>
<p>Copyright &copy; 錦糸動物園 All Rights Reserved.</p>
</body>
</html>

怪しい状態のHTML

怪しい状態を作成するための元ファイル（ZIP）

2020年3月23日（月）

学科 HTML基礎⑤

-本日のアジェンダ-

1限目
学科 HTML基礎⑤
htmlの記述【body】

2限目
学科 HTML基礎⑤
より細かな内容の記述について

3限目
学科 HTML基礎⑤
CSSでデザインする為のHTML記述について

4限目
学科 HTML基礎⑤
CSSでデザインする為のHTML記述について

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

本日のテーマ

デザインする為のHTML記述

bodyの中のタグ基本その1
（テキスト、画像をマークアップ）

h1～h6
p
hr
ul li
ol li
dl dt dd
table caption tr th td

bodyの中のタグ基本その2
（その1の中にリンク、画像、改行、埋め込みのタグ）

img
a
br
iframe

bodyの中のタグ基本その3
（更に意味を持たせるブロック「block」のタグ）

section
nav
header
footer
main

bodyの中のタグ基本その4
（更に意味を持たせるインライン「inline」のタグ）

em
strong
i
b
small

bodyの中のタグ基本その5
（デザインの為に使うタグ）

div
span

同じ種類タグを差別化する為に使う属性

id=””
class=””

それ以外に様々な種類のタグもありますが
まずはこれらをしっかり覚えておきましょう。

参考サイト

研修メモ

デスクトップ上の画像ファイルをフォルダに移す時は、ドラック＆ドロップではパスがおかしくなることがあるので、切り取り（Ctrl+X）と貼り付け（Ctrl+V）で行うのが良い
作業を楽にするために拡張子と起動プログラムに関連付けを行っておくと良い
ブラウザの表示をスムーズに行うために imgタグのheight属性を記述しておいた法が良い（100%と記述）
正しい記述としてimgタグの外にpタグを記述する（忘れないように！）
Copyrightは、最小限「c 著作権者名 2020」で良い
特殊文字に関しては、「 http://www.htmq.com/text/ 」を参照

単語の協調（インラインタグ）

<em> 協調する（複数可）
<strong> 強い協調する（ページに1～2個が良い）
<small> 免責・警告・著作権などの注釈
<i> 声や心の中で思ったこと
<b> キーワードや商品名など

ブロックタグ（あくまでも記載内容の種別を分類するだけ！）

<section> 一つのセクションである
<nav> ナビゲーションである
<header> ヘッダである
<footer> フッダである
<main> メインコンテンツである

装飾タグ（文章としては意味を持たない）

<div> ブロックで指定
<span> インラインで指定

その他

<div>と<span>の種別は、idとclass属性で切り分け
idとclassの使い方の違いはないが、idはページ内で1個、classはページ内に複数利用可

研修メモ

まだ、怪しい状態のHTML

2020年3月24日（火）

学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
「セレクタ」「プロパティ」「値」

2限目
学科 CSS基礎①
CSSの記述【文字】

3限目
学科 CSS基礎①
idとclassについて

4限目
学科 CSS基礎①
CSSの点数計算

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

本日のテーマ

ここからデベロッパーツールが便利です！

CSSとは？

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

参考サイト

CSSの記述について

セレクタ{
プロパティ:値;
}

参考サイト

「命名規則」について

命名規則とは、プログラミングを行う際にソースコード上の識別子の名称となる文字列を決定するためのルールを定めたもの。ネーミング規則、ネーミング規約、あるいは命名規約とも呼ぶ。通常は、ソースコードの可読性や視認性の向上、プログラミング効率およびメンテナンス性の改善などを目的としている。

参考サイト

研修メモ

今日は、CSSの「セレクタ、プロパティ、値」の3つを覚えること
最近は、Chromeのデベロッパーツールを使う機会が増えた
昔は、AdobeのDrameweaverを使う機会が多かった
（学校で Drameweaver 教えるのは勉強したと書けるようにするため）

テキスト関連セレクタ

color : 色指定;
→ 文字色を指定（#rrggbb、rgba(r,g,b,a)）
opacity : 透明度;
→ 要素の透明度を指定（画像にも適用可）（0:透明、1:不透明）
text-align : 揃え位置;
→ ブロックコンテンツ内の行の揃え位置を指定（left, center, right）
text-decoration : テキスト属性;
→ テキストの線・色・スタイルをまとめて指定（none、underline）
→ a タグの下線を引くのをためるために none を指定
text-shadow : 水平方向の距離垂直方向の距離影のぼかし半径影の色;
→ テキストの影を指定
→「,」（カンマ）を指定して複数記述することで複数の影を作ることができる
→四方にぼかしていない影を作ると文字に境界線を作ることもできる

フォント関連のセレクタ

font-family : フォント名;
→ フォントの種類を指定（カンマで区切って複数指定）
font-size : フォントサイズ;
→ フォントサイズを指定（ピクセル、%→お勧めは%）
font-weight : 文字の太さ;
→ 文字列の太さを指定（normal、bold）
font-style : 文字の斜体;
→ 文字列の斜体（normal、itaric）
line-height : 行間値;
→ 行間隔を指定（normal、px、%）
→行間値から1を引いた残りの半分づつを上下に割り当てる
→黄金比は、1.6（少しせまくするには、1.4）
font : たくさんのプロパティ;
→ フォントのプロパティを一括で指定
white-space : 改行方法;
→ 改行の表示方法を指定（pre、nowrap）
→名前などで自動改行してほしくない時に指定

その他

セレクタには、点数制度があり大きな点数を獲得したセレクタが有効になる
li や a タグをインライン要素からブロック要素に変更するには、「display : block;」と指定

2020年3月26日（木）

学科 CSS基礎②

-本日のアジェンダ-

1限目
学科 CSS基礎①
セレクタの整理整頓

2限目
学科 CSS基礎②
CSSの記述【背景】

3限目
学科 CSS基礎②
CSSの記述【リスト】

4限目
学科 CSS基礎②
CSSの記述【疑似クラス・疑似要素】

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

本日のテーマ

CSSのセレクタを整理しましょう。

CSSとは？

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

参考サイト

CSSの記述について

セレクタ{
プロパティ:値;
}

参考サイト

「命名規則」について

参考サイト

研修メモ

reset cssで各タグが個別にもっている値をリセットすると、後の設計がしやすい
特に、ボックスのmarginとpaddingをゼロにしておくこと
疑似タグを使えば、条件を満たした時だけ有効になる属性を指定することができる
例えば、hover（カーソルを重ねる）は「a:hover { opacity:0.7; }」と指定する
デベロッパーツールのソースファイル名をクリックするとソースコードを表示できる

なかなか、かっこ良く表示されないHTML

2020年3月31日（火）

学科 CSS基礎③

-本日のアジェンダ-

1限目
学科 CSS基礎③
HTMLとCSSの復習

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

3限目
学科 CSS基礎③
「width」と「height」

4限目
学科 CSS基礎③
「padding」と「margin」

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

本日のテーマ

ボックスモデル

ボックスモデルとは？

英語から翻訳-Web開発では、CSSボックスモデルは、ブラウザーエンジンでHTML要素がどのようにモデル化されるか、およびそれらのHTML要素の次元がCSSプロパティからどのように導出されるかを指します。これは、HTML Webページの構成の基本概念です。ウィキペディア（英語)CSS 基本ボックスモデルの紹介 – CSS: カスケーディングスタイル …

参考サイト

研修メモ

ボックスモデル（BOX-MODEL）は、以下のセレクタを理解することが必要
ボックスモデルに関わるセレクタとして、width、height、padding、margin、border
ボックスをレイアアウトさせるセレクタとして、float、clear、position、overflow、display

ボックスモデルのノウハウ

ボックスモデルのデザインを行う時は、backgroundセレクタを使用して色を付けておくと境界が明確になりわかりやすい
reset cssで「box-sizing: border-box;」を書いておくとpaddingやborderは、widthの内側に確保される → 書いていないと（デフォルト）は、widthの外側に確保される
widthは、可能な限り%指定を行う
heightは、極力使わない（autoが良い）
paddingは、「padding: top right bottom left;」となる
バックグランドで画像を表示する場合（「background-image: url(images/home_main_img01.jpg);」）の時は、heightを使用することで指定の高さを表示できる
background-positionとbackground-sizeを指定すると任意の位置にバックグランド画像を表示することができる
marginだけは、マイナス値も指定でき、色々とめんどくさい！
→ 明日詳しく説明！

だめだめなHTML

ボックスモデルの練習HTML

ボックスモデルの練習HTMLの元ファイル（ZIP）

2020年4月1日（水）

学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
「margin」

2限目
学科 CSS基礎④
「 float 」と「 clear 」

3限目
学科 CSS基礎④
横並びについて

4限目
学科 CSS基礎④
「回り込みについて」

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

本日のテーマ

marginをは一方通行にしときましょう

ボックスモデルとは？

参考サイト

研修メモ

marginとmarginがぶつかると足されるのではなく大きな方が有効となる（marginの相殺）
marginの値にマイナス値を指定するとボックスが重なる（marginは余白ではなく座標と思った方が良い）
プラスとマイナスのmarginがぶつかった場合は、相殺されないで加算（合計）した値となる
マイナスとマイナスのmarginがぶつかった場合は、相殺されて大きなマイナス値の方が有効となる
marginの相殺は、親子でもおきる（親のtopと子のtopを両方指定した場合）
margin-topは、使わないのが相殺を発生させない有効な手段！
ちなみに横の関係では、相殺は発生しない
floatは昔からあるがCSS3からflexboxがが入ってきた
→ 新しくサイトを作る場合は、flexboxを使うと良い
→ CSSグリッドレイアウトもあるが、まだ、バグが多いのでお勧めしない
→ 但し、flexboxはIEでバグがあるのと昔のサイトはfloatで作成されているので、現時点では、floatを学ぶしかない！
floatしたら、必ず「clear both」でクリアすること
margin指定する場合は、%を使用するとwidthと合わせて100%計算が楽になる
box自体を中央配置にする場合は、boxのCSSにwidthで幅を定義し、その後に「margin: 0 auto;」とすれば良い
→ 左右のどちらかを「0」にすると box自体を右寄せや左寄せにできる
中央配置をしていてもfloatを使用すると中央配置が無効になるので、外にdivを定義して、そのdivを中央配置に定義すれば良い
pタグ内のimgタグで写真を表示時に下のすきまをなくするは、「line-height: 0;」を指定すれば良い

ボックスモデルの練習HTML（その2）

ボックスモデルの練習HTML（その2）（ZIP）

2020年4月2日（木）

学科 CSS基礎⑤

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
「 position 」

2限目
学科 CSS基礎⑤
「 overflow 」

3限目
学科 CSS基礎⑤
「display 」

4限目
学科 CSS基礎⑤
CSSでのレイアウトについて

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

本日のテーマ

displayでタグを自在に操りましょう

ボックスモデルとは？

参考サイト

研修メモ

floatを止める方法

floatを使用したら、必ず「clear: both;」でfloatを止める
止める要素がない時は、親要素に「overflow: hidden;」を書けば良い（オーバーフロー）
疑似要素の「:after」を使用して「clear: both;」を書くという手段もある

（例）
　div.box03 ul:after{
　　display: block;
　　content: “";
　　clear: both;
　}

その他

ウィンドウを3分割したい場合は、widthに「33.3333%」（少数）を入力すれば良い
boxに影を付ける時は、box-shadowを指定すれば良い
「margin: 0 auto」は、中央揃えする時に良く使う
flex-boxを使用する場合は、「display: flex;」と記述するだけ！（簡単）
リストの横並びをする時は、「display: inline-bloc;」を使うこともある
aタグで文字以外の場所もクリック対象にしたい時は、aタグに「display: block;」を指定すれば良い
→ また、blockにすることでpaddingやmarginを指定することができる

ボックスモデルの練習HTML（その3）

ボックスモデルの練習HTML（その3）（ZIP）

2020年4月3日（金）

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

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎
Webページをレイアウトする方法について

2限目
学科レイアウトデザイン基礎
Webページをレイアウトする方法について

3限目
学科レイアウトデザイン基礎
レイアウト見本について

4限目
学科レイアウトデザイン基礎
レイアウト見本について

5限目
学科レイアウトデザイン基礎
本日のまとめ

本日のテーマ

見本のレイアウトを使ってみましょう。

研修メモ

スマートフォン対応を行う時は、以下を使用する
・Viewport
　→ 表示内容を縮小しないでデバイスの解像度を使用することを宣言する
・Media Queries
　→ デバイスの状態により表示を切り替える（CSSの内容を変更する）
・Box model
　→ 昨日まで勉強した内容です
・UI/UX
　→
PC用Webサイトは、960pxぐらいにすると良い
制作作業のコツ
①バックアップは必須
②行き当たりばったりはダメ

2020年4月6日（月）

学科 XD基礎①

-本日のアジェンダ-

1限目
学科 XD基礎①
プロトタイプデザインについて

2限目
学科 XD基礎①
XDについて

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

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

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

本日のテーマ

今日はXDです。

adobe XDについて

XDに使用することで、デザイナーはより早く、正確に、高い品質で作業できます。インタラクティブなプロトタイプをシームレスに反映し、Windows、Mac、iOS、Androidなどの様々なデバイスやプラットフォーム上でチームのメンバーやレビュー担当者と共有できるようになります。

補足情報

XDはまだまだ発展途上段階なので、便利な部分もあれば、まだまだ使い勝手の悪い部分もあります。ただし日々アップデートされているのでたまに様子を見てみてください。

参考サイト

研修メモ

講義内容（XD）

XDは、四角の角を丸くする時に各角単位に丸の具合を指定することができる
XDは、多角形を書いた後からでも角数や星型への変更などができる
写真を加工する機能はない → Photoshopを使用のこと
シェイプを作成しておいて、そこに画像をドラックすると、そのシェイプに合わせた大きさの写真になる（写真を個別に編集したい場合は、ダブルクリックすれば良い）
写真や商品名などを複数選択しておいてリピートグリッド機能を使えば複数の写真や商品名に複製することができる
プロトタイプ機能を使うことでリンクを作成してリンクのシミュレーションを行うことができる

講義内容（Photoshop)

新規作成で1366×2000程度のサイズを作成する
実際のページ幅は、960pxが良い → これを作成するには、カンバスサイズを960pxにして両端にガイドを引いた後にカンバスサイズを1366に戻せばよい（これをする時は、アートボードをなしにしておくこと）
4月21日（火）までにWebサイトを作成して提出
→ 4月10日までにワイヤフレーム（JPEG）を提出

AdobeXDの教科書ダウンロード

2020年4月7日（火）

学科 XD基礎②

-本日のアジェンダ-

1限目
学科 XD基礎②
ワイヤーフレームの作成

2限目
学科 XD基礎②
XDについて

3限目
学科 XD基礎②
XDについて

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

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

本日のテーマ

ワイヤーフレームの作成

ワイヤーフレームとは？

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

参考サイト

adobe XDについて

補足情報

参考サイト

研修メモ

Photoshopで文字属性を変更する時は、文字ウィンドウを表示する
Photoshopで図形のアンカーを表示させる時は、Ctrl+Tを押下する

2020年4月8日（水）

実技ＸＤ実習①

-本日アジェンダ-

1限目
実技　ＸＤ実習①
XDの留意点

2限目
実技ＸＤ実習①
プロトタイプについて

3限目
実技ＸＤ実習①
プロトタイプについて

4限目
実技ＸＤ実習①
課題制作

5限目
実技ＸＤ実習①
課題制作（提出）

本日のテーマ

ワイヤーフレーム作成です。

研修メモ

今日は、欠席者は多く３名だけの出席だったため課題制作に集中！

2020年4月9日（木）

実技ＸＤ実習②

-本日アジェンダ-

1限目
実技ＸＤ実習②
XDの便利機能

2限目
実技ＸＤ実習②
XDの便利機能

3限目
実技ＸＤ実習②
XDの便利機能

4限目
実技ＸＤ実習②
課題制作

5限目
実技ＸＤ実習②
課題制作

本日のテーマ

XDのまとめ

adobe XDについて

参考サイト

研修メモ

今日も、欠席者が多いため課題制作に集中！

2020年6月1日（月）

実技 WEBデザイン実習①

-本日のアジェンダ-

1限目
実技 WEBデザイン実習①
DWについて

2限目
実技 WEBデザイン実習①
DWの基本操作について

3限目
実技 WEBデザイン実習①
DWでのマークアップ

4限目
実技 WEBデザイン実習①
課題制作

5限目
実技 WEBデザイン実習①
課題制作

本日のテーマ

DWのメリットの確認をしてみましょう。

研修メモ

2020年6月2日（火）

実技 WEBデザイン実習②

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
DWについて

2限目
実技 WEBデザイン実習②
DWの基本操作について

3限目
実技 WEBデザイン実習②
DWでのマークアップ

4限目
実技 WEBデザイン実習②
課題制作

5限目
実技 WEBデザイン実習②
課題制作

本日のテーマ

ワイヤーフレームからデザインラフの作成へ

スライスツールについて

スライスツールは、Photoshopでwebデザインを作成した時に、パーツ分けと保存が簡単にできるとても便利なツールです。

参考サイト

Web用に保存について

その名の通り、Photoshop CC 2015以前からのWeb用画像の書き出し方法です。 [ファイル]→[書き出し]→[Web用に保存（従来）]で実行できます。画質の設定や最適化等の設定を詳細に行うことができます。アニメGIF、スライスの書き出しができることが特徴です。

参考サイト

書き出し形式について

形式や画質などを変更したい場合は、環境設定で変えることができます。場所は、「ファイル」>「書き出し」>「書き出しの環境設定」です。ダイアログボックスが表示されたら、「クイック書き出し形式」の下にある「PNG」をクリックし、「JPG」に変更します。そして「OK」をクリックすれば完了です。

スマホ対応について

サイト制作課題

6月5日（金）までに提出・「ワイヤーフレーム・デザインラフ」
6月11日（木）までに提出・「Webサイト（途中報告で大丈夫です。）」

研修メモ

2020年6月9日（火）

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

-本日のアジェンダ-

1限目
実技　スマートフォンサイト作成実習②
サーバについて

2限目
実技　スマートフォンサイト作成実習②
FTPについて

3限目
実技　スマートフォンサイト作成実習②
FTPについて

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

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

本日のテーマ

サーバーにUPしましょう。

サイト制作課題

6月5日（金）までに提出・「ワイヤーフレーム・デザインラフ」
6月11日（木）までに提出・「Webサイト（途中報告で大丈夫です。）」

参考サイト

ホスティングサーバとは？

ホスティングサーバとは、複数のユーザーが利用するサーバーのことで、WebサイトやWebアプリケーションをインターネットで一般公開するために使われる。

参考サイト

SNS とは?

SNSとは、Social Networking Service（ソーシャル・ネットワーキング・サービス）の略で、インターネットを介して人間関係を構築できるスマホ・パソコン用のサービスの総称です。

参考サイト

SNSの埋め込み方

埋め込み例
のサイトURL
https://samplesdl.me/training_html-css/sns.html

研修メモ

2020年6月13日（土）

学科 WEB動画基礎

-本日のアジェンダ-

1限目
学科 WEB動画基礎
WEB動画について

2限目
学科 WEB動画基礎
WEB動画について

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

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

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

本日のテーマ

「動画」の利用法と活用法

YouTubeにつて

YouTube （ ユーチューブ ）は、アメリカ合衆国・カリフォルニア州サンブルーノに本社を置く世界最大の動画共有サービス。Youは「あなた」、Tubeは「ブラウン管（テレビ）」という意味である。

参考サイト

研修メモ

2020年6月15日（月）

学科 JavaScript基礎

-本日のアジェンダ-

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

2限目
学科 JavaScript基礎
JavaScript運用について

3限目
学科 JavaScript基礎
JavaScript運用について

4限目
学科 JavaScript基礎
作品制作

5限目
学科 JavaScript基礎
作品制作

本日のテーマ

「JavaScript」

JavaScript とは？

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

jQuery とは？

jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。ウィキペディア

研修メモ

2020年6月16日（火）

職業人講話①

-本日のアジェンダ-

1限目
職業人講話①
業界のお話について

2限目
職業人講話①
業界のお話について

3限目
職業人講話①
業界のお話について

4限目
職業人講話①
作品作成

5限目
職業人講話①
作品作成

研修メモ

2020年6月17日（水）

実技　JavaScript（jQuery）実習①

-本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習①
jQueryについて

2限目
実技　JavaScript（jQuery）実習①
jQueryについて

3限目
実技　JavaScript（jQuery）実習①
作品制作

4限目
実技　JavaScript（jQuery）実習①
作品制作

5限目
実技　JavaScript（jQuery）実習①
作品制作

本日のテーマ

jQueryの構造を理解してみましょう。

JQUERY サンプルを検索して見つけてみましょう！

よくあるキーワードは…

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

例：スクロール

即完成！jQueryスクロールでページトップへ戻るボタンをたった7分で作る

研修メモ

2020年6月18日（木）

実技　JavaScript（jQuery）実習②

本日のアジェンダ-

1限目
実技　JavaScript（jQuery）実習②
jQueryの利用

2限目
実技　JavaScript（jQuery）実習②
jQueryの利用

3限目
実技　JavaScript（jQuery）実習②
作品制作

4限目
実技　JavaScript（jQuery）実習②
作品制作

5限目
実技　JavaScript（jQuery）実習②
作品制作

本日のテーマ

jQueryプラグインを自分のサイトに導入してみましょう。

jQueryとは

JavaScript初心者のためのjQuery入門

jQuery
jQuery公式サイト
jQuery日本語リファレンスの例
jQuery リファレンス

参考サイト

例：フェード

【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー

例：ハンバーガーメニュー＋ナビゲーションドロワー

例：カルーセル（スライダー）

研修メモ

2020年6月19日（金）

学科 PHP基礎

-本日のアジェンダ-

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

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

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

4限目
学科 PHP基礎
作品制作

5限目
学科 PHP基礎
作品制作

本日のテーマ

今日は雰囲気を理解してもらえればOK！

PHPとは

PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他のプログラミング言語と比較して仕様や文法が簡単なため習得しやすいと言われています。またMySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語でもあります。

参考サイト

ワードプレスのファイル構造

研修メモ

2020年6月22日（月）

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

-本日のアジェンダ-

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

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

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

4限目
学科サーバーサイドプログラム基礎
作品制作

5限目
学科サーバーサイドプログラム基礎
作品制作

本日のテーマ

WordPressをインストールしてみます。

WordPressとは

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

参考サイト

インストールしてみましょう。

研修メモ

2020年6月23日（火）

実技 CMS構築実習①

-本日のアジェンダ-

1限目
実技 CMS構築実習①
プラグインについて

2限目
実技 CMS構築実習①
プラグインについて

3限目
実技 CMS構築実習①
作品制作

4限目
実技 CMS構築実習①
作品制作

5限目
実技 CMS構築実習①
作品制作

本日のテーマ

プラグインについて

Contact Form 7

【簡単】Contact Form 7（WordPressお問い合わせフォーム設置 …

Classic Editor

WordPressを旧エディターに戻すプラグイン「Classic Editor」 | 創 …

参考サイト

研修メモ

2020年6月25日（木）

実技 CMS構築実習②

-本日のアジェンダ-

1限目
実技 CMS構築実習②
サーバー移転について

2限目
実技 CMS構築実習②
サーバー移転について

3限目
実技 CMS構築実習②
サーバー移転について

4限目
実技 CMS構築実習②
作品制作

5限目
実技 CMS構築実習②
作品制作

本日のテーマ

サーバー移転

サーバサイドスクリプト

PHPやPerlといったプログラミング言語があります。
これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。
何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

クライアントサイドスクリプト

一方、JavaScriptでは、記述したHTMLファイルはWebサーバ上でも公開されますが、ブラウザさえあれば実行することが可能です。
Webサーバは必須ではありません。
これは、Webブラウザ内でプログラムが実行されるためです。
このようなスクリプトのことを「クライアントサイドスクリプト」と呼びます。

必要な知識として

合わせて（更に上級編）

それを整理すると

1.まずプログラムが動くサーバーを用意
2.PHPやCGIのプログラムファイルを用意
3.HTML・CSS （JavaScriptで動作）でデザインをカスタマイズする

参考サイト

【MailForm01】PHPメールフォーム多機能版（著作権リンク無し）フリー（無料）｜PHP工房

WordPressのプラグイン「Contact Form 7 」

【簡単】Contact Form 7（WordPressお問い合わせフォーム設置）の使い方 …

ワードプレスのサーバー移転とバックアップについて

参考サイト

研修メモ

2020年6月26日（金）

学科 WEBマーケティング基礎

-本日のアジェンダ-

1限目
学科 WEBマーケティング基礎
SEOについて

2限目
学科 WEBマーケティング基礎
マーケティングについて

3限目
学科 WEBマーケティング基礎
アナリティクスについて

4限目
学科 WEBマーケティング基礎
作品制作

5限目
学科 WEBマーケティング基礎
作品制作

本日のテーマ

SEOについて

SEOとは何か？

Webページを作ったら、誰もが多くの人に見てもらいたいと思うでしょう。趣味で作ったWebページなら、お友達に見せるだけでもいいかもしれませんが、ネットショップやアフィリエイトなど、事業としてやりたい場合は訪問者を増やす施策が必要です。普通はインターネットに公開しただけでは誰にも見てもらえませんから、訪問者を呼び込む何らかの方法が必要になるのです。そこで、注目されているのがSEOと呼ばれる方法です。

SEO（エスイーオー）というのは Search Engine Optimization の頭文字を取ったもので、検索エンジン最適化と呼ばれています。これは検索エンジンの検索結果の上位に表示されるようにするテクニックです。現在インターネット利用者は必要な情報を探すために Yahoo! や Google といった検索サービスを利用している方が多いです。そして、利用者のほとんどが検索結果の１ページ目か２ページ目までしか見ていない傾向があります。つまり、これら検索サービスの上の方に表示されれば、インターネット利用者の多くを効率的に自分のWebページに呼び込むことが出来るというわけです。

SEMとは？

SEMとは Search Engine Marketing （検索エンジンマーケティング）の略でインターネット上での市場調査を行う事を指します。自社サイトのターゲットとユーザーのニーズを把握しどのようなキーワードでの検索結果に上位表示されれば最適なのかを詳しく調査します。検索エンジンの検索結果の上位に表示されるようにサイトの構成を整備するSEO(検索エンジン最適化)や、検索連動型広告などによる広告掲載などもSEMに含まれます。

LPOとは？

LPOは「Landing Page Optimization」の略で「ランディングページ最適化」と言います。広告や外部サイトからリンクを辿って最初に表示されるページをランディングページと呼びます。初めて訪れたユーザーに適切な導線（ユーザーの視線やカーソル位置を想定した流れ）や便利な検索機能を提供しコンバージョンレートを上げる為に最適なサイト構成に整備します。

参考サイト

SEO（検索エンジン最適化）とは何か – SEO HACKS

Webデザイナー（コードを書く仕事）で必要なSEO

SEO対策を意識したコーディングと言うものは、まず正確にHTMLを記述しなくてはなりません。
HTMLと言うものは多少間違った記述が行われていても、取り敢えずはウェブページとして表示されるわけです。
しかし、検索エンジンは正しいHTMLで記述されていないと評価を低くしてしまい、SEOに対してはマイナス要素となってしまうのです。
その為HTMLソースコーダーにはSEO対策を意識したHTMLの知識が必要になると言う事なのです。

ウェブページのHTMLソースコーダーとブラウザの解析
HTMLはHyperTextMarkupLanguageと言う意味を持つものです。HTMLはウェブページを表示する時の記述言語であり、ブラウザはこのHTML文書を先頭から読み込み解析を行っていきます。
そしてユーザーが見る画面を表示させているのです。HTML文書の中にはユーザーが目にする事が出来る文字列や画像と言った物が記述されています。

画像に関しては、リンクが貼られているに過ぎませんが、その画像が何処にあるのかなどのリンクの情報がHTML文書の中に記述されているのです。これらのHTMLを記述するのはHTMLソースコーダーと呼ばれる人々がHTML文書を記述しているのですが、ユーザーが目にする事のないタグと呼ばれるものがHTML文書の中にはあるわけです。
ブラウザはHTML文書を読み込む時に先頭から読み込んで行きますが、このタグと言うものはブラウザが解析を行うものであり、ユーザーが目にするものはその解析結果に過ぎないのです。

正しいキーワード選定をしましょう。

SEOの基本といえばキーワード選定から始まりますが（その前に市場・ユーザー調査があるという話は置いておき）、今回はGoogleアナリティクスを活用した効果的なキーワード選定の方法を具体的に紹介してくれた記事をサーチエンジンランドから紹介します。意外と検索ボリュームや個人の感覚で決めがちなキーワード選定、せっかくSEOをするならきちんと正しいキーワードを選びたい。 — SEO Japan

SEOの第一歩 – 本当に正しいオーガニックキーワードの選び方 …

まず、こんな記事を・・・

被リンクについて

被リンクの扱いはとても要注意です！！
まだまだ理解されていない企業、制作会社がまだ多いです。
SEO対策でとても重要な内容になります。

SNSについて

Googleアナリティクス

Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービス。元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している。

Googleウェブマスターツール(
Google Search Console )について

SEOチェックツール

参考サイト

研修メモ

2020年6月27日（土）

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

-本日のアジェンダ-

1限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

2限目
実技　ポートフォリオ作成実習
ポートフォリオ制作について

1限目
実技　デザイン総合制作実習⑦
作品制作

2限目
実技　デザイン総合制作実習⑦
作品制作

3限目
実技　デザイン総合制作実習⑦
作品制作

4限目
実技　デザイン総合制作実習⑦
作品制作

5限目
実技　デザイン総合制作実習⑦
作品制作

研修メモ

ともすた
CSS Nite
http://cssnite.jp
http://cssnite.jp/blog/

2020年7月11日（土）

修了式

-本日のアジェンダ-

1限目
職業人講話②

2限目
修了式

3限目
修了式

202001開講-昼A-0521

2020年1月24日（金）

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

-本日のアジェンダ-

お知らせ

-欠席・遅刻等のご連絡について-

2020年1月27日（月）

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

–本日のアジェンダ–

本日のポイント

参考サイト

研修メモ

小森さん他己紹介

大浜の他己紹介

2020年1月28日（火）

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

-本日アジェンダ-

2020年1月29日（水）

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

-本日アジェンダ-

研修メモ

作品制作イメージ（task_○○○○_200129.txt）

大浜の作品イメージ

2020年1月30日（木）

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

-本日アジェンダ-

コンサルタントとは？

参考サイト

研修メモ

2020年1月31日（金）

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

-本日アジェンダ-

サイトマップ（情報設計）とは？

研修メモ

2020年2月3日（月）

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

-本日のアジェンダ-

本日テーマ

本日のIllustratorの基本操作

研修メモ

2020年2月4日（火）

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

-本日のアジェンダ-

本日のテーマ

研修メモ

2020年2月5日（水）

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

-本日のアジェンダ-

本日のテーマ

■本日のキーワード

研修メモ

2020年2月6日（木）

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

-本日のアジェンダ-

本日のテーマ

■本日のキーワード

■写真素材（練習用）

■無料写真素材のサイト

研修メモ

2020年2月7日（金）

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

-本日アジェンダ-

本日のテーマ

■本日のキーワード

文字ツール

参考サイト

文字パネル

参考サイト

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

ベクターデータとは？

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

研修メモ

2020年2月10日（月）

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

-本日アジェンダ-

本日のテーマ

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

■本日のキーワード（色調補正）

参考サイト

色調補正と 調整レイヤー について

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

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

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

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

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

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

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

色調補正と調整レイヤーについて

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

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

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

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

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