ウェブDeBLOG

名古屋のトライデントコンピュータ専門学校 Webデザイン学科ブログ 

2009.11.25[水] マークアップ演習

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

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

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

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

2009.11.25[水] macromarionette

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

macromarionette.jpg
Copyright © 佐賀一郎(SAGA, Ichiro) 

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

2009.11.24[火] Web Direction East 2009

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

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

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

WDE09.jpg

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

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

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

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

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

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

2009.11.09[月] 映画のオープニング

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

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


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

2009.11.09[月] 祝1周年

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

AppleStore1106.jpg

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

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

blog001.jpgblog002.jpg

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

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

2009.11.05[木] WCAN mini AS vol.13に参加してきました。

遅くなりましたが、先週末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の新機能と小ネタ集をQ&A形式のスライドで紹介。
詳しくはhttp://flabaka.com/blog/?p=1916

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


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

2009.10.27[火] 技能五輪閉会式 & 結果発表

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

09ginogorin04-2.jpg 09ginogorin04-1.jpg

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

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

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

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

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

2009.10.25[日] 技能五輪3日目

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

09ginogorin3-02.jpg 09ginogorin3-01.jpg

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

2009.10.24[土] 技能五輪2日目

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

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

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


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

2009.10.24[土] WCAN mini Markup vol.11 勉強会

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

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

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

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

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

HASE
プロフィール

担当:WebDesign学科


2009年度新設!
トライデントでWebデザイン

参考書籍
学生ブログRSS
ブログパーツ探すなら「ブログパーツ助っ人」!
ユーザータグ

技能五輪 トライデントコンピュータ専門学校 ウェブデザイン WCAN Webデザイン学科 2009 業界研究 CGイラスト学科 ココストア Webデザイン ウェブデザイン技能検定 Adobe 若年者ものづくり大会 マール グループ制作 ブログパーツ WordPress 企業課題 Apple 若年者ものづくり競技大会 DTPWORLD Flash 豊田市美術館 アサココ! 情報デザイン基礎 CSS3 mini ディプロス 矢野りん HTML5 Store Summer 空気人形 2008 面白法人カヤック ActionScript基礎 01 HTML+CSS基礎 西村真里子 THE プレゼン演習 デザインコンテスト CONTEST Webリテラシー Design 鷹野雅弘 CS4 デッサン Web制作会社 WCAN×CSSNite HPデザイン 造形基礎 TAFF'09 ウェブデザイン部門 Winter COMPLETE カンファレンス Web Tokyo WordCamp CHILDREN ADVENT アートアニメーション 武豊町 サムライ FINAL WEB VII FANTASY 広告批評 中村勇吾 デザイン 鳥取砂丘 鳥取 アンドリュー・ワイエス 愛知県美術館 Qubibi W+KTokyo(+CRUZ) Stefan Videopuppetry ASIA XRAY 2008Winter WebDirectionEast'08 CSS Helvetica SIGGRAPH Sagmeister Artless PHP アクアリング 茂森仙直 Night , Nagoya デザインのへそ 佐藤可士和 Sakae College FLEX Nam デザイナーのためのプログラミング入門 導入授業 MAX Japan FLASH 丹下紘希 TEXTURE 「ヤノベケンジ−ウルトラ」展 SEO LPO 第4回アックゼロヨン・アワード CG・イラストコンテスト モーション演習 ギレン総帥 UNIQLOCK 人喰いの大鷲トリコ 是枝裕和監督 ナゴヤデザインウィーク2009 情報デザインフォーラム animation escalator ガンダム グラフィックデザイン 今井佳子 アイディグラフィックス 入賞 CMS アニメーション Mozorama カリキュラム 後期 東京ゲームショウ2009 大富豪スコアシート Kyoto wonderfl dotFes 情報デザイン HCDプロセス Flash-Games ゆるキャラ マクロマリオネット 映画のオープニング 閉会式 結果発表 ブランディング iPhone Yahoo! 世界のCMフェスティバル ITホワイトボックス PHP勉強会 JAPANインターネットクリエイティブアワード Google Autumin Webワークショップ カラー ストリートビュー 学生参加 CMS特集 ファルコム音楽フリー宣言 名古屋開府400年祭 音楽 ゲーム 日本ファルコム 荒俣宏 UNIQLO jQuery Markup a-blog CALENDAR □□□switch 山村浩二 学生ブログ Wordpress Blog UTZOOM マークアップ演習 ワークスコーポレーション デコクレ F-site セキュリティ GENOウィルス cms カスタマイズセミナー オープンキャンパス 学科 体験入学 旭食品サンプル製作所 食品サンプル 富岡聡 カナバングラフィックス ソバットシアター コマ撮りアニメ 電信柱エレミの恋 ウサビッチ 学生 ActionScript 黒い太陽 ウルトラ展 ヤノベケンジ ウェブデザイン技能競技会 jbstyle ライブペイント ヱヴァンゲリヲン新劇場版:破 西田幸司 国家検定 インターネットスキル認定普及協会 Labuat 

検索フォーム
pixiv
あわせて読みたい
あわせて読みたいブログパーツ
SEO
QRコード
QRコード
Pagetop
携帯アクセス解析