教育コンテンツの制作現場から
境祐司
教育デザイナーとして学校、企業の講座企画、講演などの活動をおこなう。著書「改訂新版 Webデザイン基礎」(技術評論社)、「XHTMLマークアップ&スタイルシート リフォームデザインガイドブック」(ソシム)など
url: admn.air-nifty.com/books/
第5回
実践！サイト制作のアセット管理
－視覚表現とプランブック－
デザインルールを決めておけば、ひな型に沿って「ある程度、限定された範囲の中で編集する」ワークフローが可能となる。表現の自由度は制限されるが、作業は確実に効率化される。1988年ごろ、すべての工程を手作業で行っていたグラフィックデザインもApple社のMacintosh II、Adobe社のIllustrator 88などの登場によって激変した。デザイン作業の大半が自動化され、今まで使っていた道具が必要なくなってしまったのだ。今回は自動化とクリエイティブワークについて語っていきたい。
デジタルデザインの歴史
本連載は「ルール」と「自動化」を中心に話を進めているが、デジタルデザインの歴史というのは「自動化の歴史」といってよいだろう。17、8年前は、線一本描く場合でもロットリングと定規が必要であった。ロゴをデザインするには雲形定規やディバイダなどの製図用具を使わなくてはならなく、これらの道具を操れない人はデザイナーにはなれなかったのだ。そうした状況が変化してきたのは1988年ごろである。
Adobe社が開発したページ記述言語「PostScript(ポストスクリプト)」や高解像度出力が可能なレーザープリンタなどが紹介され、日本でも積極的にデジタルデザインを啓蒙する人たちが現れた。米国ではすでにApple Macintosh、Adobe Illustrator、Aldus PageMakerなどが活用され、DTPブームが起こっていた。
デザインの自動化
ロットリングや製図用具などを使って描いたり、写植を切り貼りしていたデザイン作業はアプリケーションソフトウエアによって自動化され、ほぼすべての工程がパソコン上のデジタルワークに置き換わってしまった。今まで所有していた道具がまったく不必要になったのだ。大激変である。
その後、特殊なカメラとマスキング技術によって行っていた写真合成(オプチカル合成)もColorStudioやPhotoshopなどの画像処理ソフトウエアによって自動化された。それまでの手作業が見事にシミュレートされており、デザイナーが移行しやすいように開発されていったのである。まさにデザイン・オートメーションの衝撃であった。
Webデザインの自動化
まだ10年少々の歴史しかないWebデザインも例外なく自動化の歴史を歩んでいる。
「Web標準準拠」という意識の高まりから構造とデザインの分離が定着し、CSSが積極的に使われるようになった。エディターによる手打ちが復活し、再び「手作業」の割合が多い(デザイナーにとっては作業量の負担が大きい)時期に入っている。次の自動化はこのCSSをブラックボックスにすることだろう。テーブルレイアウトがCyberStudio(現GoLive)やDreamweaverによって自動化された時代を思い起こすとイメージできると思う。HTMLソースをまったく触れないデザイナーでも仕事が遂行可能だった。もちろん、そのデメリットも大きかったのだが、少なくとも全体的なレベルアップになった。また、レイアウト作業が自動化されたことで高度なデザイン・ワークフローも次々と構築されていくことになる。
アプリケーションソフトウエアは商品であり、道具である。多くのデザイナーに注目され、支持されるには「仕事に役立つ」機能が必須となる。手作業が残っていればソフトウエア上でシミュレートして機能搭載していくのは当然のことである。
自動化しにくい作業と支援ツールによる効率化
イラストや漫画を描くのは「自動化しにくい」、断片的な情報を集めてアイデアを出していく作業も「自動化しにくい」。今も昔もあまり変わらないという作業はたくさんある。これらの作業は「支援ツール」止まりで「自動化ツール」の実現は難しい。Webデザインでいえば、ページビルディングは自動化できてもビジュアル表現に関しては「支援」することしかできない場合が多い。そこで「ある程度、限定された範囲の中で編集する」というレベルに落とし込み、作業の効率化を図るのである。
Webデザインの視覚表現を「支援」もしくは「ある程度、限定された範囲の中で編集する」レベルで自動化する具体例を紹介していこう。まずは作業の視覚化である。アイデアを編集可能な「図解」で表現していくことで、驚くほど情報が整理される。市販されているアイデアプロセッサやグラフツールなどが利用できる【1】【2】【3】。
【1】OmniGraffle Professionalによる構造化デザインのシミュレーション
【2】Webページの構造をシンプルなチャートで表現したもの
【3】レイアウトのバリエーションを体系化したチャート
「作業の視覚化」のあとは、デザインアセットのライブラリ化である【4】。共有度の高い(ナビゲーション、インターフェイスなど)グラフィック部品を作成する。この作業のポイントは「部品の分類」である。また、仮組み用のダミーパーツとしても活用できるように作成しておくことが重要だ。同様にレイアウト・ライブラリも用意する【5】。「作業の視覚化」で作成したレイアウト・バリエーションなどをベースに機械的に作成していけばよい。
【4】ビジュアルデザインのアセットをライブラリ化する
【5】レイアウト・バリエーション・セットをライブラリ化する
プランブックの作成
「作業の視覚化」→「デザインアセットのライブラリ化」→「レイアウトのライブラリ化」のあとは、これらの材料を使って「プランブック」を作成していく。プランブックとは、Webデザイン・カタログのようなものだととらえてほしい。複数のテーマを決めてから、レイアウト・バリエーションにグラフィック・アセットを配置していく。一度作成しておけば、クライアントとの初期ミーティングなどで互いのイメージをすり合わせる便利なツールにもなる【6】。
【6】CSSプランブックはデザイン作業を明確にしていく強力なツールとなる
テーマサンプル、カラーサンプル、色彩計画や面積効果検証、アセット・リスト、バリエーション・レベルと作業工数の一覧など、建築の設計図に相当するものや人の感性に訴えるビジュアル集といった内容で構成される【7】。自動化しにくい作業こそ、プランブックのような支援ツールが効果的に機能する。高機能BlogサービスやCMSのデザイン機能と連動した使い方も可能である【8】【9】。
【7】Webデザインのカラーシステムを現している図
【8】CSSプランブックに含まれる色彩計画のためのカタログ
【9】CSSプランブックに含まれるタイポグラフィと面積効果のカタログ
本記事は『Web STRATEGY』2006年11-12 vol.6からの転載です
この号の特集など、ほかの記事の紹介はこちら！
『Web STRATEGY』最新号の情報はこちら！
Amazon.co.jpでの購入はこちら！
定期購読はMdN Squareで！
境祐司教育デザイナーとして学校、企業の講座企画、講演などの活動をおこなう。著書「改訂新版 Webデザイン基礎」(技術評論社)、「XHTMLマークアップ&スタイルシート リフォームデザインガイドブック」(ソシム)など
url: admn.air-nifty.com/books/
第5回
実践！サイト制作のアセット管理
－視覚表現とプランブック－
デザインルールを決めておけば、ひな型に沿って「ある程度、限定された範囲の中で編集する」ワークフローが可能となる。表現の自由度は制限されるが、作業は確実に効率化される。1988年ごろ、すべての工程を手作業で行っていたグラフィックデザインもApple社のMacintosh II、Adobe社のIllustrator 88などの登場によって激変した。デザイン作業の大半が自動化され、今まで使っていた道具が必要なくなってしまったのだ。今回は自動化とクリエイティブワークについて語っていきたい。
デジタルデザインの歴史
本連載は「ルール」と「自動化」を中心に話を進めているが、デジタルデザインの歴史というのは「自動化の歴史」といってよいだろう。17、8年前は、線一本描く場合でもロットリングと定規が必要であった。ロゴをデザインするには雲形定規やディバイダなどの製図用具を使わなくてはならなく、これらの道具を操れない人はデザイナーにはなれなかったのだ。そうした状況が変化してきたのは1988年ごろである。
Adobe社が開発したページ記述言語「PostScript(ポストスクリプト)」や高解像度出力が可能なレーザープリンタなどが紹介され、日本でも積極的にデジタルデザインを啓蒙する人たちが現れた。米国ではすでにApple Macintosh、Adobe Illustrator、Aldus PageMakerなどが活用され、DTPブームが起こっていた。
デザインの自動化
ロットリングや製図用具などを使って描いたり、写植を切り貼りしていたデザイン作業はアプリケーションソフトウエアによって自動化され、ほぼすべての工程がパソコン上のデジタルワークに置き換わってしまった。今まで所有していた道具がまったく不必要になったのだ。大激変である。
その後、特殊なカメラとマスキング技術によって行っていた写真合成(オプチカル合成)もColorStudioやPhotoshopなどの画像処理ソフトウエアによって自動化された。それまでの手作業が見事にシミュレートされており、デザイナーが移行しやすいように開発されていったのである。まさにデザイン・オートメーションの衝撃であった。
Webデザインの自動化
まだ10年少々の歴史しかないWebデザインも例外なく自動化の歴史を歩んでいる。
「Web標準準拠」という意識の高まりから構造とデザインの分離が定着し、CSSが積極的に使われるようになった。エディターによる手打ちが復活し、再び「手作業」の割合が多い(デザイナーにとっては作業量の負担が大きい)時期に入っている。次の自動化はこのCSSをブラックボックスにすることだろう。テーブルレイアウトがCyberStudio(現GoLive)やDreamweaverによって自動化された時代を思い起こすとイメージできると思う。HTMLソースをまったく触れないデザイナーでも仕事が遂行可能だった。もちろん、そのデメリットも大きかったのだが、少なくとも全体的なレベルアップになった。また、レイアウト作業が自動化されたことで高度なデザイン・ワークフローも次々と構築されていくことになる。
アプリケーションソフトウエアは商品であり、道具である。多くのデザイナーに注目され、支持されるには「仕事に役立つ」機能が必須となる。手作業が残っていればソフトウエア上でシミュレートして機能搭載していくのは当然のことである。
自動化しにくい作業と支援ツールによる効率化
イラストや漫画を描くのは「自動化しにくい」、断片的な情報を集めてアイデアを出していく作業も「自動化しにくい」。今も昔もあまり変わらないという作業はたくさんある。これらの作業は「支援ツール」止まりで「自動化ツール」の実現は難しい。Webデザインでいえば、ページビルディングは自動化できてもビジュアル表現に関しては「支援」することしかできない場合が多い。そこで「ある程度、限定された範囲の中で編集する」というレベルに落とし込み、作業の効率化を図るのである。
Webデザインの視覚表現を「支援」もしくは「ある程度、限定された範囲の中で編集する」レベルで自動化する具体例を紹介していこう。まずは作業の視覚化である。アイデアを編集可能な「図解」で表現していくことで、驚くほど情報が整理される。市販されているアイデアプロセッサやグラフツールなどが利用できる【1】【2】【3】。
【1】OmniGraffle Professionalによる構造化デザインのシミュレーション
【2】Webページの構造をシンプルなチャートで表現したもの
【3】レイアウトのバリエーションを体系化したチャート
「作業の視覚化」のあとは、デザインアセットのライブラリ化である【4】。共有度の高い(ナビゲーション、インターフェイスなど)グラフィック部品を作成する。この作業のポイントは「部品の分類」である。また、仮組み用のダミーパーツとしても活用できるように作成しておくことが重要だ。同様にレイアウト・ライブラリも用意する【5】。「作業の視覚化」で作成したレイアウト・バリエーションなどをベースに機械的に作成していけばよい。
【4】ビジュアルデザインのアセットをライブラリ化する
【5】レイアウト・バリエーション・セットをライブラリ化する
プランブックの作成
「作業の視覚化」→「デザインアセットのライブラリ化」→「レイアウトのライブラリ化」のあとは、これらの材料を使って「プランブック」を作成していく。プランブックとは、Webデザイン・カタログのようなものだととらえてほしい。複数のテーマを決めてから、レイアウト・バリエーションにグラフィック・アセットを配置していく。一度作成しておけば、クライアントとの初期ミーティングなどで互いのイメージをすり合わせる便利なツールにもなる【6】。
【6】CSSプランブックはデザイン作業を明確にしていく強力なツールとなる
テーマサンプル、カラーサンプル、色彩計画や面積効果検証、アセット・リスト、バリエーション・レベルと作業工数の一覧など、建築の設計図に相当するものや人の感性に訴えるビジュアル集といった内容で構成される【7】。自動化しにくい作業こそ、プランブックのような支援ツールが効果的に機能する。高機能BlogサービスやCMSのデザイン機能と連動した使い方も可能である【8】【9】。
【7】Webデザインのカラーシステムを現している図
【8】CSSプランブックに含まれる色彩計画のためのカタログ
【9】CSSプランブックに含まれるタイポグラフィと面積効果のカタログ
本記事は『Web STRATEGY』2006年11-12 vol.6からの転載です
この号の特集など、ほかの記事の紹介はこちら！
『Web STRATEGY』最新号の情報はこちら！
Amazon.co.jpでの購入はこちら！
定期購読はMdN Squareで！
