• Home
  • About
  • Category
    • Simple
    • Stylish
    • Cute
    • wafuu
    • Illust
    • Pop
    • Other
  • Color
    • White
    • Black
    • Red
    • Orange
    • Blue
    • Yellow
    • Green
    • Purple
    • Brown
    • Pink
  • Xux Column

Copyright © 2026 Xux Webzine. All Rights Reserved.

コラム【DESIGN編】

Xux Column
Photoshopとは世界で最も有名な画像編集ソフトです。写真を加工・合成したり、美しいグラフィックを作ったりと本当に色々なことができます。「フォトショ」と略されることもよくあります。

フォトショップの基本操作

WEBデザインといえばPhotoshopはかかせません。

画像編集ソフトとしても、グラフィックツールとしても、多くのプロが愛用するPhotoshop。

充実した機能と公式サイトのバックアップ(解説動画・画像の提供)はもちろんこと、様々な方がチュートリアルや素材を公開している点も魅力ですね。

Photoshopを使うのであればぜひ知っておいて欲しい基本操作を紹介します。


Photoshopとは

Photoshopは世界で最も有名な画像編集ソフトです。

写真を加工・合成したり、美しいグラフィックを作ったりと本当に色々なことができます。「フォトショ」と略されることもよくあります。

精度が高く高機能な写真編集機能はもちろんのこと、イラストやデザイン作成にも多用されています。

写真家、グラフィックデザイナーなどの「画像のプロ」に愛されているほか、Web制作でも標準軌なツールとして使用されています。
WEB制作に関しては、下記のような場面で使用されることが多いです。

・サイト内で使用する画像の作成・調整
・バナーデザイン
・ワイヤーフレーム・デザインカンプの作成


フォトショップ説明画像

①メニューバー

新規ドキュメントを作成したり保存したり、カラーを変更したりワークスペースの基本のメニューがここにあります。主にショートカットで使用することが多いですが、設定されていないメニューもありますので使用頻度は高いです。
「新規のファイルを開く」「保存する」「自由変形:画像の形を変更する」「画像解像度:写真のサイズや解像度を変更する」「ウィンドウ:パネルウインドウの表示・非表示を選択」などが出来ます。

②ツールパネル

ワークスペース左側にまとめられているのがツールパネルです。
移動ツールや、選択ツール、修復ツールやスタンプツールなど、Photoshopで作業を行う上で重要な機能がまとめられている。

直接画像編集を行うツールのほかにも描画色、背景色を表示する部分や、クイックマスクや、ワークスペースの表示を切り替えることもできる。

ツールは特性ごとにまとめられており、各ツールアイコン上で右クリック、またはドラッグすることでまとめられたツールをタブ状に表示できる。

左上の >> または << をクリックすることで1列と2列の切り替えができる。

③オプションバー

ツールパネルから選択したメニューの細かな設定ができるのが特徴です。

ツールを使っていて「こういうことはできないのかな?」と疑問に思ったときには、このオプションバーを見てみると良いでしょう。

オプションバーで、使用中のツールの細かな設定ができます。

④ドキュメント

この部分をワークスペースという人もいますね。実際に製作をする「キャンバス」です。

Photoshopのドキュメントとは、例えるなら紙です。まずは、ドキュメントを作ることが始めの一歩。

複数のドキュメントが開いているときはタブの表示が右側に増えていきます。

⑤ドック

「ヒストリー」「属性」などといった、メニューバーの「表示」部分を補完するような部分で、パネル類をアイコン化しコンパクトに収納している部分です。使う人に応じて表示の追加削除ができます。

使用頻度がそんなに高くないけどたまに使うのよね…というツールを収納しておくことが多いです。なおドック上部の小さな矢印をクリックすると、収納されているパネル全てを一気に表示、非表示の切り替えができます。

⑥パネル

ここもドックと同じくメニューバーの「表示」部分を補完する部分ですが、ドックとは逆で「レイヤー」「カラー」など使用頻度の高いメニューの詳細を「常に表示しておく」部分です。特に「レイヤー」は使用頻度が非常に高いため、常時このパネル部分に置いておく人が多いです。

これもドックとは逆ですが、パネル上部の小さな矢印をクリックすると、収納されているパネル全てを一気に非表示、表示の切り替えができます。


他にもPhotoshopにはたくさんの機能がありますので、今後少しづつ紹介していきます。

Share This Post
Facebook Twitter Linkedin

Pickup Webdesign

おすすめのウェブデザインをご紹介します
no3(ナンバースリー NUMBER THREE)

no3

Other, Stylish 2026/04

ナンバースリー ナンバースリーホームページへようこそ。このサイトは、株式会社ナン…

See More Information
DoKomi - ドイツ最大の日本&アニメ博覧会

DoKomi

Blue, Pop 2026/03

ドイツ最大の日本&アニメ博覧会 今年も開催!ドイツ最大のアニメと日本エキスポ今年…

See More Information
RIP SLYMEのオフィシャルサイト

RIP SLYME

Orange, Other 2025/08

リップスライムのオフィシャルサイト 出演情報やイベント予定、リリース予定などの確…

See More Information
求ム。エンタメの開拓者。|株式会社コシダカホールディングス 採用サイト

コシダカ

Orange, Other 2026/05

株式会社コシダカホールディングス採用サイト 求ム。エンタメの開拓者。カラオケまね…

See More Information
シーベジスタンド | 昼はラーメン、夜は酒場にも。ぜんぶ、海藻。

シーベジスタンド

Green, Other 2026/05

昼はラーメン、夜は酒場にも。ぜんぶ、海藻。 シーベジスタンドは海藻の魅力を発信す…

See More Information
からだすこやか茶W+|製品情報|日本コカ・コーラ株式会社

からだすこやか茶W+

Other, Yellow 2026/01

日本コカ・コーラ株式会社 植物由来の食物繊維・難消化性デキストリンの働きにより、…

See More Information
コンタクトのハートアップ

ハートアップ

Simple, White 2026/01

コンタクトのハートアップト コンタクトレンズ専門店のハートアップは、専門スタッフ…

See More Information
TAIYO KIKAKU 「うちで噂のNEW CREATORS」

TAIYO KIKAKU

Other, White 2026/02

うちで噂のNEWCREATORS 若手クリエイターたちにまつわる数々の"噂"があ…

See More Information
宇都宮メディア・アーツ専門学校|栃木県でイラスト・デザインを学ぶ

メディア・アーツ

Orange, Pop 2026/01

宇都宮メディア・アーツ専門学校 栃木県にある宇都宮メディア・アーツ専門学校は、宇…

See More Information
大ピンチずかん | 小学館

大ピンチずかん

Illust, Pop 2025/12

小学館 ぜんぶそろえて大ピンチにそなえよう!! 大ベストセラー絵本『大ピンチずか…

See More Information
浜田雅功展「空を横切る飛行雲」

浜田雅功展

Black, Stylish 2025/12

空を横切る飛行雲 ダウンタウン浜田雅功による初の個展空を横切る飛行雲。美術界での…

See More Information
もりながこども園|宮崎県国富町のこども園

もりながこども園

Blue, Orange 2025/10

宮崎県国富町のこども園 宮崎県国富町の自然豊かな環境に位置するもりながこども園。…

See More Information

Pickup Column

おすすめのコラムをご紹介します
Google社内でも利用、2022年使いたいデザインツール世界1位の「Figma」とは?

コラム【DESIGN編】

Xux Column 2022/05

使いたいデザインツール世界1位のフィグマ フィグマとは、ブラウザ上で簡単にデザイ…

See More Information
コラム【生成AI編】Adobe Firefly(アドビ ファイアフライ)」とは

コラム【生成AI編】

Xux Column 2026/01

Adobe Firefly(アドビ ファイアフライ)」とは Adobe Fire…

See More Information
コラム【ノーコード編】Studioとは?

コラム【No-code編】

Xux Column 2026/07

Studioとは? HTML/CSSなどのコードを書くことなく、直感的なドラッグ…

See More Information

Follow Me