ポートフォリオの作り方をゼロから徹底解説

【Photoshop】WebP形式の画像を編集・保存できるプラグインの導入方法

この記事を読むのに必要な時間は約 11 分です。

Photoshop(フォトショップ)を使ってサイト用の画像制作をした後、圧縮はされているでしょうか?
画像をキレイに圧縮し、最適化する事はアクセシビリティの観点から非常に重要です。

サイト制作でよく使う画像形式には様々な形式が存在します。
代表的な形式は「JPG」「PNG」「GIF」の3種類ですね。

そんな中、次世代画像フォーマットの「WebP(ウェッピー)」が浸透してきました。
代表的な3種の形式と比較して圧縮率、汎用性が高い「まさに次世代画像フォーマット」です。

当記事ではPhotoshop(フォトショップ)でWebP(ウェッピー)形式を編集・保存できるようにする方法について詳しく解説します。

WebP(ウェッピー)とは?

WebP(ウェッピー)とはGoogleが開発した画像フォーマットです。

  • 非可逆圧縮(しかしアルファチャンネルが使える超有能形式)
  • 同等の画質でPNGなら約26%、JPGなら約25~34%容量が軽くなる
  • 透過が可能
  • アニメーションができる
  • 主要ブラウザで利用可能

WebPのメリット

上記はコチラで解説しているバナー制作のサンプルです。

  • 左:JPG形式、60.66Kb
  • 右:WebP形式、27.82Kb

容量が半分以下で見た目に変わり無し、まさに次世代ですね。

せっかくだからPNG形式でも比較してみましょう。

コチラで解説している黄金文字のみを背景透過で出力した画像です。

  • 左:PNG形式、156.18Kb
  • 右:WebP形式、34.27Kb

優秀すぎますね、WebPを使わない手はありません。

WebPのデメリット

WebPはIEには非対応です。
しかしIEはサポート終了が告知されました。よってデメリットはほぼ皆無です。

長らくWeb開発者を苦しめてきたIEが完全終了宣言、喜ばしい事です。
これから益々WebP形式が普及していく事は間違いないですよ。

PhotoshopでWebPを使えるようにする方法

Photoshop(フォトショップ)でWebP(ウェッピー)を扱えるようにする方法です。
難しくないので下記手順でサクッと入れておきましょう!

Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
まだPhotoshopが未導入の方はAdobe公式サイトから入手しておきましょう。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。
STEP.1
GitHubにアクセス
WebPの公式サイトGitHubのリンクがあるのでアクセスします。
STEP.2
対象プラグインをダウンロード
「WebPShop」のプラグイン配布ページに繋がります。

WindowsならWebPShop_0_3_3_Win_x64.8bi
MacならWebPShop_0_3_3_Mac_Universal.zip
をダウンロードしましょう。
FINISH
指定のフォルダにインストールしたら完了
PC → Windows(C) → Program Files → Adobe → Adobe Photoshop 2021 → Plug-ins
上記にダウンロードしたプラグインを入れたら完了です。

以上でPhotoshopでWebP形式を扱えるようにする為の準備が完了しました。
OMAKE
警告ダイアログが表示されたら
もし「対象のフォルダーへのアクセスは拒否されました このフォルダーへ移動するには管理者の権限が必要です」と表示されたら気にせず「続行」をクリックしましょう。

PhotoshopでWebP形式で書き出す方法

PhotoshopでWebP形式に書き出す方法について解説します。

STEP.1
Photoshopに画像を配置
Photoshopに画像を読み込ませます。

Photoshopの導入がまだの方はAdobe公式サイトから入手しておきましょう。
STEP.2
別名で保存
[ Ctrl + Shift + S ] で別名で保存を開きます。

[ ファイルの種類 ] の下部に [ WebPShop (*.WEBP;*.WEBP) ] が追加されているので選択し、保存をクリックます。
STEP.3
WebPの保存設定
WebP形式での保存ダイアログが開きます。
左下の [ Preview ] にチェックを入れて好みの画質とサイズに設定しましょう。

設定が面倒な方は初期設定のまま保存して問題ありません。
そのままで十分過ぎるほどキレイに保存できます。
FINISH
保存完了
最後に [ OK ] をクリックしたらWebP形式での保存が完了です。

デフォルトの保存設定で60.66kbのJPG画像が27.82kbに圧縮されました。
見た目に変化は無くサイズが半分以下、最高ですね。
保存だけでなく、読み込み・編集も可能
もちろん保存だけでなく、PhotoshopにWebP形式画像を読み込ませる事も可能です。
プラグイン無しではWebP形式は読み込み不可です。

Photoshop以外の変換方法

サイトで変換

SyncerでWebP(ウェッピー)に変換できます。
Photoshopが無い方にオススメ。

ワードプレスの画像を変換

「WebP Converter for Media」はWordpress(ワードプレス)に登録している画像を一括でWebPに変換してくれるプラグインです。
ワードプレスで構築したサイトを手軽に次世代画像フォーマットのWebPに変換したい方にオススメです。

「WebP Converter for Media」の主な特徴です。

  • WebPに対応しているブラウザではWebP形式で表示
  • 非対応ブラウザ(IE等)では元の画像形式(JPEG等)で表示
  • 画像アップロード時に自動でWebPに変換
  • 既存の画像も一括変換可能
  • テーマ・プラグイン内の画像も変換可能
  • プラグインを無効化すると元形式の画像を表示

と、痒い所に手が届く素敵仕様となっています。
気になる方はワードプレスの「プラグインを追加」画面で「WebP Converter for Media」と検索!

ワンランク上のテンプレート素材

Photoshopの学習をする上で、プロが作成した生データを研究する事は重要です。
普段からデザイン業務をされている方にとって自分以外のプロのクリエイターが作成したデータを見る事は日常茶飯事ですが、そうでない方は見る機会がありません。

AdobeStockのテンプレート素材はプロによる高品質な作品ばかり!
全て商用利用可能なので、テキストを変えるだけでそのまま使えます。

制作の手間を格段に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。


デザイン制作の勉強としての導入にオススメの名刺デザイン。
想像だけで作るとイマイチな仕上がりになりがちですが、良質なサンプルを参考に作ると吸収できる情報の質が段違いです。
相手に舐められない名刺テンプレート50選


バナーもフォトショップの練習をする上で良質な教材です。
想像だけ・中途半端な素材を参考にするのは有効な学習方法とは言えませんよ。
ハイクオリティなバナーテンプレート50選


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート34選


ゲームUIの制作は素材制作にはツールの深い知識が必要です。
テンプレートはまさに制作ノウハウの宝庫!
どれも最高の素材ばかりです。
ゲームUIに使えるテンプレート48選


単なる白黒の文字オブジェクトを一瞬で全く別モノへ大変身させるエフェクト52選です。
文字に高品質なエフェクトを追加するモックアップ


写真をはじめとした素材を「あっという間」に全く違うグラフィックへ大変身させるエフェクトです。
時短と品質の向上をされたいかたに超オススメ!
写真を全く違うグラフィックに変える事が出来る高品質なエフェクト50選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

おわりに

以上、Photoshop(フォトショップ)でWebP(ウェッピー)形式で編集・保存する方法についてでした。

JPGからWebPに変換するだけで容量が約半分に!
しかも見た目的に画像の劣化は感じられない優秀過ぎる次世代画像フォーマットのWebP。
サイト読み込み時間を早めるためにはWebPへの変換は必須と言えます。

WebPはさらに利用シーンが増える画像形式なので、Web制作をされているPhotoshopユーザーはプラグインの導入を強くオススメしますよ。

ではまた!

Illustratorは活用されていますか?
Photoshopだけでなく、Illustratorも活用されているでしょうか?
まだIllustratorを導入されていない方はAdobe公式サイトから入手できます。
なお、学生や教職員の方は公式サイトの学割コンプリートプランが最強にお得!
Illustratorの使い方はゼロから始めるIllustratorで徹底解説しています。
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!