【疑問】Illustratorで「ファイル」→「書き出し」→「PNG」で書き出している人は実際の納品時のPNGってどうやってるの?


  • 公開:
  • 更新:
  • 編集:
概要 ▶ Illustratorのメニューから「ファイル」→「書き出し」→「PNG」で書き出したデータは最終データとして使いづらいし、Webで使う時には品質に問題がある。そうした問題をどう解決しているのだろうか。
はてなブックマークで流れてきたスライドで「IllustratorでWebデザイン!」みたいなものがあったので、疑問を投げかけてみたい。

流れてきたのはこちらのスライド。(別にこのスライドを批判するものではありません。内容は良いです。)



このスライドで次のスライドがよくわからない…。

『「書き出し」メニューから、アートボードをPNG書き出し!』
20130826-IllustratorでWeb制作-01

確かAdobeの中の人に「アートボードからPNG書き出す良い方法はないでしょうか?」と聞いたときにも、同じ手順の話が返ってきました。

このメニューの「ファイル」→「書き出し」→「PNG」という操作自体は何の疑問もないのですが、正直、こうやって書き出したデータをそのまま納品データ(最終データ)として使っているのでしょうか?


Illustratorの「書き出し」メニューの問題点

このPNG書き出しの設定は、以下の点で問題があります。
  • ファイル名が決められない(Illustratorファイル名 + _数字の連番 に自動的になる)
  • 強制的に24bit(32bit)カラーになる

ファイル名に関しては、取り回しがしづらいので、そもそも改善して欲しい点。
最低限、アートボード名を取得してファイル名を付けてくれることが望ましいです。


さて特に問題にしたいのは、カラーです。
カラーに関しては、Webデザイン・Web制作ではPNGの24bit(32bit)カラーは珍しくもありませんが、どんな絵柄でも24bit(32bit)カラーを選ぶのはファイルサイズの面から見て、感心できません。

作業の途中でお客様に見せる際には、24bit(32bit)カラーのPNGファイルでも結構ですが、最終的には8bitカラーなどへ減色処理をして、納品しますよね。(※)

その段階に来たら、Illustratorの「書き出し」からPNG書き出しをしている人はどうやっているのでしょうか?

納品前に、減色してくれるアプリ(例:PNGGauntlet)にPNGファイルを投げてお任せなのでしょうか?

減色処理をする際の疑似色も「誤差拡散法」「パターン」など絵柄に適したものがあるはずです(だからこそ「Web及びデバイス用に保存」「Web用に保存」は様々な設定ができる)。そういったものはどうしているのか、とっても、とっても疑問に思ったので、ブログに書いてみました。


みなさんはどうしていますか?



ページのロードの遅さが検索結果に影響する

昨今のGoogleの検索結果の評価軸としては、ページのロードが遅くないかという点も考慮されているので、ページで使用しているファイルサイズは可能な限り小さいことが望ましいと考えます。
鈴木謙一さんの「海外SEO情報ブログ」によれば、Google検索担当のマット・カッツ氏がランキングが低くなることがあると表明しています。
もしサイトが本当に、本当に遅かったとしたら、ページのスピードをランキング要因に実際に使うと今までに言ってきた。したがって、それ以外のすべての条件が同じだったとしたら、確かにランキングが低くなることがある。
モバイル検索の上位表示にページ速度はどのくらい重要なのか | 海外SEO情報ブログ


カテゴリー:

このページをぜひシェアしてください