1/24(Sun)
第1回:2014年5月7日公開
60min
【WEBデザインに必要なワイヤーフレーム全3回】の1回目です。
「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。
この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトをデザインの準備をする」という事柄について学んでいければと思っています。
この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。
(※ このシリーズは3回受講する事が前提になっています。)
1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
この演習では、3番のサイト設計を行います。
1)adobe Illusrorator
下記のurlより、ダウンロードしてください。
https://creative.adobe.com/ja/products/illustrator
Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。
(このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。)
・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。
【Illustrator CC とは何ですか】
https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html
【独学でWebデザイン Illustrator 使い方 1回〜9回】
・Illustrator CC 使い方講座(イラストレーターCC)中巻 第1章 パスの基本操作【動学.tv】
・独学でWebデザイン Illustrator 使い方 第1回目 Illustratorの基本操作
・独学でWebデザイン Illustrator 使い方 第2回目 図形の移動・複製、色の設定、線の設定
・独学でWebデザイン Illustrator 使い方 第3回目 オブジェクトの前後関係
・独学でWebデザイン Illustrator 使い方 第4回目 ペンツール・ベジェ曲線の引き方
・独学でWebデザイン Illustrator 使い方 第5回目 イラストをトレースする
・独学でWebデザイン Illustrator 使い方 第6回目 線種の設定 破線や地図などで使う線
・独学でWebデザイン Illustrator 使い方 第7回目 パスのアウトラインで簡単な地図作成
・独学でWebデザイン Illustrator 使い方 第8回目 パスの連結で簡単イラスト
・独学でWebデザイン Illustrator 使い方 第9回目 グラデーションパレットとグラデーションツール
2)960 Grid System
http://960.gs/
ダウンロードしたzipファイルを解凍しておきます。
また、このシリーズでは、ダウンロード・圧縮ファイルの解凍、文字入力などのPCの基本操作ができる事が前提です。
また、ファイル名に拡張子が表示されている事が前提ですので、表示されていない方は以下のurlにて拡張子の表示を行ってください。
■ windows 全てのヴァージョンの拡張子の表示法
http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=8702-9695
■ Macの場合 拡張子の表示法
http://hamachan.info/mac/kihon/kakutyosi.html
スクー放送部
※授業以外での利用は禁止します。
2014年5月7日公開
60min.
【WEBデザインに必要なワイヤーフレーム全3回】の1回目です。
「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。
この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトをデザインの準備をする」という事柄について学んでいければと思っています。
この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。
(※ このシリーズは3回受講する事が前提になっています。)
1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
この演習では、3番のサイト設計を行います。
1)adobe Illusrorator
下記のurlより、ダウンロードしてください。
https://creative.adobe.com/ja/products/illustrator
Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。
(このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。)
・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。
【Illustrator CC とは何ですか】
https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html
【独学でWebデザイン Illustrator 使い方 1回〜9回】
・Illustrator CC 使い方講座(イラストレーターCC)中巻 第1章 パスの基本操作【動学.tv】
・独学でWebデザイン Illustrator 使い方 第1回目 Illustratorの基本操作
・独学でWebデザイン Illustrator 使い方 第2回目 図形の移動・複製、色の設定、線の設定
・独学でWebデザイン Illustrator 使い方 第3回目 オブジェクトの前後関係
・独学でWebデザイン Illustrator 使い方 第4回目 ペンツール・ベジェ曲線の引き方
・独学でWebデザイン Illustrator 使い方 第5回目 イラストをトレースする
・独学でWebデザイン Illustrator 使い方 第6回目 線種の設定 破線や地図などで使う線
・独学でWebデザイン Illustrator 使い方 第7回目 パスのアウトラインで簡単な地図作成
・独学でWebデザイン Illustrator 使い方 第8回目 パスの連結で簡単イラスト
・独学でWebデザイン Illustrator 使い方 第9回目 グラデーションパレットとグラデーションツール
2)960 Grid System
http://960.gs/
ダウンロードしたzipファイルを解凍しておきます。
また、このシリーズでは、ダウンロード・圧縮ファイルの解凍、文字入力などのPCの基本操作ができる事が前提です。
また、ファイル名に拡張子が表示されている事が前提ですので、表示されていない方は以下のurlにて拡張子の表示を行ってください。
■ windows 全てのヴァージョンの拡張子の表示法
http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=8702-9695
■ Macの場合 拡張子の表示法
http://hamachan.info/mac/kihon/kakutyosi.html
スライド資料
2014年5月17日公開
60min.
【WEBデザインに必要なワイヤーフレーム全3回】の2回目です。
「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。
この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトのデザインが始められる準備をする」という事柄について学んでいければと思っています。
この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。
この3回連続授業は、3回の授業を順番に受講していくことで「ワイヤーフレーム」の作り方を習得していきます。
1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
この演習では、3番のサイト設計を行います。
1)adobe Illusrorator
下記のurlより、ダウンロードしてください。
https://creative.adobe.com/ja/products/illustrator
Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。
(このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。)
・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。
・windowsXPをお使いの方はサービスパック3(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。
【Illustrator CC とは何ですか】
https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html
【独学でWebデザイン Illustrator 使い方 1回〜9回】
・Illustrator CC 使い方講座(イラストレーターCC)中巻 第1章 パスの基本操作【動学.tv】
・独学でWebデザイン Illustrator 使い方 第1回目 Illustratorの基本操作
・独学でWebデザイン Illustrator 使い方 第2回目 図形の移動・複製、色の設定、線の設定
・独学でWebデザイン Illustrator 使い方 第3回目 オブジェクトの前後関係
・独学でWebデザイン Illustrator 使い方 第4回目 ペンツール・ベジェ曲線の引き方
・独学でWebデザイン Illustrator 使い方 第5回目 イラストをトレースする
・独学でWebデザイン Illustrator 使い方 第6回目 線種の設定 破線や地図などで使う線
・独学でWebデザイン Illustrator 使い方 第7回目 パスのアウトラインで簡単な地図作成
・独学でWebデザイン Illustrator 使い方 第8回目 パスの連結で簡単イラスト
・独学でWebデザイン Illustrator 使い方 第9回目 グラデーションパレットとグラデーションツール
※この授業は1回目の受講と課題を制作していると、より理解が深まります。
第一回の授業を受講されていない方は、録画授業で受講されてから受講することをお勧めします。
スライド資料
2014年5月18日公開
60min.
【WEBデザインに必要なワイヤーフレーム全3回】の3回目です。
「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。
この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトのデザインが始められる準備をする」という事柄について学んでいければと思っています。
この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。
この最終回では、
1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
この演習では、3番のサイト設計を行います。
この3回連続授業は、3回の授業を順番に受講していくことで「ワイヤーフレーム」の作り方を習得していきます。
1)adobe Illusrorator
下記のurlより、ダウンロードしてください。
https://creative.adobe.com/ja/products/illustrator
Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。
(このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。)
・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。
・windowsXPをお使いの方はサービスパック3(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。
【Illustrator CC とは何ですか】
https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html
【独学でWebデザイン Illustrator 使い方 1回〜9回】
・Illustrator CC 使い方講座(イラストレーターCC)中巻 第1章 パスの基本操作【動学.tv】
・独学でWebデザイン Illustrator 使い方 第1回目 Illustratorの基本操作
・独学でWebデザイン Illustrator 使い方 第2回目 図形の移動・複製、色の設定、線の設定
・独学でWebデザイン Illustrator 使い方 第3回目 オブジェクトの前後関係
・独学でWebデザイン Illustrator 使い方 第4回目 ペンツール・ベジェ曲線の引き方
・独学でWebデザイン Illustrator 使い方 第5回目 イラストをトレースする
・独学でWebデザイン Illustrator 使い方 第6回目 線種の設定 破線や地図などで使う線
・独学でWebデザイン Illustrator 使い方 第7回目 パスのアウトラインで簡単な地図作成
・独学でWebデザイン Illustrator 使い方 第8回目 パスの連結で簡単イラスト
・独学でWebデザイン Illustrator 使い方 第9回目 グラデーションパレットとグラデーションツール
※この授業は1〜2目の受講と課題を制作していると、より理解が深まります。
第一回の授業を受講されていない方は、録画授業で受講されてから受講することをお勧めします。
スライド資料