North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
デザイン

Webデザインをするときの小ネタ~Photoshopのデザインデータを軽くする方法~

WebデザインをPhotoshopで作成して、いざコーダーさんにデータを渡した際に「PSDデータが重いよ!」と指摘されることはありませんか?
ノリノリでデザインを進めるうちに、Photoshopの動作がモッサリと重くなってくることもあるかと思います。
ちょっとした手間でファイルを軽くできるだけではなく、後々の作業効率を上げられますので、その小ネタを紹介します!

スマートオブジェクトの中のjpgやpngの解像度に注意する

後々サイズ変更することもあるから・・・と思ってスマートオブジェクトでjpgやpngファイルを使用している場合、元ファイルの解像度に注意しましょう。
素材サイトからダウンロードした写真だと、解像度がDTP対応の大きなサイズになっている場合があります。

素材の写真をそのままスマートオブジェクトとして取り込んだ例。
スマートオブジェクトを展開して解像度を確認すると、7.62MBの画像がそのまま取り込まれている

Webデザインの場合、画像の解像度は72pxで十分です。
幅や高さも、大きいサイズだからキレイに表示されるということはありませんので、サイズ変更があっても柔軟に対応できる適切なサイズに収めましょう。
気にせずに作業していると、30MB近い写真をそのまま使用してしまっていることもあります。
当たり前ですが、調整しておかないとPSDファイルにはその30MB分がそのまま入ってしまいます。
事前にサイズを調整してから使用するか、スマートオブジェクトを開いて解像度を確認してみましょう。

スマートオブジェクトの中のベクターデータに注意する

スマートオブジェクトとして貼り付けたベクターデータ(イラストレーターのデータ)の内容を確認してみましょう。
単純なピクトグラムやアイコン等であればさほど影響はないのですが、グラデーションが使用されていたりポイントが多いベクターデータの場合は、動作が重くなります。
後々変更する可能性がない場合は、スマートオブジェクトではなくピクセルデータとして使用することをオススメします。
少し大きめにピクセルデータとして貼り付けて、その後スマートオブジェクトに変更すればサイズ変更にも対応できますね。

スマートオブジェクト内のベクターイラストを開いた例。
このようにアンカーやパスの描写が多いベクターデータは重くなりやすい
ベクターデータを変更する可能性がない場合は、「レイヤーをラスタライズ」するか、貼り付け時に「ピクセル」を指定して画像の状態で使用すると軽くなる。

パターンを作成する

このようなストライプ模様の場合、このエリアだけでしか使用しないから・・・とパスをそのまま配置していませんか?
余分なパスやオブジェクトが多いと、これも動作が重くなってしまう原因となります。
シームレスなパターンは後々コーディングでもそのまま書き出して使用できますから、パターン化してしまいましょう!

スマートオブジェクトを活用する

Webデザインの場合、スマートフォン用にハンバーガーメニューの画面イメージ等の展開イメージを作成するケースもあるかと思います。
その場合、アートボードを複製して作成したデータをそのまま貼り付けてしまっていませんか?
同じものを表示させたい場合は、制作したデータではなくデザインを書き出したjpgファイルを使用しちゃいましょう!

このようにスマートオブジェクトを活用していると、データ量が減らせるだけではなく、修正があった場合もスマートオブジェクトを更新するだけなので修正の管理がとても楽になります。

番外編 - illustratorでepsやjpgファイルをリンクさせると読み込みが重くなる

意外と気づかない人は多いのかもしれません・・
軽量化しているjpgファイルでも、イラストレーターにリンク配置させると読み込みが遅くなります。
epsファイルも同様で、epsファイルをいくら圧縮していても動作が重くなってきます。
この場合、jpgやepsファイルはpsdデータに変更して配置すると読み込みがとてもスムーズになります。

細かいことですが、小さな積み重ねで自分の作業効率も上がりますし、後々自分以外の人が作業する場合の効率も上がります。
自分一人でコーディングまで作業するならともかく、分業している場合はエチケットのような感覚でデータを整理する習慣を付けると良いかもしれません。

あひる
WRITER:あひる
気付けばデザイン歴10年以上。
UC(色のユニバーサルデザイン)アドバイザー。
見た目だけではない、戦略的なデザイン設計を考えています
おやつ作りも好きですが、それ以上に自転車(ロード)とスキーが好きです。
特技は早起きです。
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001