フォトレタッチ Web制作|ホームページ制作用語

ホームページ（ウェブサイト）の制作や運用において、テキスト情報と同じくらい重要な役割を持つのが画像です。魅力的な写真や分かりやすい図版は、ユーザーの目を引き、事業の魅力を直感的に伝える力を持っています。こうしたWebコンテンツとしての画像を最適化し、より魅力的なものに仕上げるために用いられるのが、フォトレタッチソフトです。

フォトレタッチにおいて最も基本となる作業の一つが「トリミング」です。ただ不要な部分を切り取るだけでなく、ホームページ上のレイアウトに合わせて「アスペクト比（縦横比）」を意識することが求められます。近年はスマートフォンやパソコンなど多様なデバイスで閲覧されるため、「アスペクト比を指定してトリミング」を行い、どの画面サイズでも意図した通りに正しく画像が表示されるよう調整します。

また、Webデザインにおいて背景との調和を図る際に重要になるのが、「アルファ」や「アルファ効果」と呼ばれる画像の透過情報です。かつて普及していたフラッシュにおけるアルファ効果のように、現代のホームページ制作においても、要素のアルファ値の指定によって、重なり合う要素同士を美しく見せる多彩な視覚表現が可能になります。

これらの高度な画像処理を行う上で、業界標準となっているのが「Photoshop」です。Photoshopの細部を制御できる機能は非常に強力であり、ピクセル単位での緻密な色調補正や複雑な画像の透過情報処理も思いのままに行えます。

しかし、ホームページに画像を掲載する際、Photoshopの専用保存形式である「PSD」をそのままアップロードすることは推奨されません。PSD形式は編集作業のデータを保持するには最適ですが、Webブラウザでの表示においては汎用性の低いPSD形式であり、そのままでは直接画面に表示できないからです。SEOの観点からも、ページの表示速度を落とさないために、PSDからJPEGやPNG、WebPなど、用途に合わせた適切な画像フォーマットに書き出して軽量化する作業が必要になります。

ホームページの魅力を最大限に引き出すためのフォトレタッチの基本から、Photoshopを活用した実践的な画像処理の知識について詳しく解説します。

フォトレタッチ

フォトレタッチは、フォト（写真）データを修正・加工する作業を意味します。ノイズの除去や色調の補正、トリミング、フィルタリングなど、画像データを編集することを指します。ホームページ制作においては、ホームページで使用する画像を編集する場合を指します。

フォトレタッチとは、画像編集ソフトを用いて写真の見た目を調整・修正する作業ですが、具体的には画像に対して明るさ・コントラスト・色味の補正を行ったり、不要な物体の除去、肌の修正、背景の合成などを通じて調整します。近年ではAIを活用した自動レタッチ機能も普及してきました。

ホームページを制作する上で、撮影した写真をそのまま掲載することはあまりありません。明るさや色味を整えたり、レイアウトに合わせてサイズを変更したりと、フォトレタッチソフトを活用した事前の画像調整が仕上がりの品質を大きく左右します。

フォトレタッチソフト

現代ではOSに標準でフォトレタッチソフトがインストールされていたり、フリーウェアやスマートフォン端末でも良質のフォトレタッチアプリなどがあり、写真などの画像の加工は日常的になりました。トリミング時に縦横の比率を固定的に指定できたり、規定のフィルタをかけたりと簡単な操作で写真を加工することができます。

使用される代表的なフォトレタッチツールはAdobe Photoshopで、レイヤーやマスク、ブラシ、フィルター機能などがあります。ホームページ制作だけでなくWeb広告、商品写真、ECサイト用の画像など幅広い分野で活用されいます。

ホームページ制作・Webデザインの1ポイント

ホームページ制作において、設置画像の色調を補正したりフィルタリングすることで、Webデザインがガラッと変わることがよくあります。

一方でデザイン性は向上するものの、フィルタリングを多用すると臨場感が減少するケースもありますので、店舗等の雰囲気を伝える場合には、補正としてフォトレタッチを行う程度に留めたほうが良いかもしれません。

トリミング

トリミング（trimming）は、画像の加工において、選択範囲を切り取る機能です。画像の一部分を切り取ることを指します。

フォトレタッチの基本的な機能です。ホームページ制作においても画像加工の際に行います。WordPressでは画像アップロード後のトリミングも可能になりました。

CSS設定によって設置画像を部分的に見せることは可能ですが、ページのファイルサイズの軽量化やSEOの面からも可能な限りトリミングによって適切な画像を作成するに越したことはありません。

アスペクト比

アスペクト比とは、ホームページ制作における画像や描画画面の幅（横）と高さ（縦）の長さの比率で通常ピクセル単位で表現されます。

トリミングは、切り取り方によってはこのアスペクト比（幅と高さの比率）が変化してしまうため注意が必要です。

アスペクト比を指定してトリミング

写真画像においては、概ね4:3や3:2といった比率になっていますが、自由形式で曖昧にトリミングするとページの中で横に並べた時に縦幅が合わないといった現象が起こります。

フォトレタッチソフトによっては、トリミングのアスペクト比を指定して切り取り作業ができるようなものもあるため、設置画像のアスペクト比を統一する場合はそうした機能を利用すると便利です。

ホームページ制作の1ポイント

ホームページ制作の際に並べて画像を設置する場合、画像をトリミングしたものであれば、幅や高さが不揃いになることがあります。元の画像のサイズを統一するか、画像設置の際にwidth等を指定すると調整することができます。ホームページ制作時に幅や高さの指定をすると、レスポンシブ用のメディアクエリの影響で、他のデバイスではレイアウトが崩れたり、画像の並びが不揃いになることがありますので、なるべく元の画像を調整しましょう。

アルファ/アルファ効果

アルファ、アルファ値は、ウェブにおいて、指定要素の透明度、透過情報を意味します。ホームページ制作においては、ホームページに設置した画像の透明度や要素の色の透過度を指定します（オブジェクトの透明度）。マウスカーソルのホバーによって透明度を変えることによって画像リンクなどをわかりやすくする場合などに用いられます。

要素のアルファ値の指定

ホームページ制作における要素のアルファ値の指定は、CSSにおいて色をRGBaで指定したり（RGB）、opacityで指定します（0から1.0の間の値、1は不透明度100%）。なお、HEXでも指定可能です。opacityは画像にも適用できます。背景・背面に画像や白以外の色が指定されている場合は、透過率・透明度に応じて見えるようになります。

ホームページのCSS・スタイルシート編集方法

フラッシュにおけるアルファ効果

また、狭義のアルファ効果はフラッシュにおいてフェードインやフェードアウトなどの効果を実装するためにオブジェクトの透明度を変更することを指します。

画像の透過情報

なお、ホームページ制作において、使用する画像データが透過情報を持っていた場合（背景透明など）、その透過情報がページに反映されます。

つまり長方形の画像データであっても、背景が透明化されていれば、背景の上画像を載せたり画像を重ね合わせた時に透過設定されている部分は透けて表示されます。

この仕組みを持っている画像の形式は主にGIFとPNGです。jpegで設定した場合、透過部分に関しては白で表現され、ホームページ制作で使用した場合でも重ね合わせの際の透過は反映されません。

ホームページ制作・Webデザインの1ポイント

ホームページ制作においてアルファの使用は、例えば、画像リンクが施されている画像にマウスカーソルを乗せた時に、少し透明度を上げてリンクであることを知らせる場合などに行われます。

透明度の違う画像を二枚用意して入れ替えるという方法もありましたが、CSSの指定だけで透明度を変更できるため、ホームページ制作過程の手間の省略やページのファイルサイズ削減のために、こうした方法は、アルファ値の指定で実装されるようになりました。

Photoshop

Photoshop（フォトショップ）は、Adobe Systems社が開発した画像編集アプリケーションソフトです。ビットマップ（ラスター）画像の加工・合成・補正・制作を高精度に行えるツールです。写真の色調補正やレタッチ、背景の切り抜き、複数素材の合成、テキストや図形の挿入、デジタルペインティング、Web用のデザインモックアップなど用途は多岐にわたります。

Illustratorと同様にホームページ（ウェブサイト）の制作においては、Illustrator画像の加工をPhotoshopで行うことが多く見受けられますが、ウェブページに挿入する画像は、大きな印刷物などのようには高解像度が必要ではないため、ウェブ制作においては特に必要なソフトではありません。主に画像加工、イラストレーション、印刷の分野で使用される写真編集（フォトレタッチ）ソフトウェアです。

Photoshopはサブスクリプション形式のCreative Cloudで提供され、定期的な機能更新とクラウド連携を持ちます。似た用途の代替としてAffinity PhotoやGIMPもありますが、プラグイン互換性や業界での採用度、エコシステムの面でPhotoshopが依然として基準とされています。

Photoshopの細部を制御できる機能

レイヤーを使った非破壊的編集、マスクによる部分的な制御、調整レイヤーでの色調の段階的管理、レイヤースタイル（シャドウ／光沢など）の付与、フィルターによる表現の強化など細部を制御できる機能が豊富です。スマートオブジェクトを活用すると、元データを保持したまま拡大縮小やフィルター適用が可能で品質を保てます。選択範囲ツール（クイック選択、被写体選択、ペンツール）と組み合わせた高度な切り抜きや、コンテンツに応じた塗りつぶしによる不要物の除去も実務で多用されます。カラーマネジメント対応で印刷・Webそれぞれの出力に適した色調整が可能です。

汎用性の低いPSD形式

また、Photoshop独自のPSD形式などは汎用性が低いため、制作者同士の間のファイルの受け渡しには注意が必要です。

ファイル形式はPSD/PSB（レイヤー保持のネイティブ）、JPEG/PNG/WebP（出力用）、TIFF（高品質保存）、GIF（シンプルなアニメ）など用途に応じて使い分けます。作業効率のためにアクションやスクリプト、自動処理も活用できます。

ホームページ制作の1ポイント

画像の編集においても、印刷物であれば細かな点にまで補正が必要なケースも考えられますが、ホームページを表示するモニタで表現できる範囲はそれほどないため、印刷物ほど厳密に加工する必要はないと考えられます。画像ファイルサイズが大きいと、それだけサイトの表示速度に影響を与えるため、適切なサイズの画像を利用する必要があります。

PSD

PSD（Photoshop Document）は、Adobe Systems社のAdobe Photoshopで利用される画像ファイル形式で、Photoshopの標準ファイル形式です。レイヤー構造・テキスト・マスク・パス・チャンネルなどの編集情報を保持できる非破壊編集に最適な保存形式です。最大解像度やカラーモードも多様に設定できます。解像度において、高さと幅それぞれ最大30000pxに対応しています。ホームページ制作においてはPSD形式ファイルをそのまま用いることはありません。

PSDファイルの互換性

Adobeのソフトウェア間においては高い互換性と再編集性を備え、制作中の作業状態をそのまま保存・共有できます。デザイナー間の受け渡しや印刷入稿、Webデザインの元データ保管などで広く使われ、ファイルサイズは大きくなりがちですがその分柔軟な作業が可能です。

PSDファイルは複数のレイヤー、画像、オブジェクトを高解像度で保存できますが、Photoshop用のファイル形式のため、他のほとんどのソフトウェアでは、PSDファイルを開くことはできません。

汎用性が低いため、ホームページ制作（ウェブサイト制作）では、ファイルの受け渡し方法としては、あまりPSDは使用されません。一度、jpegなどに変換してからの受け渡しとなります。

ホームページ制作・Webデザインの1ポイント

ホームページ制作において、画像関連は、それぞれ画像加工に関するソフトウェアを利用しますが、使用するソフトウェアやそのバージョンの違いで、ファイルの受け渡し時の互換性の問題が生じます。

カテゴリ別 Web制作/ホームページ制作用語集

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ