Webデザイナー講座
在宅・副業プラン

グラフィック/HTML/CSSリファレンス

グラフィック リファレンス

Illustratorの基本操作 / 描画ツールでの描画 / ペンツールでの描画 / レイヤー / 文字の入力 / オブジェクトの変形 / 線の設定とアピアランス / Photoshopの基本操作 / 画像の補正 / 画像の加工 / 文字の入力

HTML／CSS リファレンス

オリエンテーション / Webの基本 / HTMLを記述する際の注意 / リンク構造を作る / 全ての要素を確認する / テキストコンテンツに関する要素 / コンテンツセクショニングに関する要素 / 画像とマルチメディアに関する要素 / テーブルに関する要素 / フォームに関する要素 / その他、覚えておきたい要素 / SEO対策、SNS対策 / 地図、動画の読み込み / コンテンツモデルについて / CSSの基本 / セレクターの種類 / 擬似クラス / 疑似要素 / セレクターの組み合わせ / CSSを記述する際の注意 / ⽂字・⾏に関するプロパティ / トピックス / 背景に関するプロパティ / ボックスに関するプロパティ / 表⽰・配置に関するプロパティ / アニメーションに関するプロパティ / レイアウト / ＠規則について / JavaScript

グラフィック/HTML／CSSワーク

グラフィック ワーク

名刺で覚えるIllustrator基礎 / Illsutratorパスでロゴマーク / バナーで覚えるPhotoshop基礎 / カフェサイトのデザイン（PC・スマホ）/ カフェサイトデザインの書き出し / 企業サイトトップページ（PC・スマホ）/ 企業サイトサービスページ（PC・スマホ）/ 企業サイトお問い合わせページ（PC・スマホ）

HTML／CSS ワーク

オリエンテーション / Webサイト制作の準備をしよう / HTMLの基本を学ぼう / デザインデータをみてみよう / Webページの雛形をつくろう / HTMLでトップページをマークアップ / CSSの基本を学ぼう / CSSを記述する準備をしよう / ヘッダーを装飾しよう / トップセクションを装飾しよう / メニューセクションを装飾しよう / アクセスセクションを装飾しよう / ニュースセクションを装飾しよう / フッターを装飾しよう / 公開前の仕上げを⾏おう / ドロワーメニューを作ろう / 課題︓プロフィールサイトに改修してみよう / Webサイトを公開しよう

講義動画

Web概論

Webってなに？ / Ｗebサイトを作るのに必要なもの / Ｗeb制作の流れ / 今回のカリキュラムについて

Webデザインのためのワークフロー

イントロダクション / 調査・ヒアリング / 目的・方針整理／サイト構造設計 / 目的・方針整理／サイト構造設計

デザインの基礎＆カラー・レイアウト（入門編）

デザインとは / デザインの目的・役割 / デザインのワークフロー / イメージからかたちへ / デザインの造形要素 / 美しいとは / デザインの造形秩序 / デザインを学ぶ上での心がけ

デザイナーのためのフォント概論

はじめに / フォントの役割 / Webデザインのフォント / フォントを購入する理由 / 書体の見分け方・探し方 / おすすめフォントのご紹介

Webデザインで使う色の基本原則

Webデザインのデータ作成時に気をつけること / Webデザインの基本的な配色 / 理論から考える配色 / 印象から考える配色 / 機能から考える配色 / 配色ジェネレーターやブラウザアドオン

クリエイターのための著作権合

著作権の考え⽅ / 著作物とは︖ / 著作（財産）権とは︖ / 著作者⼈格権とは︖ / 著作隣接権とは︖ / 実践

JavaScript

Javascript リファレンス

はじめに / Javascript基礎 / 変数と定数 / 条件分岐 / 【課題】条件分岐 / 変数スコープ / jQuery基礎 / jQueryメソッド / 【課題】jQuery / jQueryイベント / 【課題】jQueryイベント

Javascript ワーク

ページアップボタンをつくろう / ナビゲーションメニューをつくろう / スライドショーをつくろう / ワーク課題

バナー制作実践

-サイト内バナー

はじめに / 完成データの確認と新規ドキュメントの作成 / 文字情報の入力と配置の目安の作成 / 文字調整 / 画像の切抜きと配置 / 最終調整とバナーの完成

-コンバージョン系バナー

完成データの確認 / リボンの作成 / 爆発マークの作成 / キラキラの作成 / 背景用パーツの作成 / 新規ドキュメントの作成 / コインの配置 / 背景キラキラの配置 / リボンと文字の配置 / 文字情報の入力と配置 / もれなくバッチの作成 / 文字の装飾の設定 / 日付の作成 / 文字のキラキラの配置 / ロゴの配置とバナーの完成

-ブランディング系バナー

完成デザインの確認 / 新規ドキュメントの作成 / リボンの作成 / 商品の配置 / ロゴの配置 / コピーの作成 / 効果の作成 / フッターの作成 / バナーの完成

ポートフォリオ講座

・Web業界への転職のために
・ポートフォリオについて
・ポートフォリオの基本構成
・Q&A

お金の教養講座フリーランスとして生きること

在宅やフリーランスで活動し、仕事を継続していくためには、Webデザインのスキルそのものだけでなくお金に関する知識が不可欠です。そこで、マネースクール「ファイナンシャルアカデミー」と連携し、フリーランスとして生きていくために重要なポイントを簡潔にまとめました。

ライブ授業

ライブ授業では現役のWebデザイナーの講師から、Web制作の流れや、就転職、Web業界で働くためのノウハウを直接習得することが出来ます。授業はリアルタイムで配信されるので、まるで実際の教室にいるかのように講師へ質問をすることができます。

ブラッシュアップレッスン

「みなさんの作品はどうすればより良くなるのか」を講師がアドバイスしていきます。 自分、そして他の受講生へのアドバイスに触れることで、表現の幅を拡げていきます。

カラー＆画像講義

プロのデザイナーはデザインの目的やイメージを基に視覚的な効果を考え、色や形を意図的に使っています。この講義では、実際のデザインを見ながら何故その色（配色）や形（線）、レイアウトにしたのかを考えていきます。

Webサイト事例研究

優れたデザイン事例や先端的な表現の研究・解説を通じて、トレンドを踏まえた商用レベルのWebサイトを制作する際のポイントを整理していきます。

Web業界の「いま」と「これから」

ライブでしか伝えられない業界の「今」と「これから」を大胆解説。制作スキルのみならず、プロとしての心構えや職場でのコミュニケーションなど、業務に役立つ実践的内容です。