・コーディングスキルを身につけたけどこれだけでWeb制作案件受注できるの？
・フォトショップから画像データを書き出す具体的な方法を知りたい。
・画像形式の種類もPNGとかJPG、GIFとかあるけど違いについて教えてほしい。
- Web制作会社から「コーディング案件」を受注した後に最低限必要な画像関連スキルについて理解できる
実際に僕がWeb制作会社からコーディング案件を受注してから必要だった経験から記事を作成していますので参考になれば幸いです。
Photoshop画像書き出しが必要な理由
Web制作会社からコーディング案件を受注したらデザインツールは使わないのかと思ったら「Photoshop画像書き出し」が必要でした。他にもデザイン制作ツールは色々ありますが僕はPhotoshopデータでのやりとりが多かった、というのは実体験からも言えます。Adobe社が出している世界で最も有名な画像編集ソフトです。写真加工ソフトなんですけどもWebデザイン制作でよく活用されてます。
Web制作会社から「コーディング案件」を受注したら
- PSDデータでデザインカンプ（完成デザイン画像）がマルっと送られてくる
ことが多いです。
PSDデータ＝Photoshopデータ
です。
ここから必要な画像を「切り出す」つまり「書き出し」てコーディング画像として使用していきます。
コーディング用にわざわざ画像を切り出して送ってくれる制作会社はありませんでした。僕はWebデザインもできます！と言っていたので、もしかすると画像処理は一切できません、と言えば個別に画像を切り出してくれるのかもしれません。ただ、簡単な画像処理スキル、画像書き出しスキルは持っておいた方が得です。簡単なスキルなのでこれが原因で案件ロストしたらもったいないですしね。
こんなのです。
もしコーディングスキル（HTML、CSS、jQuery）を習得して「コーディング案件」だけをWeb制作会社から受注しようとしていたら、と仮定してこの記事を書きます。
画像書き出しができれば「コーディング案件」については特に問題なく進めることができます。
まずPhotoshopを手に入れよう
WebデザインができるならPhotoshopは当然持っているはず。WebデザインスクールではPhotoshopをベースにデザインカンプ（完成デザイン）を作ります。Adobe製品をご存知の方は「イラストレーター（Illustrator）」は使わないの？と疑問があるかもですがイラストレーターはメインでは使いませんでした。ロゴ制作、図やイラストの制作、名刺デザイン制作でイラストレーターをWebデザインスクールで学習しましたが補足スキルという位置付けでした。
なので、PhotoshopがあればWebデザイン制作はできる、ということ。図もバナーも簡単なものであればPhotoshopで作れます。（もちろんイラストレーターが使えればデザインの幅は広がります。イラスト制作はこちらの方が使いやすいです）
Webデザイン制作を習得せず「コーディング」スキルをまず身につけた、という方はPhotoshopを手に入れましょう。
では、Photoshop手に入れようと思ったらどんな方法があるか、を整理します。インターネットからダウンロード購入です。どこかショップに買いに出かける、ということはありません。
①Adobeサイトからダウンロードして購入
- Adobe Creative Cloudコンプリートプランを買う：3980円/月（年間プラン月々払い）
- Photoshop単体プランを買う：1680円/月（年間プラン月々払い）
- フォトプランを買う：980円/月（年間プラン月々払い、２０GBプラン）
②デジハリONLINEのAdobeマスター講座で学割価格でAdobe Creative Cloudコンプリートプランを買う
個人でコーディング案件だけできればいいからPhotoshopを手に入れよう、という方は一番安価な「フォトプラン」のオンラインストレージ20GBプランでいいでしょう。年間12000円くらいなのでまあ必要経費だと思っていいのではないでしょうか。（ただし、年間契約、ということなので月々解約可能なプランだと多少高くなります）
ちなみに「Adobe Creative Cloudコンプリートプラン」はAdobe製品ダウンロードし放題プランです。
photoshopデータから画像を書き出す方法
完成デザインPSDデータが送られてきた、としましょう。
Photoshopを開く
開くとこんな感じになります。これは僕がフォトショップで作ったデザイン画像です。
この状態からコーディングをしてください、とWeb制作会社から言われるわけです。ファーストビューの写真やサービスの三角形の画像をここから「切り出して」つまり「書き出して」いかないといけません。
レイヤーを表示
上の完成デザイン画像右の方に「レイヤー」という表記があります。Photoshopは「レイヤー」という層を重ね合わせて作られています。サルワカサイトで分かりやすく書かれています。
Photoshopのレイヤーとは？初心者でも分かる使い方：サルワカ
もし、PSDデータを開いたときに「レイヤー」がどこにも見当たらない、ということであれば上記画像の通り
- 「ウィンドウ 」→「レイヤー」
で出てきます。
上記のように対象の図（赤枠）の一つの三角形にカーソルを持っていくと「バウンディングボックス」という枠で囲まれた一つの「画像レイヤー」が選択されます。これが色々テキストとか他の図とかが組み合わさって上記画像ができています。
「バウンディングボックス」が出てこない！という場合があるので、その時は上の赤い枠のチェックを入れてください。
レイヤーをグループ化
図を構成している「レイヤー」を全て選択して（Shiftキーを押したまま背景の上のレイヤーをクリックすると、すべてのレイヤーが選択された状態になる）「レイヤー」→「レイヤーをグループ化」（もしくはCtrlキー+Gキーをクリック）よりグループ化できる。フォルダマークで表示される。
画像自動生成「画像アセット」にチェック
これがフォトショップの便利な機能「画像アセット」
- ファイル→生成→画像アセット
にチェックを入れる（最初はチェックが入っていない）
これで対象グループフォルダの名前を変えるだけで思ったサイズ、種類の画像が自動生成されます。
対象グループフォルダ「命名」
「service_images.png」と命名してPSDデータを上書き保存すると自動でPSDデータと同じ階層に「assets」フォルダが生成されます。
これで画像書き出し終了。
そして、「対象グループフォルダ名」（ここでは「service_images.png」のこと）を規則に従って変えるだけで
- 画像種類を指定する、書き出しサイズを指定する、画質指定する、複数指定する
というように自分で指定して画像生成してくれます。
画像種類を指定する
- JPG
- GIF
- PNG
- SVG
この4つの形式のどれかで出力可能。
「service_images.jpg」とすればJPG形式で、「service_images.png」とすればPNG形式で書き出してくれます。
「フォルダ名.拡張子」です。
書き出しサイズを指定する
レイヤー名の先頭にサイズや倍率を記載します。縦横サイズ指定の「x」は英語小文字の「エックス」です。
- 180 x 50 service_images.png： 横180px、縦50pxのPNG画像
- 200% service_images.png： PSD上サイズの2倍のPNG画像
画質指定する
これで画像ファイルの重さを調整できます。
JPGの画質を指定
JPGはPhotoshopでは0～100まで画質を指定できます。（指定なしは90％出力）
- service_images.jpg80： 画質80%のJPG画像
- service_images.jpg8： 画質80%のJPG画像
- service_images.jpg77： 画質77%のJPG画像
画質は「10%ずつ」であれば1の位と「%」を省略可能。
PNGの画質を指定
PNGは、8、24、32の中から画質を指定できます。（指定なしは32bit出力）
- service_images.png8： 8bitのPNG画像
- service_images.png24： 24bitのPNG画像
複数指定する
１グループフォルダで複数画像を書き出したいときには「,（カンマ）」で区切るだけ。
- service_images.png8, 200% service_images@2x.png
- service_images.png8, service_images.jpg50
Retina対応画像書き出し
よくあるのがRetina対応で画像２倍で書き出して利用して、という指示。
RetinaディスプレイというMac（Apple製品）の高解像度ディスプレイのこと。高解像度だから表示される画像の大きさが普通のディスプレイよりも解像度が高い。
だから普通の画像よりも解像度高く書き出さないとMac製品では綺麗に表示できないよ、だから２倍で書き出してね、ということ。
画像生成フォルダができない場合
環境設定→プラグイン→Generatorを有効にする
にチェックが入っているか要確認。
画像形式の種類の違い（JPG、PNG、GIF）
画像書き出し方法は分かった。じゃあどの画像形式で書き出すかは用途で変わります。写真はJPG 形式、ロゴやアイコンはPNG形式とざっくり使ってますけどもなんでか？というとそれぞれ特徴があるからですね。
JPG
写真などで使う
- 拡張子は「〜.jpg」
- フルカラー1670万色まで扱える
- 写真保存に適している（容量が小さく抑えられる）
- 背景透明の場合は白色になる
- 編集、保存するたびに画像が劣化
PNG
ロゴなど色の少ない画像で使う、ビットマップ画像に使う
- 拡張子は「〜.png」
- シンプルな（色が少ない）図やイラストに向いている（きれいに画質を保ってくれるから）
- 背景透過が必要なとき（透明、半透明）
- 編集、保存しても画像劣化しない
- 写真など情報が多いデータは容量が大きくなってしまう（JPGやGIFより重め）
「PNG-8」「PNG-24」「PNG-32」という3種類あります。ざっくりですが以下の通り。
- 「PNG-8」：GIF並みのデータ容量（8bit分カラーが扱える）、透過可能（だがちょっと荒い）、サイズ軽い
- 「PNG-24」：JPG並みのデータ容量（24bit分カラーが扱える）、透過できない、サイズ重い
- 「PNG-32」：JPG並みのデータ容量＋透過可能（8bitの透明度情報）、よりサイズが重い
JPGとPNG−24の違い
・画質設定：JPGは画質を細かく設定できるので軽くできる
・可逆圧縮：PNGは何回保存しても劣化しない。（JPGは非可逆圧縮なので劣化する）
GIF
ロゴなど色の少ない画像で使う
- 拡張子は「〜.gif」
- シンプルな（色が少ない）図やイラスト、アイコンに向いている
- 容量が軽い
- 背景透過が必要なとき（半透明にはできない）
- 編集、保存しても画像劣化しない
- アニメーションにできる
- 256色（8bit）までしか扱うことのできない（写真には不向き）
Photoshopでできること
とりあえずPhotoshopで画像書き出しができれば「コーディング案件」に対応できます。そこから画像を修正したり加工したり、ということはデザイナーではないので求められません。
ただせっかくPhotoshopを購入したならばどんなことができるか知っておくと自分で画像加工したりバナーを作れたりするので便利です。
Photoshopとは？こんなスゴイことができる26の例：サルワカ
が参考になりますね。
初級本を1冊持っておいても便利です。
Photoshop以外のデザイン制作ツール
Photoshopが業界デファクトスタンダード（標準ソフト）ではありますが、他のソフトでもデザイン可能です。僕はWebデザインスクール卒なのでPhotoshopメインでのデザイン制作ですが他デザインツールを使っている人もいるはず。簡単にご紹介します。
- イラストレーター（Adobe Illustrator）：Photoshopと同じAdobe製品。イラスト制作でよく使われる。
- Adobe XD：Photoshopの簡易版みたいなAdobe製品。操作が簡単で使いやすい。ワイヤーフレーム制作とか簡単にデザイン作ろうと思ったらこれだけで作れる。無料版あり。
- Sketch：Web、UIデザインに特化しているデザインツール。
- Figma：ブラウザ上で簡単にデザインができるツール。
たいした説明になっていませんが他のデザインツールもある、ということ。僕はPhotoshopでの制作依頼や画像書き出し依頼をされた経験ばかりなのでこのようなデザインツールの名前を出されることもあるかもなので一応ご紹介します。
AdobeXDはワイヤーフレーム制作にとても便利。ですがPhotoshopデータを送られてきてそれをXDで開いてもうまく開かないことあります。
まとめ：画像書き出しは簡単、書き出し画像の種類を理解しよう
画像書き出しは簡単です。フォトショップ さえ手元にあればこの記事の手順で書き出し可能。
ただし、Web制作会社やWebデザイナーから送られてきた完成デザインから画像を書き出すとき
- PNGで書き出すのか
- JPGで書き出すのか
を理解しておくことが必要です。
画像は軽い方がWebサイトを開くときいいのは当然ですが、軽くすることで画像が荒くなったり、背景透過できなかったりすると問題です。
必要な画質を保ちながら背景透過可否を考えて画像種類を選んで書き出しましょう。
この記事はここまでです。
スキル０からオリジナルデザインのサイト制作ができるようになるまでの過程、
制作会社に営業するための「営業メールの作り方」「営業アポイントリストフォーマット」なども盛り込んでます。
実践的・網羅的な内容にしていますのでこれからWeb制作・Webデザインを始めようという方にオススメのnoteです♪
【note】スキル実績人脈０のアラフォー男がWeb制作会社に営業して副業収益化した具体的な手順