調査と解析

既存サイトに表示されているPNG画像は、綺麗に透過されて画像単体で表示させても透過領域(PNG24の場合は厳密には透過ではない)も認識されています。

ダウンロードした場合には、透過情報も正常に認識されてPhotoshopなどの編集ソフトで開いた場合でも、通常は同じ状態で表示されます。

今回の場合は、ダウンロードしたPNGファイルのロゴマークをPhotoshopで開いた時だけ、ジャギーが発生して、そのまま使用できる状態ではありませんでした。

• ピクチャービューアなどで表示しても綺麗に透過しています

ただ、Photoshopで開いたときにジャギーが発生した部分は、よく確認してみるとドロップシャドウで半透明の領域であることがわかりました。PNG8で透過画像を書き出した場合と同じと想像してもらえるとわかりやすいでしょう。

事実関係の整理

• ブラウザ、ピクチャービュアーでは正常に表示される
• Photoshopではジャギーが発生する

以上のことから、このPNGファイルが通常の出力ではなく、何かしらのデータ編集情報の過不足があることが予測されます。

画像ファイルの状態を把握できたので、対処方法としてはPhotoshopでも綺麗に配置できるロゴマークのPNGファイル形式に修正すればよいのですが、当社では常に複数の解決方法を準備できるように心掛けています。この段階では2つの解決方法の選択がありました。

クライアントにWebデザインを確認いただくうえで、この粗い画像では心象も良くないことが予想されるので、多少日数がかかることがあってもオリジナルのロゴデータを提供してもらうことにします。

ロゴ部分のみであれば仮当てのままにして全体デザイン制作を進めることができるので、正式なデータを受け取った段階で反映することにしました。

複数の解決策を準備しておくと比較的問題は顕在化しない

データがないという事実

ロゴマークの元データを提供いただけるようにクライアントに連絡します。
この場合、ほかの質問事項があればあわせて質問するようにし、なるべく往復回数を少なくすることでクライアントの負担を軽減し制作進捗の効率化を図ります。

ところが、クライアントに確認をしたところ元のロゴデータは手元になく、制作元とも連絡がつかないということでした。

Webサイトのリニューアルなどにおいては、わりと多いのが元の編集用データがない、または所在がわからない、元の制作事業者と何らかの理由によって連絡がつかないなどの事例があります。

Web事業者の中には、編集手数料を目的としている場合があるため、元の編集データは成果物に含めなかったり、別途買取を請求するような契約をしている場合がありますが、いずれにしても、ある程度の割合で元データの入手は不可能であることが判明しました。

当社の場合は、最終納品時に成果物データ一式を納品しているので、できるだけクライアントが運用管理や修正時に困らないように配慮させていただいておりますが、事業運営上さまざまな営業スタイルがありますので、あくまでも成果物や納品データ形式の正当性や優劣を意図するものではございませんので、誤解のないようにご理解ください。

• とにかく、元データはない

現状だと、2つの解決方法のうち1つを断念しなければならなくなりました。
もう一つの方法は、あまり推奨できる方法ではないため、再度、解決方法を模索することになりました。

元データがなくてもなんとかなると楽観的

比較的新しく作成されたデータ

クライアントから元データの入手が不可能となりましたので、再度、既存サイトからダウンロードしたPNGファイルを検証します。

状況として明白なので、以下の条件に合致する方法であれば解決可能です。

• Photoshopでも綺麗な状態で透過ＰＮＧを表示させる

経験上、あまりこの手のPNG画像に遭遇する機会がすくなかったため、あまり深堀する必要がない事案と考えていましたが、今回はあらためて対処策を確立しておく必要があると感じました。

通常Web系の技術やバグ対策などは、1度切りで一生涯触れない内容もあるため、かなりイレギュラーな内容は回避しないほうが賢明な場合があります。
また、最新技術などのニーズは1～2年程度で喪失してしまう技術形態もあるため、最新の技術ばかり採用すると、だれも閲覧できないWebコンテンツを制作してしまう場合があるので注意が必要です。

• 車も技術も３年落ちぐらいが最適

さて、再度既存サイトのロゴデータについて気になる点があったので、いつ頃制作されたデータであるかを調査しました。

調べたところ2年ほど前の新しいデータであることがわかりましたが、使いなれた編集ツールは5年以上使用されている方もいるので、編集アプリケーションによっては正常に開くことができる可能性を検証します。

• そうです、PNGファイルといえばFireworks

幸いなことにFireworksはCDメディア形式で保有しているので、Fireworksで開いてみることにします。

別のアプリケーションで開くことで解決することがある

結果的に発売停止アプリケーションで編集

Adobe Fireworksは旧マクロメディア社により開発されたグラフィック制作編集ソフトです。
編集データの保存形式はPNG形式で保存可能で、Web向けには編集データを省いた画像情報のみのPNGファイルやJPEG、Gifファイル形式などで書き出すことが可能です。

後年Adobe社にマクロメディア社が買収されたため、一連のマクロメディアソフトはAdobe社に統合され、Fireworksは2013年のCS6で開発が終了しているソフトです。

アプリケーション自体はとても優れていたのですが、Adobe社に元々あるPhotoshopというグラフィックソフトとの競合面から、現在は開発も発売もされていないため、入手することは困難なアプリケーションです。

• PNG形式の場合でデータがPhotoshopで正常に開けない場合はFireworksで一度開いてみる

というのは、以前はわりとやってきた記憶がありましたので、今回のロゴデータのPNGファイルを開いてみます。

結論からいえば、Fireworksでは綺麗に表示することができました。
ただ、編集データが付属していなかったので、PNG32形式で透過情報を付加して書き出すことで、Photoshopでも綺麗に配置できる透過PNGファイルを入手することができました。

Photoshopでは通常透過ファイルはPNG24で出力するのですが、PNG24はJPEG相当の色出力が可能なだけで、疑似的に透過領域を創り出している形式になり、Fireworksの場合はPNG32形式でないと、背景マットが付属して透過されません。

ファイルサイズはなぜか元ファイルよりもやや大きくなりました。

とりあえず問題は解決したのですが、Fireworksでの編集ファイルではないようだったので、やっぱり気になってしまいました。

たまに古いアプリケーションが役立つときがあります

原因解明と予測

さて、問題は解決したのですがPNGファイルに編集データが含まれていなかったことが気になります。

さらに元々のデータサイズが軽量であったので、Fireworksで書き出したのであれば、元データよりも軽量になるはずですが、元データよりも多少サイズアップしていた点が気になりました。

推測と考察

• ブラウザやピクチャービューアでは綺麗に表示
• Photoshopではジャギーが発生
• Fireworksでは綺麗に表示されPNG32の書き出しが可能

以上の分析結果から、どうもPNGファイル自体が軽量化加工がされているのではないかと予測しました。

実は透過PNGファイルをさらに軽量化するオンラインサイトなども存在するため、ドロップシャドウ部の情報をブラウザ表示には問題なく削除できるような仕組みがあるのではないかと推測しました。

またも結論から言えばこの推測はおおよそ当たっていたようで、PNG32の透過情報を維持したPNG画像をオンライン軽量化出力をしたところ、また同じPhotoshopのみで綺麗に表示できないPNGファイルに変更されていました。

今回のロゴファイルが必ずしも軽量化加工されたとは断定できない点がありますが、付属するデータが削除された形式で出力されていたことのひとつの原因解明となりました。

PNG画像がもともとPNG8(ギザギザが残っている)形式であればすぐにわかるのですが、今回のようなケースだと、ほとんど発生しない事案のため、解決方法や原因解明に少し手間取ってしまいました。

ただ、今回ケーススタディとして記録記事として作成しましたので、今後透過PNGデータで問題がある場合は、解決方法のひとつの選択肢として参考にできる事例となりました。

困ったときに学習できることはとても多い