【Photoshop】WebPを編集・保存できるプラグインの導入と使い方

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

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（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、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 2022 → Plug-ins
上記にダウンロードしたプラグインを入れたら完了です。

以上でPhotoshopでWebP形式を扱えるようにする為の準備が完了しました。

OMAKE

警告ダイアログが表示されたら

もし「対象のフォルダーへのアクセスは拒否されましたこのフォルダーへ移動するには管理者の権限が必要です」と表示されたら気にせず「続行」をクリックしましょう。

最後にPhotoshopを再起動したら完了です。

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

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

STEP.1

Photoshopに画像を配置

Photoshopに画像を読み込ませます。

Photoshopの導入がまだの方はAdobe公式サイトから入手しておきましょう。

STEP.2

別名で保存

[ Ctrl + Shift + S ] で別名で保存を開きます。
(Mac：Command + Shift + S)

[ ファイルの種類 ] の下部に [ WebPShop (*.WEBP;*.WEBP) ] が追加されているので選択し、保存をクリックます。

STEP.3

WebPの保存設定

WebP形式での保存ダイアログが開きます。
左下の [ Preview ] にチェックを入れて好みの画質とサイズに設定しましょう。

設定が面倒な方は初期設定のまま保存して問題ありません。
そのままで十分過ぎるほどキレイに保存できます。

FINISH

保存完了

最後に [ OK ] をクリックしたらWebP形式での保存が完了です。

デフォルトの保存設定で60.66kbのJPG画像が27.82kbに圧縮されました。
見た目に変化は無くサイズが半分以下、最高ですね。

保存だけでなく、読み込み・編集も可能

もちろん保存だけでなく、PhotoshopにWebP形式画像を読み込ませる事も可能です。
プラグイン無しではWebP形式は読み込み不可です。

Photoshop以外の変換方法

Photoshop（フォトショップ）を導入されていない方でもWebPへの変換方法はいくつか存在します。
サクッとWebPに変換してサイトを軽量化しちゃいましょう！

サイトで変換

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

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

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

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

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

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

高品質なWEBデザインテンプレート

Photoshopで使える高品質なWEBデザインテンプレートです。
全て商用利用可能！
制作時間の短縮と作品のクオリティアップを重視したい方に超オススメのテンプレートです。

#01 Business Website Layout with Blue Accents

コーポレートサイトに向いているデザインカンプテンプレートです。
ブルーの差し色は簡単に別の色に変更できます。

ダウンロード

#02 4 Web Pages on a Smartphone Mockup

スマホ用のWebデザインカンプ4パターンセットです。
モバイル主体のサイトを考えられている方にオススメ！

ダウンロード

#03 Web Site Questionnaire Layout for Health Coach

フィットネス系のサイトデザインに適したテンプレートです。
もちろん画像とテキスト内容を変更するとフィットネス以外の分野でも活用が可能です。

ダウンロード

#04 User Interface E-Commerce Website Page Layout Set

通販サイトのデザインカンプです。
汎用的なレイアウトなのでどんなECサイトにも合うでしょう。

ダウンロード

#05 Personal Website Layout with Yellow Accents

様々なサイトで使える汎用的なWebサイトテンプレートです。
個人・企業、何でも使えます。

ダウンロード

Photoshop用とIllustrator用のバナーテンプレート

【商用可】Webサイトのデザインカンプ用テンプレート35選！サイトデザインを瞬殺【Photoshop・Illustrator】

フォトショップとイラストレーター用の高品質なWEBデザインテンプレート35選です。
全て商用利用可能！

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

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

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

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

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

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

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

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）内でWebP（ウェッピー）形式で編集・保存する方法でした。

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

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

ではまた！