[0291] Webレイアウトデザイン

投稿:  著者:  読了時間:13分(本文:約6,400文字)


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【日刊・デジタルクリエイターズ】 No.0291 1999/04/01.Thu発行
http://www.dgcr.com/      1998/04/13創刊
情報提供・投稿はこちらまで mailto:zacke@ppp.bekkoame.ne.jp
登録・解除・変更・FAQはこちら http://www.dgcr.com/regist/index.html
広告の御相談はこちらまで   mailto:sales@dgcr.com
前号の発行部数 11512部
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

---PR-----------------------------------------------------------------
**************** デジタルクリエイターズ広告募集中! ****************
  デジタルでクリエイトすることに敏感な向上心のある読者に対して、
           広告を出してみませんか。
モニタや書評、プレゼント企画もお待ちしております。読者は全国規模です。
35文字×5行で2万円です。 mailto:sales@dgcr.com までどうぞ。
------------------------------------------------------PR--------------

●Webレイアウトデザイン
 木曜日担当:森川眞行

●イベント情報
 ◎第11回 アマチュアCGAコンテスト 入選作品発表会

●プレゼント情報
 ◎「バーチャル・ビューティコレクション」第3号・クリスタル編

●商品追加!! 読者限定「激安」キャンペーン

●現在募集中



Webレイアウトデザイン
木曜日担当:森川眞行
----------------------------------------------------------------------
Fireworksが登場してからと言うもの、Webデザインのワークフローってのが本
当に変わってしまった。デジクリで何度も何度もしつこく書いてきたことなの
だが、ボクにとってFireworksが画期的であったのは、やはりスライス機能なの
である。

今までのWebデザインの方法ってのは、まず紙でラフデザインを起こし、それを
基にグラフィックソフトで部品を作成。そしてHTMLでレイアウトをする。手打
ちのタグでテーブルタグを組んでレイアウトする作業にはデザイン表現上の制
約も多いし限界がある。それでも2年前、GoLiveからサイバースタジオが登場し
た時はびっくりしたものだ。

雑誌のように、ポスターやパンフレットなどの紙の媒体のように、もっと自由
にレイアウトできないか? IllustratorやFreeHandのように全体のバランスを
考えてデザインを行いたい。…ずっとそう思って来た。そしてその問題を解決
してくれたのがFireworksだったのである。デジクリにも書いたし、昨年出版し
た解説本にも書いたけど、Fireworksってのはグラフィック作成ツールではなく、
レイアウトツールなのだと言い切ってしまった。

だからスライス時に異なった画像フォーマットを混在して書き出せる機能や、
テキストエリアを指定してスライスできる機能に注目していた。その当時は、
ボクが声を大にして「これはレイアウトツールなのだ」と訴えても周囲の反応
は冷たく「ふーん」とか「やりすぎだよ」とか(笑)言われたのを憶えている。
やはり、注目されたのはライブエフェクトや、快適な書き出し環境だったので
ある。もちろんそれも素晴らしいが、スライスツールはデザイナーのワークフ
ローを変えるんやで! それって凄いことなんやで! と昨年はやや消化不良
を起こしていた。

今回Fireworks 2にバージョンアップして思ったのは、ボクが注目していたレイ
アウトをするための機能がパワーアップしていることである。前も書いたけど
[情報パネル]の機能がそれ。オブジェクトを選択すると、正確な位置情報と
大きさの情報を表示してくれる。そして数値によるコントロールが可能なので
ある。たったこれだけで、Webデザインレイアウトの作業効率は格段に向上する
(そういえばFlash3も[インスペクタ]パネルが強化された時は嬉しかったな
あ…)。

そんなワケで、Webページをデザインする際に、最初に行うドキュメントの設定、
特に左右のピクセル数の設定が重要になってくる。

先週から色々と有名ドコロのWebページを次々にネットサーフして、沢山のペー
ジをキャプチャした。キャプチャしたページをFireworks2でオープンして、そ
れぞれがどのような構成になっていのか測定した。Webデザインをやっている皆
さん、これはお勧めですよ。多くのページのほとんどは「あるルール」に沿っ
てレイアウトされているのが一目瞭然です。数字は正直ですわ。

その「あるルール」の中で分ったことを2~3紹介すると、ページの左に縦方向
に作成されているナビゲーションスペース。これのほとんどは左右120ピクセル
なんですね。次に20ピクセルほどアキがあって、本文に当たる部分のスペース
は468ピクセルになっている。この468ピクセルってのは、バナー広告の横幅な
んですよね。これを合計すると608ピクセル。
まあ、アキスペースを20ピクセルも取らない場合もあって若干の違いはありま
すが、多くのコンテンツは左右600ピクセル前後で作成されています。

ちなみに、この468ピクセル。これって昔から気になっていたんですよ。なんで
こんなに中途半端な数字なんだろう…って。今年になって分ったのですが、実
は468ピクセルってのは実際にレイアウトしてみると非常に扱いやすい数字なん
です。

468ピクセルってのは、2等分しても3等分しても割り切れる数字。本文を2段組
みや3段組みにする。本文にボタンを3つ並べても4つ並べてもバランスがとりや
すいのですね。でも5では割り切れないじゃん…と言う人もいるでしょうけど
(笑)。

Webページは更新が命。またWebデザインは変更や修正にすぐ対応できなくては
ならない。Fireworksってのは、変更が多いWebデザイナーの苦労をフィード
バックして設計されたソフトウエアなんだけど、さらに効率良く変更や修正を
行うには、最初のページレイアウトの設計が大事なのだと思う。

そして、FireworksでスライスされたレイアウトデータをDreamweaver 2の[テ
ンプレート]として登録しておけば、ほとんど無敵でっせ。ちなみに
Fireworks 2からはスライスの書き出しとして、Dreamweaver 2のテンプレート
ファイル(Library.lbi)を選択できるようになっている。これは何を意味する
か? そうFireworks 2でレイアウトをして、Dreamweaver 2のテンプレートで
デザイン管理すると、めっちゃ便利でっせ! ということなのだ。

もちろんボクもMacromediaの提案通り、この方法でWebデザインを行っている。

最後におまけ。スライスされたテーブルタグをブラウザで表示すると、左と上
部分に空きスペースが出来てしまう。これを回避するには“BODY”タグの最後

“MARGINWIDTH=0 MARGINHEIGHT=0 TOPMARGIN=0 LEFTMARGIN=0”
というタグを追加するとよい。タグを読めばわかるが、マージンをゼロにしろ、
という指示である。これでFireworksでレイアウトしたデータをバッチリHTML
で再現できる。

【森川眞行】もりかわ・まさゆき/ Silicon Cafe'
突然ですが、来週東京と大阪でFireworks 2の無料セミナーがあります。4月7日
が大阪のデジタルハリウッド、4月9日が東京のアスキーです。その大阪のセミ
ナーに森川が講師をやります。まだ空席があるようなのでぜひ見にきて下さい。
ただし先着順なので急いで予約しよう! 詳しい内容は以下のアドレスでアナ
ウンスしています。
http://www.macromedia.com/jp/seminar/fw2ug/
また、Fireworks 2とDreamweaver 2を組み合わせた森川の長時間セミナー
「Webデスマッチ」も4月の26/27日(なんと2Days!)に開催が決まりました。
詳しくは次号で!

______________________________________________________________________
■イベント情報
----------------------------------------------------------------------
第11回 アマチュアCGAコンテスト 入選作品発表会
----------------------------------------------------------------------
以下は主催者からのメッセージ

本コンテストは、“アマチュアのCGアニメ作品の発表の場を設け、広く一般に
CGAをPRするとともに、その質的向上を促進する”という主旨で毎年開催されて
おります。

昨今、パソコンの性能も飛躍的に向上し、マルチメディアが現実のものとなっ
てきました。このようなデジタル映像文化を、今後も発展させていくためにも、
優秀なデジタルアーチストの育成が不可欠でしょう。

また、一般パソコンユーザーにとっても、パソコンの一つの可能性として、
パーソナルユースでのCGアニメーションが、現時点でどこまで可能なのか、そ
してこれからどのような方向に進むのかを知っていただくよい機会であるかと
存じます。

こういったアマチュアのCGアニメーション作品が一堂に会するこの機会に、ぜ
ひご覧いただきたいと存じます。

イベント名:第11回 アマチュアCGAコンテスト 入選作品発表会

>東京上映会
開催日:1999年 4月 4日(日)
時 間:開場 12:30 開演 13:00 終了 17:00(予定)
会 場:なかのZERO大ホール
    東京都 中野区 中野 2-9-7
交 通:JR中央線・地下鉄東西線「中野駅」下車、南口から東へ徒歩7分
    地下鉄丸ノ内線「新中野駅」下車、鍋屋横丁から北へ徒歩10分

>関西上映会
開催日:1999年 4月11日(日)
時 間:開場 12:30 開演 13:00 終了 17:00(予定)
会 場:京都テルサ テルサホール
    京都市南区新町通九条下ル
交 通:地下鉄九条駅より徒歩5分、JR京都駅八条口より徒歩10分、
    市バス九条車庫停留所すぐ

料 金:入場無料
注意事項:来場者多数の場合は、入場制限があります。

イベント内容:
・コンテストに入選したCGアニメーション作品等、約30作を上映。
・受賞者を交えての座談会。

問い合わせ先:
〒533-0032 大阪市 東淀川区 淡路 5-17-2-102号
PROJECT TEAM DoGA内 CGAコンテスト事務局
E-mail: contest@doga.co.jp

______________________________________________________________________
■プレゼント情報
----------------------------------------------------------------------
「バーチャル・ビューティコレクション」第3号・クリスタル編
http://www.dgcr.com/present/
----------------------------------------------------------------------
書店で平積み大ばく進中であり、3D制作者&ファン層を広めたといわれる「
バーチャル・ビューティコレクション」第3号のクリスタル編(283号で紹介済
み)のプレゼント受付中です!

「バーチャル・ビューティコレクション」の第3号のクリスタル編
http://www.agosto.com/

----------------------------------------------------------------------
プレゼント応募フォームはこちら。
http://www.dgcr.com/present/

●締め切りは
「バーチャル・ビューティコレクション・クリスタル編」
 4月15日(木)、午前8時タイムスタンプ(日本時間)

フォームで送信できなかった方は、下記フォーマットを
zacke@ppp.bekkoame.ne.jpまで
subject「バーチャル・ビューティコレクション・クリスタル編」
で、ご応募下さい。

【電子メールアドレス】
【氏名】
【得意分野】
【郵便番号】
【住所】
【TEL】
【URL】
【好きなライター・クリエイター】
【コラムに登場して欲しいクリエイター】
【あったらいいなという企画内容】
【ひとこと】

______________________________________________________________________
■読者限定「激安」キャンペーン。商品追加!!
http://www.agosto.com/dp_special/
----------------------------------------------------------------------
254号でもお知らせしましたが、「読者限定」キャンペーン実施中です。今回、
お馴染みのPhotoshopやIllustrator、プラグインなど、ラインナップを増やし
ました。どうぞ価格チェックを!!

詳細は上記アゴストさんのサイトへゴー。今月の「アート&デザイン」や吉井
宏さんのペインター本、柴田編集長編の美少女本もよろしく。

アゴストさんのサイトでは、アンケートプレゼントも実施中。
http://www.agosto.com/dp/pre.html
アゴストのサイト
http://www.agosto.com/

______________________________________________________________________
■現在募集中
http://www.dgcr.com/etc/invite.html
----------------------------------------------------------------------
●読者プロフィール
●ホームページリニューアルインフォメーション
●新刊情報
●デジクリClassifieds など、
クリエイターに有益なもの全般!!

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
発行   デジタルクリエイターズ
     <http://www.dgcr.com/>

編集長  森川眞行 
     柴田忠男 
     神田敏晶 

情報提供・投稿・プレスリリース・記事・コラムはこちらまで
 担当:濱村和恵
登録・解除・変更・FAQはこちら http://www.dgcr.com/regist/index.htm
広告の御相談はこちらまで   mailto:sales@dgcr.com

★等幅フォントでご覧ください。
★【日刊・デジタルクリエイターズ】は無料です。
 お友達にも是非お奨め下さい (^_^)

★日刊デジクリは、まぐまぐ<http://rap.tegami.com/mag2/>、
Macky!<http://macky.nifty.ne.jp/>、Pubzine<http://www.pubzine.com/>の
システムを利用して配信しています。

Copyright(C), 1998-1999 デジタルクリエイターズ
許可無く転載することを禁じます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■