[保存版]ホームページの画像作成｜写真を使って画像を加工するテクニック

Webサイトなどをデザインする時、写真は欠かせない要素です。写真を使ってバナーやサムネイルなどの画像を作成する時のコツやノウハウを紹介します。いずれも汎用性のある基本的な手法なので、さまざまな画像作成に活用してみてください。

→ノーコードでWebデザインできるBiNDupを無料でトライアル

写真をトリミングするときの基本

条件によっては写真をそのまま使用することもありますが、多くの場合は用途に合わせてトリミング（切り取り）をします。

基本的には何が主体になるかによって、どうトリミングするかを判断します。背景を広く残すことで「余白」のある構図にしたり、人物などの被写体にクローズアップしたり、トリミングの仕方で写真の印象は大きく変わります。
また、テキストを乗せるのであれば、あらかじめテキスト用のスペースを確保するようにしましょう。

三分割法

写真の構図を決める時の手法としてよく使われているのが三分割法です。
画面を３×３のグリッドに分割した線や交点に合わせて被写体を配置します。この時、ガイドラインに正確に合わせる必要はありません。あくまで目安として使用することでバランスの良い構図を決めやすくなります。

三分割法の応用として、四分割を基準にすることもあります。
下記のような写真であれば、元の比率も良いですが、四分割に合わせてトリミングすると空の広大さを演出できます。

→ノーコードでWebデザインできるBiNDupを無料でトライアル

写真を加工するテクニック

色味やテクスチャなどの加工を施すことで、写真に質感をプラスします。

トーンを調整する

トーンが変わるだけでも、写真の印象は大きく変わります。
写真にもよりますが、オレンジ系など暖色よりのトーンに調整すると全体的に柔らかな印象になります。逆に青みがかった寒色よりのトーンにするとクールな印象になりやすいです。
また、彩度を落としたトーンはビンテージ風の印象になります。

暖色よりのトーン（左）・寒色寄りのトーン（中）・彩度低め（右）

最近の画像編集サービスには、こういったトーンを簡単に調整できるフィルター機能が搭載されていることも多いです。手軽に写真の雰囲気を変えられるので、適度に活用するといいでしょう。

独学で画像をレタッチ！SNSで映える写真の加工アプリと使い方

モノクロに加工する

カラー写真を白黒に変換すると引き締まった印象になります。

モノクロの場合でもカラーの時と同じで、トーンで印象が変わります。白黒のコントラストを変えてみたり、色味を変えてみたりして調整します。また２色使うツートーンにしてもいいでしょう。

コントラストを抑えてフラットに（左）・色味をプラス（中）・ツートーン（右）

テクスチャを加工する

よく使うテクスチャ加工の例です。

ノイズや粒子っぽい加工はフィルム風の質感を出したい時、少しレトロな雰囲気を演出したい時などに有効です。

パターンなどを重ねるのも面白い演出になります。

→ノーコードでWebデザインできるBiNDupを無料でトライアル

画像にテキストを乗せる

写真にテキストを重ねる時によく使う手法を紹介します。

文字色を工夫する

写真に入れるテキストの色は、写真の中の色をベースに調整すると馴染みやすくなります。

逆にテキストを目立たせたりインパクトを持たせたい時は、写真の色に対して補色や隣接捕色（補色に近い色）を使ったり、写真と文字色のコントラストの強くすることで目立たせます。

テキストの地にグレーを重ねる

写真に写っている色に差があることでテキストの可読性が落ちる時は、テキストを載せる場所だけに半透明の薄いグレーをグラデーションにして重ねます。この時、無彩色のニュートラルグレーではなく、少しだけ色味のあるグレーを使うと自然な感じに仕上がります。

半透明のグレーを乗せ、ブレンドモード（色の合成）の乗算で調整

テキストを囲む

写真の情報量が多かったりしてテキストを乗せにくい場合は、テキストをフレームで囲むとよいでしょう。

フレームの形もいろいろ試してみましょう

ぼかしを加える

テキスト自体を主役にしたい場合、写真全体をぼかして背景として使うこともあります。単純に背景色を敷くだけよりも雰囲気を演出できます。

→ノーコードでWebデザインできるBiNDupを無料でトライアル

画像を切り抜きする

画像は基本的に四角形で作成することが多いですが、形の制約がなければ切り抜きも活用できます。

図形で切り抜く

角を丸くしたり円形やさまざまな図形の形に写真を切り抜きます。ワンポイントとして使いやすい手法です。

被写体の形に切り抜く

被写体に合わせた形で切り抜いたものを大きさを変えたりランダムに配置したりすると、楽しげなイメージになります。

ノーコードでWebデザインできるCMS「BiNDup」には画像が編集できる機能も搭載しています。人気の素材サービスであるUnsplashやPIXTAの画像が使えるサービスとも連携しているのでぜひ試してみてください。

ホームページ作成サービスBiNDupを無料で使ってみるBiNDの制作事例を見る