masa4.net

Macromedia Webサイトの運営術

Posted at 2005/06/15 (Wed) 11:01 +09:00 in Web Designing

マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C1セッションにて「10年の歴史を紐解くMacromediaサイトの制作、運営術」を聴講。

マクロメディアサイトは現在、Global全体で95,000ページから構成され、内訳は下表のようになっています。 尚、LiveDocsとは製品ドキュメントなど。この巨大サイトのうち、Japanサイトは約8,000ページにのぼり、アジアの中では最大規模となっているようです。

構成	ページ数
LiveDocs	50,000
Web	45,000
Total	95,000

Webサイト開設当時は、製品情報を中心としたサイト構成。21世紀初頭からは、ユーザー、ディベロッパー向けのサイトへと変遷。試行錯誤を重ね、ある時はイギリスのデザイナーにサイトデザインを依頼してスッキリとした画面構成になったものの、ユーザーが下層まで辿りにくくなってしまった経験もあるようで、単にブランドデザインではダメだとの結論に至り、徐々にユーザビリティやユーザ体験の重要視もなされていったようです。今後は主にビジネス・ソリューションを中心に据えたサイトへと変わって行くみたい。

さて、幾度と無くリデザインを繰り返し、ページ数もどんどん膨らんでいく過程での制作運営フローはいったいどうなっているのでしょうか...？特にデザイナー、ディレクターにとって参考になる内容をメモしてきたので整理したいと思います。

主なチーム構成

• Design Team  （モックアップ構築）
• Production Team  （フロントエンド構築）
• Engineering Team  （バックエンド構築）
• QA Team  （品質管理）

Areaの定義

Header Global navigation
Contents Area Page Header Color var Contents	Promotion Area
	Right navigation
Footer

制作において重要なこと

• 隠れたコンテンツは見落とされる。（ユーザーがスキャンできない）。
• 表示にかかる時間（サイトのパフォーマンス）は重要。→CSSで対応
• ブラウザ対応は日々頑張る。

Dreamweaverテンプレートの活用

• テンプレートを利用すれば、デザイン・構成の一括変換が可能
• 定義づけしたAreaごとにテンプレートを作成
• 編集可能/不可領域の設定
• オプション領域の活用（ON/OFF）
• リピート領域の活用

Contents Areaのグリッドレイアウト

• 2column、3columnバージョンなどあらかじめ構成要素を規定。→column.css

CSS導入後の実効果

• HTMLコード量（行数・文字数）が50%近く軽減できた。
• 作業量が1/3まで削減できた。
• サイトパフォーマンスの向上（表示スピードアップ）
• コーダーのスキルに左右されない

Macromedia Webサイトの運営術のキモ（まとめ）

• 画面Area定義
• Dreamweaverテンプレートの活用
• グリッドレイアウト

wikieditish message: Ready to edit this entry.

Entry ID:

Title:

Body:

<p>マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C1セッションにて「10年の歴史を紐解くMacromediaサイトの制作、運営術」を聴講。</p> <p> マクロメディアサイトは現在、Global全体で95,000ページから構成され、内訳は下表のようになっています。 尚、LiveDocsとは製品ドキュメントなど。この巨大サイトのうち、Japanサイトは約8,000ページにのぼり、アジアの中では最大規模となっているようです。 </p> <table> <thead> <tr> <td>構成</td> <td>ページ数</td> </tr> </thead> <tbody> <tr> <td>LiveDocs</td> <td>50,000</td> </tr> <tr> <td>Web</td> <td>45,000</td> </tr> <tr> <td>Total</td> <td>95,000</td> </tr> </tbody> </table> <p>Webサイト開設当時は、製品情報を中心としたサイト構成。21世紀初頭からは、ユーザー、ディベロッパー向けのサイトへと変遷。試行錯誤を重ね、ある時はイギリスのデザイナーにサイトデザインを依頼してスッキリとした画面構成になったものの、ユーザーが下層まで辿りにくくなってしまった経験もあるようで、単にブランドデザインではダメだとの結論に至り、徐々にユーザビリティやユーザ体験の重要視もなされていったようです。今後は主にビジネス・ソリューションを中心に据えたサイトへと変わって行くみたい。</p> <p> さて、幾度と無くリデザインを繰り返し、ページ数もどんどん膨らんでいく過程での制作運営フローはいったいどうなっているのでしょうか...？特にデザイナー、ディレクターにとって参考になる内容をメモしてきたので整理したいと思います。 </p> <h5>主なチーム構成</h5> <ul> <li>Design Team&nbsp;&nbsp;（モックアップ構築）</li> <li>Production Team&nbsp;&nbsp;（フロントエンド構築）</li> <li>Engineering Team&nbsp;&nbsp;（バックエンド構築）</li> <li>QA Team&nbsp;&nbsp;（品質管理）</li> </ul> <h5>Areaの定義</h5> <table width="80%" border="0"> <tr> <td colspan="2"> Header <blockquote> <p>Global navigation</p> </blockquote> </td> </tr> <tr> <td rowspan="2" valign="top" width="70%"> Contents Area <blockquote> <p>Page Header</p> </blockquote> <blockquote> <p>Color var</p> </blockquote> <blockquote> <p><br /><br /><br />Contents<br /><br /><br /></p> </blockquote> </td> <td width="30%" height="100px" valign="top">Promotion Area</td> </tr> <tr> <td align="center" height="250px" valign="top">Right navigation</td> </tr> <td colspan="2"> Footer </td> </tr> </table> <h5>制作において重要なこと</h5> <ul> <li>隠れたコンテンツは見落とされる。（ユーザーがスキャンできない）。</li> <li>表示にかかる時間（サイトのパフォーマンス）は重要。→CSSで対応</li> <li>ブラウザ対応は日々頑張る。</li> </ul> <h5>Dreamweaverテンプレートの活用</h5> <ul> <li>テンプレートを利用すれば、デザイン・構成の一括変換が可能</li> <li>定義づけしたAreaごとにテンプレートを作成</li> <li>編集可能/不可領域の設定</li> <li>オプション領域の活用（ON/OFF）</li> <li>リピート領域の活用</li> </ul> <h5>Contents Areaのグリッドレイアウト</h5> <ul> <li>2column、3columnバージョンなどあらかじめ構成要素を規定。→column.css</li> </ul> <h5>CSS導入後の実効果</h5> <ul> <li>HTMLコード量（行数・文字数）が50%近く軽減できた。</li> <li>作業量が1/3まで削減できた。</li> <li>サイトパフォーマンスの向上（表示スピードアップ）</li> <li>コーダーのスキルに左右されない</li> </ul> <h5>Macromedia Webサイトの運営術のキモ（まとめ）</h5> <ul> <li>画面Area定義</li> <li>Dreamweaverテンプレートの活用</li> <li>グリッドレイアウト</li> </ul>

File:

Excerpt:

マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C1セッションにて「10年の歴史を紐解くMacromediaサイトの制作、運営術」を聴講。マクロメディアサイトは現在、Global全体で95,000ページから構成され、内訳は下表のようになっています。尚、LiveDocsとは製品ドキュメントなど。この巨大サイトのうち、Japanサイトは約8,000ページにのぼり、アジアの中では最大規模となっているようです。構成ページ数LiveDocs50,000Web45,000Total95,000Webサイト開設当時は、製品情報を中心としたサイト構成。21世紀初頭からは、ユーザー、ディベロッパー向けのサイトへと変遷。試行錯誤を重ね、ある時はイギリスのデザイナーにサイトデザインを依頼してスッキリとした画面構成になったものの、ユーザーが下層まで辿りにくくなってしまった経験もあるようで、単にブランドデザインではダメだとの結論に至り、徐々にユーザビリティやユーザ体験の重要視もなされていったようです。今後は主にビジネス・ソリューションを中心に据えたサイトへと変わって行くみたい。さて、幾度と無くリデザインを繰り返し、ページ数もどんどん膨らんでいく過程での制作運営フローはいったいどうなっているのでしょうか...？特にデザイナー、ディレクターにとって参考になる内容をメモしてきたので整理したいと思います。主なチーム構成Design Team  （モックアップ構築）Production Team  （フロントエンド構築）Engineering Team  （バックエンド構築）QA Team  （品質管理）Areaの定義HeaderGlobal navigationContents AreaPage HeaderColor varContentsPromotion AreaRight navigationFooter制作において重要なこと隠れたコンテンツは見落とされる。（ユーザーがスキャンできない）。表示にかかる時間（サイトのパフォーマンス）は重要。→CSSで対応ブラウザ対応は日々頑張る。Dreamweaverテンプレートの活用テンプレートを利用すれば、デザイン・構成の一括変換が可能定義づけしたAreaごとにテンプレートを作成編集可能/不可領域の設定オプション領域の活用（ON/OFF）リピート領域の活用Contents Areaのグリッドレイアウト2column、3columnバージョンなどあらかじめ構成要素を規定。→column.cssCSS導入後の実効果HTMLコード量（行数・文字数）が50%近く軽減できた。作業量が1/3まで削減できた。サイトパフォーマンスの向上（表示スピードアップ）コーダーのスキルに左右されないMacromedia Webサイトの運営術のキモ（まとめ）画面Area定義Dreamweaverテンプレートの活用グリッドレイアウト

Password: