Illustrator 書き出しサイズについて

[ma8667240d3gj.]

現在、Illustrator2023を使用しております。

WEBのヘッダー(サイズ指定)を制作し書き出しを行なった際に不明点が出てきたので投稿をさせていただきました。

・ヘッダーサイズ：1120×500px(アートボードもこちらでサイズ設定しております)

自分自身で行なった際、

書き出し形式→jepg、RGB、高解像度、アート最適

にて保存をしたところ、ピクセルサイズが4667×2083pxとなってしまいました。

web用書き出し形式でも保存をしてみたら1120×500pxになりサイズは問題なかったんですが画質が粗くなってしまいました。（最高画質にはしています）

画質も粗くならず、希望のサイズで保存するやり方はあるんでしょうか。

かなり初歩的な質問申し訳ありませんが皆様のお力をお借りできましたら幸いです。

よろしくお願いいたします。

[bizarre_n]

画質が粗くなった、というのはどのあたりで判断されているでしょうか。

単に、画素数が少なくなったから粗く見えているだけ、ということはないですか？

[monokano]

> 画質が粗くなってしまいました

小さい文字が粗くなるのが気になるのでしょうか？ そのピクセル数だと、小さい文字が粗くなるのは避けられません。できることといえば、このくらいでしょうか。

• 文字をアウトライン化しない
• 文字パネルの「アンチエイリアスの種類」をデフォルトの「シャープ」から「鮮明」「強く」に変更する

なお、メニュー「表示 > ピクセルプレビュー」にして、メニュー「表示 > 100%表示」にすると、画像に書きだした状態により近い表示になります。

[ma8667240d3gj.]

やはりそうなんですね。

できることをやってみたいと思います。

ありがとうございます。

[r360studio Kazue Mori · Accepted solution]

ma8667240d3gj.さん、こんにちは。

［ファイル＞書き出し＞書き出し形式］メニューを使って、希望のサイズ（元のアートボードと同じサイズ）で書き出すには次の2つの設定が必要です。

●［書き出し］ダイアログ（保存先を指定する画面）の「アートボード毎に作成」をチェック
※チェックしない場合、アートボードの余白の部分をカットして書き出されます。

●［JPEGオプション］ダイアログの解像度を「スクリーン(72ppi)」に指定

＜補足＞

スクリーン(72ppi)にすると、アートボードのピクセル数と同じサイズで書き出されます。ma8667240d3gj.さんが試したときは「高解像度 300ppi」を選ばれていたのではないでしょうか。そのため「約4.16倍」にピクセル数が拡大されて「4667×2083px」で書き出されています。

▼

また、Illustratorからウェブ用データを書き出すなら、「ファイル＞書き出し＞スクリーン用に書き出し」が推奨されていますので、一度使ってみてください。

●IllustratorからWeb用素材を一気に書き出す！アセットの収集と一括書き出し
https://blog.adobe.com/jp/publish/2017/06/08/web-illustrator-export-assets-for-screen

また、ウェブ用に書き出した画像の確認は、ブラウザでおこなうのが一般的です（monokanoさんコメントの「100%表示」と同じですが、実機確認が一番確実です）。

PC用のウェブ画像であれば、実寸サイズで品質はOKだと思いますが、高解像度ディスプレイ（MacモニターのRetinaや、スマートフォン、タブレットなど）向けの場合は、ディスプレイの解像度が高くなるので、実寸サイズ以上の準備が必要になります。

なぜか？というのを解説すると長くなりそうなので、よさそうな記事を検索してみました。次のページが読みやすいと思います。

●画像を２倍サイズで書き出すべき理由とimgタグsrcsetの使い方 | ウェブスペ
https://webspe.net/export-image-double-size/

以上、ご参考になりましたら幸いです。

ー ー ー ー
参考になったら“▲賛成票”を、解決したら“✔正解”で応答を。
このコメントが有用か、私に伝えてくださるとうれしいです。

r360studio Kazue Mori 🦔
（執筆時間：23分）
ー ー ー ー

[ma8667240d3gj.]

丁寧にありがとうございます。

とても分かりやすい回答に感謝いたします。

Illustratorを使い始めてまもないのでとても有難いです。

ありがとうございました！