XD、Ai、PSDそれぞれのベストな画像の書き出し方【Web制作するなら】

Date:	2022.01.25
Update:	2024.01.13

執筆･監修

上杉洋　Hiroshi Uesugi

1991年生まれ。株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

Xにポストする

Facebookで共有 B! ブックマークする

コピーする

デザインデータとして送られてくる形式でよくあるAdobe XD、Adobe Illustrator、Adobe Photoshopの3つのデザインソフトで微妙に異なる画像の書き出し方。
この記事では弊社で教えている各ソフトで最適な画像の書き出し方を紹介します。

目次（読みたい所をクリック!!）

Webサイトにおける画像書き出しの基本

その1：画質は80%で書き出す

Webサイトで使用される一般的なJPGやPNG画像はデザインデータから書き出す際に80％の品質で書き出します。
人間の目には100％との違いはほとんどわからないので、画像を圧縮することによりWebサイトの表示速度を向上させるというメリットがあります。

その2：等倍画像と2倍サイズの画像を書き出す

最近はiPhoneなどではRetinaディスプレイという通常よりも高精細なディスプレイも多く使われているので画像がぼけないように2倍サイズで書き出すことが求められる場合があります。

もちろん2倍サイズで書き出すことで画像の容量が増えるのですが、Retinaディスプレイで等倍サイズの画像を表示すると明らかにぼけてみえることがあるので必要であれば2倍サイズの画像も一緒に書き出すのがよいでしょう。

注意！

2倍サイズの画像書き出しの場合は下記コードで画像の切り替えが可能です。

<img src="img.jpg" srcset="img.jpg @1x,img@2x.jpg">

PC・SPで画像を切り替える場合は下記コードを使用しましょう。
昔使用されていたdisplay:none;で切り替える方法だと画像自体の読み込みは発生してしまうのでサイトのパフォーマンスを低下させます。

<picture>
    <source srcset="img_sp.jpg" media="(max-width: 768px)">
    <img src="img.jpg" alt="" />
</picture>

XDでの書き出し方

まずはデザインデータを開き環境にないフォントがないか確認してください。
環境にないフォントを含んだレイヤーを書き出した場合、個人のPCに入っているフォントに置き換えられて書き出されるので、クライアントが意図したデザインとは異なった画像データが書き出されてしまいます。

Adobeフォントからダウンロードできるフォントやフリーフォントであれば自分のPCにインストールすればOKです。
もし有料フォントやOS特有のフォントだった場合には該当箇所はデザイナーに確認してパスに変更してもらうか、画像の書き出しを依頼する必要があります。

一括書き出し

レイヤーの書き出しマークを選択した画像を一括書き出しできます

画像ごとにpng、jpg、SVGの選択ができない
送られてくるデザインデータにもともとチェックが入っていて必要ない画像も一緒に書き出される

以上の点から一括書き出しは正直あまり使ってません

個別書き出し（よく使う）

レイヤーを選択して右クリック（ctrl+E）で書き出しを選択します。
複数レイヤーを選択すれば同時に書き出せます。
XDは軽いので個別書き出しでもあまりストレスなく書き出せます。

書き出し時の設定

jpg、pngの場合書き出しサイズをWebにしておけば等倍サイズと2倍サイズが一緒に書き出すことができます。
画質は最初に記載したように80%を選択しましょう。

また、SVG画像を書き出す場合にレイヤーがパスや長方形などのベクターデータになっていることを確認してください。
テキストレイヤーをSVG書き出しする場合は一旦パスにしてから（ctrl+8）書き出しが必要です。

使用した参考デザインデータ
https://dribbble.com/shots/11040194-Online-Media-services-provider-landing-page

AIデータからの書き出し

AIデータからの書き出しは一番クセが有り注意が必要です。
XDと同様にフォントがない場合はデザイナーが意図したデザインと異なってしまう可能性があるので環境にないフォントがないか注意しましょう。
フォントがない箇所はピンクの背景で表示されます。

デザインデータがAIだった場合はテキストがアウトライン化されたデータと一緒に送られてくることが多いです。
アウトライン化データはファイル名のどこかに_olと記載されていることが多いです。
もしなかった場合はアウトライン化したデータももらえるようデザイナーに依頼しましょう。

めちゃくちゃ便利アセット書き出し

書き出しにクセがあるAIデータですが、書き出しに関してはかなり使いやすいです。
まずはメニューバーから「ウィンドウ→アセット書き出し」を選択し、アセット書き出しパネルを表示してください。
次にレイヤーを選択し、ドラッグアンドドロップもしくは右クリックから書き出しに追加を選択しアセット書き出しパネルに画像が追加されたらOKです。