フリーランスのWebデザイン案件で、Photoshopは画像編集からバナー制作まで7つの基本操作で実務対応できます。Adobe公式ヘルプでも、Webグラフィック制作における設定手順と書き出し方法が体系化されています。この記事では初期設定から書き出し、案件直結の実務ハックまで解説します。
▶ 3日で初案件PR
この記事でわかること
「px設定→レイヤー管理→書き出し」の4段階で、バナーからLP制作まで実務対応できます。PhotoshopとFigmaを工程別に使い分けることで、制作スピードが上がります。初期設定5分＋バナー試作30分で、フリーランス案件に即日対応できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
フリーランスがPhotoshopでWebデザイン案件を受けるには、「px設定→ガイド設定→レイヤー管理→書き出し」という4段階のワークフローを身につければ、バナーからLPのパーツ制作まで対応できます。ツールの全機能を覚える前に、この4段階を実務で繰り返すことが最短ルートです。学習に数か月かけるよりも、実際の架空案件を1本仕上げる方が習得速度は上がります。
今日やるべき1つ
Photoshopを開いて新規ドキュメントを「Web」プリセットで作成し、単位をpxに変更してガイドを1本引く（所要時間：15分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 初期設定がまだ済んでいない | Photoshop Webデザインの初期設定は4項目 | 10分 |
| バナーを初めて作りたい | PhotoshopバナーはWeb用設定から開始 | 15分 |
| LP制作の進め方を知りたい | Photoshop LP制作は3工程で完成 | 15分 |
| 書き出し方法で詰まっている | Photoshopの書き出しはWeb用保存を使う | 10分 |
| Figmaとどちらを使うか迷っている | PhotoshopとFigmaは用途で使い分ける | 10分 |
| 実務効率を今すぐ上げたい | Photoshop Webデザインは7操作で実務対応 | 20分 |
Photoshop Webデザインの初期設定は4項目
Web制作で最初に変えるべき設定は4項目だけです。Photoshopの設定画面は項目数が多く見えますが、実務に直結する箇所は限られています。この4項目を済ませるだけで、コーダーへの引き渡しで発生しがちなトラブルをほぼゼロにできます。
単位はpxに変更が必須
Photoshopのデフォルト単位はcmやmmになっているケースがあります。Webデザインではすべての寸法をpxで管理するのが大前提です。変更手順は「Photoshop→環境設定→単位・定規」から定規の単位を「ピクセル」に変更するだけです。この設定を変えないでいると、ガイドや整列機能の数値がpxで表示されず、コーダーへの仕様共有時に齟齬が生じます。この1手間が後工程のコスト削減に直結します。
Adobe Photoshop 公式ヘルプ：Webグラフィックでは、Web制作においてピクセル単位での作業が推奨されています。
新規ドキュメントはWebプリセットから作成
新規ドキュメント作成時は「新規作成」ダイアログの「Web」タブを選ぶことで、解像度72ppi・カラーモードRGB・pxの3点が自動で設定されます。印刷用プリセット（解像度300dpi・カラーモードCMYK）で作り始めてしまうと、後から変換した際に色調が変わり修正コストが発生します。最初のドキュメント設定で1分かけるだけで、後工程の30分以上のリカバリ作業を防げます。
ガイドとグリッドでレイアウト基準を固定
バナーやLPを作り始める前にガイドとグリッドを設定しておくと、制作時間が短縮されます。ガイドの引き方は定規（Command/Ctrl+R）を表示した状態でキャンバスにドラッグするだけです。グリッドは「環境設定→ガイド・グリッド・スライス」から間隔と分割数を設定します。ガイドなしで目視でレイアウトを合わせると、ピクセル単位のズレが積み重なりコーダーへの引き渡し時に修正依頼が増えます。事前に基準を固定する5分が、制作後半の確認作業を大幅に短縮します。
カラープロファイルはsRGBで統一
Webデザインのカラープロファイルは、sRGB IEC61966-2.1を選ぶのが基本です。新規ドキュメントでWebプリセットを選ぶと自動でsRGBになりますが、既存PSDを流用する場合は「編集→カラー設定」で確認してください。Adobe RGBやDisplay P3のまま納品すると、ブラウザ表示時に色が変わって見えるケースがあります。プロジェクト開始時にカラープロファイルを確認する習慣をつけることで、「デザインと実装の色が違う」というトラブルをゼロにできます。
なお、画像圧縮で画質を落とさない方法でも解説しているように、書き出し時の設定ミスは後から取り返しがつかないため、制作前の環境整備が重要です。
CHECK
▶ 今すぐやること：Photoshopを開いて「環境設定→単位・定規」を確認し、ピクセル以外になっていれば変更する（5分）
Q：WebデザインでPhotoshopの解像度は何dpiにすればよいですか？
A：Web用途では72ppiが標準です。新規ドキュメントで「Web」プリセットを選ぶと自動で設定されます（Adobe Photoshop 公式ヘルプ）。
Q：単位の変更はプロジェクトごとに必要ですか？
A：環境設定の変更はPhotoshop全体に反映されるため、一度設定すれば以降のプロジェクトでも引き継がれます。ただし新規ドキュメント作成時のプリセット選択は毎回確認してください。
PhotoshopとFigmaは用途で使い分ける
フリーランス案件の実態として、両方使えることが求められるケースは珍しくありません。「どちらか一方を選ぶ」という発想を捨て、工程ごとに担当ツールを割り振ることが制作効率を上げる最短ルートです。
Photoshopは画像編集・加工で優位
Photoshopが他ツールに対して明確な優位性を持つのは、写真加工・レタッチ・切り抜き・合成といった「画像ピクセル編集」の領域です。人物写真の背景除去、色調補正、複数画像の合成はPhotoshopが得意とする高精度な作業です。バナーや広告クリエイティブ、メインビジュアルの制作では、この画像編集力が直接クオリティに影響します。「写真が入る制作物はPhotoshop」と覚えておくだけで、ツール選択の迷いがなくなります。
FigmaはUI設計・プロトタイプで優位
Figmaはブラウザベースで動作し、複数人でのリアルタイム共同編集、コンポーネント管理、プロトタイプ作成に強みがあります。Webサイト全体のワイヤーフレームやUIデザインカンプを作るフェーズでは、Figmaの方が効率的です。クライアントへのデザイン共有もURLを送るだけで完了するため、フリーランスとしての提案効率も上がります。
フリーランス案件での現実的な使い分け
Figmaで画面設計をして、Photoshopで写真や画像素材を加工し、コーダーに渡すワークフローが主流です。どちらか一方だけで完結させようとすると、作業効率が下がる工程が必ず出てきます。まずPhotoshopで画像編集の基礎を固め、その後Figmaのレイアウト機能を学ぶ順序が、フリーランス案件に最短で対応するルートです。
Webデザインを副業で始めたフリーランスデザイナーは、「写真加工はPhotoshop、レイアウトはFigmaに分けて使うようにしてから制作スピードが上がった」と語っています（Webデザインを副業に！Photoshop・Illustratorの活かし方と提案術）。
フリーランスのWebデザイナーの仕事内容や独立に必要なステップでも解説しているように、ツールの選択と使い分けはデザイナーとしての生産性を左右する重要な判断です。
CHECK
▶ 今すぐやること：直近の案件または練習制作を1つ選び、「画像加工はPhotoshop・レイアウトはFigma」に担当を振り分ける（10分）
Q：PhotoshopとIllustratorの使い分けはどう考えればよいですか？
A：Photoshopはピクセル（ラスター）画像の編集、Illustratorはベクターデータの作成が得意です。ロゴやアイコンはIllustrator、写真を使ったバナーや画像合成はPhotoshopが適しています。
Q：初心者はPhotoshopとFigmaどちらから始めるべきですか？
A：フリーランスとして案件を取ることが目的であれば、Photoshopから始めてください。画像編集のスキルはほぼすべてのWeb案件で使う機会があります。
PhotoshopバナーはWeb用設定から開始
バナー制作で最初につまずくのは「どのサイズで作ればいいかわからない」という点です。仕様書がない段階でも、Web用設定から始めれば修正コストを最小化できます。
バナーサイズはクライアント仕様を最初に確認
バナーのカンバスサイズは、クライアントから指定されたサイズを正確に確認することが最優先です。指定がない場合によく使われる標準サイズとして、728×90px（レクタングル大）、300×250px（ミディアムレクタングル）、160×600px（ワイドスカイスクレイパー）があります。カンバスサイズを先に固定することで、テキストと画像の配置設計がブレなくなります。サイズ確認を怠ってあとから「サイズが違った」となると、レイアウト全体の再設計が必要になるため、最初の5分で必ず確認してください。
バナーの構成は文字・画像・背景の3層で考える
バナー制作は「背景→画像素材→テキスト」の順でレイヤーを積み上げていくと整理しやすくなります。背景レイヤー・画像レイヤー・テキストレイヤーを分けて管理することで、後からの修正対応が格段に早くなります。すべての要素を1レイヤーにまとめてしまうと、文字の位置を数px調整するだけでも全要素の再配置が必要になります。フリーランスではクライアントからの修正が複数回入るのが普通なので、3層構造は必須の習慣です。
画像トリミング無料サイト7選でも解説しているように、画像の切り出しや整形作業はPhotoshopで事前に完結させてからバナーカンバスに配置するのが効率的です。
テキストレイヤーはフォント・サイズ・カーニングまで設定
バナーのテキストは視認性を確保するためにフォントサイズを最低14px以上に設定するのが基本です。フォントの選択はWebフォント（Google Fontsやシステムフォント）と整合性を持たせることで、実装担当者との認識ズレを防げます。カーニング（文字間）は「オプティカル」設定を使うと日本語フォントでも自然な間隔になります。テキストの調整は段落パネルの一括設定が実務では現実的です。
CHECK
▶ 今すぐやること：300×250pxのカンバスを作成し、背景・画像・テキストの3レイヤー構成でバナーを1本試作する（20分）
Q：バナー制作で文字がぼやけて表示されるのはなぜですか？
A：フォントレイヤーのアンチエイリアスが「シャープ」または「クリア」以外になっているケースが多いです。テキストツールのオプションバーで「シャープ」を選ぶと解消します。
Q：バナーに使う写真素材はPhotoshop内で調整すべきですか？
A：はい、色調補正・切り抜き・明るさの調整はPhotoshopで完結させてからバナーカンバスに配置するのが効率的です。
PhotoshopのWebデザイン向きかを3分で診断
自分がPhotoshopで対応すべき案件なのか、それとも別のツールが向いているかを以下の質問で確認できます。「どのツールを使うか」の判断に迷いがある方は、3分で整理できます。
Q1：制作物に写真の加工・切り抜き・合成が含まれますか？
含まれる → Q2へ。含まれない → Q3へ。
Q2：制作物はバナー・広告クリエイティブ・メインビジュアルですか？
Yesの場合はResult A：PhotoshopがメインツールでOKです。Noの場合はResult B：PhotoshopとFigmaの併用を検討してください。
Q3：制作物はWebサイト全体の画面設計またはプロトタイプですか？
Yesの場合はResult C：FigmaまたはXDが中心ツールとして適しています。Noの場合はResult D：制作物の要件を再確認し、クライアントに仕様書を要求してください。
Result A：写真加工が中心のバナー・ビジュアル制作
Photoshop一択です。まず本記事の「初期設定4項目」を済ませ、バナー制作の3層構成を試してください。
Result B：画像編集と画面設計が混在する案件
Photoshopで画像パーツを制作し、Figmaでレイアウトにはめてからコーダーへのデータを渡すワークフローが実務標準です。
Result C：UI設計・プロトタイプ中心の案件
Figmaをメインツールとして、Photoshopは素材加工の補助として使う位置づけになります。画像が必要なタイミングでPhotoshopを使えば十分です。
Result D：案件仕様が不明確なケース
クライアントに制作物の一覧と使用用途を確認することが先決です。仕様確認なしに着手すると、ツール選択の誤りよりも「認識ズレによる手戻り」の方がリスクになります。
CHECK
▶ 今すぐやること：直近の案件または練習制作に対してQ1から診断を実施し、使用ツールを1つ決定する（3分）
Q：PhotoshopとXDの使い分けはどう考えればよいですか？
A：XD（Adobe XD）はUI設計とプロトタイプに特化したツールです。Webサイト全体のワイヤーや画面遷移を設計する場合はXDまたはFigma、写真や画像を使った制作物はPhotoshopを選ぶのが基本的な使い分けです。
Q：フリーランス案件でPhotoshopのスキルはどうアピールすればよいですか？
A：ポートフォリオに「バナー制作・画像合成・メインビジュアル作成」の成果物を掲載し、使用ツールとしてPhotoshopを明記するのが最短のアピール方法です。スキルシートに「写真切り抜き・色調補正・バナー制作経験あり」と具体的に記載すると、発注者が判断しやすくなります。
PR提供: 日本デザインスクール（デザスク）
Photoshop LP制作は3工程で完成
LP（ランディングページ）のデザインカンプをPhotoshopで作る際、全体を一気に作ろうとして途中で詰まるケースは珍しくありません。3工程に分けて進めることで、修正にも強い制作フローが作れます。
工程1：ファーストビューのビジュアルを優先
LP制作の最初の30分は、ファーストビュー（画面を開いたときに最初に見える領域）に集中してください。ファーストビューに含める要素は、メインビジュアル・キャッチコピー・CTAボタンの3点です。この3点の配置とビジュアルのクオリティが、LPの訴求力の大部分を決めます。コンテンツ幅は1200pxまたは1440pxのカンバス幅で作り、中央900〜1000px内にメインコンテンツを配置するのが標準です。
工程2：セクションをレイヤーグループで管理
LPはページが長くなるため、セクションごとにレイヤーグループを作って管理することが必須です。「01_FV（ファーストビュー）」「02_問題提起」「03_解決策」「04_CTA」のように番号付きで命名しておくと、修正対応時に該当セクションをすぐ特定できます。レイヤーグループを使わずに作業すると、100枚を超えるレイヤーが並列に並んで収拾がつかなくなります。フリーランスでは修正対応のスピードがクライアント満足度に直結するため、この構造設計は手を抜かないでください。
Webデザインを本格的に始めたあるフリーランスデザイナーは、「最初はレイヤーを整理せずに作っていたため、修正のたびに全体を見直す必要があって時間がかかった」と語っています（いちからはじめるWebデザイナーのためのPhotoshop入門）。
工程3：テキストと余白の一貫性を確認
LPの品質は、フォントサイズ・行間・セクション間の余白が一貫しているかどうかで大きく変わります。見出しは26〜32px、本文は14〜16px、セクション間の余白は80〜120pxを目安に設定することで、読みやすさと視覚的なリズムが確保されます。確認方法は、完成したPSDを50%表示で全体を眺めることです。テキストの大きさが揃っていない、余白がばらばらに見えるようなら修正してください。
CHECK
▶ 今すぐやること：架空のLPを1ページ設計し、ファーストビュー（メインビジュアル・キャッチコピー・CTAボタン）を30分で作ってみる
Q：LPのカンバス幅は何pxで作るのが標準ですか？
A：LP制作では1200pxまたは1440pxのカンバス幅が一般的です。コンテンツ幅は900〜1000pxに収めて左右に余白を設けるレイアウトが実務で多く使われています。
Q：LPをPhotoshopで作ったあと、コーダーへの渡し方はどうすればよいですか？
A：レイヤーが整理されたPSDファイルと、書き出した画像素材（JPG・PNG）をセットで渡すのが基本です。フォントやカラーコード、余白の数値をメモにまとめて添付すると、コーダーからの確認依頼が減ります。
Photoshopの書き出しはWeb用保存を使う
書き出し方法を間違えると、ファイルサイズが大きくなったり透過が消えてしまうことがあります。用途に合った書き出し方法を1回覚えるだけで、この問題は完全に防げます。
Web用に保存はJPGとPNGを使い分ける
Photoshopでの書き出しは「ファイル→書き出し→Web用に保存（従来）」が基本です。JPGは写真・背景画像の書き出しに使い、品質60〜80%を選ぶとファイルサイズと画質のバランスが良くなります。PNGは透過が必要なアイコン・ボタン・ロゴなど、背景を透明にしたいパーツに使います。PNG-24を選ぶと透過が保持されます。透過が必要なパーツをJPGで書き出すと白背景が付いてしまい、コーダーへの差し戻しが発生するため、用途に応じた使い分けは徹底してください。
スライスを使って複数パーツを一括書き出し
LPやバナーで複数のパーツを個別ファイルとして書き出す場合は、スライスツールを使うと効率的です。スライスツール（ツールバーから選択）でパーツを囲み、「Web用に保存」でスライス一括書き出しを実行すると、選択した領域をそれぞれ独立したファイルとして出力できます。毎回「選択→切り取り→保存」の手順を繰り返す方法は、パーツが10個以上になると作業時間が大幅に増加します。
書き出し前のレイヤー整理が品質を決める
書き出しの品質は、書き出し設定ではなくレイヤーの状態で決まります。不要なレイヤーを非表示ではなく削除する、テキストレイヤーを必要な箇所以外はラスタライズしない、グループ名を英数字で命名するという3点を書き出し前に実施してください。書き出し後に「表示してはいけないガイドが画像に入っていた」「非表示にしていたはずのレイヤーが出力された」というミスは、この整理を省略したときに起きます。
書き出し後のファイルサイズが大きすぎる場合は、TinyPNGのような圧縮ツールを活用する方法が一般的です。
CHECK
▶ 今すぐやること：作業中のPSDファイルを「Web用に保存」から書き出し、JPGとPNGの違いをファイルサイズで比較する（10分）
Q：書き出した画像のファイルサイズが大きすぎる場合はどう対処しますか？
A：JPGの場合は品質設定を60〜70%に下げてください。PNGの場合はPNG-8（256色）に変更するか、TinyPNGのような圧縮ツールを使う方法が一般的です。
Q：PhotoshopでSVGは書き出せますか？
A：Photoshopはシェイプレイヤーに限りSVG書き出しに対応していますが、複雑なデザインへの対応精度はIllustratorに劣ります。ロゴやアイコンのSVG書き出しが必要な場合はIllustratorを使う方が確実です。
Photoshop Webデザインは7操作で実務対応
【対象】：クライアント案件でPhotoshopのPSDを納品することになった、または修正対応に時間がかかっていると感じているフリーランス
【手順】：PSDファイルの命名は「案件名_制作物_バージョン（例：clientA_banner_v01）」の形式に統一します（5分）。次に、レイヤーグループを「01_背景」「02_画像」「03_テキスト」のように番号付きで命名します（10分）。完成後は「別名で保存」で最終バージョンを保存し、作業用バックアップを別フォルダに移動します（5分）。
【コツと理由】：クライアント修正は制作完了の2〜3日後に来ることが多く、自分でも「どのレイヤーが何か」を見失っている状態になっています。命名ルールを最初に1分かけて決めておくだけで、この問題は発生しません。「ファイルを開いた瞬間に構造が見える」状態にしておくことで修正対応時間を大幅に短縮できます。
【注意点】：日本語でレイヤー名を付けるのは避けてください。コーダーやチームで共有する際に文字化けが発生するケースがあります。レイヤー名は英数字とアンダースコアのみで統一してください。
ハック2：ファーストビューを30分で完成させる
【対象】：LP制作の着手方法がわからず、全体を計画してから作り始めようとして手が止まるフリーランス
【手順】：クライアントのヒアリング内容からキャッチコピー（20文字以内）を1つ決めます（10分）。次に1200×800pxのカンバスにキャッチコピー・サブコピー・CTAボタンの3点を配置します（15分）。クライアントにファーストビューのみをJPGで仮共有し、方向性の確認を取ります（5分）。
【コツと理由】：LP制作においてクライアントが最も明確な意見を持っているのはファーストビューです。ここで認識を合わせると後続セクションの方向性が自動的に決まります。全体を完成させてから見せると、ファーストビューの修正で全体のレイアウトが崩れるリスクが高くなります。「まずファーストビューだけ作ってフィードバックをもらう」方が最終的な修正回数が少なくなります。
【注意点】：ファーストビューの仮共有は「完成品ではない」ことを必ず明記してください。「たたき台として共有します」という一文を添えないと、クライアントが完成品として受け取るケースがあります。
ハック3：スマートガイドで配置時間を削減
【対象】：バナーやLPで要素の位置合わせに時間をかけているフリーランス
【手順】：「表示→スマートガイドを表示」をオンにします（1分）。要素をドラッグして移動すると、他の要素や中心線に対して自動でスナップする動作を確認します（5分）。整列が必要な複数要素はCommand/Ctrl+Aで全選択後、オプションバーの整列ボタンで一括整列します（5分）。
【コツと理由】：「ガイドを何本も引いてから手動で位置を合わせる」方法では、要素を移動するたびにガイドを消して引き直す作業が発生します。スマートガイドを使うと、ドラッグ中に自動で吸着するため、ガイドを事前に引く必要がなくなります。1バナーあたりの配置確認時間が短縮され、1日に複数バナーを作る案件では制作時間の節約につながります。
【注意点】：スマートガイドが有効な状態でピクセル単位の細かい位置調整をする際は、意図しない吸着が起きることがあります。微調整が必要な場合はCommand/Ctrl+Hでガイドを非表示にした状態で矢印キーを使って1pxずつ調整してください。
ハック4：調整レイヤーで後から色変えができる構造を作る
【対象】：バナーやメインビジュアルの色調補正後に「やっぱり色を変えたい」という修正依頼が来て、作業をやり直した経験があるフリーランス
【手順】：色調補正は画像に直接適用せず、「レイヤー→新規調整レイヤー→明るさ・コントラスト（またはカラーバランス）」から調整レイヤーを作成します（3分）。調整レイヤーを対象の画像レイヤーにクリッピングマスクで適用します（Option/Alt+クリック、2分）。修正依頼が来た際は、調整レイヤーのプロパティパネルで数値を変更するだけで色変えが完了します（1分）。
【コツと理由】：画像に直接フィルター補正をかけると、一度補正をかけた後に元の画像に戻せなくなります。調整レイヤーを使うと、補正の数値を何度でも変更できる状態を保てます。フリーランスでは色の修正依頼は制作後に必ず来ると考えておくべきで、修正のたびに同じ工程を繰り返すコストは1案件あたり30〜60分の損失になります。
【注意点】：調整レイヤーのクリッピングマスクを設定し忘れると、下にあるすべてのレイヤーに補正が適用されてしまいます。レイヤーパネルで調整レイヤーに矢印マークが付いていることを必ず確認してください。
ハック5：1時間の模写で操作速度を上げる
【対象】：Photoshopの基本操作は覚えたが、実際の制作スピードが上がらないと感じているフリーランス
【手順】：参考にしたいWebサイトのスクリーンショットを撮り、Photoshopに配置します（5分）。スクリーンショットを最下層のレイヤーに置き、その上に新規レイヤーを追加してパーツを1つずつ再現します（40分）。完成後にスクリーンショットを非表示にして自分の再現と比較し、ズレている箇所を特定して修正します（15分）。
【コツと理由】：「参考サイトを見てからゼロで作る」方法では、「何が分からないか」が特定できないまま時間が過ぎます。模写では「どの操作で同じ見た目が作れるか」を実際に手を動かして発見するため、習得できる操作数が増えます。同じ時間を動画講座の視聴に使うよりも、模写1本の方が実務で使える操作が身につくスピードが上がります。
【注意点】：模写に使うサイトは著作権の問題があるため個人練習のみにとどめてください。ポートフォリオへの掲載やクライアントへの提出物としての使用は禁止です。
ハック6：主要ショートカット5つで制作時間を削減
【対象】：ツールバーをマウスで毎回クリックしており、制作に1時間以上かかると感じているフリーランス
【手順】：使用頻度の高い5つのショートカット（V：移動ツール、B：ブラシ、T：文字ツール、Cmd/Ctrl+Z：取り消し、Cmd/Ctrl+S：保存）を今日中に覚えます（10分）。制作中、ツールバーへのマウス移動が生じたらショートカットで代替します（最初の3日間）。1週間後に「編集→キーボードショートカット」から自分がよく使うツールのキーをカスタマイズします（10分）。
【コツと理由】：5つを完全に体に染み込ませるのに必要な期間は3〜5日で、その後は制作中に自然と使うようになります。すべてのショートカットを一気に覚えようとすると途中で断念するリスクが高くなります。「5つ先にマスターし、使いながら1つずつ追加していく」方が習得率が高くなります。
【注意点】：ショートカットの練習中に誤操作で作業データを消してしまうケースがあります。練習中は必ず「別名で保存」で作業ファイルのバックアップを取る習慣をつけてください。Cmd/Ctrl+Zの取り消しは最大50ステップが目安ですが、環境設定の「パフォーマンス」タブから変更できます。
ハック7：スライスで書き出し時間を短縮
【対象】：LPやバナーの複数パーツを手作業で1つずつ切り出して保存しており、書き出しに30分以上かかっているフリーランス
【手順】：ツールバーからスライスツール（切り取りツールの長押しから選択）を選択します（1分）。書き出したいパーツを囲むようにドラッグしてスライスを作成します（10分）。「ファイル→書き出し→Web用に保存（従来）」から「すべてのスライス」を選択して一括書き出しを実行します（5分）。
【コツと理由】：「手動で選択→コピー→新規ファイルに貼り付け→保存」を繰り返す方法は、パーツが10個以上になると作業時間が大幅に増加します。スライスを使った一括書き出しでは同じ作業が短時間で完了します。案件数が増えるほど効果が大きくなります。
【注意点】：スライスで自動生成される「auto-スライス」は不要な領域も書き出してしまいます。「スライスから作成→レイヤーベースのスライス」を使うと、レイヤーの境界に沿った正確なスライスが自動生成されるため、余計なファイルが出ません。
CHECK
▶ 今すぐやること：ハック3（スマートガイド）とハック7（スライス）を今日の作業に取り入れ、配置と書き出しの時間を計測して比較する（30分）
Q：PhotoshopのショートカットはWindowsとMacで違いますか？
A：基本的な操作は、MacのCommandキーをWindowsのCtrlキーに、MacのOptionキーをAltキーに置き換えると対応します。ToolTipsの表示を有効にすると、ツールにカーソルを合わせたときにショートカットが表示されます。
Q：調整レイヤーとフィルターはどちらを使えばよいですか？
A：後から変更の可能性がある色調補正は調整レイヤー、完成品として固定する特殊効果（ノイズ・シャープ等）はフィルターを使うのが基本的な使い分けです。フリーランスの案件では修正が前提なので、調整レイヤーを優先してください。
Photoshop Webデザインを4段階で実務対応する
フリーランスのWebデザイン案件でPhotoshopを使うには、「px設定→ガイド設定→レイヤー管理→書き出し」の4段階が最低限の基礎です。この4段階を実際の案件または架空案件で1本完成させると、座学よりも操作が定着します。ツールの全機能を覚える必要はなく、本記事で解説した7つの操作領域から自分の案件に関係する部分から始めれば十分です。
今すぐ取り組むべきことは1つです。本記事の「初期設定4項目」を今日中に完了させてください。設定が済んだら、300×250pxのバナーを1本だけ試作することで、操作の感覚が一気に身につきます。架空案件でも構いません。手を動かした分だけスキルになります。
作業効率上げる方法でも解説しているように、ツールの習熟はルーティンの仕組み化が最も効果的です。Photoshopも「毎日1本バナーを作る」習慣をつけるだけで、1か月後には操作スピードが大幅に上がります。
| 状況 | 次の一歩 | 所要時間 |
| Photoshopをまだ開いていない | 環境設定でpx単位を確認・変更する | 5分 |
| 設定は済んだが制作経験がない | 300×250pxのバナーを1本試作する | 30分 |
| バナーは作れるがLPが不安 | 架空LPのファーストビューを1画面だけ作る | 45分 |
| LPも作れるが書き出しで詰まる | Web用保存でJPGとPNGの両方を書き出して比較する | 15分 |
| ツールは使えるが案件が取れない | ポートフォリオにPhotoshop制作物を3点追加する | 60分 |
Photoshop Webデザイン使い方に関するよくある質問
Q：WebデザインでPhotoshopは今でも必要ですか？FigmaだけでOKですか？
A：写真の切り抜き・色調補正・合成が必要なバナーやメインビジュアル制作では、Photoshopは今でも実務の中心ツールです。Figmaだけでは対応できない画像編集作業が案件の中に含まれるケースが多いため、フリーランスであればPhotoshopの基礎操作は身につけておいてください（Adobe Photoshop 公式ヘルプ：Webグラフィック）。
Q：Photoshopの学習に必要な時間はどのくらいですか？
A：バナー制作ができるレベルまでは20〜30時間の実践練習で到達できます。毎日1時間の模写練習を1か月続けると、フリーランス案件で実務対応できる水準に近づきます。機能の全体把握よりも、実際の制作を通じた操作習熟を優先してください。
Q：Photoshopはサブスクリプションのみですか？買い切りはないですか？
A：2024年時点でPhotoshopは単体プランまたはCreative Cloudコンプリートプランのサブスクリプションのみの提供です。最新の料金はAdobe Creative Cloudでご確認ください。
【出典・参照元】
Adobe Photoshop 公式ヘルプ：Webグラフィック – Webグラフィック制作における設定・書き出し手順
Adobe Creative Cloud – Photoshopを含むCreative Cloudのプラン・料金情報
いちからはじめるWebデザイナーのためのPhotoshop入門 – WebデザイナーによるPhotoshop実務経験談
Webデザインを副業に！Photoshop・Illustratorの活かし方と提案術 – フリーランスWebデザイナーのツール活用体験談
TinyPNG – PNG・JPG画像の圧縮ツール