ワークフローとプロトタイピング(Adobe MAX Japan 2009)

ワークフローとプロトタイピング

Webサイト制作を高品質・高効率に進めるためには、設計・デザイン・実装のそれぞれのプロセスにプロトタイピングを織り込んだワークフローを実践する必要があります。大規模な案件の現場において実際に運用されているワークフローと、その中でDreamweaverとContributeをプロトタイピングツールとして活用した例をご紹介します。
株式会社ビジネス・アーキテクツ 伊原 力也

ワークフローというのは「完璧」があるものでもないですし、体制・環境が変われば変わっていくものなので、私も日々試行錯誤しながら考えています。そんななか「Dreamweaverでプロトタイピング」という言葉にも惹かれたので受講しました。

ワークフローの進化
  1. 全ページデザインして実装していたが、修正が入ったらデザインも実装も対応しなければならなかった
  2. ワイヤーフレーム+要素を盛り込んだ「コンテンツ仕様書」を採用したが、手戻りは減ったがタスクは増えた
  3. 全ページデザインすることはやめてコンポーネント部分のみデザイン・実装をしたが、デザイン時と実装時に仕様の再認識が必要だったり、仕様が固まらないと進まなかった
  4. 必要そうなコンポーネントをあらかじめ定義したコンポーネント・システムを採用したが、それでも実装後にて戻りが発生した
HTML版コンテンツ仕様書を採用する理由
  • webサイトとして確認できるのは実装後で、クライアントも実装前は想像で判断している
  • 途中の段階だと、上長(決定権を持つ人)も本気で確認してくれない
  • もっと前の段階で、リンクできるものを用意する必要がある
  • コンテンツ仕様書にリンクを持たせればイイ→情報設計にも論理的な要素だけではなく、体験的な部分も必要
  • 仕様がHTMLだったら「一括置換しやすい」「SEOチェックツールがつかる」「幅広い確認環境の確保」「CMS、subversionが使える」というメリットがある
HTML版コンテンツ仕様書の概要

HTML版コンテンツ仕様書

  • コンポーネント定義をDreamweaverで、仕様書のページ展開をContributeで
  • Dreamweaverテンプレート、Dreamweaverライブラリを使用
  • あくまで仕様書用で、表示のためのマークアップとは別になってしまう
HTML版コンテンツ仕様書の結果と課題
  • 「サイト」を見ながらのクライアントと共同作業で精度が向上
  • デザイン・実装後の手戻りが軽減
  • 標準セットが確立され、別プロジェクトに横展開できる
  • 仕様と実装で2度同じものをつくっている感はある
  • 実装側で修正した際、仕様とズレてしまう→CMSで設計・実装できれば・・・

今回紹介していただいた「HTML版コンテンツ仕様書」を後日プレゼントしていただけるそうです。私の業務的にクライアントワークではなく内製なので、そのまま活用することは難しそうですが、チーム用に同じようなDreamweaverテンプレートを作っているので、いまからかなり楽しみです。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー