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クリエイターボックス


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

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

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

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

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

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


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

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

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

    【動画】
    WordPressのテーマについて
    インストールされている場所について
    PHPの基本的な作法として
    https://youtu.be/X1tVAmeDwQ8(9:52)
    WordPressのテーマについて
    必要最低限の構造として
    Style.cssに記述する
    https://youtu.be/yq2BR3pimnM(8:21)
    WordPressのテーマについて
    インクルードを活用する方法
    テンプレート階層について
    https://youtu.be/0nm0AyEzZNo(10:32)
    WordPressのテーマについて
    WordPressの独自タグ
    https://youtu.be/CSDfxaRt5Zg(13:14)
    WordPressについて
    WordPress(ワードプレス)は、ブログやサイト(ホームページ)を作成できるソフトです。今や、世界中のサイトの約3分の1はWordPressで作られていると言われています。日本国内でも、個人ブログだけでなく、企業や公共機関のサイトなどに幅広く利用されています。

    参考サイト
    WordPressとは?初心者でも分かるように仕組みを図解
    WordPress(ワードプレス)とは?
    WordPress(ワードプレス)7つの長所と9つの短所
    WordPressのテーマとは
    WordPressのテーマは、Webサイトのデザインを決定するものですが、デザインに加えてサイト全体の構成や表示される機能にも影響します。単純に見た目のデザインだけで選ぶと操作がしにくかったりメンテナンスが大変だったりする場合もあります。
    テーマの入手方法は、以下の種類があります。無料のテーマの中には、機能制限有りが無料で制限を解除する場合は、有料になる場合もあります。

    無料のテーマ(WordPress公式テーマ)
    無料のテーマ(WordPress非公式テーマ)
    有料のテーマ
    制作会社に発注
    自分で作成
    参考サイト
    WordPressのテーマとは?変更するときの注意点と選び方のポイント
    WordPressテーマの仕組み(+サイトデザインにおける役割)
    WordPressテーマの基礎知識
    HTML・CSSからオリジナルテーマを作成
    WordPressのオリジナルテーマを作成する手順を理解しましょう。

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


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

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

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

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

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

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


    WordPressはphpで出来ています。

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

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

    【動画】「WordPress活用法の教科書⑤.pdf」 
    WordPress, CMSとは?Wordpressの仕組み・5つのポイント
    https://youtu.be/JSoZYT9ZEHA (11:00)
    レンタルサーバーを借りる・データベースと連携
    PHPとは?…Wordpressテーマとの関係
    https://youtu.be/eH05yQW1mSE (14:48)
    レベル別お仕事での活用について 
    https://youtu.be/6HFXje_rSi4 (7:22)
    PHPという言語について・Wordpressでの使用例
    https://youtu.be/qyhmG3D-_XM (14:30)
    【動画】「WordPress活用法の教科書⑥.pdf」
    サーバーサイドプログラムとは?
    フロントエンド開発とバックエンド開発の違い
    https://youtu.be/s4Y9Es6J0QM(10:48)
    レンタルサーバーについて
    https://youtu.be/Auj9GS4mnUo(8:08)
    簡単インストールの機能について
    https://youtu.be/06BacdTcubc(7:50)
    サーバーサイドスクリプトとクライアントサイドスクリプト
    スクリプト(プログラミング)にはサーバー側で動くものとクライアント側(PC側)で動くものがあります。違いについて理解しましょう。

    参考サイト
    PHPはサーバサイドスクリプト!クライアントサイドスクリプトとの違いとは? | PHP Junkie
    PHP【 入門 】サーバサイドのスクリプト言語 | プログラマカレッジ
    サーバーサイドスクリプトとは – 初心者向けPHPナビ
    サーバサイドスクリプト
    PHPやPerlといったプログラミング言語があります。これらの言語はWebサーバ上で動作します。このことから、これらの言語を「サーバサイドスクリプト」と呼びます。何らかの操作を実行すると、Webサーバにデータが送信され、サーバの中のプログラムが処理を行い、結果をブラウザに返します。

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

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

    参考サイト
    PHPとは?基礎知識、できることを初心者にもわかりやすく解説し …
    10日で覚えるPHPのキソ(超基礎編) 第 1 回 PHPの約束事 …
    今さら聞けない!PHP基礎知識や導入方法、書き方まとめ
    PHP入門
    PHPはプログラミング言語なのでIT技術者が利用するのが一般的です。但し、WordPressがPHPで作成されていることもありWordPressの独自テーマ作成などを行う時にPHPに接する機会もあります。

    PHP入門 ~PHPのインストール方法やPHPを使ったプログラミングの方法を解説します~
    PHP入門
    PHP入門 – Qiita
    ワンポイントアドバイス
    PHPはHTMLの延長と考えて、Wordpressの利用でよく見かける技術として今後に備えておきましょう。まずは、しっかりとHTML・CSSを理解しましょう。
    PHPのファイルにHTMLを記述できるわけですから 必要性と使いどころをまずは理解して、一つ一つ理解してい くのが良いでしょう


  • 実技 ユーザーインターフェイス作成実習①2024年2月8日

    1限目
    実技 ユーザーインターフェイス作成実習①
    jQueryの使い方について

    2限目
    実技 ユーザーインターフェイス作成実習①
    jQueryの導入

    3限目
    実技 ユーザーインターフェイス作成実習①
    課題制作

    4限目
    実技 ユーザーインータフェイス作成実習①
    課題制作

    5限目
    実技 ユーザーインターフェイス作成実習①
    課題制作


    jQueryの導入

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

    参考サイト

    jQueryの利用方法(復習)

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

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

    参考サイト


  • 学科 JavaScript基礎【オンライン】2024年2月5日

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

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

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

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

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


    本日のテーマ

    JavaScript(jQuery)についてです

    jQueryについて

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

    参考サイト

    【資料】

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

    下記のファイルをダウンロードしましょう。
    JavaScript(jQuery)の教科書.pdf」 

    動画

    jQueryの利用方法

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

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

    参考サイト

    ワンポイントアドバイス

    見本となるサイトがたくさんあるのが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/