今日は写真を使ったWEBデザインを紹介していくよ！
写真をデザインに使うときってどんな時なの？
情報を視覚的に伝えるときに「写真」を使うよ。
【WEBデザイン】一目で伝わる写真を使ったデザイン
写真には文字だけでは伝わらないことを視覚的に伝える働きがあります。
写真をデザインに加えることによって以下のような効果があります。
- 化粧品や食べ物など実際に使用イメージを伝えたい時に使用すると購買意欲が高まる
- 旅行先などの美しい景色を見せることで行ってみたいと思わせる
- 食べ物のシズル感を伝えることで食べたいと思わせる
- 商品の世界観を伝えることができイメージさせることができる
化粧品や食べ物など実際に使用イメージを伝えたい時に使用すると購買意欲が高まる
- 写真のイメージから髪の毛がサラサラになるイメージを与えることができる
- 植物の画像を入れることでナチュラル感や世界観を伝えることができる
旅行先などの美しい景色を見せることで行ってみたいと思わせる
- 美しい景色を入れることでそこへ行った自分をイメージできる
- 景色や雰囲気を出すことでそこへ行ってみたいと思わせる
食べ物のシズル感を伝えることで食べたいと思わせる
- 被写体をクローズアップすることにより「美味しそうなイメージ」が強調される
- どんな商品か視覚的に伝わりやすいので購買意欲が高まる
商品の世界観を伝えることができイメージさせることができる
- 空間をつくることで、ストーリー性を感じることができる構図になる
- 商品と同時に世界観をアピールできる
写真をつかったレイアウト
バナーなどを作る際に写真とイラストをどう配置するかで見た人の印象が変わります。
どう伝えたいのかを意識して作成するようにしましょう。
下記は写真を使用したバナーレイアウトの例です。
- セパレートレイアウト
- 全面レイアウト
- ラインナップレイアウト
セパレートレイアウト
- テキストと写真を分けることでそれぞれの要素が際立つ
- 情報がまとめられているので伝わりやすい
テキストと写真を分けることによって、それぞれの要素が邪魔をせずに情報が伝わりやすくなります。
以下のように斜めに分割するタイプを多く見られます。
全面レイアウト
- 写真を大きく使用することで食べ物のシズル感を伝えることができる
- 画像をメインにすることで見た人にインパクトを与えることができる
写真をメインにするときはテキスト要素を少なめにすると画像が際立ちます。
景色を強調したい旅行バナーなどにもおすすめのレイアウトです。
ラインナップレイアウト
- 商品のカラーバリエーションや種類が多い場合によく使用される
- 自由に配置すると楽しいイメージなどが伝わりやすい
商品の種類を多く見せたいときによく使用されるレイアウトです。
切り抜き写真を自由に配置することでワクワクするような雰囲気をイメージさせることができるのでお子さんの習い事や旅行先のバナーなどにもよく用いられます。
写真の基本レタッチ
レタッチとは、写真の明るさなどを調整したり、不要なものを除去したりして写真を修整することをいいます。
ここでは簡単な基本のレタッチをご紹介します。
photoshopで簡単に画像修正ができるので試してみてくださいね。
明るさを変える
写真全体の明るさを変更します。白飛びしないように（※明るくしすぎて写真が白っぽくなること）調整しましょう。
コントラストをつける
コントラストとは写真にメリハリをつけることをいいます。コントラストを強くすると写真が引き締まります。モノクロ写真などシャープな印象をつけたいときにはオススメです。
色味を変える
カラーバランスで色味を調整します、暖色系に寄せると温かい印象になります。料理などは暖色系を使用すると美味しそうに見える効果があります。
彩度を変える
写真の色味を鮮やかにすることができます。やりすぎると違和感が出るので自然にするのがポイント。
おすすめのギャラリーサイト
おすすめのギャラリーサイトをご紹介します。
- BANNER LIBRARY
- インスタ広告集めました
- ピンタレスト
BANNER LIBRARY
良質なバナーデザインを集めたギャラリーサイトです。バナーによって分類されているので見やすく使いやすいです。
インスタ広告集めました
こちらはインスタで使用されている広告をまとめたものです。インスタで使用されている広告バナーも人にどう注目してもらうかを考えられて作られているバナーが多いので参考になります。
ピンタレスト
ピンタレストは現役WEBデザイナーの人たちも良く使用するアイディアサイトです。デザインに関する幅広い情報からバナーデザインまでたくさんの参考サイトがまとめてあるのでおすすめです。
おすすめ無料の写真素材サイト
- 写真ac
- ODAN
- GIRLY DROP
- BEIZ
写真ac
「写真ac」は日本人モデルが多く使用されているためおすすめです。日本人の画像を使用することで親しみをもってもらえやすくなります。ただ無料で使用すると一日にダウンロードできる枚数が決まっているので、有料会員になるのがおすすめです。
ODAN
「ODAN」は海外のおしゃれな写真が多いのでおすすめです。品質も良いので使いやすいのですが、海外の写真サイトなので日本人や日本に関する画像が少ないのが残念なポイントです。
GIRLY DROP
「GIRLY DROP」は女の子らしい写真素材が集まっているので可愛らしい画像が必要な時におすすめです。
BEIZ
「BEIZ」は背景の画像を探すのに適した素材サイトです。種類によって分類されているので必要な背景が見つけやすいです。
まとめ
写真を使用することで情報を視覚的に伝えることができ、見ている人にイメージや雰囲気が伝わりやすくなります。
- 化粧品や食べ物など実際に使用イメージを伝えたい時に使用すると購買意欲が高まる
- 旅行先などの美しい景色を見せることで行ってみたいと思わせる
- 食べ物のシズル感を伝えることで食べたいと思わせる
- 商品の世界観を伝えることができイメージさせることができる
特に説明だけでは伝わりにくいものには積極的に写真を使いましょう。
コメント