昨日投稿した以下の記事の補足です。


レスポンシブ・アーキテクチャの概念から生まれた「レスポンシブWebデザイン」




2011年9月12日、ボストングローブ(The Boston Globe)は、大規模な商用サイトとしては初めて、レスポンシブWebデザインを採用しました。

この頃はまだレスポンシブWebデザインのワークフローが確立しておらず、各社が試行錯誤している時期だったため、大規模サイトの導入は大きな話題になりました。


サイトのリニューアルは、ボストンの制作会社フィラメントグループ(Filament Group)が担当。

レスポンシブWebデザインの提唱者イーサン・マルコッテ氏、Responsive Issues Communityのチェアマンであり、A List Apartでもお馴染みのマット・マーキス氏なども参加しており、まさにドリームチームによるプロジェクトでした。


左が、フィラメントグループの協同経営者であるトッド・パーカー氏、右が同社のデザイナー/開発者のスコット・ジール氏、そして、中央がプロトタイプを担当したアップステートメント(Upstatement)のデザイナー、ティト・ボッティータ氏です。





このプロジェクトでは、レスポンシブWebデザインのプロタイピングツールとして、Adobe InDesignが使われています。


まず、ティト・ボッティータ氏は、InDesignのマスターページ機能を活用して、6つのブレークポイントを設定、各々のページ幅に適応したレイアウトを設計していきました。





InDesignでつくられたサイトのプロトタイプは、さまざまなデバイスで検証され、スコット・ジール氏が作業を引き継ぎ、コーディングで作り込んでいきます。




InDesignのマスターページ機能とスタイルシート機能を最大限に活用したプロトタイプ制作は、ブレークポイントごとのページデザインを効率よく管理でき、メンテナンス性も高い手法として注目されました。
※InDesignスタイルシートは、HTMLマークアップにも役立ちますが、CSSのことではありません。



実は、リニューアルしたボストングローブのサイト公開と、ほぼ同じ時期(2011年8月15日)に、Adobe Museの最初のベータバージョンが公開されています。


ご存知のとおり、Museは、InDesignの開発をしていたチームが手がけたウェブツールです。

Museには、InDesignと同様のマスターページ機能、スタイルシート機能が搭載されました。



リリース間近の新しいMuseは、レスポンシブWebデザインによるページビルディングの高度な仕組みを搭載し、プロトタイピングツールとしても期待されています。

そして、MuseでレスポンシブWebデザインを実行する際、肝となるのが、マスターページ機能であり、スタイルシート機能なのです。


Museプロトタイピングでは、このプロセスを解説していきたいと思います。


アーカイブ:
Dreamweaver+Bootstrap完全習得と、Muse+レスポンシブWebデザイン完全習得
12月29日から本日までの[第1〜7回]のまとめ


関連コンテンツ:
Dreamweaver CC 2015 基礎編パート1



Muse CC 2015 ビジネスガイドブック



シンクゼロマガジンとは?

筆者:
Creative Edge School Books