Home> Progression3 > | トピックス > CSS Nite in FUKUI, Vol.3 ミニセッション「これからWebデザインをはじめたい人向けの学習プラットフォームについて」

CSS Nite in FUKUI, Vol.3 ミニセッション「これからWebデザインをはじめたい人向けの学習プラットフォームについて」

Posted by: masa
2009年11月29日 17:30
Progression3 | トピックス

CSS Nite in FUKUI, Vol.3のミニセッションで、「これからWebデザインをはじめたい人向けの学習プラットフォームについて」と題し、短大での実践と地元のコミュニティについてお話させていただきました。

その中で、短大での授業で採用させていただいているProgressionについても紹介させていただきました。

（10月31日に参加させていただいたWCAN mini ActionScript Vol.13「名古屋でProgression！」では、本発表の一部（短大での実践部分）を拡充し「Webデザイン・ビギナー向けプラットフォームとしてのProgression」というタイトルで発表させていただきました。）

発表資料

「これからWebデザインをはじめたい人向けの学習プラットフォームについて」のスライド
- ペンタブで手書きしました。使ったのはこれ → Wacom Intuos4 Large PTK-840/K0
- このスライドもProgressionのコンポーネントスタイルで制作しました。画面をクリックで進みます。戻りたい場合はブラウザの戻るボタンをご利用ください。
ビデオチュートリアル: YouTube - Progression3 (component style) で3ページのシンプルなサイトを作る
ビデオチュートリアルでつくったサイト

発表のアウトライン

※発表前に準備したものです。実際の発表内容と若干異なるところもあります。

... パチパチパチパチ（拍手） ...
すいません両眼1.5です。（※地元スピーカーが全員メガネというのはガセでした）
でも、メガネもってきました。
さて......
（非常勤講師をしていてる）短大での実践を中心にお話をします。
Webデザインの入り口で体験して欲しいこと →「Webサイトを作ってみること」
- 「かたち」になると嬉しい。楽しくなる。
- 評価をしてもらる。自信が付く。課題が見つかる。
- もっと表現力をつけたくなって、もっと学びたくなる。
- 「自力で完成させた」という経験は、モチベーションの好循環を育むきっかけになる。
でも.....HTML/CSSでの制作は難しい！
- 直観的にレイアウトできない（ビジュアル先行で考える人には苦手）
- うまくいったと思って他のパソコンで見たら表示が崩れる（IE特有のバグというものがあることをここで知り愕然...）
- 習得に時間がかかる
- 「こういうビジュアルにしたい！」という欲求があるのにそれを形にできないのはストレスになり、モチベーションが下がってしまう
Webデザインの入り口ではシンプルに実装できる方がイイ。
Progressionでつくろう！
Progressionとは？
- Flashサイト制作のフレームワーク
- Flashの機能拡張として提供されている
- ブランドサイトなどで採用多数
Progressionでは複数の制作スタイルが用意されている
- 「クラススタイル」では、オブジェクト指向プログラミングで作れる（ActionScriptゴリゴリ書きたい派はこちら）
- 「コンポーネントスタイル」では、ActionScriptを一行も書かなくてもサイトが作れる
Progressionの詳しい機能や導入事例などは、公式サイト//progression.jp/にて
実践紹介: 学生が Progression でつくった作品（会場限定公開）
- デザイン系志望でなく、これまで制作経験が全くなくても、ここまで作ることが出来る
- 各シーン毎に個別のtitleやurlを持たせることができている（Progressionのすてきな機能）
カリキュラム概要
- デザイン系志望でない学生を対象にしているので、1.5～2倍の時間をかけてゆっくりとすすめている
- Fireworksで基本的な描画、変形、画像加工などの基本を学び、あとはFlash+Progressionでの制作を学ぶ
- 通常Flashの入門時に学ぶフレームアニメーションは、この段階ではまだ学んでいない（フェード等のエフェクトもコンポーネントで実装できる）
制作デモ ビデオチュートリアル: 3ページのシンプルなサイトをつくる

Progressionでつくる理由
- 楽につくれるからではない。速くつくれるから。→ 節約できた時間を表現に
- 次のステップがある

学習ロードマップ（案）
- 色んな領域があるので、興味に合わせて学んでいこう
- Progressionはプロトタイピングツールとして利用することができそう → IAのツールにも
- コンポーネントスタイルでの制作を経験しておけば、Flashサイトの制作フローを体感できているので、クラススタイルで制作する場合も理解が早い
- ActionScriptに興味があるけどハードルが高いという人は、Processingを経由してみることをおすすめ
- 一般的なWeb制作会社でデザイナーとして働きたいなら、HTML/CSSを習得しておかないと就職は難しい（ほとんどの案件はHTML/CSSだから）
- 福井で学ぶなら、次のコミュニティに参加することをおすすめします！ WCAF、FxUG北陸、FITEA
まとめ
- Webデザインをはじめたい人は、Progressionではじめよう！コミュニティに参加しよう！
- Progressionの学習記録をブログにまとめてます。ご参考になれば。 → Progression 学習ノート
お知らせ：次回のWCAF勉強会で続編をお話させていただきます。
ありがとうございました！
... パチパチパチパチ（拍手） ...
質疑応答