画像とアニメーション GIF の書き出し

検索

最終更新日 : 2023年5月24日

Animate

アプリを開く

Adobe Animate ユーザーガイド

Animate の概要

アニメーション

インタラクティブ機能

ワークスペースとワークフロー

マルチメディアとビデオ

プラットフォーム

書き出しとパブリッシュ

トラブルシューティング

この記事では、画像とアニメーション GIF の書き出し方法について説明します。

Animate には、イメージの書き出し機能とアニメーション GIF の書き出し機能が導入されています。これらの機能を使用すると、わかりやすいインタラクティブな操作でアセットを PNG、JPEG、静止 GIF およびアニメーション GIF の形式に書き出すことができます。

Web やその他のオンラインメディア向けに画像を準備するときは、多くの場合、画像の表示画質とファイルサイズとの間で調整が必要になります。

イメージの書き出しダイアログボックスの最適化機能を使用すると、異なるファイル形式とファイル属性を組み合わせて最適化した画像をプレビューできます。最適化画像の複数のバージョンを同時に表示しながら最適化設定を変更できるので、画像を比較しながら最良の組み合わせを選択することができます。透明部分とマットを指定したり、ディザの制御オプションを選択したりできます。また、ピクセル寸法を指定したり、倍率を指定したりして画像のサイズを変更することもできます。

最適化した画像ファイルを「イメージの書き出し」コマンドを使用して保存する場合、画像の HTML ファイルを生成するかどうかを選択できます。このファイルには、Web ブラウザーでの画像表示に必要な情報がすべて記述されます。

Animate では、「別名で保存」コマンドを使用して画像を GIF、JPEG、または PNG ファイルとして保存できます。ファイル形式によっては、画質、背景の透明度またはマット、カラー表示およびダウンロード方法を指定できます。ただし、リンクやアニメーションなどの Web 機能をファイルに追加している場合、それらの機能は保存時に失われます。

また Animate のイメージプロセッサーを使用すると、フォルダーごと画像をコピーして JPEG 形式で保存できます。さらにイメージプロセッサーでは、サイズ変更および画像のカラープロファイルを Web の標準 sRGB に変換することもできます。

画像の書き出し

イメージの書き出しダイアログボックス（ファイル／書き出し／イメージを書き出し、ファイル／書き出し／アニメーション GIF を書き出し）を使用して、最適化オプションを選択し、最適化したアートワークをプレビューします。

A. 表示オプション B. 最適化ポップアップメニュー C. プリセットオプション D. 画像サイズオプション E. アニメーションオプション F. プレビュー G. ツールバー

ダイアログボックスでの画像のプレビュー

画像領域の上部にあるタブをクリックして、表示を切り替えます。

元画像

最適化する前の元の画像を表示します。

最適化

現在の最適化設定を適用して画像を表示します。

2 アップ

2 つのバージョンの画像を並べて表示します。

ダイアログボックス内の移動

イメージの書き出しダイアログボックスでアートワーク全体が表示されない場合、手のひらツールを使用すれば他の領域も表示できます。表示を拡大または縮小するには、ズームツールを使用します。

手のひらツールを選択して（またはスペースバーを押しながら）、表示領域でドラッグして画像を上下左右に動かします。
拡大するには、ズームツールを選択してクリックします。縮小するには、Alt キー（Windows）または Option キー（Mac OS）を押しながらクリックします。
ダイアログボックスの下部に拡大率を入力するか、リストから拡大率を選択することもできます。

最適化した画像の情報およびダウンロード時間の表示

イメージの書き出しダイアログボックスの各画像の下にある注釈領域には、最適化情報が表示されます。元画像の注釈は、ファイル名とファイルサイズを示します。最適化画像の注釈には、現在の最適化オプション、最適化したファイルのサイズ、選択したモデム速度でダウンロードする場合の推定所要時間が表示されます。モデム速度はプレビューポップアップメニューで選択できます。

様々な値での画像のガンマのプレビュー

コンピューターモニターのガンマ値は、Web ブラウザーでの画像の明暗に影響します。ガンマ値が異なるシステムで画像がどのように表示されるかをプレビューし、画像のガンマを調整できます。プレビューをアクティブにしても、最終的な画像の出力には影響しません。

イメージの書き出しダイアログボックスのプレビューポップアップメニューを使用して、次のいずれかの操作をします。

モニターカラー

画像のガンマを調整しません。「モニターカラー」は初期設定です。

以前の Mac OS（カラーマネジメントなし）

Mac OS 10.5 以前で使用されている初期設定のガンマ 1.8 をシミュレートします。

Windows （カラーマネジメントなし）

Windows と Mac OS 10.6 以降で使用されている初期設定のガンマ 2.2 をシミュレートします。

ドキュメントのプロファイルを使用

カラーマネジメントされたドキュメントに埋め込まれたカラープロファイルに一致するようにガンマを調整します。

Web 用の画像の最適化

ファイル／イメージを書き出し、またはファイル／書き出し／アニメーション GIF を書き出しを選択します。
ダイアログボックスの上部にあるタブをクリックして、「最適化」または「2 アップ」のいずれかの表示オプションを選択します。
（オプション）画像に複数のスライスが含まれる場合は、最適化するスライスを 1 つまたは複数指定します。
プリセットメニューから最適化の設定を選択するか、個々の最適化オプションを設定します。使用可能なオプションは、選択したファイル形式によって異なります。
画質とファイルサイズのバランスがとれるまで、最適化の設定を微調整します。画像に複数のスライスが含まれる場合は、必ずすべてのスライスを最適化します。

注意：

最適化したプレビューを元の画像に復元するには、プレビューを選択してプリセットメニューから「元画像」を選択します。
最適化した画像に表示される色が様々なブラウザーで同じに見えるかどうかを確認するため、画像の色を sRGB に変換します。
次のオプションを必要に応じて選択します。

なし

メタデータは保存されません（JPEG ファイルの EXIF 著作権情報は除く）。ファイルサイズは最も小さくなります。

著作権

著作権情報、著作権の使用条件、著作権のステータスおよび著作権情報の URL を保存します。

著作権情報および問い合わせ先

すべての著作権情報に加えて、作成者、作成者の役職、電子メール、住所、都市、都道府県、郵便番号、国、電話番号、Web サイトの情報が保存されます。

すべてカメラ情報を除く

EXIF データを除く、カメラ設定に関するすべてのメタデータが保存されます。例えば、シャッタースピード、日時、焦点距離、露光量、露光量補正、測光方式、フラッシュの使用などが含まれます。

すべて

すべてのメタデータをファイルに保存します。
「保存」をクリックします。
最適化ファイルを別名で保存ダイアログボックスで、以下の操作を行って「保存」をクリックします。
1. ファイル名を入力し、ファイルの保存場所を選択します。
2. 「ファイルの種類」オプション（Windows）または「フォーマット」オプション（Mac OS）を選択し、保存するファイルの種類を、HTML ファイルと画像ファイル、画像ファイルのみ、HTML ファイルのみのいずれかで指定します。
3. （オプション）HTML ファイルと画像ファイルの出力オプションを設定します。
4. 画像に複数のスライスが含まれる場合は、「スライス」オプションからスライスの保存オプションとして、「すべてのスライス」、「すべてのユーザー定義スライス」または「選択したスライス」を選択します。
  
  注意：
  
  最適化設定を最後に保存した設定に戻すには、Alt キー（Windows）または Option キー（Mac OS）を押しながら「初期化」をクリックします。次回、Web 用に保存ダイアログボックスを開いたときに同じ設定を保つには、Alt キー（Windows）または Option キー（Mac OS）を押しながら「一時保存」をクリックします。

最適化プリセットの保存または削除

最適化設定に名前を付けて保存しておくと、その最適化設定を別の画像に適用することができます。保存した設定は、事前に定義され、名前が付けられた設定と共にプリセットポップアップメニューに表示されます。名前を付けた設定または定義済みの設定を編集した場合、プリセットポップアップメニューには「名前なし」と表示されます。

目的の最適化オプションを設定し、最適化メニューから「設定を保存」を選択します。
設定に名前を付け、適切なフォルダーに保存します。

Photoshop

(Windows XP) Document and Settings\[ユーザー名]\Application Data\Adobe\AdobePhotoshop CS5\Optimized Settings

（Windows Vista）ユーザー\[ユーザー名]\AppData\Roaming\Adobe\Adobe Photoshop CS5\Optimized Settings

(Mac OS) ユーザー/[ユーザー名]/ライブラリ/Preferences/AdobePhotoshop CS5Settings/Optimized Settings

Illustrator

(Windows XP) Document and Settings\[ユーザー名]\Application Data\Adobe\AdobeIllustrator CS5 Settings\[言語]\Web 用に保存\最適化

(Windows Vista) ユーザー\[ユーザー名]\AppData\Roaming\Adobe\AdobeIllustrator CS5 Settings\[言語]\Web 用に保存\最適化

（Mac OS）ユーザー/[Username]/ライブラリ/ApplicationSupport/Adobe/Adobe Illustrator CS5/[Language]/Web 用に保存/最適化

注意：

他の場所に設定を保存すると、プリセットポップアップメニューから使用できなくなります。
プリセットを削除するには、プリセットポップアップメニューからプリセットを選択し、最適化メニューから「設定の削除」を選択します。

Web グラフィックの指定ファイルサイズへの圧縮

ファイル／書き出し／イメージを書き出し、またはファイル／書き出し／アニメーション GIF を書き出しを選択します。
イメージの書き出しダイアログボックスまたはアニメーション GIF の書き出しダイアログボックスの上部にあるタブをクリックして、「最適化」または「2 アップ」のいずれかの表示オプションを選択します。
（オプション）最適化するスライスと使用するファイル形式を選択します。
プリセットメニューの右側にある最適化メニューから「ファイルサイズの最適化」を選択します。
ファイルサイズを入力します。
「最適化の方法」でいずれかのオプションを選択します。

現在の設定

現在のファイル形式を使用します。

GIF/JPEG を自動選択

画像の内容に応じて、最適な形式が自動的に選択されます。
スライスオプションを選択して、指定したファイルサイズを現在のスライスだけに適用するのか、画像内の各スライスに適用するのか、すべてのスライスの合計に適用するのかを指定します。「OK」をクリックします。

最適化中のアートワークのサイズ変更

イメージの書き出しダイアログボックスで、画像サイズを特定のピクセル寸法に変更したり、元のサイズに対する特定の比率の寸法に変更したりすることができます。

イメージの書き出しダイアログボックスの「画像サイズ」タブをクリックします。
必要に応じて次のオプションを設定します。

縦横比を固定

現在の幅と高さの比率を固定します。

注意：

ファイル形式が SWF または SVG の場合、画像サイズパレットのオプションは設定できません。
新しいサイズをピクセル単位で入力するか、画像のサイズ変更に使用する比率をパーセントで指定し、「適用」をクリックします。

Web ブラウザーでの最適化された画像のプレビュー

イメージの書き出しダイアログボックス（ファイル／書き出し／イメージを書き出し、ファイル／書き出し／アニメーション GIF を書き出し）から、お使いのシステムにインストールされている任意の Web ブラウザーで最適化画像をプレビューできます。ブラウザーでプレビューすると、画像ファイルの種類、ピクセルサイズ、ファイルサイズ、圧縮指定、その他の HTML 情報に関するキャプション付きで画像が表示されます。

初期設定の Web ブラウザーで画像をプレビューするには、イメージの書き出しダイアログボックスの下部にあるブラウザーアイコンをクリックします。
ブラウザーダイアログボックスにコンピューター上のすべてのブラウザーが表示され、ここで画像をプレビューする初期設定のブラウザーを設定できます。

ヘルプをすばやく簡単に入手

新規ユーザーの場合