ウェブDeBLOG

後期の授業を紹介します。
毎週水曜日の午前中は「マークアップ演習」を行っています。
Dreamweaverを使って、XHTML＋CSSでコーディングしていきます。
メインブラウザはFireFox3.5なのですが、制作現場では未だに高いシェアを誇るInternet Explorer 6への対応力も必要なため、ハックを使わないCSSの使い方や、IE6独自のバグなどの知識も勉強してます。


講師は現場でディレクターをされている株式会社マールの増田先生です。
即戦力としてWebサイト制作に必要な技術や知識がポンポン出てきますので、後期の初めはかなり学生も苦戦したようですが、後半になるにつれて理解が深まってきているようです。
学生もCSSを操作するのが、楽しくなってきたようで人気の授業の一つです。

本日、CSSの演習が終わり、来週からは新しい課題で、XHTMLからのマークアップが始まります。予習復習、自主学習は欠かせない授業です。

ちなみに、IE6のCSSバグリストも忘れないようにメモしておきます。

学生がブログデザインを変更しようとWordpressと格闘している頃、綺麗な縦組みを実現されているWebサイトマクロマリオネットを発見したので、紹介します。
Flash Player10とFlash Text Engine（FTE）パッケージと、Text Layout Framework（TLF）を使用して縦組みを実現しています。書体も綺麗ですし、記事の中にありますが、文字組にもこだわってデザインされています。
さらに、HTML/CSSの生成にWordpressを使用しているとの事で、当たり前なのですが、RSSリーダーで見ると他のFeedと変わりません。

Copyright © 佐賀一郎（SAGA, Ichiro）　

学生は一度、記事の内容も含めて、見ておくといいと思います。
また、学生のブログもオリジナルになってきています。後日まとめて、紹介しようと思います。

ちょっと時間があいてしまいましたが、ご報告。
昨年も参加した「Web Direction East 2009」に参加してきました。
今回もスピーカーは海外の方ばかりで、左耳にはしっかり日本語の翻訳レシーバーを装着です。

■オーペニングキーノート
Cameron Adams（キャメロン・アダムス）
『Google Wave の裏舞台』Making waves

■Andy Clarke（アンディ・クラーク）
『壁を壊せ』


■Belinda Hobbs（ベリンダ・ホッブズ）
『ウェブビジネスの運営：成功した変革』

■Douglas Crockford （ダグラス・クロックフォード）
『Ajaxアプリケーションの安全性』

■Nicole Sullivan（ニコール・サリバン）
『高速ウェブアプリのためのCSSパフォーマンス』

■クロージングキーノート
Deborah Schultz（デボラ・シュルツ）
『まずは人が重要！』

詳しいレポートが、gihyo.jpの「Web Directions East 2009」レポートに掲載されていますので、ご覧ください。

かなり手抜きですみません。
今回の注目は、授業の参考資料としても使っている「Webデザインプロフェッショナルワークフロー・バイブル」の著者、アンディ・クラークのセッションでした。
技術的な話ではなく、もっとデザイン（クリエイティブ）に時間を使おう！そのためには現在のワークフローを見直し、静的なビジュアル制作をブラウザで実現してしまおうという話。
日本の現場ではまだ難しいのかもしれませんが、クリエイティブに時間をかけたいと言うのは、デザイナーとしては本音の部分だと思うので、ワークフローを使い分けてもいいんじゃないだろうか。
特に競技会なんかは。

以前も書いたかもしれませんが、Webサイトはインタラクティブなメディアですので、デザインをする上でモーションも重要な要素となります。
フルFlashのサイトでは、特にその傾向が強いと思います。
学生には、映画やアニメーションなどを観て、勉強するように言っていますが、学生も忙しくて、なかなか時間がとれないのでは、ないでしょうか。

短時間で観ることのできる映像となると、CMやPVなどがありますが、映画のオープニングもかなり良い教材になります。
ニコニコ動画にオープニング映像集を発見したので、紹介しておきます。


やっぱり「セブン」のオープニングはカッコいいですね。
いまのところ、このオープニング集は4まであるようです。

11月6日にApple Store , Nagoya Sakaeで「WEBデザインメソッド　伝わるコンテンツのための理論と実践」刊行記念イベントに、著者である矢野りんさんが講演されるということで、Webデザイン学科の学生全員を連れて行ってきました。学生を連れて行くのは、College Night以来でしょうか。


内容は「WEBデザイン！ビジュアル系」ということで、Webデザインっていうと、HTMLやCSSやjavascriptなど技術的な話になりがちだけど、ビジュアルって大切だよね。
だから、
●色の勉強しようよ。
●Illustrator,Photoshop使いこなそうぜ！
●センスは普段から磨いておいきましょう。
●ちゃんと考えて作らなきゃダメよ。
●本を読め！
という話でした。
1時間弱の講演だったのですが、要点がまとめられていたので、デザインってなんぞ？という学生にもわかりやすかったのではないしょうか。今後、ビジュアルデザインに対する意識が変わるのを期待してます。

さて表題にもあるとおり、この「ウェブDeBlog」を書き始めて、1年が経ちました。（最初の記事は昨年の技能五輪の報告でした。）



当初はWebデザイン学科の準備ブログという事で、Webに関する話題やトライデントの学生の様子などを紹介するつもりで書いていましたが、だんだん講師のセミナー参加体験や趣味の部分が多くなってきてますね。それでも良いと思っていますが、今後はもう少し授業の様子や学生作品、技術的な話題も入れて増やしていければと思います。
ひとつ気になっている事があって、Webデザイン学科の学生には、入学するとブログをWordpressで書いてもらっています。
わからないながらも、PHPを触ったり、FTPを使ってthemeやプラグインをインストールするなどをして、Web制作の作業やCMSというものに慣れてもらうのが目的です。
しかし、この「ウェブDeBLOG」はFC2のブログサービスを使っています。サーバートラブルも広告表示もないので、非常に良いブログサービスなのですが、すごく簡単すぎて、学生から痛い視線も感じていました。

という事で、URLが変更になってしまいますが、今年中にCMSに移行しようと思います。
宣言しておかないとやれないと思うので、書いておきます。

遅くなりましたが、先週末10月31日に行われた、WCAN mini ASに参加してきました。
今回は愛機MacBookを持参したので、Twitterに実況をつぶやいていたので、その#wcanminiasを見ながら、記事を書こうと思います。

今回のテーマは『名古屋でProgression！』
Progressionとは、Flashコンテンツが簡単に制作できるフレームワークです。
Progression Framework　http://progression.jp/ja/doc/

SESSION-1「Progression 4を触ってみた」
山田拓生（yokozunat）さん http://ra66it.net/blog/
まずは簡単なProgressionの説明。シーン＝場面、コマンド＝指示、キャスト＝出演者と考えて、覚えればほぼOK。そして、Progression 4と自分のブログを連携してスライドを制作されました。内容を更新できるようにXMLで連携をしてるそうです。とっここでFlashが起動せず、制作デモは残念がらみれませんでしたが、現在、ブログ（ra66it）にて、サンプルとソースを公開中です。

SESSION-2「Progression×Photo Gallery」
尾野田紘基さん http://dakkie.com/blog/
名古屋市立大学の学生さんです。トライデントの学生も仲良くしてもらっています。今回は「Progression×Photo Gallery」で、Flickrとの連携をクラススタイルで制作されました。こFlickrからXMLを取得してます。公開はされるのかな。

SESSION-3「Progression4でそろそろ教授のサイトを完成させたい。（仮）」
橋本大和さん http://zigxzag.net/blog/
内容は大学生の安易なデザインとProgression4ということで、名古屋市立大学に通う橋本さんが染物をやっている教授のポートフォリオサイトをProgression4で制作されていました。聞くところによると、開始から2、3日で制作とのこと。

SESSION-4「Webデザイン・ビギナー向けプラットフォームとしてのProgression」
吉村マサテル（mathatelle）さん http://www.mathatelle.com/
Progression学習ノート を運営されている吉村さんは、短大でのProgressionを使って授業を行ってます。実践についてのご紹介とコンポーネントスタイルからはじめてみることのメリットについて、話してもらいました。 Webデザインを始めたい人はProgressionのコンポーネントスタイルから始めようという話に納得。
非常に参考になりました。

SESSION-5「Progression 4+CMS」
永井裕久さん http://eternitydesign.net/
普通のFlash+CMSのネタではつまんない！ということで、XML-RPCを使ってみましたという話。冒頭「XML-RPCを知っている人？」という質問に誰も答えず。知ってても答えなかったのか、全員知らなかったのか。僕はもちろん知りません。
とりあえずはWikipediaでサクッと調べて…だめだ修行が足りん。
そして、Progression4の新機能とWordPressと連携させて作成したGalleryを紹介されました。
実際に投稿もできます。 http://labs.eternitydesign.net/xmlrpc_gallery/

ネタのみSESSION-1「Progression Q&A」
flabakaさん http://flabaka.com/blog/
内容は、Progression4の新機能と小ネタ集をＱ＆Ａ形式のスライドで紹介。
詳しくはhttp://flabaka.com/blog/?p=1916

ネタのみSESSION-2「Progression4でなにかサイト作っておきます」
ll_koba_llさん http://un-q.net/
Ｆlickrとの連携で「しゃしんさいとつくってるなう ver 0.0.1くらい」を作られました。なんと、2日で制作。
http://photo.un-q.net/


同じ日に、東京でF-siteでもProgressionのセッションが行われており、各地でProgressionな1日でした。

最終日は、あいにくの雨でしたが、開会式と同じく日立市市民運動公園中央体育館で盛大に行われました。以前までは事前に受賞者には、お知らせが伝えられていたようですが、今回よりサプライズ発表ということで、いきなり金賞からの発表です。
受賞発表の度に、あちらこちらからというよりは、前半はほとんど愛知県選手団から歓声が湧いてました。恐るべし緑の軍団。



ウェブデザイン部門は40競技中39番目の発表ですので、結構待たされます。
受賞者のリアクションも様々で、感極まって泣いちゃう選手や、喜びを爆発させる選手など、競技に対しての真剣に取り組んだ気持ちが伝わってきます。
見ているこちらも感動します。

そしていよいよ、ウェブデザイン部門の結果発表です。
金賞：永井大輔（東京都）
銀賞：橋田優一（東京都）
銀賞：梶原尚子（東京都）
銅賞：鐵屋空大（神奈川県）
銅賞：三上 絵利菜（東京都）
敢闘賞：嶋 健太郎（神奈川県）
敢闘賞：鶴 創一郎（東京都）
敢闘賞：品川 恵美（山口県）

詳しい結果は、中央職業能力開発協会のWebサイトで見ることができます。
http://www.javada.or.jp/
ちなみに、最優秀技能選手団賞は愛知県選手団が受賞しました。

残念ながら、トライデントの堀尾さんは入賞を逃しましたが、
今回の大会で、得るものが大きかったようです。
まだ、1年生ですので来年もチャンスがありますし。

受賞者の皆さん、おめでとうございます！

競技最終日は、朝8時45分から4時間程の競技とプレゼンテーションを行いました。
実は、昨日の競技では当初計画していた予定より、かなり大幅な遅れが出ており、さらに詳細な計画性をもって進めないと、プレゼンテーションにも臨めなくなる状態です。
時間のかかりそうな部分は諦めて、かなり焦りながらも外観だけは整え、プレゼンテーションになんとか挑むことができました。。
3分間のプレゼンでは、少し時間が余りましたが、緊張しながらもよく説明ができていたのではないでしょうか。他の選手の方も、プレゼンが上手です。



まぁ〜、色々と反省点の多い大会でしたので、今後のために、まとめ記事を後日、書こうと思います。今回参加した学生のブログでも、エントリーがあると思いますので、お楽しみに。
参加した選手の皆さん、引率の先生、現在も審査中の役員の方々、本当にお疲れさまでした。
明日は、閉会式です。

いよいよ、本日から競技の開始です。
競技課題は、講演会などのセミナー情報の公開および参加申し込みを行う「セミナーナビ」のウェブサイトデザインです。
競技時間は午前3時間45分、午後3時間15分となります。
サイトのビジュアルをデザインし、HTML＋CSSでコーディングするだけでなく、Flashアニメーションや登録された講師がセミナー情報を入力したり、参加希望者が会員登録や申し込みをするためのシステムをPHPで構築したり、サイト仕様書の制作、アクセシビリティの考慮などの技術的な部分に加え、スケジュール管理も重要になってきます。


場内は、各選手のキーボードを叩く音と、全国大会特有のピリッと張りつめた緊張感が、モチベーションを掻き立てます。高校時代などの部活動の試合の雰囲気と似ています。右の画像は、初日の午前中までに提出された、indexのデザインの一覧。やはり年々、レベルが上がっているようです。（クリックすると少し大きくなります。）

どうしても、実力を学校の中でだけ測りがちな学生にとっては、全国各地から参加する同年代の選手と、同じ課題で競い合える大会は非常に良い経験になると思います。名古屋にいるWebデザイン学科の学生にも、この空気を肌で感じさせたかったですね。
いよいよ、明日は競技最終日です。競技時間4時間、全力を出し切り自信をもってプレゼンテーションに臨んでほしいと思います。


そんな緊張感のある会場の外では、技能五輪・アビリンピック関連のイベントが行われおり、色々なキャラクターが盛り上げています。

昨日、WCAN mini Markup vol.11 勉強会に参加してきました。


会場はリニューアルオープンされたばかりの、愛知県産業労働センター ウインクあいちの会議室。シックな廊下と新品の設備が心地よい。

今回のmini Markupのテーマは「HTML５」。
昨年草案が公開され、canvasのような二次元グラフィックス機能や、動画や音声に特化したvideo要素、sectionやnav nadoなど構造を表す要素など、新要素が気にあるHTML５ですが、今回の勉強会では参加者がそれぞれのどんなサイトを参考にしているか、HTML５を使用してどのようにマークアップするか情報交換が行われました。

参加者はマークアップエンジニア、プログラマ、ディレクターなど、担当も様々なため、色々な角度から話し合いがされましたが、新要素をどのように使うのが適切か、という部分はみなさんそれぞれコーディングをする際に非常に悩まれたようで、色々な意見を聞くことが出来ました。

全体を通してHTML５は「まだこれから」という印象ですが、故に各々がその可能性を模索してゆく必要がありそうです。

HASE