マサのWeb玉手箱 >> プロフィール 気まぐれ日記

学級日誌1 (Webデザイン編)
2001年4月から半年間、仕事の合間を利用して学校に通いました。ヒューマンアカデミーの「Webデザイナー養成講座(毎週土曜日、全22回)」です。それまでもホームページビルダーで個人サイトを作っていましたが、もっと専門的に学んでみたくなったことがきっかけです。受講により、DreamweaverやFLASHなどの新たなツールに触れ、またHTMLタグが理解出来るようになったことは大きな成果です。ここには、毎週の受講内容を学級日誌形式で紹介してあります。

>>> マサがお勧めするWebデザインの本 (by Amazon.co.jp)

オリエンテーション 2001年4月14日
◆講義内容
・受講の手引き
・日程について
・Macのフリーレッスン
◆コメント
今回は初回ということで、受講に対する注意点や日程についての説明を受けた。
第1回 2001年4月21日
◆講義内容
・Macについて
・文字入力
・タグ入門(<HTML><HEAD><TITLE><BODY><BR>)
◆コメント
講義で使用するパソコンはMacであるが、自分はMacの使用経験がないので慣れるまでが大変である。
今回からしばらくはタグを使ってのホームページ作成となる。
第2回 2001年5月12日
◆講義内容
・ネットワーク接続について
・タグ入門(<H><P><HR><!--><A HREF><UL><LI><IMG SRC><BODY BGCOLOR>)
・リンクを使用したページの作成
◆コメント
今回は前回のタグと新規のタグを使ってリンクのあるページを作成した。
タグだけで作成しているが、画像やリスト形式でのテキスト表示も取り入れ、かなり見栄えのあるものとなってきた。
今回からMOを使って学校と家でのデータ共用を行っている。
次回はテストもあるし、しっかり復習しよう。
第3回 2001年5月19日
◆講義内容
・テスト(相互リンクのページを作る)
・タグ入門(<DL><DT><DD><CITE><A HREF="#~"><A NAME="~">)
・他ページへのリンク(絶対パス、相対パス)
・テーブル入門
◆コメント
今回は講義の最初にテストがあった。
内容的には理解できていたのだが、Macのオペレーションで戸惑う点が幾つかあった。
やはり週一でしかMacに触れないのがネックか。
第4回 2001年5月26日
◆講義内容
・テスト(画像からのリンクページをつくる)
・色の話(減法混色、加法混色、WebSafeカラー)
・タグ入門(<IMG ~><TABLE><TABLE ~><TR><TR ~><TD><TD ~>)
・画像を常に画面中央に表示するには
     <TABLE WIDTH="100%" HEIGHT="100%">
     <TR><TD ALIGN="center"><IMAGE SRC="~"></TD></TR>
     </TABLE>
◆コメント
予定では今回がタグの最終日だったが、少し遅れているので次回もタグを少し行う事になった。
その後、PhotoShopを利用してのグラフィック入門になる。
第5回 2001年6月2日
◆講義内容
・テスト(画像の中央配置)
・タグ入門(<TD ROWSPAN><TD COLSPAN><FRAMESET COLS><FRAMESET ROWS><FRAME SRC="~">)
・カラーセレクターを作る(テーブル、フレーム)
・illustrator入門(直線、ベジェ曲線)
◆コメント
今回、初めてillustratorというソフトを使ってみた。
最初の内はついて行けたのだが、途中、カーブを描く所から分からなくなり、結局そのまま終了時間となってしまった。
家にMacが無いので復習が出来ない。
テキストを買ってきて、学校の空き時間にフリーレッスンにでも行くかなあ。
第6回(欠席) 2001年6月9日
◆講義内容
・タグ入門(<BODY TEXT><BODY LINK><BODY ALINK><BODY VLINK>
 <TABLE BGCOLOR><TR BGCOLOR><TH BGCOLOR><TD BGCOLOR>
 <FRAME SRC="~" NAME="~"><A HREF="~" TARGET="~">)
・カラーセレクターを作る(テーブル、フレーム)
・illustrator入門(イラスト、ロゴ)
◆コメント
今回は都合により欠席だったが、出席した人からのメールで内容を知る事ができた。(感謝)
前回の講座の後に、illustratorの体験版を入手し自宅のWinPCにインストールしていたのでそれを使って練習している。
カラーセレクターもほぼ完成した。
さて、どこまで皆んなに追いつけたか・・・
第7回 2001年6月16日
◆講義内容
・illustrator応用(グラデーション、レイヤー、マスク)
・photoshop入門(切り抜き、移動、影、透明化、回転、合成、illustrator取り込み、文字追加)
◆コメント
今回でillustratorについてはほぼ終了した。
出来ることは大体分かったので、あとはデザインセンスとオペレーションに慣れる事だろうか。
今回から始まったphotoshopについては、過去に幾つかの画像編集ソフトを触ったことがあったのでそれ程抵抗は無かった。
こちらもデザインセンスが決め手となりそうである。
学校通いが始まって約2ヶ月、そろそろ本格的にPC環境を整えたくなってきている。
デスクトップの上位機種にDreamweaverとFireworksをインストールし、機動性の良いマシンとしてVAIO-C1、そしてWebデザインの確認用に新発売のiBOOKを1台。でもこれだけ揃えたら一体いくらかかるのだろうか???
第8回 2001年6月23日
◆講義内容
・illustrator応用(梨のイラストを描く、背景画像の作り方、Photoshop形式での出力)
・Webデザイン(スクリーンショット、illustratorにて初期デザイン、Photoshopにて着色)
◆コメント
講義のペースが早いので、授業の中だけではついていくのが難しい。
先日、今後講義で使う「Dreamweaver」というソフトを購入した。
これはWebデザインのソフトであるが、今使っている「ホームページビルダー」より高機能である。
数日の間にはビルダーからの移行を済ませたい。
第9回 2001年6月30日
◆講義内容
・imageready入門(ロールオーバー作成)
・FLASH入門(トゥイーンアニメーション作成)
・Webデザイン(メニューがロールオーバーし、メイン画面上にアニメーションが表示されるページ)
◆コメント
今まで自分がホームページを作る時は、ページをテキストで構成しながら必要に応じてグラフィックを盛り込む方法をとっていたが、今回講義で習ったやり方はまったく逆の発想である。
最初にレイアウトを決め、それをグラフィックツールで描き、スライスしてロゴやボタンとして出力する。
その出力された素材をHTMLのテーブルに組み込んで1枚のページを完成させる。
ワープロ的発想からデザイン的発想への転換である。
第10回 2001年7月7日
◆講義内容
・FLASH入門(ボタン作成)
・Webデザイン(FLASH画像の貼り付け→以前作成したカラーセレクターにタイトルとセレクタを貼り付け)
◆コメント
これからのWeb作成ではFLASHが必須ということで講義にも3週半を費やすことになっている。
FLASHは今回初めて使っているが、なかなか面白い。
今日は学校から帰ってきて自宅PCにFLASH4の体験版をインストールした。
出来れば30日間の期間限定内に自分のHPにも何か盛り込んでみたい。
第11回 2001年7月14日
◆講義内容
・FLASH応用(インタラクティブ法)
・Webデザイン(インタラクティブ紙芝居を作る→ボタンアクションによって切り替わる3種のアニメ)
◆コメント
来週でFLASHの講義が最後となる。
次回は、生徒7人がそれぞれ持ち寄ったアニメーションを選択するホームページを作る事になっている。
宿題として構想を考えていかなければならないが、どんな落ちを作るか・・・が問題である。(やるからには笑いをとりたい)
第12回 2001年7月21日
◆講義内容
・FLASH応用(外部ムービー読み込み、プルダウンメニュー)
・Webデザイン(全生徒のムービーショーを作る)
◆コメント
今日から授業で使うMacが新機種になった。それに伴って使用ソフトの幾つかがVer.UPした。
FLASHも4→5に変わり、勝手が違う点が幾つかあった。
今回でFLASHの講義は終了したが、HTMLだけでは出来ないアクティブなページを作る手法が幾つか分かった。
近いうちに自分のページにも盛り込みたい。
第13回 2001年7月28日
◆講義内容
・FLASHまとめ(マスクレイヤー、スクリプト)
・Webデザイン(ムービーショーの完成、プルダウンメニューのバージョンアップ)
   学校の課題1 ”トンネルを抜けるとそこは・・・”
・Dreamweaver入門(オペレーションについて、サイトの定義)
◆コメント
今回から4週に渡ってDreamweaverの講義となり個人のHPを作る事になった。
Dreamweaverは今自宅で使っているのでオペレーションについてはあまり心配していない。
それよりも、どんなデザインにするか・・・そちらの方が問題である。
また、9月3日締め切りの「マルチメディアコンペティション2001」への応募作品も考えなければならず、結構大変である。
第14回 2001年8月4日
◆講義内容
・Dreamweaver入門(レイヤー(FLASHアクション)、レイアウトテーブル/レイアウトセル、
 スタイルシート、ロールオーバー、FLASHテキスト、FLASHボタン)
◆コメント
来週と再来週は休校となる。
次回から、「My Homepage」の作成に入るが、条件が2階層・4ページ程度となっているだけなので逆に難しい。
また、そのページには自分が今までにやった事の無いフォームのページも盛り込むことになっているので楽しみである。
第15回 2001年8月25日
◆講義内容
・Webデザイン応用(illustratorで初期デザイン→photoshopで詳細デザイン→imagereadyで書き出し)
・Dreamweaver応用(imagereadyにより作成されたHTMLを修正)
◆コメント
今回は久しぶりに、illustrator/photoshop/imagereadyによるWebデザインを行った。
自宅にこれらのソフトが無いせいもあるが、すっかり忘れていた。
これらを使う同様の作業は最近購入したFireworksでも可能なので、しっかり復習を行いたい。
現在作成中の2つの課題(MyHomepage、コンテスト応募作品)を学校のMacで見てみたら、デザイン面で不具合が何点も見つかった。対策が必要である。
フリーレッスン 2001年8月26日
◆フリーレッスン内容
・昨日発覚したMac版ネットスケープによる表示不具合の確認と対策検討
◆コメント
今日は短い時間ではあったが、昨日発覚した表示不具合の対策のため学校に行ってきた。
原因は、現在使っているスタイルシートとスワップイメージがネットスケープに対応していなかったことによるもので、学校課題である「My Homepage」については修正が終わった。
残るは、作成中のコンテスト応募作品とオリジナル版マサの「Web玉手箱」である。
オリジナルの方はボリュームがあるだけに大変である。
第16回 2001年9月1日
◆講義内容
・マルチメディアコンペティション2001応募作品制作
・Dreamweaver応用(各種表組方法→イメージの挿入)
◆コメント
今日は前半、マルチメディアコンペティション2001応募作品の制作を行った。
初めに先生と周りの人からアドバイスを受けたが、少しテキストに偏っている感があった。
提出期限が9/3(月)なので、少し修正を入れることにした。
下地とイメージが加わり、多少は華やかになった・・・かな?
第17回 2001年9月8日
◆講義内容
・Dreamweaver応用(テンプレート化、スタイルシート)
◆コメント
次回から生徒全員で1つの水族館サイトを作ることになった。
みんな頑張っているので足を引っ張らないようにしなければ・・・。
あと5回で現在の受講コースが終了し卒業となる。
そろそろ今後のことを真剣に考えなければならない。(ぼんやりとイメージはあるが)
第18回 2001年9月22日
◆講義内容
・Dreamweaver応用(フォーム、FTP)
   学校の課題2 ”My Homepage”  完成
・共同制作(水族館サイト)の検討
◆コメント
今回、待ちに待ったフォームの授業が行われた。"My Homepage"にアンケートページを追加してようやく完成した。
マサの「Web玉手箱」正式版の方にも応用してみたい。
来週からいよいよ、共同作品(アクアマリン宇都宮)の制作に入る。
デザインが苦手なので、そちらに少し力を入れてみようと思っている。少しお笑いのツボも押さえながら・・・
第19回 2001年9月29日
◆講義内容
・共同制作(水族館サイト)
  共通フレーム部作成、個人制作
◆コメント
今回は、Webデザイナーの開発フローに出来る限り近い形での作成を心がけている。
まずは、ノートにサイトマップを作成し、それぞれのコンテンツに対してラフスケッチを行い、その後、Fireworksでデザインの作成を行っている。(本当は、illustrator/photoshopが良いのだが)
あとは、今までやった事の無い表現方法も試してみたい。(FLASHやスクリプトを使って)
フリーレッスン 2001年9月30日
◆フリーレッスン内容
・水族館サイトの画像収集(スキャニング)およびFLASHアニメーション検討
◆コメント
今日は先日図書館で借りた本の画像をスキャニングするため学校に行ってきた。
初め、数枚を自宅のデジカメで撮影していたがページ数が多いので効率を考え学校で行った。
あとは構成を検討中のFLASHアニメーションの下地作りを行った。
(スクリプトが久しぶりだったのでかなり苦戦した)
第20回 2001年10月6日
◆講義内容
・共同制作(水族館サイト)
◆コメント
今日は、受講時間が全て個人制作に費やされた。
FLASHで面白いアクションをさせるために、アクションスクリプトを使っているが全然分からない。
夜、本を買ってきたので明日、明後日で挑戦してみるつもり。
第21回 2001年10月13日
◆講義内容
・共同制作(水族館サイト)
◆コメント
4月から始まった「 Webデザイナー養成講座」も来週で終わりとなる。
最近、学校の仲間とも親しくなり、終わってしまうのが寂しい気がする。
同じ道を目指すもの同士、これからも支えあい、励ましあっていきたい。
第22回 2001年10月20日
◆講義内容
・共同制作(水族館サイト)
  個人制作・・・完成しました→水族館サイト”軟体・刺胞動物”編
・プレゼンテーション
◆コメント
今日は、前半で個人制作、後半でプレゼンテーションを行い、全ての講義が終了した。
初めて全員のサイトを見ることになったが、みんなそれぞれ人が持っていない良い面を持っていて、素晴らしい水族館サイト「アクアマリンうつのみや」が完成したと思う。
これからも、この半年で得た人や知識の財産を大切にしていきたい。