いまから始める
Webワークフローガイド
グラフィックデザイナー、
印刷（DTP）デザイナーのためのワークフローガイド
ADOBE
®
CREATIVE SUITE
®
3
3
Webビジネスを始めよう
!
DTPで培ったグラフィックデザインの技術と経験を生かし
Webへのエントリーでビジネスチャンスをひろげよう
印刷メディアから
Webの領域へふみだそう!
DTPに従事してきたユーザーは、印刷メディアで培われ 蓄積されたデザインスキルとDTPノウハウを獲得して きました。さらに高解像度なフォト、ベクターグラ フィック、編集可能なテキストにいたるコンテンツリ ソースを保持しているため、Webデザインにエントリー し、ビジネスを始めることで大きなアドバンテージと メリットを得られます。DTPだけでなくWebを含めて 相互にクロスするメディアへビジネスのステージを 拡張することで、広範囲のビジネススキルを得ること ができ、新たなビジネスチャンスにつながります。DTPをリードしてきた印刷会社や
デザイナーだからできること
企業の広報活動を支える上でDTPは大きな役割を果た してきました。しかし、現在では企業の広報に合わせた メディアを選択する必要がでてきました。そこで紙 メディアとWebの両方、さらに携帯端末など、ターゲット に 合 わ せ た 最 適 な 提 案 と 柔 軟 に 対 応 で き る ワ ー ク フローが求められています。 企画からデザインカンプ作成、画像加工やレイアウト といった作業を分担しチームで行うワークフローは DTPもWebも同様です。経験と人材を有効利用する ことで、スムーズにWebへのエントリーが可能になります。DTPユーザーが
Webを始めるアドバンテージ
Webデザインの技術やビジネスが成熟してきたことで、Webの広告メディアとしての役割は
DTPに追いついてきました。今まではハードルが高かったWebデザインの制作もAdobe®
Creative Suite® 3の登場でスムーズに行えるようになりました。またゼロからのスタートで
はなく、DTPの資産やワークフローも利用できるので、すぐにWebが始められます。
DTPで作り上げてきたデータ資産は
再利用が可能です
Adobe® Photoshop® や Adobe® Illustrator®、Adobe® InDesign®で作成したデータは再利用してWebに活かすことが できます。2次利用が可能なデータ資産を持っていることで Webに転用ができて、ワンソースマルチユースが実現します。
DTPのスタイルシートと同じように
文字指定ができるようになりました
見出しや本文などの書体を名前を付けて設定するスタイル シートがWebでも使えるようになりました。DTPのスタイル シートと同じように、後から変更すれば一括で修正ができます。現在行っているDTPと同じワークフローで
Web制作が可能です
DTPにおける台割りに当たるサイトマップを作成し、デザイン カンプを作ってチェックを行うなど、デザインの企画から、 最終的なレイアウトオペレーションまで行うワークフローは Webでも同じです。Adobe Creative Suite 3の登場で DTPと
Web２つの互換性と操作性が向上しました
グラフィックとWebのトップシェアのアプリケーションが アドビからCS3として各エディションが提供されることに よって、データ互換性の向上や操作性の統一が図られました。 ア プ リ ケーシ ョ ン 間 の データ 整 理 の 手 間 が 必 要 な く な り、 よりスムーズなデータの受け渡しが可能になりました。1
3
4
印刷物で使用したPhotoshopやIllustratorのデータは、GIFやJPEGなどに書き出すこと でWebでも利用できます。 スタイルシートではDTPの文字設定と同様に、フォントや文字サイズ、行間、カラー などを設定することが可能です。 伝えたい情報を企画・構成して製作物に落とし込んでいく過程において、DTPとWeb には共通する点が非常に多いと言えます。 CS3では各ツールのインタフェイスの統一が図ら れていますので、PhotoshopやIllustratorを使用 してきたユーザであれば、他のツールも感覚的に 使いこなせます。 印刷物 Web4
Webにおける台割、サイトマップと
Webページのレイアウトをつくろう
台割りからサイトマップへ
サイトマップは、Webサイトを作る際に必要なページをまとめる ものでミーティング時にも利用されます。サイト全体のナビ ゲーションを考えながら構成を決めていきます。これはDTP のワークフローで最初に行うページネーションを決めるときの 台割り作成と似ています。 トップページの下にはコーナートップがあり、さらにその下に 複数のページが入った構成で作成されます。掲載する内容が 多ければ、数十ページから数百ページになることもあります。DTP環境そのままでWebの構想を考えられます
Webサイトを作る場合でもスタートは企画書とサイトマップ からはじまります。台割りと違うのは、サイトマップは一番 上にトップページがあり、ツリー状にページが連なります。 またページ番号が存在せず、それぞれ相互にリンクする点と ページ数に制限がない点でしょう。 普 段 台 割 り を 作 成 し て い る の と 同 じ よ う にIllustratorや InDesignでサイトマップや企画書を作成し、Adobe PDFで 社内間、クライアントとやりとりしながら、Webの設計図 サイトマップを作成していきましょう。ページレイアウトのラフスケッチと同じようにWebのレイアウトの設計図を作ります
雑誌などのレイアウトを考えるときには見出しや本文の位置を最初に考えますが、Webでもヘッダやフッタ、コンテンツの入る 位置などを用途に合わせたレイアウトの設計図を作ります。これらはDTPにおけるレイアウトの枠組みを決めるラフスケッチに あたります。DTPにおけるインデックスやノンブルにあたるのがWebのナビゲーションです
会社案内やカタログなどページ数のある紙メディアで必要な項目として、ページノンブルやページの見出しなどがあります。Web ではページナビゲーションがインデックスにあたります。ページをめくる代わりにナビゲーションをクリックしてページを切り替えて いきます。これら必要な項目の設計図を作っていきましょう。Webでは最初にサイトマップと言われるサイトに含まれるページ全体の地図を作ります。
これはDTPにおける台割りと同じ役割を持っています。
Webレイアウトの様々なバリエーション 企画立案 デザイン プロトタイプ サイト製作 HTML CSS Flash 更新 展開 印刷物 Web 多種多様な情報をどのように整理し構成するのかを考えることは、DTPでもWebでも必須のプロセスです。 メニューや盛り込む情報の数などによって、最適なレイアウトは変わります。他のWebサイトを参考にするのも良いでしょう。 サイトを見ている人が、今自分がサイト内のどの位置にいるのか把握できるようにナビゲーションを工夫しましょう。 サイトマップ 台 割
PhotoshopとFireworksで
Webデザインのカンプを作成
画像としてのカンプ作成
紙ベース時に作成するデザインカンプと同じように、Web デザインの場合でもWebページの画面イメージをカンプとして 作成します。普段使い慣れたPhotoshopのレイヤーやテキスト ツールを組み合わせて作成することで完成系に近いカンプが 作 成 で き 変 更 も 自 由 に で き ま す。Webの 画 像 ピ ク セ ル の まま表示されるのでデータサイズも軽く、作業用に高機能な PCも必要ありません。Photoshop, Illustratorと連携するFireworks
Adobe® Fireworks®はWebグラフィックを作成するのに適し た機能を多く搭載しています。１つの書類上でベクターと ビ ット マ ッ プ の 両 方 を 同 時 に 扱 う こ と が で き る の で、 Photoshopのレイヤー画像やIllustratorで作成したアウトライン データなどを使ってWebデザインのカンプが作成できます。Photoshop + Fireworksで効率的にWebデザインを作成できます
手元にあるデータを再利用する場合には、普段使い慣れたPhotoshopやIllustratorで素材を加工するのが手早いでしょう。さらに そのPSDデータやAIデータをFireworksでダイレクトに開いて、Webデザインのカンプ作成に利用できます。またFireworkには カーソルを置いたときにボタンの色が変わるようなロールオーバー作成や、ページ上で利用するボタンやフォームのシンボルなど Webでよく使われる機能が用意されています。 プロトタイピングを使うと操作できるカンプが作成できます Webデザインのカンプも実際にブラウザでクリックしてページを切り替えながら検証ができます。Fireworksはひとつの書類内で 複数のページを持つことができ、ページ同士のリンクを設定しておけば、カンプ画像がリンクした状態でHTMLと画像に書き出す ことができます。これにより実際にWebブラウザで動かしながら見るカンプが作成できます。 Photoshopのネイティブファイルを、レイヤー効果を維持したまま開いて相互編集することができます。 Fireworks上で作成したページの画像とHTMLをまとめて書き出すので、そのままブラウザで開いてクリックしページ移動しながら検証が可能です。Webサイト全体の構成がまとまったら、Webデザインを提案するためのカンプを作って
いきましょう。普段使い慣れたPhotoshopやWebサイトのプロトタイプとデザイン作成
ツールとして最適なFireworksを使えば思いどおりのイメージが作成できます。
企画立案 デザイン プロトタイプ サイト製作 HTML CSS Flash 更新 展開 CS3からPhotoshop、IllustratorとFireworksが同梱されたことで、 各アプリケーション間をまたぐ作業が非常にスムーズに行えるようになりました。
先進のWebテクノロジーと
豊富なレイアウト機能を持つ
DreamweaverでWeb制作を管理
業界標準で使われる
Web開発ツールDreamweaver
DTPではInDesignがページレイアウトソフトのスタンダード に な り ま し た が、Web業 界 の ス タ ン ダー ド と し てAdobe® Dreamweaver®が多くのWebプロダクションで利用されてい ます。PhotoshopやFireworksで作成されたカンプデータは、 HTMLと分割された画像として書き出しDreamweaver上で 再構築することもできます。またCSS（カスケーディングス タイルシート）によるページデザインやAjaxによるインタラク ティブなコンテンツの追加もダイアログボックスやパネルを 利用して簡単に行うことができ、どのようなスキルレベルの ユーザーでもWebサイトの構築が可能です。Webで利用する
あらゆる画像書き出しに対応します
Dreamweaverは、コードを意識せずにページデザイン中心で 作業を続けながら、同時にHTMLコードの確認が可能です。 さらにサイト全体のエラーチェックや、モバイルやTVといった 端末での表示も、モニター上で検証が行えるためワークフロー の短縮が可能になり、デザイナーとデベロッパーの両方から 支持されています。またDreamweaverが持つFTP機能により 更新されたページのみサーバーへのアップロードと更新まで 行うこともできます。CS3 Web Editionでは、Webサイトのページ制作から管理・アップロードまで全てが行えます。
アプリケーション間でWeb用画像のスムーズなやりとりも可能になりました。
アプリケーション間のコピー＆ペーストで画像を配置できます
Fireworksで作成したカンプはHTMLとCSSで書き出しDreamweaverで利用できます。Webページに画像を挿入する場合にはあら かじめ画像を用意せずPhotoshopやFireworksでコピーした画像をDreamweaverにペーストするだけで画像をGIF, JPEG, PNGと いったWebで利用できる画像に変換できます。またDreamweaverに直接Photoshop画像をPSDファイルのまま配置し変換する ことも可能です。最新のWebテクノロジーを
搭載したDreamweaver CS3
Web業界のデファクトスタンダードツールDreamweaverは CSSを使ったレイアウトやAjaxと呼ばれるクリックで動く アコーディオンメニューインターフェイスも、難しいスクリプト を覚えずに、用意されているSpry Widgetから簡単に挿入が 可能です。 またソースコードを編集するデベロッパーにとっても開発し やすいようにコード作成に適したツールや、ブラウザ互換性 チェック、アクセシビリティチェックなどWeb開発に必要な ツールが用意されています。 画像をペーストまたはPSDファイルを挿入すると、GIF, JPEG, PNGへの変換ダイアログが表示され保存できます。 PSDの場合は元ファイルとリンクされておりダブルクリックするとPhotoshopが起動します。 クリックするとスライドして内容が表示されるアコーディオンメニュー 企画立案 デザイン プロトタイプ サイト製作 HTML CSS Flash 更新 展開 Dreamweaverではページ制作にあたり、コードビュー、分割ビュー、デザインビュー の画面切り換えを利用できます。最初はDTPのようにデザインビューで視覚的に 制作し、慣れてきたら分割ビューでHTMLのソースコードの役割を勉強してみるのも １つの方法です。10 11
Webでも利用できるようになった
スタイルシート
Webページでのレイアウトにスタイルシートが使えることで文字の大きさや行間、
さらにレイアウトまで細かなコントロールが可能になりました。
Webページ上でもスタイルシートで細かな
文字指定ができるようになりました
数年前まではWebの文字は文字の大きさや行間が細かく指定 できないなど制限が多くクオリティを満たせませんでした。 しかしWeb技術とブラウザの発展により、レイアウトとスタ イ ル が 切 り 離 さ れ ス タ イ ル シ ート で 制 御 が で き る よ う に なりました。 InDesignやIllustratorのスタイルシートと同じようにフォント や文字の大きさ、行間、インデントなど細かな文字の制御が 可能になり、スタイルの設定を変えれば指定した場所が全部 変更されます。Webページ上に配置するテキストや
画像の位置もスタイルで指定が行えます
Webのスタイルシート、CSS（カスケーディングスタイルシー ト）は文字の指定だけでなくレイアウトを行うときにも利用 できます。ページ上にボックスを作成し背景に画像を指定し たり、ボックス内の余白の指定など細かなレイアウト指定が 可能です。 以前はテーブルを使ってWebページのデザインを行うのが 一般的でしたが、現在はCSSでWebページのレイアウトを行う 方法が主流になりました。DreamweaverはCSSを使ったページ のデザインを視覚化しながらレイアウトが可能です。 スタイルを確認しながら設定できるDreamweaverのCSS編集パネル DreamweaverではCSSの定義をカテゴリごとに分けたダイアログボックスで視覚的に数値を設定できます。ページ上で文字にCSS を適用する場合にも選択した文字に、CSSパネルに定義したCSSの一覧が表示されるのでスタイルを選択するだけで適用できます。 ページ上にどのようにスタイルが定義されているかなど確認することもできます。CSSを使ったレイアウト作成機能
Dreamweaverには視覚的にCSSによるレイアウトを行うためのツールが用意されています。新規ページを作成する際にもCSSで一般 的に使われるレイアウトフォーマットが用意されているのでテンプレートとして利用すれば短時間でCSSを使ったレイアウトが作成 できます。またCSSの互換性や問題点などの解決策やヒントを得られるCSS AdvisorをWebコミュニティとして用意しています。 CSSの定義画面 編集中のページとCSSパネル 企画立案 デザイン プロトタイプ サイト製作 HTML CSS Flash 更新 展開 CSSは、ブラウザでHTMLを表示したときにHTMLのソースコードの情報を グラフィカルにスタイル付け、配置する役割を担っています。 Dreamweaverでは、CSSに基づいた一般的なHTML のテンプレートが数多く用意されていますので、い きなり１から作るのはちょっと…という人でも簡 単にページを制作することが可能です。1 13
PhotoshopやIllustratorと連携し、
Flashでインタラクティブコンテンツを制作
Flashを使えばPhotoshopやIllustratorで作成した素材を再構築してインタラクティブ
コンテンツとして再び息吹を与えることができます。
Flashの導入によって魅力あふれるコンテンツを
Webに追加できます
Flashテクノロジーにより静的なWeb表現に動きのあるコンテ ンツが追加できるようになります。PhotoshopやIllustrator であらかじめ作成したネイティブデータをFlashに読み込んで、 タイムライン上でオブジェクトの位置や回転など様々な情報を 設定することで普段使い慣れたツールでグラフィックの完成度 を上げ、Flashで表現力の高いコンテンツとして配信できます。最新のスクリプト言語、Action Script 3.0で
インタラクティブなコンテンツが実現
Flashにはアニメーションツールとしての役割以外にも最新鋭 開発言語、Action Script 3.0の搭載により、XMLデータを 読み込んで処理を行ったり、ユーザーのマウス操作に合わせて 反応するようなインタラクティブなコンテンツが作成可能 です。Webまたはモバイルデバイス上で、学習、ゲームなど のコンテンツの開発が可能になります。 企画立案 デザイン プロトタイプ CSS 更新 展開Photoshopでレイヤー効果を組み合わせ、
デザインもFlashでそのまま利用
Photoshopでは簡単にシャドウを付けたり光ったグラデー ションを付けるなどのレイヤー効果を使って立体感のある ボタンや、ブレンドモードを使用したグラフィックを簡単に 作成できます。このレイヤーの組み合わせで作成した画面 デザインもネイティブデータのままFlashにインポートして 作業できます。あらかじめPhotoshopで画面のパーツの完成度 を上げておけば、あとはFlash上でタイムラインに合わせて アニメーションやモーションフィルタを組み合わせるといった 動作の作成に集中できます。PhotoshopレイヤーのベクトルマスクをFlashで
アニメーションに変換
Photoshop上でレイヤーの一部を切り取って表示するマスク 機 能 に は、 パ ス を 使 っ て 解 像 度 に 依 存 し な い 切 り 抜 き が 可能なベクトルマスクがあります。このパスで切り抜いた Photoshopのベクトルマスクも、Flashに読み込んでから アニメーションさせて自在に動かすことができます。この効果 によって写真の一部をのぞく窓が画面上を移動していくような 軽快な効果が作成できます。 HTML Flash サイト製作 ※PSDファイルをFlashに読み込む場合の詳細設定についてはP20のQ2をご覧下さい。 ※以下のブレンドモードはFlashでサポートされていませんので、ご注意下さい。 （ディザ合成、焼き込みカラー、焼き込み（リニア）、カラー比較（暗）、覆い焼きカラー、 覆い焼き（リニア）-加算、カラー比較（明）、ソフトライト、ビビッドライト、リニア ライト、ピンライト、ハードミックス、除外、色相、彩度、カラー、輝度）14 1
高品質なグラフィックをIllustratorで作成し、
Flash上でさまざまな動きをつける
CS3での統合により、IllustratorとFlash間のデータ互換性とツールやパレットの操作性が
向上しました。描画能力に長けるIllustratorで作成したグラフィックをFlashで自在に
アニメーションさせることができます。
Illustratorでデザインし
Flashでベクトルアニメーション
多くの作図機能や、カラーバリエーションなどをIllustratorで 作成し、ネイティブデータをFlashに読み込んでタイムライン を使ってアニメーションを加えることができます。 Illustrator上で作成したシンボルをFlashでアニメーションと して利用したり、ベクターグラフィックやグラデーションの 体裁を崩さずにコピー＆ペーストでFlashに持ち込むこともで きます。より使いやすく、インターフェイスが
Illustratorに近づいたFlash
ツ ー ル や パ レ ッ ト な ど の 外 観 や 操 作 性 がPhotoshop や Illustratorと近くなり親和性が高くなりました。 パネルを ドッキングしたりツールパレットを1列と2列で切り替える など、ワークスペースを広く利用できるインターフェイスに なりました。 また、Illustratorと共通の操作性を持つペンツールが用意され たため同じ感覚でベクターグラフィックの描画も可能です。 企画立案 デザイン プロトタイプ HTML 更新 展開Illustratorでシンボル化したグラフィックをFlashでアニメーションへ変換する
Illustratorの豊富な描画ツールを使って作成したグラフィックは、シンボルとして登録しておけば、繰り返し利用できファイル サイズも小さくなり、元のシンボルを編集すれば同じシンボルを使ったデータ全部に適用されます。 シンボルとして登録したグラフィックは、Flashへ読み込む際に自動的にライブラリに登録されます。シンボルを使うことで、 全体をいくつもの図形が舞うようなアニメーションが短時間で作成できるようになります。Illustratorで作成した曲線を使って、アニメーションパスを作成
Illustratorでは作図ツールとして、渦巻きを作成したり形を変化させるフィルタなど表現力をアップさせる機能が多く搭載されてい ます。これらのツールを使って作成した曲線は、IllustratorからFlashへペーストすることでアニメーション作成のガイドとなります。 タイムライン上に作成したグラフィックレイヤーの上に、新規レイヤーを作成しIllustratorで作成した曲線をペーストします。あとは、 グラフィックのモーションの開始点と終了点を指定するだけで、パスに沿って動くアニメーションが作成できます。 CSS Flash サイト製作1 1
Contributeの活用でWebサイトの
更新・メンテナンスの負担を軽減する
Webサイトは作成したあとの更新やメンテナンスの作業負担が発生します。
Contributeを使うことで、更新にかかるマンパワーを極力減らすことができます。
更新作業のワークフローも取り入れた
ワークフローを提案
印刷メディアの場合には印刷物を納品して完了しますが、 Webサイトの開発ではサイトの更新作業も行う必要がでてき ます。そのためワークフローのなかに更新・メンテナンスを 入れる必要がでてきます。しかし更新のたびにWebデザイナー や 開 発 者 に 更 新 作 業 を 依 頼 し て い る と 他 の 作 業 に 影 響 が 出 た り 、 コ ス ト が か か っ て し ま い ま す 。 そ こ で 更 新 の ルーチンを軽減しHTMLの経験がないユーザーでも更新が行える ように設計する必要がでてきます。Contributeの導入で実現できること
Adobe® Contribute®を更新のワークフローに利用することで、 Webの更新に必要なコンテンツ修正のみに特化して作業を行う ことができます。更新を行うユーザーは許された領域のみ 修正が可能なので、編集によってページレイアウトが崩れて しまうこともなく、公開ボタンを押すだけでアップロードが 可能です。また編集権限を細かく設定できるので、ページの 編集が必要な領域のみ許可することもできます。 企画立案 デザイン プロトタイプ サイト製作 HTML CSS Flash 更新 展開Dreamweaverのテンプレートで
編集可能領域を作成
Contributeで編集できる領域を設定するにはDreamweaverを使って編集可能エリアを指定しておきます。Contributeからそのページ を開くと指定したエリアのみが編集可能になり、レイアウトを間違って変更したり別の領域のテキストを書き換えてしまうことが ありません。Contribute側では許可されたエリアには画像やテーブルを追加したりFlashやPDF, ビデオなどのコンテンツも挿入 可能です。Webの更新はContributeのみで完了
Contributeを使うユーザーは手元にデータを置いて編集する必要はありません。WebサイトをホストするWebサーバに接続して更新 作業を行います。Webブラウザでアクセスするのと同じようにクリックしてリンク先のページに行き「ページの編集」をクリック して作業を行い、修正が終わったら「ページの公開」をクリックするだけです。 Dreamweaverで設定した編集可能領域のみContributeで選択が可能になるため、ページ上の他の場所に影響を与えません。 テーブルやGoogle検索用のパーツなどが、メニューから選択するだけで挿入できます。また文字のサイズなども用意されたプロパティに合わせて表示されます。 Webデザイン 編集スタッフWeb サーバ
更新作業を頻繁に行わなくてはならないような場合に、Contributeはその機能をフルに発揮します。 クライアント側で簡単かつスピーディーに更新作業を行えるので、制作サイドに更新作業を依頼する際のタイムロスが軽減されます。Upload
1 1 企画立案 デザイン プロトタイプ サイト製作 HTML CSS Flash 更新 展開
Flashビデオやモバイル向けコンテンツ制作
にもAdobe CS3が対応します
今日のWebでは、コンテンツはFlashビデオやモバイルにも応える必要がでてきました。
これら新しいメディア需要もAdobe CS3が実現します。
Flash Video
YouTubeのように豊富なビデオコンテンツがWebページ上で見られるようになり、Flashベースのビデオフォーマット（Flash Video）を利用した映像コンテンツが急速に普及しています。Adobe® Dreamweaver® CS3を使えばページの編集をしながら Flash Videoファイルをドラッグするだけで簡単に追加できます。また、ブラウザを立ち上げずにその場で内容の確認もできます。 また映像の製作が必要な場合もビデオ向けスイート製品Adobe® Creative Suite® Production Premiumに入っているAdobe®Premiere Pro®、Adobe® After Effects®連携することで直接Flash Video形式に書き出し、高品質な映像コンテンツを配信できます。携帯向けコンテンツの検証を行えるDevice Central
Adobe® Device Centralを使えば、多くの携帯端末の実機がなくともPC上でシミュレーションを行いながら検証が可能になります。 多くの携帯電話の画面サイズ、Flashのバージョンなどの各デバイスが対応するコンテンツタイプなど機種別のプロファイルが用意 されていますので、実機の写真上に作成した画面を表示し確認・スクロール操作することができます。また機種ごとに違うFlashアニメー ションの動画スピードをテストすることもできます。
XMLに対応したデータの作成
InDesignによるページ制作時に、XMLによるタグ付けをあらかじめ行っておくことにより、Dreamweaverにデータを移行しやすく なります。特にマニュアルやカタログなど、同一フォーマットが連続する出版物をWeb化し再利用する際には、データをあらかじめ XMLで作成しておくことで、InDesignへの読み込みも、Webへの利用も短時間での変換が行えるようになります。Flash Video Encoderを使うことで、様々なメディアをFLVファイルに変換し、 Dreamweaverに配置することができます。Flash Playerがインストールされていれば 再生が可能です。 QT AVI MPEG4 WMV モバイルコンテンツのメディアとしての重要性が急拡大している 中で、CS3ではモバイルコンテンツ確認用のDevice Centralを用意。 モバイル向けのHTML、フラッシュなどの制作をサポートします。 XMLではタグによるツリー構造で情報を分かりやすく整理・ 分類できますので、HTMLに情報を反映する際にも素材と して有効活用することができます。
0 1 8bit（256色 ）ま で を 同 時 に 扱 え、 そのうちの1色を透明に指定でき ます。色数の少ない画像や透過し たい場合に向いています。
DTPユーザー向けFAQ
DTPの場合にはEPSやTIFFなどを利用しますが、Webで使用する画像はGIF, JPEG, PNGとなります。GIFデータは8bit（256色） までしか使用できませんが、アルファチャンネル（透過）を利用できます。JPFGは24bitカラー（1,677万色）を使用できます がアルファチャンネルは使えません。PNGは高画質でアルファチャンネルも使えますが未対応のブラウザがあります。
これら3つのフォーマットはPhotoshop, Illustrator, Fireworksから書き出すことができます。また画像をコピーしてDreamweaver 上にペーストすると、その場で画像を変換して保存することができます。 A1 FlashにPSDフ ァ イ ル を 読 み 込 む 際 に は、 読 み 込 む レイヤーのみを指定したり、文字レイヤーの場合には 編集可能なテキストにするかアウトライン化、またはビット マップ化するかなど細かな設定を行って読み込むことができ ます。またステージサイズをPSDサイズに自動変更したり、 各レイヤーのムービークリップ変換も行いインスタンス名も 登録できます。
GIF
画像を非可逆圧縮し写真の表示に 向いています。段階的に画質を設定 できますがWebの場合には高画質 7か8を使用するとよいでしょう。JPEG
8bitと24bitの画像が作成でき24bit 形式では256階調のアルファチャン ネルを持たせることができます。 IE6で表示が正しくできませんがIE7 やFirefox, Safariで対応しています。PNG
Q1
Webで使用する画像の形式は何をつかえばいいのか
A2Q2
PhotoshopデータをFlashへ読み込む際の設定は？
FLVによる映像は、他のストリーミングビデオと比較しても画質や、ムービーに対するレスポンスの早さ、インターフェイス の自由度などで急速に普及しています。FLVのムービーに変換するにはFlash Video Encorderを利用します。またユーザーは Flash Playerをインストールすることでムービーが再生可能になります。A4
Q4
映像を作成、再生するには？
Webの デ ザ イ ン 決 定 か らHTMLの 作 成 で は 各ブラウザに合わせた検証が必要になります。昨今ではCSSによるページ デザインが多く使われるようになったためWindows, MacのOSでのブラウザ環境として、CSSによるWeb標準のページ を表示できるブラウザが対象になってきました。WIndowsではIE6, IE7, Firefox,Opera, MacではSafari, Firefox Operaなどが一般的な検証対象とされています。Dreamweaverを使う ことでブラウザでチェックする前に、文法やCSSの再現性を事前にチェックすることができます。またCSS Advisorを利用する ことで、Webブラウザの互換性に関しての問題点と解決方法を得ることができます。
A5
Q5
ブラウザの互換はどのように対応すればよいか
自社で用意したサーバでブログを利用する場合には、ブログのシステムをインストールする必要があります。またプロバ イダーが用意しているホスト型のブログサービスを使う方法があります。 Contributeの接続ウィザードまたは接続アシスタントを利用して、ブログの更新が可能になります。対応するサービスは、 Blogger、TypePad、Roller、または WordPressになります。A6
Q6
ブログへはどう対応できるのか
Webサーバや、メール、データストレージ、データベースなど各種サービスを提供するインターネットプロバイダーが増えて います。負荷の高いWebアクセスにも柔軟に対応し、サーバの管理やトラブルのサポートなどをすべて行うサービスが 受けられます。自社で専任スタッフを置くよりも、Webサービスの提供会社を利用することでメンテナンスや初期費用コストなど のリスクが軽減できます。Q7
自社でのWebサーバやデータベースは必要？
A7
既にキャリアとしてWebディレクターや、Webデザイナー、Flashデベロッパーなどの専門的な職種が多数登場してきて います。事業規模に合わせて人材を獲得する必要がありますが、DTPと同じように、ワークフローとアプリケーションの 操作、デザイン表現などと共通のスキルが必要になります。Q8
Web制作に求められる人材やスキルとは
A8
AdobeはDTPと同じように、Webページのデザインに おいても、デザインの過程で、またはWebキャプチャ 機能を利用して注釈を使った校正ワークフローとして利用 できます。 またInDesignやIllustratorなどで作成したカタログやOffice ドキュメントなどをPDF化してWebに掲載することもでき ます。 ユーザーはダウンロードまたはプラグインを使って Web 上 でPDF を 閲 覧 で き ま す 。 公 開 す るPDF はAdobe® Acrobat® 8 Professionalを利用して制限をかけることもでき ます。A3
Q3
Adobe PDFはWebでも利用できますか？
3
アドビ システムズ社は、
メディアの境界を越えるツールを提供します
アドビ システムズ社は、DTP、 Web、Flashなど利用するメディアを問わず、あらゆる
クリエイターが魅力あるコンテンツを創りだすために必要なツールを提供し、アイデアの変革と
情報の共有をもたらします。
多くの開発ツールを提供するAdobe Labs
最先端のテクノロジーや製品を体験、評価していただくサイト として「Adobe Labs」を公開しています。開発中のソフト ウェアをコミュニティに公開することで、フィードバックを 受けてよりよい製品開発を進めています。Adobe Labsから はさまざまなアプリケーションアクセサリーも提供しています。TVとインターネットを融合するAdobe Media Player
インターネット上のあらゆるビデオコンテンツを再生しながら、Web情報とのやりとりを行うプラットフォームとしてAdobe® Media Player™を発表しました。自由にカスタマイズできるインターフェイスと今までのブラウザベースでは実現できなかった 魅力的なコンテンツがプラットフォームに制限されず提供できます。
開発環境AIR
Adobe Media Playerの開発に使われたFlashベースの開発環境が、Adobe® AIR (Adobe Integrated Runtime)です。Flash, HTML, CSS, PDFを利用しながらOSに依存しないデスクトップで動作する魅力溢れるアプリケーションの開発ができます。
Webの情報のやりとりをWebブラウザから解き放ち、Adobe Media Playerのように自由なインターフェイスを持つアプリケーション 開発が可能なAIRは、無限の可能性を秘めています。 Adobe labsの サ イ ト で 公 開 し て い る Kuler。 ユーザは自分でカラーの配色 パターンを作成することができ、世界中 の ユ ー ザ と 自 分 が 作 成 し た カ ラ ー スキームを共有、カラーテーマについて 議論したりすることができる場を提供 しています。
Adobe Media Playerでは、様々なビデオコンテンツを閲覧できる だけに留まらず、コンテンツに対してコメントしたり、タグ付け したりすることで視聴者間で積極的なコミュニケーションを図る ことができます。
ADOBE
®CREATIVE SUITE
®3
WEB PREMIUM
Webデザイン・開発に革新をもたらす プロフェッショナルのためのトータルソリューション
ADOBE
®CREATIVE SUITE
®3
WEB STANDARD
Webデザイン・開発・管理を 効率的に実現
Adobe® Dreamweaver® CS3 Adobe® Flash® CS3 Professional Adobe® Photoshop® CS3 Extended Adobe® Illustrator® CS3 Adobe® Fireworks® CS3 Adobe® Acrobat® 8 Professional Adobe® Contribute® CS3 Adobe® Version Cue® CS3 Adobe® Device Central CS3 Adobe® Bridge CS3 Adobe® Stock Photos
ADOBE
®CREATIVE SUITE
®3
WEB
EDITION
製品ラインナップ
Adobe® Dreamweaver® CS3 Adobe® Flash® CS3 Professional Adobe® Fireworks® CS3 Adobe® Contribute® CS3 Adobe® Bridge CS3 Adobe® Version Cue® CS3 Adobe® Device Central CS3 Adobe® Stock Photos
※ Web Standard に含まれる Photoshop CS3 は、 Extended ではなく通常の Photoshop CS3 となります。 Windows®／Macintosh® Windows®／Macintosh®
Adobe、Adobe PDF、Adobeロゴ、Acrobat、Adobe Bridge、Adobe Device Central、Adobe Illustrator、Adobe Stock Photos、Dreamweaver、Flash、InDesign、Photoshopおよび Version Cueは、Adobe Systems Incorporated（アドビ システムズ社）の米国 ならびに他の国における商標または登録商標です。Mac、MacintoshおよびQuickTimeは、米国および他の国々におけるApple Inc.の登録商標です。インテルおよびPentiumは、アメリカ合衆国および他の国におけるインテルコーポレーションおよび子会社の登録 商標または商標です。PowerPCは、International Business Machines Corporationの米国ならびに他の国における登録商標です。Microsoft、Windows、Windows VistaおよびDirectXは、米国Microsoft Corporationの米国ならびに他の国における商標または登録 商標です。その他すべての商標は、それぞれの権利帰属者の所有物です。
©2007 Adobe Systems Incorporated. All rights reserved.
この冊子に記載の情報は、2007年6月現在の情報です。内容に関しては予告なく変更される場合がございますので、あらかじめご了承ください。 モバイルサイトでもCS3情報配信中 http://cs3.jp お持ちの携帯電話で左のカラーコードを読み取ってアクセスいただけます。 カラーコードリーダー（無料）をお持ちでない方は以下よりダウンロードしてください。 携帯各キャリア共通 ： http://czip.jp アドビ カスタマー サービス Tel. ナビダイヤル 0570-06-7337または03-5350-0407 アドビストアご注文窓口（注文専用） Tel. フリーダイヤル 0120-61-3884（ガイダンス1を選択） アドビ �ス���� �����ス���� ���� �������� 〒141-0032 ���品��大�1-11-2 ゲ ���品��大�1-11-2 ゲ���品��大�1-11-2 ゲ ゲゲートシティ大�イーストタワー www.adobe.com/jp 電話受付時間 9:30�17:30�17:3017:30 （土、日、祝日および弊社指定休日を除く） 製品の詳しい情報は
www.adobe.com/jp/cs3design/
お求めはwww.adobe.com/jp/store/
アドビ アカデ�ック�アカデ�ック� ��ールセンター Tel. 03-5350-7133 Windows・ インテル® Pentium® 4、インテル Centrino®、インテル Xeon®、 またはインテル Core™ Duoクラスのプロセッサを搭載したパーソナルコン ピュータ
・ Microsoft® Windows® XP (Service Pack 2) 日本語版、
または Windows Vista™ Home Premium、Business、Ultimate 日本語版
・ 1GB 以上の RAM ・ 5GB 以上の空き容量のあるハードディスク（インストール時には追加の空き 容量が必要） ・ 1,024×768 以上の画面解像度をサポートするディスプレイ ・ DVD-ROM ドライブ ・ マルチメディア機能を利用するためにQuickTime 7.1 日本語版
・ Adobe® Photoshop® CS3 Extended の一部の3D機能を利用するには、 64MB 以上のVRAM を搭載し、Microsoft DirectX 9 に対応するグラフィック カードが必要です
・ プロダクトアクティベーション（ライセンス認証）のためにインターネット接続 または電話回線
・ Adobe® Stock Photos* や付随するサービスのためにブロードバンドインター ネット接続
Macintosh
・ PowerPC® G4、G5、またはインテル® プロセッサ
・ Mac OS X v.10.4.8 日本語版。Adobe® Version Cue® CS3 Serverを利用 するにはJava™ Runtime Environment 1.5が必要です
・ 1GB 以上の RAM ・ 7GB 以上の空き容量のあるハードディスク（インストール時には追加の空き容 量が必要） ・ 1,024×768 以上の画面解像度をサポートするディスプレイ ・ DVD-ROM ドライブ ・ マルチメディア機能を利用するためにQuickTime 7.1日本語版
・ Adobe® Photoshop® CS3 Extended の一部の3D機能を利用するには、64MB 以上のVRAMを搭載し、OpenGL 1.4 に対応するグラフィックカードが必要です
・ プロダクトアクティベーション（ライセンス認証）のためにインターネット接続 または電話回線
・ Adobe® Stock Photos* や付随するサービスのためにブロードバンドインター ネット接続
Windows
・ インテル® Pentium® 4、インテル Centrino®、インテル Xeon®、 またはインテル Core™ Duoクラスのプロセッサを搭載したパーソナルコン ピュータ
・ Microsoft® Windows® XP (Service Pack 2) 日本語版、
または Windows Vista™ Home Premium、Business、Ultimate 日本語版
・ 1GB 以上の RAM ・ 3GB 以上の空き容量のあるハードディスク（インストール時には追加の空き 容量が必要） ・ 1,024×768 以上の画面解像度をサポートするディスプレイ ・ DVD-ROM ドライブ ・ マルチメディア機能を利用するためにQuickTime 7.1 日本語版 ・ プロダクトアクティベーション（ライセンス認証）のためにインターネット接続 または電話回線
・ Adobe Stock Photos* や付随するサービスのためにブロードバンドインター ネット接続
Macintosh
・ PowerPC® G4、G5、またはインテル® プロセッサ
・ Mac OS X v.10.4.8 日本語版。Adobe® Version Cue® CS3 Serverを利用 するにはJava™ Runtime Environment 1.5が必要です
・ 1GB 以上の RAM ・ 4.5GB 以上の空き容量のあるハードディスク（インストール時には追加の空き 容量が必要） ・ 1,024×768 以上の画面解像度をサポートするディスプレイ ・ DVD-ROM ドライブ ・ マルチメディア機能を利用するためにQuickTime 7.1日本語版 ・ プロダクトアクティベーション（ライセンス認証）のためにインターネット接続 または電話回線
・ Adobe® Stock Photos* や付随するサービスのためにブロードバンドインター ネット接続
*Adobe Stock Photos、Acrobat® Connect™ など各種オンラインサービスは、国・地域、言語、通貨により限定されている場合があります。サービスのご利用可能状況は、変更されることがあります。 オンラインサービスのご利用には、別の契約条件が適用され、別途料金がかかる場合があります。詳しくは、www.adobe.com/jp をご覧ください。
