Photoshopの使い方｜Web制作で使う基本操作を初心者向けに解説

「Web制作を始めたいけれど、Photoshopは何から覚えればいいのか分からない」。この悩みは、初心者の方からとても多く寄せられます。Photoshopは機能が膨大で、メニューを開くだけで圧倒されてしまうからです。けれど安心してください。Web制作の現場で実際に使う操作は、全体のほんの一部です。

この記事では、Web制作でPhotoshopを使う目的を整理したうえで、切り抜き・色補正・書き出しという3大作業を中心に、初心者がまず覚えるべき基本操作を順番に解説します。読み終えるころには「Photoshopで何ができて、どこから手をつければいいか」がはっきり見えているはずです。

Web制作でPhotoshopは何に使うのか

最初に、Photoshopの役割を正しく理解しておきましょう。ここを誤解すると、不要な機能を一生懸命覚えて時間を浪費することになります。Web制作におけるPhotoshopの立ち位置は、意外と限定的です。

Photoshopが得意なこと・苦手なこと

Photoshopは「ラスター画像（ピクセルの集まり）」を扱うソフトです。写真の加工、合成、レタッチ、色補正など、ピクセル単位の処理を最も得意とします。一方で、拡大しても劣化しない図形やロゴ、アイコンは苦手で、これらはIllustratorの担当です。

また近年は、Webサイトのデザインカンプ（完成見本）はFigmaで作るのが主流になりました。かつてはPhotoshopでデザイン全体を組むことも多かったのですが、今は役割が分かれています。Photoshopは「写真素材を整える専門ツール」と捉えると、学習の方向を間違えません。

FigmaやIllustratorとの役割分担

3つのツールは競合ではなく、分業の関係にあります。Figmaは画面全体のレイアウトと文字組み、Illustratorはロゴやアイコンなどの図形、Photoshopは写真と画像加工を担当します。実務では、Photoshopで整えた写真をFigmaのデザインに配置する、という流れがよく起こります。

この分担を理解しておくと、「この作業はどのソフトでやるべきか」で迷わなくなります。各ツールの基本は別記事でも解説していますので、合わせて読むと全体像がつかめます。

Photoshopの画面と基本用語をつかむ

操作を覚える前に、画面の構成と最重要用語を押さえておきましょう。ここがあいまいだと、後の解説がすべてぼやけてしまいます。逆にここを固めれば、学習スピードが一気に上がります。

画面の基本構成

Photoshopの画面は大きく4つの領域に分かれます。上部の「メニューバー」、その下の「オプションバー」、左端の「ツールバー」、右側の「パネル群」です。中央の大きな作業領域が「カンバス」で、ここに画像が表示されます。

最初はパネルが多くて戸惑いますが、よく使うのは「レイヤー」パネルと「プロパティ」パネルくらいです。ウィンドウメニューから不要なパネルを閉じ、画面をすっきりさせると作業しやすくなります。

絶対に外せない用語「レイヤー」

Photoshopを理解する鍵が「レイヤー」です。レイヤーとは、透明なシートを何枚も重ねるイメージで、各シートに別々の要素を置いて重ねて1枚の絵にする仕組みです。写真、文字、図形をそれぞれ別レイヤーにすると、後から個別に編集できます。

初心者は1枚のレイヤーにすべてを描いてしまいがちですが、これは禁物です。要素ごとにレイヤーを分けるのが、編集を楽にする最大のコツです。レイヤーパネルで、表示・非表示や重ね順を自由に変えられます。

選択範囲とマスクの考え方

「選択範囲」は、画像の中で「ここだけを編集する」と指定する点線の囲いです。選択範囲を作れば、その内側にだけ補正や削除を適用できます。切り抜きも補正も、まず選択範囲を作るところから始まります。

「マスク」は、選択範囲を「隠す・見せる」に変換して保存する仕組みです。黒く塗った部分が隠れ、白く塗った部分が見える、というルールです。マスクを使えば、元画像を消さずに見た目だけを切り替えられるため、やり直しが何度でも効きます。

写真の切り抜きの基本操作

ここからは実践です。Web制作で最も登場頻度の高い「切り抜き」から見ていきましょう。商品写真の背景を透明にしたり、人物だけを抜き出したりする作業です。切り抜きには複数の方法があり、対象によって使い分けます。

自動で切り抜く「被写体を選択」

最も手軽なのが、オプションバーの「被写体を選択」ボタンです。AIが自動で主役を判定し、選択範囲を作ってくれます。人物や商品など、輪郭がはっきりした被写体なら、ワンクリックでかなり正確に選択できます。

まずはこのボタンを試し、足りない部分だけを後述の方法で手直しするのが効率的です。完璧を最初から狙わず、自動で8割、手作業で残り2割という発想が、初心者には特におすすめです。

クイック選択ツールとオブジェクト選択ツール

「クイック選択ツール」は、なぞった場所の色や輪郭を見て、似た領域を自動で選択範囲に加えていくツールです。ブラシのサイズを調整しながら、選びたい範囲をドラッグします。はみ出したらAltキーを押しながらなぞると除外できます。

「オブジェクト選択ツール」は、囲んだ範囲の中から物体を自動認識して選択します。背景が複雑でも、対象を四角で囲むだけで抜き出せるため、商品単体の切り抜きで重宝します。状況に応じて使い分けましょう。

髪の毛や毛並みをきれいに抜く

人物の髪の毛や動物の毛並みは、輪郭が複雑で切り抜きが難しい部分です。ここで使うのが「選択とマスク」機能です。選択範囲を作った状態でオプションバーの「選択とマスク」を開くと、専用の作業画面に入れます。

その中の「境界線調整ブラシ」で髪の生え際をなぞると、細かい毛を自動で拾ってくれます。完璧でなくても、Web用なら十分実用的なレベルに仕上がります。最初は時間がかかりますが、数回練習すればコツがつかめます。

色や明るさを整える色調補正

切り抜きと並んで重要なのが、写真の色や明るさを整える「色調補正」です。暗く写った商品を明るくしたり、青みがかった写真を自然な色に戻したりします。サイトの第一印象は写真の質で大きく変わるため、軽い補正だけでも効果は絶大です。

調整レイヤーで非破壊に補正する

色調補正で最も大事なのは「調整レイヤー」を使うことです。画像メニューから直接補正すると、元画像のピクセルが書き換わってしまい、やり直しがききません。一方、調整レイヤーは補正内容を別レイヤーとして重ねるため、いつでも数値を変えたり削除したりできます。

レイヤーパネル下部の丸いアイコン（塗りつぶしまたは調整レイヤー）から追加します。明るさや色を変えても元写真は無傷なので、安心して試行錯誤できます。これが初心者とプロを分ける重要な習慣です。

明るさを整える「レベル補正」

明るさ調整の基本は「レベル補正」です。ヒストグラムという山型のグラフが表示され、左が暗い部分、右が明るい部分を表します。下の3つのスライダーを動かすことで、暗部・中間・明部の明るさを個別に調整できます。

暗い写真なら右側のスライダーを左に寄せると明るくなり、白飛びを抑えたいなら逆に調整します。まずは中央のスライダーで全体の明るさを整え、必要なら左右で締めると、引き締まった写真になります。

色みを整える「色相・彩度」

写真全体が青っぽい、黄色っぽいといった色のかぶりは「色相・彩度」や「カラーバランス」で直します。彩度を少し上げると鮮やかに、下げると落ち着いた印象になります。ただし上げすぎると不自然になるため、ほんの少しずつが鉄則です。

特定の色だけを変えたいときは、色相・彩度の中で対象の色系統を選んで調整できます。たとえば空だけを濃くしたいなら「ブルー系」を選ぶ、といった具合です。慣れると狙った印象に近づけられます。

Web用の書き出しと最適化

ここがWeb制作で最も重要な工程です。どんなにきれいに加工しても、書き出しを誤るとファイルが重くなり、サイトの表示速度が落ちます。表示速度はユーザー体験にもSEOにも直結するため、正しい書き出しを必ず身につけましょう。

用途で形式を選ぶ

Webで使う画像形式は主に4つです。写真には「JPEG」、透過が必要な画像には「PNG」、より軽くしたいなら「WebP」、ロゴやアイコンには「SVG」が向きます。WebPは画質を保ちつつ容量を大きく減らせるため、近年は写真でも積極的に使われます。

かつて主流だった「ファイル＞書き出し＞Web用に保存（従来）」は今も残っていますが、現在は「ファイル＞書き出し＞書き出し形式」が標準です。こちらはWebPにも対応しており、形式・サイズ・品質を1画面で指定できます。

サイズと容量を最適化する

書き出しで意識すべきは「実際の表示サイズの2倍まで」を目安にすることです。横600pxで表示する画像を3000pxで書き出すのは無駄に重いだけです。高解像度ディスプレイ対応として2倍程度に抑えるのが現実的です。

容量の目安は、写真1枚で200KB以下、できれば100KB前後を狙います。書き出し形式の画面で品質を下げながらプレビューを見て、画質が崩れない範囲で最も軽くなる点を探しましょう。1枚あたり数十KBの差でも、ページ全体では大きな違いになります。

書き出し前のチェック

書き出しの直前に、いくつか確認しておきたい点があります。画像のカラーモードが「RGB」になっているか（印刷用のCMYKだとWebで色が崩れます）、解像度が高すぎないか、不要なレイヤーが残っていないか、です。これらは見落としやすく、後からトラブルの原因になります。

また、複数の画像をまとめて書き出すときは、ファイル名の付け方をそろえておくと管理が楽です。日本語ファイル名は環境によって不具合が出ることがあるため、半角英数字にしておくのが安全です。

バナーや簡単な合成を作る

写真処理に慣れたら、バナーや合成画像にも挑戦してみましょう。Web制作では、キャンペーン用のバナーやトップページのメイン画像を作る場面があります。基本の操作の組み合わせで十分作れます。

バナー作成の流れ

バナーは「背景＋写真＋文字」で構成されるのが基本です。まず指定サイズの新規ドキュメントを作り、背景を敷き、加工済みの写真を配置し、文字ツールでコピーを入れます。各要素を別レイヤーにしておけば、後から自由に調整できます。

文字はフォント選びと余白で印象が大きく変わります。詰め込みすぎず、伝えたい一言を大きく、補足は小さく、というメリハリを意識すると、初心者でも見やすいバナーになります。図形中心のデザインならIllustratorのほうが向く場合もあります。

スマートオブジェクトで配置する

写真やロゴを配置するときは「スマートオブジェクト」として扱うのがおすすめです。スマートオブジェクトは、拡大・縮小を繰り返しても元の画質を保持できる仕組みです。通常のレイヤーだと、縮小して再び拡大すると画質が劣化してしまいます。

レイヤーを右クリックして「スマートオブジェクトに変換」を選ぶだけです。配置した素材を後から差し替えたり、繰り返し使い回したりするときにも便利で、非破壊編集の考え方ともよくなじみます。

覚えておくと作業が速くなるツールと操作

基本の5本柱を押さえたら、次は日々の作業を速くする道具を覚えましょう。同じ仕上がりでも、適切なツールを選べば時間は大きく変わります。ここでは初心者がよく使うものに絞って紹介します。

移動・変形・トリミング

「移動ツール」はレイヤーの位置を動かす最も基本のツールです。配置した写真や文字を、ドラッグで好きな場所へ移せます。複数のレイヤーをそろえて整列させる機能も、オプションバーから使えます。要素の位置をきれいにそろえるだけで、仕上がりは見違えます。

「自由変形」はCtrl＋Tで呼び出し、拡大・縮小・回転をまとめて行えます。角をドラッグすればサイズ変更、外側でドラッグすれば回転です。「切り抜きツール」はカンバス自体のサイズを変え、不要な余白を落とすときに使います。選択範囲の切り抜きとは別物なので混同しないようにしましょう。

ぼかし・シャープ・ゴミ取り

写真の小さなゴミや不要物は「スポット修復ブラシ」でなぞるだけで消せます。周囲の模様を自動でなじませてくれるため、肌の傷や背景の汚れを手早く除去できます。商品写真のホコリ取りなどに重宝します。

背景を少しぼかして主役を引き立てたいときは「ぼかし（ガウス）」、輪郭を少しはっきりさせたいときは「シャープ」を使います。どちらもかけすぎると不自然になるため、Web表示で確認しながら控えめに調整するのがコツです。

初心者がやりがちな失敗と対処法

独学でPhotoshopを触り始めると、多くの人が同じ落とし穴にはまります。あらかじめ知っておけば回避できるものばかりです。代表的なものを対処法とあわせて整理します。

失敗1：元画像を直接壊してしまう

最も多いのが、元画像にそのまま消しゴムや塗りつぶしをかけて、後から戻せなくなる失敗です。対処は単純で、調整レイヤー・レイヤーマスク・スマートオブジェクトという「非破壊」の道具を常に使うことです。元データは別フォルダに保管し、作業はコピーで行う習慣も有効です。

非破壊編集は最初こそ手間に感じますが、修正依頼が来たときに圧倒的に速く対応できます。「あとで直せる状態を保つ」のがプロの基本姿勢だと考えてください。

失敗2：解像度とサイズの取り違え

「解像度を上げれば画質が良くなる」と誤解し、小さい画像を無理に大きくして荒れてしまうケースも多いです。一度失われた情報は拡大では戻りません。Web用なら、最初から表示サイズに見合う解像度の素材を用意することが大切です。

逆に、巨大な素材をそのまま配置してファイルが極端に重くなる失敗もあります。配置前に用途に合うサイズへ整えておくと、後の書き出しもスムーズです。

失敗3：保存形式の混同

編集途中のファイルをJPEGで保存してしまい、レイヤー情報が失われる失敗もよく起こります。編集中は必ず「PSD形式」で保存しましょう。PSDならレイヤーやマスクがそのまま残り、後日続きから作業できます。JPEGやWebPは、あくまで完成品をWeb用に書き出すための形式です。

「編集用＝PSD」「公開用＝JPEG・WebPなど」と役割を分けて覚えておくと、データを失う事故を防げます。クラウド保存を併用すれば、万一の際の保険にもなります。

実務での画像準備の流れを通しで見る

最後に、ここまでの操作が実際のWeb制作でどうつながるのか、1枚の商品写真を例に通しで見てみましょう。個々の操作が一本の作業として結びつくと、理解が定着します。

素材の受け取りから配置まで

まず撮影された商品写真を受け取り、PSDとして作業ファイルを用意します。次に「被写体を選択」で商品を抜き、レイヤーマスクで背景を透過します。続いて調整レイヤーで明るさと色みを整え、実物に近い見た目に近づけます。

仕上がったら、表示サイズの2倍程度にリサイズし、WebPまたはJPEGで容量を抑えて書き出します。最後にファイル名を半角英数字にそろえ、Figmaのデザインや実装担当へ渡します。これが標準的な一連の流れです。

納品前の最終確認

納品やアップロードの前に、もう一度全体を確認します。実際にブラウザで表示される大きさで見て、暗すぎ・明るすぎがないか、輪郭が荒れていないか、容量は適切かをチェックします。複数枚なら、写真同士の色みがそろっているかも見ます。

この最終確認を習慣にするだけで、公開後の手戻りが大きく減ります。加工そのものより、こうした地味な確認の積み重ねが、品質の差として表れます。

Photoshopを学ぶ順番と上達のコツ

独学で挫折しないためには、学ぶ順番がとても大切です。やみくもに機能を試すより、成果につながる順に積み上げるほうが、はるかに早く戦力になります。ここでは初心者向けの学習ロードマップを示します。

最初の1週間でやること

初週は「レイヤーの概念」と「画像を開いて書き出すまで」を体に入れます。具体的には、手持ちの写真を開き、明るさを少し調整し、Web用に書き出す。この往復を何度も繰り返します。小さな成功体験を積むことが、続ける力になります。

この段階では完璧な仕上がりを求めなくて構いません。「開く・直す・書き出す」という基本の循環を、迷わず一人でこなせるようになることが目標です。ここがぐらつくと、後の応用がすべて不安定になります。

2週目以降で広げる範囲

基本循環に慣れたら、切り抜きと色調補正に進みます。被写体を選択で抜く、マスクで仕上げる、調整レイヤーで色を整える。この3つを商品写真や人物写真でひたすら練習します。題材は身近なものでよく、数をこなすほど勘所がつかめます。

さらに余裕が出たら、バナー作成やスマートオブジェクト、ショートカットへと広げます。一度に詰め込まず、ひとつ覚えたら実際の作業で使ってみる、という循環を回すのが定着の近道です。Web制作全体の流れはホームページ制作会社の選び方でも触れていますので、合わせて読むと位置づけが見えます。

つまずいたときの調べ方

操作に迷ったら、メニュー名や機能名をそのまま検索するのが一番速いです。Photoshopは利用者が多く、図解つきの解説が豊富にあります。動画で実際の手の動きを見ると、文章だけより理解が早い場合もあります。

また、公式のヘルプには正確な操作手順が載っています。バージョンによってメニュー位置が変わることもあるため、最新の情報を確認する習慣をつけておくと安心です。独学でも、調べ方さえ身につければ十分前に進めます。

他ツールとの連携で作業を効率化する

Web制作は1つのソフトで完結しません。Photoshopで整えた素材を他ツールへ渡す流れを理解すると、全体の作業がなめらかになります。連携のポイントを押さえておきましょう。

Figmaへ素材を渡す

デザインカンプをFigmaで作る場合、Photoshopは写真の下ごしらえを担当します。切り抜き・補正・書き出しを済ませた画像を、Figmaに読み込んで配置します。Figma側では大きさや位置を調整するだけなので、画像自体はPhotoshopできれいに仕上げておくのが鉄則です。

渡す際は、用途に合うサイズと形式で書き出しておくと、Figma上での扱いが軽くなります。透過が必要ならPNGやWebP、写真ならJPEGやWebP、と用途で選び分けましょう。

Illustratorとの使い分け

ロゴやアイコン、図形中心のバナーはIllustratorのほうが向きます。Photoshopで作った図形は拡大すると荒れますが、Illustratorのベクター図形は何倍に拡大しても鮮明なままです。文字を大きく見せるロゴなどは、特にIllustratorが適しています。

逆に、写真の質感を生かしたバナーはPhotoshopが得意です。両者を組み合わせ、図形はIllustrator、写真はPhotoshopで作って合体させる、という分業も実務ではよく行われます。詳しくはIllustratorの使い方を参照してください。

Web表示で差がつく画像の見せ方

加工技術が同じでも、画像の「見せ方」を工夫するだけでサイトの印象は大きく変わります。ここでは、Photoshopで仕上げた画像をWebでより効果的に見せるための考え方を紹介します。

余白とトリミングで印象を整える

同じ写真でも、トリミングの仕方で伝わる印象は変わります。主役を中央に置くか、あえて端に寄せて余白を生かすかで、落ち着きや動きの感じ方が変わります。Web上で使う枠のサイズに合わせ、最も伝わる構図を切り抜きツールで決めましょう。

余白を意図的に残すと、写真に文字を重ねるスペースが生まれ、バナーやメイン画像で扱いやすくなります。詰め込みすぎず、見せたい要素を絞ることが、洗練された印象につながります。

サイト全体でトーンをそろえる

1枚ずつは美しくても、ページ全体で見たときに写真の色みがバラバラだと、雑な印象を与えます。明るさや色温度をある程度そろえると、サイトに統一感が生まれます。調整レイヤーを使えば、複数の写真へ同じ補正を当てやすくなります。

特に商品一覧や実績ギャラリーのように写真が並ぶページでは、トーンの統一が信頼感を左右します。撮影環境が違う写真をそろえる作業は地味ですが、サイトの完成度を底上げする重要な工程です。

代替テキストと運用の視点

画像を実際に掲載する際は、内容を説明する代替テキスト（alt）を付けるのが基本です。これは画像が表示されない場合の説明になり、検索エンジンにも内容を伝えます。加工そのものではありませんが、Web制作では欠かせない運用上の配慮です。

こうした細部まで意識できると、単なる「画像加工担当」から一歩進んだ仕事ができます。Photoshopの操作と、Webでの見せ方・運用の知識を組み合わせることが、初心者から抜け出す近道です。

知っておくと安心なPhotoshopの基礎知識

操作とは別に、Photoshopを使ううえで知っておくと安心な前提知識があります。料金や動作環境、用語の違いなど、つまずきやすい点を最後にまとめておきます。

料金とプランの考え方

Photoshopは買い切りではなく、月額または年額のサブスクリプションで提供されています。写真向けにはPhotoshopとLightroomがセットになった比較的安価なプランもあり、Web制作の画像加工が主目的ならこれで足りる場合が多いです。料金は改定されることがあるため、契約前に公式の最新情報を確認しましょう。

IllustratorやほかのAdobe製品もまとめて使いたい場合は、全部入りのプランもあります。自分の作業範囲を見極め、必要なものだけ契約するのが無駄のない選び方です。学生・教職員向けの割引が用意されていることもあります。

動作環境とデータ管理

Photoshopは画像処理に一定のマシン性能を要します。動作が重いと感じたら、扱う画像サイズを見直すだけでも改善することがあります。作業ファイルはこまめに保存し、クラウドや外部ストレージにバックアップを取っておくと安心です。

制作データは案件ごとにフォルダを分け、元素材・作業用PSD・書き出し済み画像を整理しておくと、後から探す手間が減ります。地味ですが、こうしたデータ管理の習慣が、長く効率よく作業を続けるための土台になります。

よくある質問

Q1. Web制作にPhotoshopは必須ですか？

必須ではありませんが、写真を扱うなら持っておくと安心です。レイアウトはFigma、図形はIllustratorで代替できますが、写真の切り抜きや補正はPhotoshopが最も得意です。写真を一切使わないサイトなら、なくても進められます。

Q2. 無料で使えるソフトで代用できますか？

GIMPやPhotopeaなど、Photoshopに近い無料・低価格のツールもあります。基本的な切り抜きや補正なら十分代用できます。ただし操作感や最新機能、業務での互換性を考えると、実務に踏み込むならPhotoshopが無難です。まず無料ツールで感覚をつかむのも良い選択です。

Q3. CanvaとPhotoshopはどう違いますか？

Canvaはテンプレートを選んで手軽にデザインを作るツールで、初心者でもすぐ形になります。一方Photoshopは、写真の細かな加工や自由度の高い編集が強みです。手軽さならCanva、本格的な画像処理ならPhotoshop、と役割が異なります。Canvaの使い方も合わせて参考にしてください。

Q4. まず何から練習すればよいですか？

手持ちの写真を1枚用意し、「切り抜いて背景を透過する」「明るさと色を整える」「Web用に書き出す」の3工程を通しでやってみるのがおすすめです。この一連の流れを数枚分こなせば、実務の基本動作が身につきます。最初から複雑な合成を狙う必要はありません。

Q5. 切り抜きがうまくいかず輪郭がガタガタになります。

まず「被写体を選択」で大まかに選び、「選択とマスク」の境界線調整ブラシで輪郭をなぞってみてください。それでも荒い場合は、表示サイズに対して元画像の解像度が低い可能性があります。できるだけ高解像度の元画像を使うと、輪郭がなめらかになります。

Q6. 書き出した画像がサイトで重いと言われました。

表示サイズに対して画像が大きすぎるか、形式が適切でない可能性が高いです。表示サイズの2倍程度にリサイズし、写真はWebPかJPEGで品質を調整しながら100〜200KB以下を目指してください。透過が不要なのにPNGを使っていると重くなりがちです。

Q7. CMYKとRGBはどちらで作業すればよいですか？

Web制作ではRGBです。CMYKは印刷用のカラーモードで、Web表示では色が正しく出ません。新規作成時にカラーモードを確認し、RGBになっているかをチェックしましょう。印刷物のデータを流用する場合は、RGBに変換してから書き出します。

Q8. 一度に複数の画像を効率よく処理できますか？

同じ補正を多数の写真に適用するなら「アクション」と「バッチ処理」が便利です。一連の操作を記録し、フォルダ内の画像へ自動で適用できます。商品写真を大量に同じ明るさにそろえる、といった作業が一気に終わります。慣れてきたら活用しましょう。