Vektor WordPress Solutions Advent Calendar 2021 12月11日の記事です。
Webに使う写真を撮るときに私が気をつけていることを紹介します。プロ級までいかなくても、ちょっといい写真を自分で撮りたい方へ。
こんにちわ、ベクトルスタッフの鳥山です。
先月(2021年11月) チームベクトル名古屋合宿がありました。今年からJOINした私にとって初の合宿、チームメンバーと名古屋の写真を思う存分撮ってきました！
そこで今回は写真の話。前回、DRILL LANCER さんによる「Lightning Three Column Unit を G3 対応した話」に引き続き、Webで使う写真に触れることにしました。
Web制作に関わっていると取材やインタビュー、商品やグルメの紹介など、必要に応じて写真を撮る場面も少なくないでしょう。予算や時間の兼ね合いで、毎回カメラマンにきてもらうことは難しい。フリー素材は似たりよったり、そもそも取材では使えません。
ちょっとしたブログを書くときにも、気の利いた写真があるといいですね。アイキャッチやOGPイメージは、使う写真1枚でクリック率に影響するとききます。
プロ級までいかなくても、ちょっといい写真を自分で撮りたい…と感じている方も多いのではないでしょうか。
イメージを明確に
今回の前提として、作品(アート)を撮るのではありません。
用途やイメージがあるはずです。
何を撮るか？があってこそ、必要な写真を撮ることができます。
Web制作もそうはありませんか？お客さまにヒアリングを重ね、イメージやターゲットを共有したうえで制作に取りかかることと思います。
写真も同じです。写真1枚などスマホでサッと撮れるとはいえ、準備がキモです。
こんな写真が欲しいな、雰囲気はこうで、色はこんな感じ…とまずはイメージ。
他の Webサイトを参考にしながらイメージを固めるもアリです。
主役を決める
写真から何を受け取ってほしいか、主役をひとつ決めましょう。
初心者っぽく言われる日の丸構図が、私は好きです。第一印象でど真ん中にフォーカスしたものこそ、見る人にも伝わりやすい。3分割法でおしゃれにしなくていい(飾るのではでないので)、ストレートにいきましょう。
スクロールしながら流れていく Webページのなかで、瞬時にイメージを伝えるのが写真の役割です。
背景見えてますか？
背景に少し気を配るだけでも、仕上がりに差がつきます。
あとから見ると、撮影したときに気づかなかった余計なもの(レストランではコップやおしぼり、自宅では生活感のあるなにか)が写ってることありますよね。撮る前に気づくようにしたいです。見せたいものが際立つように。
商品写真は望遠側
商品や料理の写真では、なるべく望遠側を使います。望遠側とは大きく写るほうです。レンズが何個かついてて選べるスマホもありますね。広角(範囲が広いほう)を使うと、歪みが出てしまいます。
商品写真は全体的にピントが合うように絞ります。カメラの設定でF値を大きく(ボケが少ないほう)。これも最近のスマホかアプリで選べるでしょうか？
絞ったためにシャッタースピードが遅くなってしまうときは、三脚を使います。面倒ですが、シャープでピシッとしたのが撮れますよ。
料理は逆光
料理やスイーツの写真を撮るのは、現代の日常ですね。業務の Webサイト用だけでなく、プライベートなSNSにアップする機会も多いでしょう。料理は逆光が効果的です。素材の新鮮そうなツヤ感、ソースのトロ～リ感ががきわだっておいしそうに見えるんです。窓からの自然光を背景にするといい感じになります。
窓もないし昼間でもない、たとえば居酒屋では向かいの人にスマホのライトを斜め上から照らしてもらうと、グッとよくなります。
女性も逆光がいい
女性ポートレートなども逆光のなかで撮ると、ふわっとやさしい雰囲気がでます。
写真を使ったポスターを見かけたら、どこでどんなふうに撮ったのかな？なんて気にとめてみるといいかもしれません。
ポーズは大げさでいい
「ろくろを回すポーズ」を聞いたことはあるでしょうか？
Web技術者を取材した写真はなぜか、ろくろを回しているようだと言われます。胸の前で見えないなにかを両手で包み込むようなしぐさ、たぶん顔まわりに手が入るとよいのでしょう。インタビューに答えたり登壇しているとき、ふと手のしぐさがはいると不思議とそれっぽくなります。
とくに女性は頬に手をかざしたり髪を触ったり、顔近くに手があると小顔効果もあるのでおすすめ。
うまいポーズにならなかったり、撮りそこねた場合は、取材の後でやってもらってもOK。イメージに近づけるには、相手が恥ずかしがらないよう声掛けも大事です。
人物の表情やポーズは大げさなぐらいで、Webに掲載したときにちょうどよく見えるんです。
たくさん撮る
Webで使うからには、デジカメで撮ることがほとんどでしょう。データを確認しながらいくらでも撮れるのがデジカメのメリットです。
時間が許すかぎり何枚でも撮っておき、「あぁ、あれも撮っておけばよかった〜」をなくしたいですね。
何枚か撮ってあればよい部分を集めて合成することもできます。たとえば集合写真で目をつぶってたり、たまたま変顔があったりしたら、他の写真からよい部分を持ってきます。集合写真はシェアされることも多いので、全員そろった表情だと見るほうも写ってるほうも嬉しいです。
とにかく撮ってあればなんとかなるのです。
Webで使える仕上げ
写真はPCやスマホのブラウザ上で見られます。なにか理由がないかぎりは、明るく、くっきり色鮮やかに仕上げましょう。
スマホの小さな画面やサムネイルで見ることが多いので、わかりやすいよう。
いまの言葉でいうと「盛る」「映え」に近いです。
おいしそう、楽しそう…と伝わるといいですね。
私が撮影で気を付けていることでした。
写真学校で教わったことに加え、習慣で乗り切ってるところもあります。限られた撮影時間のなかですべてに気を配るのは難しく、私もなかなかできていません。このなかのひとつもで思い出してもらえたら嬉しいです。
「いやそうじゃない！」「もっといいやりかたあるよ！」など、みなさまのご意見お待ちしています！
最後に スライダーブロック を貼ります。
ベクトルが提供している WordPress ブロックエディタ用のプラグイン VK Blocks (Pro版)のなかで、写真を扱うブロックのひとつです。
何を撮るか？があってこそ
瞬時にイメージを伝えるのが写真の役割
望遠側とは大きく写るほう
手のしぐさがはいると不思議とそれっぽく
明るく、くっきり色鮮やかに
明日は久納 美幸 さんより、いよいよ チームベクトル2021 名古屋合宿 の全貌が明らかになります。
お楽しみに〜
この記事を書いた人
- Webデザイナーでカメラマン。Vektorチームでは、VK パターンライブラリと写真係を担当しています。WordCamp Tokyo 撮影班 / 着物屋くるり専属カメラマン
最近の投稿
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。