BLOG

  • 学科 WEBマーケティング基礎①【オンライン】

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

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

    3限目
    学科 WEBマーケティング基礎①
    課題制作

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

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


    本日のポイント
    Googleアナリティクス で効果測定を理解しておきましょう。

    【資料】
    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「WEBマーケティングの教科書①.pdf」

    【動画】
    WEBページが・・・
    マーケティングとは?
    https://youtu.be/6OdffKj1IhY(12:52)
    Google Analyticsとは?
    https://youtu.be/i4FT1mWSdEY(3:12)
    そもそもWebというお仕事の仕組みについて
    https://youtu.be/bdBKz0CVsKo(12:01)
    マーケティングとは?
    ビジネスを成功させるためにはマーケティング活動が重要です。まずは、マーケティング活動の一般論について理解しましょう。

    参考サイト
    マーケティングとは?基礎から定番の手法・戦略まで、ガッツリ学ぶ
    マーケティングとは何か?定義と基礎をわかりやすく! | MarkeTRUNK
    『マーケティングとは?』一番分かりやすい入門編
    WEBマーケティングとは?
    最近はWebを使用したマーケティング活動が重要視されています。Webマーケッティング活用の基本について理解しましょう。

    参考サイト
    初心者が覚えるべきWebマーケティングの基礎知識 | マーケティング | BLOG | 株式会社Too
    Web(ウェブ)マーケティングとは?今さら聞けない基礎知識や代表的な手法を徹底解説|ferret
    webマーケティングとは?広告やSEOだけではない!基礎知識と施策|マーケティング入門
    SEOについて
    SEOとは?
    Webページを作ったら、誰もが多くの人に見てもらいたいと思うでしょう。趣味で作ったWebページなら、お友達に見せるだけでもいいかもしれませんが、ネットショップやアフィリエイトなど、事業としてやりたい場合は訪問者を増やす施策が必要です。普通はインターネットに公開しただけでは誰にも見てもらえませんから、訪問者を呼び込む何らかの方法が必要になるのです。そこで、注目されているのがSEOと呼ばれる方法です。

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

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

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

    参考サイト
    SEO(検索エンジン最適化)とは何か – SEO HACKS
    SEO対策|検索上位を独占するために弊社が行っている36の手順
    SEOの基礎知識 – SEOのメリットや検索エンジンの仕組み等を解説
    Webデザイナー(コードを書く仕事)で必要なSEO
    SEO対策を意識したコーディングと言うものは、まず正確にHTMLを記述しなくてはなりません。HTMLと言うものは多少間違った記述が行われていても、取り敢えずはウェブページとして表示されるわけです。しかし、検索エンジンは正しいHTMLで記述されていないと評価を低くしてしまい、SEOに対してはマイナス要素となってしまうのです。その為HTMLソースコーダーにはSEO対策を意識したHTMLの知識が必要になると言う事なのです。

    参考サイト
    タイトルタグ(title)のSEOに最適な文字数や記入方法 – SEO 高屋
    SEOの基本中の基本!「titleタグ」「meta description」「h1タグ …
    METAタグ(keywords description)の使い方 – SEOのホワイト …
    被リンクについて
    被リンクの扱いはとても要注意です!!まだまだ理解されていない企業、制作会社がまだ多いです。SEO対策でとても重要な内容になります。

    参考サイト
    今さら聞けない被リンクとは?SEOとの関連性も紹介
    被リンクは悪!これまでの常識が変わった2015年からのSEO …
    被リンクを見よう!リンクを買わずに「集める」SEOに取り組む方法
    SNSについて
    最近は、SNSを利用したマーケティングも活性化しています。マーケティング断面でのSNS活用方法を理解しましょう。

    参考サイト
    【初心者向け】SNSマーケティングとは?意味と特徴を分かりやすく解説!
    ソーシャルブックマークからSNSへ、SEO効果はあるのか …
    企業の戦略・SNSマーケティング!その活用事例も紹介!
    Googleアナリティクス
    Google Analyticsは、Googleが無料で提供するWebページのアクセス解析サービス。 元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している。

    参考サイト
    【今さら聞けない】Googleアナリティクスとは?導入手順から使い方まで5分 …
    【Googleアナリティクスの使い方】最初に絶対マスターしておきたい6ポイント …
    Google Analyticsのコンバージョンカスタムレポート10種


  • 実技 CMS構築実習

    1限目
    実技 CMS構築実習
    WordPressサイトのフォルダ構成について

    2限目
    実技 CMS構築実習
    WordPressサイトの移行について

    3限目
    実技 CMS構築実習
    WordPressサイトの移行について

    4限目
    実技 CMS構築実習
    課題作成

    5限目
    実技 CMS構築実習
    課題作成


    本日のテーマ
    WordPressサイト移行手順を確認しましょう。

    WordPressサイトのフォルダ構成について
    WordPressのフォルダで移行に関連するフォルダは、以下の通りです。投稿ページや固定ページなどのコンテンツデータは、ファイルではなくデータベースに格納されているためファイルとして確認することはできません。

    テーマフォルダ:/wp-content/themes
    プラグインフォルダ:/wp-content/plugins
    メディアライブラリィフォルダ:/wp-content/uploads
    また、WordPressサイトの移行にAll-in-One WP Migrationプラグインを使用した場合は、以下のフォルダに移行用データが作成されます。

    移行データフォルダ:/wp-content/ai1wm-backups
    WordPressサイト移行時の対象物について
    WordPressサイトを移行する場合には、以下の対象物の移行が必要になります。

    WordPressサイト環境(テーマ、プラグインなど)
    設定情報、投稿データ、固定ページデータ
    メディアデータ
    ドメイン移行(必要に応じて)
    WordPressサイトの移行手順について
    WordPressサイトの移行の行うためには、以下の手順があります。

    レンタルサーバーが提供する簡単引越し機能
    プラグインを使用した移行
    参考サイト
    WordPressサイトはどうやって引っ越しする?移行方法を解説
    大きくは3つ!WordPressを別のサーバーへ移行する方法とは?
    【徹底解説】ドメイン変更を伴うWordPressの引っ越し手順7ステップ!移行時の注意点も解説


  • 学科 CMS構築基礎⑥【オンライン】

    1限目
    学科 CMS構築基礎⑥
    基本機能を保有したテーマの構造について

    2限目
    学科 CMS構築基礎⑥
    基本機能を保有したテーマの実装について

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

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

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


    本日のテーマ
    基本機能を保有したテーマを理解しましょう。

    【資料】
    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「WordPress活用法の教科書⑧.pdf」 

    【動画】
    WordPressのテーマについて
    TOPページの活用法
    https://youtu.be/3YuaHIvmXxs(6:30)
    WordPressのテーマについて
    投稿ページの活用法
    固定ページの活用法
    https://youtu.be/h-tWuQldBws(6:17)
    WordPressのテーマについて
    固定ページのカスタムテンプレート
    条件分岐タグ
    if文を使う
    https://youtu.be/kGXF0PV-WUA(13:05)
    WordPressのテーマについて
    ループ処理のタグと合わせる
    他のページに投稿を表示させる
    https://youtu.be/73ks5jwhyQ0(8:39)
    WordPressのテーマについて
    アイキャッチ画像の表示方法
    ウィジェットの活用について
    https://youtu.be/TwogdcJbOpM(10:48)
    WordPressテーマの基本機能とは
    基本機能を持ったWorkPressテーマを作成するためには、以下の機能を実装する必要があります。

    投稿一覧の表示
    投稿ページの表示
    固定ページの表示
    メニューの表示
    HTML・CSSからオリジナルテーマを作成
    WordPressのオリジナルテーマを作成する手順を理解しましょう。

    参考サイト
    【テーマ自作】WordPress オリジナルテーマの作り方と基本 – WEBST8のブログ
    WordPressのテーマを自作する方法解説!必要なファイルとそれぞれでよく使う内容例ご紹介
    WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス


  • 学科 レイアウトデザイン基礎④【オンライン】

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

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

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

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

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



    課題制作

    本日のテーマ
    デバイス検証は最後にしっかりと

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

    【資料】
    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「各デバイス検証.pdf」 

    【動画】「各デバイス検証」
    デバイス復習・Chromeデベロッパーツールの活用
    https://youtu.be/AcsQLCdnA2I(8:29)
    実機検証を行いましょう・デバイス検証まとめ
    https://youtu.be/oiSlUKld7t8(8:33)
    実機検証 について
    スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。

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

    参考サイト
    まだ実機検証してるの?クラウド上でテストできる「モバオぺ …
    WEB・アプリ検証 – 実機検証用スマホ・モバイルデバイス …
    デベロッパーツールでのスマホ確認の裏ワザとクラウド実機 …


  • 学科 レイアウトデザイン基礎③【オンライン】

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

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

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

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

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


    本日のテーマ
    ブラウザ検証についてです

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

    【資料】
    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「各ブラウザ検証.pdf」 

    【動画】
    ブラウザとは?主要ブラウザ・対応ブラウザを意識しましょう
    https://youtu.be/D15xc7iUrtQ(8:15)
    出来ないこともある?推奨・非推奨の確認・まとめ
    https://youtu.be/F7EiAjyrM9A(12:13)
    ワンポイントアドバイス
    サイトが一通り形になったら特に使用する可能性の高いブラウザは必ず確認しましょう。

    参考サイト
    WEBサイトの検証。ブラウザはどこまで対応する?
    ブラウザチェックはポイントを押さえて効率的に! | Web制作 …
    ブラウザチェックはWeb担当者の義務!確認するべき項目と …
    本日の課題
    提出課題はありません。
    就職活動に応じた作品制作、ポートフォリオのまとめやコーディングの続きを進めましょう。

    本日のテーマ②
    ここからは補足資料になります。
    情報収集など手を動かしながらの視聴でも構いません。
    もしくはお時間のある時にご自身で視聴ください。

    これからの時代マーケティング能力は必須!

    デザイナーだけではなく様々なお仕事でマーケティング能力が高い、意識が高いというのはどんなビジネスにおいても求められる能力です。
    就職活動は、努力や苦労した分だけ、一歩踏み出した分だけその後のお仕事と未来への自分へ帰ってくるでしょう。
    やっぱり就職活動は大変です!!
    ですがこれを乗り越えたら次の未来が待っています。
    自分のペースで良いと思います。焦らず、少しでも前に進んでいきましょう。

    【資料】
    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「マーケティング「結局マーケティングって」.pdf」 

    【動画】
    マーケティングとは? (21:31)
    商品やサービスが売れる仕組みを作ること・そのプロセス
    https://youtu.be/0wC06U9Um0E
    今後の転職対策に (5:29)
    https://youtu.be/PfbIMteJZwU
    現在面接に進んでいる方へ (19:43)
    マーケティング活動と就職活動
    https://youtu.be/CMF1AQ_h17M
    面接に進むポートフォリオが必ずやっているポイント (15:08)
    https://youtu.be/gpFJvucz2zk
    まずは「応募」が大切なわけ・まとめ (11:32)
    https://youtu.be/St_AD9qMNog


  • 実技 WEBデザイン実習③

    1限目
    実技 WEBデザイン実習③
    オーサリングツールについて

    2限目
    実技 WEBデザイン実習③
    Dreamweaver の使い方について

    3限目
    実技 WEBデザイン実習③
    課題制作

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

    5限目
    実技 WEBデザイン実習③



    課題制作

    本日のテーマ
    Dreamweaverです。

    Dreamweaverについて
    Adobe Dreamweaver(アドビドリームウィーバー)は、ひとことで言うとホームページ制作ソフトです。
    編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
    アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML+画像」なので、頑張れば「メモ帳+ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。

    【資料】
    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「WEBデザイン実習の教科書.pdf」 

    ワンポイントアドバイス
    Dreamweaverの歴史は長いです。いま世にいるデザイナーのほとんどの方がDreamweaverを過去に使った又は習った事のあるケースが多いです。ただし、昨今ではDreamweaverの需要は落ちています。
    その理由は、様々ですがこれからの希望職に合わせて、習得してみてください。

    参考サイト
    Dreamweaverチュートリアル | Dreamweaverの使い方
    使いこなせますか? Dreamweaver(ドリームウィーバー)の …
    気が付いたらDreamweaverを使わなくなっていました 中の人 …


  • 学科 WEB動画基礎

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

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

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

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

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


    WEB動画について

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

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「WEB動画基礎20220818.pdf」 

    【動画】

    WEB動画とは?・主なWEB動画
    https://youtu.be/PArDVLEBPhg(10:33)

    WEBデザイナーが知っておきたい動画の知識とは?
    https://youtu.be/OyLqnaWkiR0(8:33)

    5Gによるコンテンツの需要の変化・意識しておくポイント3つ
    https://youtu.be/QfoMPJhFhgM(15:28)

    短い動画によるプロモーション活動について
    https://youtu.be/Q4XYhPLmP_4(14:50)

    Web1.0 2.0 3.0について
    https://youtu.be/h7zRKzTCjyo(10:52)

    Web3.0はどうなる?
    https://youtu.be/y4i-iecVAbs(14:29)

    就職活動に向けてのワンポイントアドバイス
    https://youtu.be/SOLaSv0YIkQ(10:12)

    VIDEOとIFRAMEタグ

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

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

    記述例 https://www.youtube.com/embed/9No-FiEInLA


  • 学科 SNS運用基礎【オンライン】

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

    2限目
    学科 SNS運用基礎
    WebサイトとSNSの使い方について

    3限目
    学科 SNS運用基礎
    課題作成

    4限目
    学科 SNS運用基礎
    課題作成

    5限目
    学科 SNS運用基礎
    課題作成


    SNS とは?

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

    https://youtube.com/watch?v=7x_DvlmyfVA%3Ffeature%3Doembed

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「SNS運用基礎20220817.pdf」  

    【動画】

    ワンポイントアドバイス

    Webを利用するポイントとして、「Webサイト」「ブログ」「SNS」はWeb運用として重要なコンテンツの3つです。役割と特徴をしっかりと把握して、Webに関わるお仕事に関われるようにしましょう。

    参考サイト

    SNSの埋め込み方

    埋め込み例
    https://samplesdl.me/training_html-css/sns.html


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

    1限目
    実技 スマートフォンサイト作成実習
    コーディングに向けて

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

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

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

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


    WebサイトはPCで閲覧よりもスマートフォンで閲覧する割合が増加しています。
    Webサイトを多くの人に見てもらうためにははスマートホン対応がされていることが重要です。
    スマートフォンで閲覧しても快適に閲覧できるようにWebサイトを作成してください。
    例えば、以下のようなサイトではスマートホンでの閲覧に不向きです。

    • 文字が小さすぎて拡大しないと読めない
    • 横スクロールしないと全体が読めない
    • 横幅が狭い場合にレイアウトが乱れて読みにくい
    • ボタンやバナーの大きさや間隔が小さくて指で押せない

    スマートフォン対応(レスポンシブWebデザイン)の実施方法が明確でない人は「学科 CSS基礎⑥」の内容を再度確認しましょう。

    【学科 CSS基礎⑥のカリキュラム再掲】

    Box modelについて(RWD)

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    マルチデバイス対応の教科書①.pdf」 

    【動画】

    RWD 対応のサイトについて

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

  • 学科 ユーザーインターフェイス基礎④【オンライン】

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

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

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

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

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


    本日のテーマ

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

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「デザインの考え方」の教科書⑧.pdf」 

    動画

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

    ユーザビリティとは?

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

    アクセシビリティ

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

    参考サイト


  • 学科 レイアウトデザイン基礎②【オンライン】

    1限目
    学科 レイアウトデザイン基礎②
    RWDの歴史・基本設定Viewportについて

    2限目
    学科 レイアウトデザイン基礎②
    Media Queries・UI/UXについて

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

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

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


    レスポンシブWEBデザイン(RWD)とは?

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


  • 実技 WEBデザイン実習②

    1限目
    実技 WEBデザイン実習②
    Web用画像について

    2限目
    実技 WEBデザイン実習②
    Web画像の解像度について

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

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

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


    ・ワイヤーフレーム    ・デザインカンプ


  • 学科 ユーザーインターフェイス基礎③【オンライン】

    1限目
    学科 ユーザーインターフェイス基礎③
    デザインラフについて

    2限目
    学科 ユーザーインターフェイス基礎③
    HTML/CSSをイメージしたレイアウト考案について

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

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

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


    デザインラフとは?

    ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「「デザインの考え方」の教科書⑦.pdf」 

    【動画】 

    ワンポイントアドバイス

    ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成しましょう。


  • 実技 XD実習

    1限目
    実技 XD実習
    プロトタイプのフロー設定について

    2限目
    実技 XD実習
    共有機能について

    3限目
    実技 XD実習
    成績考査

    4限目
    実技 XD実習
    成績考査

    5限目
    実技 XD実習
    成績考査


    XDの共有機能について

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

    ワンポイントアドバイス

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

    参考サイト


  • 学科 XD基礎【オンライン】

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

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

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

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

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


    adobe XD とは?

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

    参考サイト

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    1.AdobeXDの教科書.pdf」 
    2.より幅を広げる為に.pdf」 

    ワンポイントアドバイス

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

    XD データ連携について

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

    ワンポイントアドバイス

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

    参考サイト

    【動画】

    より幅を広げる為に (3:03)
    無料ソフト活用のすすめ
    https://youtu.be/7fg9S9zNoaE

    ポートフォリオ掲載作品の充実のために (7:36)
    キーとなるバナー制作のポイント
    https://youtu.be/pIK8wjkmmAs

    紹介ソフトについて (6:59)
    https://youtu.be/lhtUiEAomk0

    ソフト①バナー制作 Adobe Express (12:52)
    https://youtu.be/VL1acGqeaRo

    ソフト②バナー制作 Canva (7:30)
    https://youtu.be/l2AV7Hd9_D8

    アピールとしてさらに有効なランディングページ(=LP) (4:32)
    https://youtu.be/T0ISDYl0fOg

    紹介ソフトについて (9:30)
    https://youtu.be/JyGSE4XoJGA

    ソフト③LP制作 Adobe XD (9:48)
    https://youtu.be/Zou2SvbGGJo

    ソフト④LP制作 Figma (10:08)
    https://youtu.be/hW1IlT7pR_4

    まとめ・注意点 (11:13)
    https://youtu.be/sCt73XRWQY8

    参考サイト

    • ご紹介③・adobe XD
      【お知らせと注意点】
      以前は無料で利用できるプラン(スタータープラン)がありましたが、現在は公式サイトから見当たらなくなっています。Adobe XDは、2023年1月に単体販売が終了になりました。 現在はスタータープランはダウンロードできなくなっており、無料で利用する場合は7日間の無料体験版 のみになっています。
      ※こちらは教室でお試しください。別動画へ案内
    • ご紹介④ Figma
      ・コラボレーションインターフェースデザインツール –Figmahttps://www.figma.com/ja/

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

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

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

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

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

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



    WordPressサイトを拡充しましょう

    本日のテーマ

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

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

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

    ポートフォリオサイト

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

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

    訓練ブログ

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

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

    参考サイト

    注意事項

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

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

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

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

  • 実技 WEBデザイン実習①

    2023.12.23

    1限目
    実技 WEBデザイン実習①
    ワイヤーフレーム制作の準備

    2限目
    実技 WEBデザイン実習①
    ワイヤーフレーム制作のポイント

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

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

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


    ワイヤーフレーム 初回作成


  • 学科 レイアウトデザイン基礎①【オンライン】

    1限目
    学科 レイアウトデザイン基礎①
    Webサイト・LPについて

    2限目
    学科 レイアウトデザイン基礎①
    ワイヤーフレームについて

    3限目
    学科 レイアウトデザイン基礎①
    レイアウトのポイントについて

    4限目
    学科 レイアウトデザイン基礎①
    制作に向けての準備

    5限目
    学科 レイアウトデザイン基礎①
    制作に向けての準備


    LP(ランディングページ)とは?

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

    参考サイト


  • 学科 CSS基礎⑥【オンライン】

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

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

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

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

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


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

    • Box Model
    • ボックスの幅(width)と高さ(height)の制御
    • ボックスの余白(padding/margin)の制御
    • ボーダー(border)と横並び(float)の制御
    • ボックスの配置と表示形式の制御
    • 幅広デザインでの Web ページ作成
    • viewport 定義の指定
    • 横幅変動時のコンテンツ幅を設定
    • Media Querie でデザインを整える
    • 画面サイズに合わせた表示部品の導入

  • 学科 CSS基礎⑤【オンライン】

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

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

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

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

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


    擬似クラス系セレクタ

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

    擬似要素系セレクタ

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


  • 学科 CSS基礎④

    2023.12.18

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

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

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

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

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


    レイアウト系プロパティ

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

    ボーダー系プロパティ

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

    パディング系プロパティ

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

    マージン系プロパティ

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

    その他のプロパティ

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

  • 学科 CSS基礎③【オンライン】

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

    2限目
    学科 CSS基礎③
    練習問題の説明

    3限目
    学科 CSS基礎③
    CSSのプロパティと値を考える

    4限目
    学科 CSS基礎③
    練習問題の解説

    5限目
    学科 CSS基礎③



    本日の講義のまとめ

    レイアウトデザイン練習問題③(レイアウトを定義するCSS)

    本日は、レイアウト系のCSSを中心に説明しますが、一部のプロパティと各プロパティの詳細説明は「CSS基礎④」で説明します。

    レイアウト系プロパティ

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

    ボーダー系プロパティ【CSS基礎④で説明】

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

    パディング系プロパティ

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

    マージン系プロパティ

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

    その他のプロパティ【CSS基礎④で説明】

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

    練習問題:レイアウトを定義するCSS

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    レイアウトデザイン 練習問題③.zip」 

    【動画】


  • 学科 CSS基礎②【オンライン】

    1限目
    学科 CSS基礎②
    CSSのプロパティと値について

    2限目
    学科 CSS基礎②
    練習問題の説明

    3限目
    学科 CSS基礎②
    CSSのプロパティと値を考える

    4限目
    学科 CSS基礎②
    練習問題の解説

    5限目
    学科 CSS基礎②


    本日のテーマ

    レイアウトデザイン練習問題②(CSSのプロパティと値を考える)

    バックグランド系プロパティ

    • background-color プロパティ(背景色)
    • background-attachment プロパティ(背景画像の位置)
    • background-image プロパティ(背景画像のファイル)
    • background-repeat プロパティ(背景画像の繰り返し)
    • background プロパティ(背景の一括指定)
    • background-size プロパティ(背景画像のサイズ)
    • background-position プロパティ(背景画像の表示開始位置)

    テキスト系プロパティ

    • color プロパティ(文字の色)
    • opacityプロパティ(透明度)
    • text-align プロパティ(文字の配置)
    • text-decoration-color プロパティ(文字飾りの色)
    • text-decoration-style プロパティ(文字飾りの線種)
    • text-decoration-thickness プロパティ(文字飾りの線の太さ)
    • text-decoration プロパティ(文字の飾りの一括指定)
    • text-shadow プロパティ(文字の影)

    フォント系プロパティ

    • font-family プロパティ(フォントの種類)
    • font-size プロパティ(フォントのサイズ)
    • font-weight プロパティ(フォントの太さ)
    • font-style プロパティ(フォントのスタイル)
    • line-height プロパティ(行の高さ)
    • font プロパティ(フォント一括指定)
    • white-space プロパティ(空白・改行の表示方法)
    • word-wrap プロパティ(単語の途中での改行方法)
    • word-break プロパティ(テキストや単語の改行方法)
    • tab-size プロパティ(タブ文字の表示幅指定)

    リスト系プロパティ

    • list-style-type プロパティ(リストマーカーの種類)
    • list-style-image プロパティ(リストマーカーの画像)
    • list-style-position プロパティ(リストマーカーの位置)
    • list-style プロパティ(リストマーカーの一括指定)

    練習問題:CSSのプロパティと値を考える

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    レイアウトデザイン 練習問題②.zip」 

    【動画】


  • 学科 CSS基礎① 2023.12.12

    1限目
    学科 CSS基礎①
    マークアップの練習について

    2限目
    学科 CSS基礎①
    マークアップの練習について

    3限目
    学科 CSS基礎①
    リセットCSSとセレクタの得点について

    4限目
    学科 CSS基礎①
    Chrome検証ツールについて

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


    本日のテーマ

    検証ツールを活用しましょう

    【まとめサイト】

    【動画】

    リセットCSSついて

    ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。

    リセット CSS は、ブラウザが持っているスタイルシートをリセット(クリア)するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。各自のコーディングスタイルに合わせて適時変更してください。

    セレクタの得点について

    セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

    Chrome検証ツールについて

    ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。

    本日の課題

    本日学んだ内容を復習して整理しておきましょう。
    ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。


  • 学科 HTML基礎④【オンライン】2023.12.09

    1限目
    学科 HTML基礎④
    CSSの基本事項について

    2限目
    学科 HTML基礎④
    練習問題の説明

    3限目
    学科 HTML基礎④
    マークアップの練習

    4限目
    学科 HTML基礎④
    練習問題の解説

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


    本日のテーマ

    レイアウトデザイン練習問題①(マークアップの練習)

    CSSの基本構造について

    • HTML ファイルとは別に記述する場合
    • HTML ファイル内に記述する場合
    • HTML タグにインラインで記述する場合

    セレクタの記載方法

    • 全称セレクタ
    • 型セレクタ
    •  id セレクタ(#)
    • class セレクタ(.)
    • 子孫結合子セレクタ
    • 子結合子セレクタ(>)
    • 隣接兄弟結合子セレクタ(+)
    • 一般兄弟結合子セレクタ(~)

    幅・高さの単位

    • px(ピクセル値)
    • %(要素の割合(百分率))
    • em(要素の割合)
    • rem(ルート要素の割合)
    • vw(画面の表示幅の割合)
    • vh(画面の高さの割合)
    • calc 関数(値の計算)

    色の指定方法

    • カラーネーム
    • #rgb(ハッシュ(#)で始まる 16 進数 3 桁)
    • #rrggbb(ハッシュ(#)で始まる 16 進数 6 桁)
    • #rrggbbaa(ハッシュ(#)で始まる 16 進数 8 桁)
    • rgb(r,g,b)(rgb 関数)
    • rgba(r,g,b,a)(rgba 関数)
    • hsl(h,s,l)(hsl関数)
    • hsla(h,s,l,a)(hsla関数)
    • 線形グラデーション(linear-gradient 関数)
    • 放射グラデーション(radial-gradient 関数)

    練習問題:マークアップの練習

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    レイアウトデザイン 練習問題①.zip」 

    【動画】

    本日の課題

    本日学んだ内容を復習して整理しておきましょう。
    ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

    本日のテーマ② ※前回の続き

    ここからは補足資料になります。
    情報収集など手を動かしながらの視聴でも構いません。
    もしくはお時間のある時にご自身で視聴ください。

    応募書類の作成に正解はありません。

    もし正解があるとしたら「面接に呼んでいただく」です。そして、面接になったら聞いてみてください。「何で呼んでいただけましたか?」と各書類の狙いが上手くいっているか確認してみましょう。

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    求人応募について.pdf」 

    【動画】

    求人応募について (15:02)
    「人材紹介」や「人材派遣」について
    https://youtu.be/b0x_ejhjULk

    人材紹介会社と人材派遣会社の違い (8:21)
    https://youtu.be/lsG_Wb5WS0w

    メリット・デメリットを考えていく上で
    サービス内容の比較 (7:14)
    https://youtu.be/LyhHIwEdv7Y

    雇用契約による違い (7:09)
    https://youtu.be/wsK5Ewtvjuw

    それぞれのメリット (21:28)
    https://youtu.be/rX10Ci2btF4

    アルバイトとパート、正社員とアルバイトの違いとは? (4:03)
    https://youtu.be/C8p08gxnNfM

    応募書類について・転職の昨今 (9:31)
    https://youtu.be/uNdbHEY4ULs

    転職準備はどうですか? (7:09)
    https://youtu.be/qZgrUsMQadI

    スキルの整理・ 今後チャレンジしたい領域の整理 (6:01)
    https://youtu.be/yAiYcpKCW4I

    得意領域と挑戦したい領域の整理 ・情報収集のコツ (4:43)
    https://youtu.be/dtuSwBJgs38

    応募の際の注意点-履歴書- (4:18)
    https://youtu.be/EovFXLwEDLY

    応募の際の注意点-職務経歴書- (4:24)
    https://youtu.be/-8MNWbo_4tQ

    ポートフォリオ制作のコツと注意点・まとめ (15:08)
    https://youtu.be/BLlOI5VpB7o

    参考サイト


  • 学科 HTML基礎③【オンライン】2023.12.07

    1限目
    学科 HTML基礎③
    テキスト分類タグとコンテンツ埋め込みタグについて

    2限目
    学科 HTML基礎③
    画像の取り扱いについて

    3限目
    学科 HTML基礎③
    テーブルタグとフォームタグについて

    4限目
    学科 HTML基礎③
    HTML・CSSの紐付けと特殊文字について

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


    本日のテーマ

    HTMLとCSS記述の基本事項を理解しましょう

    【まとめサイト】

    【動画】

    テキスト分類タグについて

    • a 要素(ハイパーリンク)
    • em 要素(強調)
    • strong 要素(強い重要性)
    • small 要素(免責・警告・著作権など)
    • i 要素(声や心の中で思ったこと)
    • b 要素(キーワードや商品名など)
    • span 要素(ひとつの範囲)
    • br 要素(改行)

    コンテンツ埋め込みタグについて

    • img 要素(画像)
    • iframe 要素(インラインフレーム)

    画像の取り扱いについて

    <img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
    alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

    参考サイト

    ワンポイントアドバイス

    Webサイトを重くする(表示スピードの低下)の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。

    テーブルタグについて

    <table>
      <caption>キャプション</caption>
      <tr><th>見出し</th><th>見出し</th></tr>
      <tr><td>データ</td><td>データ</td></tr>
      <tr><td>データ</td><td>データ</td></tr>
    </table>

    • table要素(テーブルの範囲)
    • caption要素(表のキャプション)
    • tr要素(1行の範囲)
    • th要素(タグ見出し)
    • td要素(データ項目)

    参考サイト

    ワンポイントアドバイス

    楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

    フォームタグについて

    • form 要素(フォーム)
    • label 要素(ラベル)
    • input 要素(インプット)
    • textarea 要素(テキストエリア)
    • select/option 要素(セレクト/オプション)
    • button 要素(ボタン)
    • fieldset/legend 要素(フィールドセット/レジェンド)

    CSSとの紐付けについて

    HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。

    参考サイト

    特殊文字について

    HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。

    参考サイト

    本日の課題

    本日学んだ内容を復習して整理しておきましょう。
    ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

    本日のテーマ②

    ここからは補足資料になります。
    情報収集など手を動かしながらの視聴でも構いません。
    もしくはお時間のある時にご自身で視聴ください。

    応募書類の作成に正解はありません。

    もし正解があるとしたら「面接に呼んでいただく」です。そして、面接になったら聞いてみてください。「何で呼んでいただけましたか?」と各書類の狙いが上手くいっているか確認してみましょう。

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    求人応募について.pdf」 

    【動画】

    求人応募について (15:02)
    「人材紹介」や「人材派遣」について
    https://youtu.be/b0x_ejhjULk

    人材紹介会社と人材派遣会社の違い (8:21)
    https://youtu.be/lsG_Wb5WS0w

    メリット・デメリットを考えていく上で
    サービス内容の比較 (7:14)
    https://youtu.be/LyhHIwEdv7Y

    雇用契約による違い (7:09)
    https://youtu.be/wsK5Ewtvjuw

    それぞれのメリット (21:28)
    https://youtu.be/rX10Ci2btF4

    アルバイトとパート、正社員とアルバイトの違いとは? (4:03)
    https://youtu.be/C8p08gxnNfM

    応募書類について・転職の昨今 (9:31)
    https://youtu.be/uNdbHEY4ULs

    転職準備はどうですか? (7:09)
    https://youtu.be/qZgrUsMQadI

    スキルの整理・ 今後チャレンジしたい領域の整理 (6:01)
    https://youtu.be/yAiYcpKCW4I

    得意領域と挑戦したい領域の整理 ・情報収集のコツ (4:43)
    https://youtu.be/dtuSwBJgs38

    応募の際の注意点-履歴書- (4:18)
    https://youtu.be/EovFXLwEDLY

    応募の際の注意点-職務経歴書- (4:24)
    https://youtu.be/-8MNWbo_4tQ

    ポートフォリオ制作のコツと注意点・まとめ (15:08)
    https://youtu.be/BLlOI5VpB7o

    参考サイト


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

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

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

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

    4限目
    実技 ポートフォリオ作成実習①
    職務経歴書との違いについて

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


    本日のテーマ

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

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

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

    ポートフォリオサイト

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

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

    訓練ブログ

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

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

    参考サイト

    注意事項

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

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

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

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

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

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

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

    参考サイト

    本日のテーマ②

    ここからは補足資料になります。
    手を動かしながらの視聴でも構いません。
    もしくはお時間のある時にご自身で視聴ください。

    就活で必要な書類、ポートフォリオについて今一度考えてみましょう。

    【資料】

    下記のファイルをダウンロードしましょう。
    職務経歴書との違いについて.pdf」 

    【動画】職務経歴書との違いについて

    WEBデザイナーになるためには? (7:44)
    https://youtu.be/iGE2f_ffpPk

    求人をイメージしてみましょう (19:14)
    https://youtu.be/wsEgr7TqDUM

    求人募集企業側のはなしの例① (13:46)
    https://youtu.be/Z3v4MKZ9tZI

    求人募集企業側のはなしの例② (15:37)
    https://youtu.be/k5o5kltWVS4

    書類選考について考えてみましょう(12:45)
    https://youtu.be/nwVlaR0IVvE

    書類選考のポイント(7:11)
    https://youtu.be/dTDrSAGcf1s

    履歴書について考えてみましょう(7:49)
    https://youtu.be/WpknOaq03E0

    履歴書での主なチェック項目 (16:11)
    https://youtu.be/L3FRs5f9dKM

    職務経歴書について考えてみましょう(15:06)
    https://youtu.be/-4QzpujfSm0

    職務経歴書の確認時のポイント (7:44)
    https://youtu.be/hU69hu1WjPo

    おまけとまとめ (13:15)
    https://youtu.be/W3nU1rTVf0o

    参考サイト

    本日の課題

    ポートフォリオサイトの完成度を上げてください。


  • 学科 HTML基礎②【オンライン】2023.12.05

    1限目
    学科 HTML基礎②
    HTMLの基本構造について

    2限目
    学科 HTML基礎②
    HTMLの文書情報について

    3限目
    学科 HTML基礎②
    セクション分類タグについて

    4限目
    学科 HTML基礎②
    コンテンツ分類タグについて

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


    本日のテーマ

    HTMLの基本構造を理解しましょう

    【まとめサイト】

    【動画】

    HTMLの基本構造について

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

    • !DOCTYPE 宣言(ドキュメントタイプ宣言)
    • html 要素(HTML の文書)
    • head 要素(文書情報)
    • body 要素(文書本文)

    文書情報について

    • title 要素(ページタイトル)
    • meta 要素(文字コード指定/charset)
    • meta 要素(ページの説明文/description)
    • meta 要素(ページのキーワード/keywords)
    • meta 要素(ページの作者情報/author)
    • meta 要素(ビューポート/viewport)
    • link要素(外部 CSS ファイルの紐付け)
    • link要素(ファビコンファイルの紐付け)

    文書本文について

    • セクション分類タグ
    • コンテンツ分類タグ
    • テキスト分類タグ
    • コンテンツ埋め込みタグ
    • テーブルタグ
    • フォームタグ

    参考サイト

    ブロックレベル要素とインライン要素について

    要素の多くは、ブロックレベル要素とインライン要素に分類されます。
    ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

    参考サイト

    セクション分類タグについて

    • h1~h6 要素(見出し)
    • article 要素(アーティクル)
    • section 要素(セクション)
    • header 要素(ヘッダー)
    • footer 要素(フッター)
    • nav 要素(ナビ)
    • aside 要素(アサイド)

    参考サイト

    ワンポイントアドバイス

    見出し(h1~h6)要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができます。

    参考サイト

    コンテンツ分類タグについて

    • p 要素(段落(パラグラフ))
    • hr 要素(区切り)
    • ul/li 要素(順序のないリスト)
    • ol/li 要素(順序のあるリスト)
    • dl/dt/dd 要素(定義・説明リスト)
    • div 要素(ひとつのかたまりの範囲)
    • main 要素(メインコンテンツ)

    ワンポイントアドバイス

    マークアップに悩んだらとにかく「p」にしましょう。

    本日の課題

    本日学んだ内容を復習して整理しておきましょう。
    ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

    本日のテーマ②

    ここからは補足資料になります。
    情報収集など手を動かしながらの視聴でも構いません。
    もしくはお時間のある時にご自身で視聴ください。

    pdfを活用してみましょう!

    みなさんこれから企業さん用の応募書類(データ)を作成していきますので、pdfを上手く活用し、また使い方の理解も高めて、しっかりと就活に向けた準備を進めていきましょう。

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    技術pdfについて.pdf」 

    【動画】

    pdfとは? (9:43)
    https://youtu.be/T3WMz7yfH-E

    PDFとHTML (6:45)
    https://youtu.be/mMNNOhdvxsY

    ポートフォリオサイトでのpdfのご利用方法について1-2 (7:46)
    https://youtu.be/YJMLYhnJePc

    ポートフォリオサイトでのpdfのご利用方法について3 (15:59)
    https://youtu.be/RlIq4poare8

    押さえておきたいpdfの技術3選 (8:44)
    https://youtu.be/qcf5H_oN3hM

    参考サイト「PDFをパスワードで保護する」

    参考サイト「様々なソフトからpdf化出来る」


  • 学科 HTML基礎①【オンライン】2023.12.02

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

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

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

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

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


    Webサイト(ページ)の制作について

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

    参考サイト

    【資料】

    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    Webサイト制作の手順の教科書.pdf」 

    【動画】

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

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

    ワンポイントアドバイス

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

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

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

    参考サイト

    文字コードについて

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

    参考サイト

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

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

    参考サイト

    HTMLの基本構造について

    タグの構造

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

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

    HTMLの基本構造

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

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

    doctype宣言とは?

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

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

    参考サイト

    ワンポイントアドバイス

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


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

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

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

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

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

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


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



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

    1限目
    実技 ECサイトデザイン実習①
    Photoshopの機能について

    2限目
    実技 ECサイトデザイン実習①
    Photoshopの機能について

    3限目
    実技 ECサイトデザイン実習①
    サムネイル画像 作成

    4限目
    実技 ECサイトデザイン実習①
    サムネイル画像 作成

    5限目
    実技 ECサイトデザイン実習①
    サムネイル画像 作成


    サムネイル作成

    ECサイトを想定したサムネイルを作成。

    山専用財布

    ●登山 バックパック


  • 学科 ECサイト運用基礎②

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

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

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

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

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


    ■バナー作成(模写)



  • 学科 ECサイト運用基礎①【オンライン】

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

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

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

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

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


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

    【資料】
    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「デザインの考え方」の教科書④.pdf

    【動画】「デザインの考え方」の教科書④
    バナーとは?・制作に向けて
    https://youtu.be/He_yn0PucyU(7:13)
    バナー制作練習で必須のコツ
    https://youtu.be/AuDCj3dqic0(12:41)
    レイアウトデザイン「余白」
    https://youtu.be/XnjKtFDEW0A(7:38)
    レイアウトデザイン「要素の配置とグループ化」※DTP基礎で視聴済み
    https://youtu.be/rxR5iKyeyuc(6:05)
    レイアウトデザイン「アクセント」
    https://youtu.be/M138Yz7Db6U(8:00)
    文字デザイン「読みやすさ」の意識
    https://youtu.be/syi_CrBqR7w(6:34)
    配色の確認
    https://youtu.be/UXHunsaZPuE(8:34)
    バナー広告とは?
    バナー はウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。 ウィキペディア

    参考サイト
    バナー広告とは?特徴とメリット・デメリットを解説 …
    バナー広告とは?これを読めば全てが分かる!【徹底解説 …
    バナー作成完全ガイド! 作成のコツから出稿媒体別サイズ …
    ワンポイントアドバイス
    まずは模写をして徹底的に真似をしましょう。
    そのバナーの制作者が意図していていた技術・技能・表現などを真似することによって自分のものにしましょう。またPhotoshopのソフトでどのようにすれば再現できる考えながら作成してみましょう。これまでの「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して真似をしてみましょう。

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

    本日のテーマ②
    ここからは補足資料になります。
    情報収集など手を動かしながらの視聴でも構いません。
    もしくはお時間のある時にご自身で視聴ください。

    紙のポートフォリオは面接の時に利用しましょう

    まずはポートフォリオサイトに日々の学びと多くの作品をまとめておきましょう。
    そして、面接が決まったら「紙のポートフォリオ」も用意して企業さんへの手土産として持参しましょう。

    【資料】
    カリキュラム資料 ダウンロード用サイト
    https://cu-doc.deau-ac.com/

    下記のファイルをダウンロードしましょう。
    「紙のポートフォリオについて.pdf」 

    【動画】
    おさらい ポートフォリオ・ポートフォリオサイトとは?(11:07)
    https://youtu.be/LyZ3pObfsOA

    紙ポートフォリオとWebポートフォリオサイトの違い (7:30)
    2
    https://youtu.be/1Pbw-0-2_OQ

    面接のお話 (6:12)
    https://youtu.be/uyhcUvp5mRU

    紙のポートフォリオ作成のためのコツと抑えるべき基本 (6:40)
    https://youtu.be/ZLMAYfizybw

    ポートフォリオを作る5つの要素 (10:40)
    https://youtu.be/vE7fiugNxnI

    ポートフォリオを作る5つの要素~まとめ (8:58)
    https://youtu.be/yDKBqf5EMZA

    参考サイト
    Webデザイナーの転職でも紙のポートフォリオは必須のアイテム
    【紙のポートフォリオ】イケてる表紙のデザイン参考例と …
    Webデザイナーには紙のポートフォリオも必要?


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

    1限目
    実技 写真合成・補正加工実習①
    画像解像度とカラーモードについて

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

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

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

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


    ・DM作成 提出

    魚屋のオープンDMをイメージして作成。
    抜群の知名度を誇る、「おさかなくわえたドラねこ」をパスの直線だけにし、ファンシーにならないよう注意した。
    魚を半透明で配置し、魚屋と分かるようにした。


  • 学科 DTP基礎【オンライン】

    1限目
    学科 DTP基礎
    DTPとは?

    2限目
    学科 DTP基礎
    画像解像度 ベクターデータとビットマップデータ

    3限目
    学科 DTP基礎
    DM制作に向けて

    4限目
    学科 DTP基礎
    作品の立案

    5限目
    学科 DTP基礎
    作品の立案



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

    1限目
    実技 イラストロゴ作成実習④
    トリムマークについて

    2限目
    実技 イラストロゴ作成実習④
    名刺制作

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

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

    5限目
    実技 イラストロゴ作成実習④
    名刺講評


    ・山道具ブランドの名刺


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

    1限目
    実技 イラストロゴ作成実習③
    アクセスマップ制作に向けて

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

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

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

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


    ●アクセスマップ 課題
    東京都立 現代美術館「MOT」へのアクセスマップ

    ①パンフレット想定

    ②上記と同じ場所で名刺サイズ想定


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

    2023.10.27

    1限目
    実技 イラストロゴ作成実習②
    ロゴ制作の準備

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

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

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

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



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

    2023.10.26

    1限目
    実技 イラストロゴ作成実習①
    ピクトグラム制作の準備

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

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

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

    5限目
    実技 イラストロゴ作成実習①
    講評


    ●登山でのピクトグラム

    ・急登
    ・鎖場
    ・テント場
    ・山小屋
    ・山頂
    ・ハシゴあり
    ・滑落注意
    ・落石注意
    ・熊出没
    ・ヘルメット着用
    ・道迷い注意
    ・水場


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

    2023.10.23

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

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

    3限目
    学科 グラフィックデザイン基礎⑥
    合成写真の作成練習

    4限目
    学科 グラフィックデザイン基礎⑥
    合成写真の作成練習

    5限目
    学科 グラフィックデザイン基礎⑥
    合成写真の作成練習


    Photoshop

    • レイヤーマスク
    • ベクトルマスク
    • パスパネル
    • クリッピングマスク
    • 調整レイヤー
    • 明るさ・コントラスト
    • レベル補正
    • トーンカーブ
    • 色相・彩度
    • カラーバランス
    • 白黒
    • ヒストリーパネル
    • アンシャープマスク
    • 描画モード

    課題提出

    ●ASAKUSAマウンテン

    ●巨大猫