売れてるサイトやSNSに学ぶ、盛らない写真のスタイリング術

売れてるサイトやSNSに学ぶ、盛らない写真のスタイリング術

POINT

  • 写真のコンテンツは、じぶんごとで考えられるリアルさが求められる
  • 使うイメージやストーリーが伝わるシチュエーション写真がおすすめ
  • プロに頼まなくてもスマホで撮影可能。多くの事例をみてヒントにしよう
売れてるサイトやSNSに学ぶ、盛らない写真のスタイリング術|BiND CAMP | ホームページ作成・Webデザインのノウハウブログ

Instagramの映え文化は通り過ぎ、いま写真のトレンドは「映え」から「自然体」の方向へシフトしてきていると言われています。リアルが求められる昨今における、撮りっぱなしとも違う「盛らない」写真のスタイリング術をお届けします。
後半では、撮った写真をサイトに載せるときに役立つ、BiNDupの画像の自動縮小や画像編集ツール「SiGN」の機能も紹介します。

映えよりも自然体、トレンド傾向から見る写真のスタイル

自然体が好まれる背景は、Instagramの映え文化を牽引してきたミレニアム世代の年齢が上がってきて、若者の中心はZ世代になっていることが影響しているようです。一枚一枚の写真を見栄え良く「盛る」よりは、肩に力を入れない「盛らない」リアリティこそ共感されるのでしょう。

たしかに一時期、大流行した各種のスマホ用のフィルターアプリの利用も、最近は見ることが減ってきました。また、使われていても、誰でもわかるように大げさなものより、クリエイティブの質を上げるような微妙な使い方がされている場合もあります。

当然、絶景写真などは誰にでも人気がありますが、誰でも撮れるものではありませんでした。より自然だったり、きれいなものが好まれたり、写真に写っている内容が重要になっている背景としては、伝えたいことをちゃんと撮れば、そこから工夫がしやすい時代になっているとも言えるでしょう。

好まれる「じぶんごと」と「ストーリー」感のある写真

SNSやホームページで写真を見て思わず欲しくなった、買いたくなったなどの経験がある人が増えています。その際のポイントは、多くの場合「じぶんごと」と「ストーリー(物語)」です。

広告やSNSで好まれる傾向

例えば広告でも、モノだけが写っている写真もあれば、モノを使っている写真もあります。どちらにも役割がありますが、実際に使っていたり、実際に馴染みのある人が使っていると、より「じぶんごと」として感じられるということがあります。SNSのユーザーコンテンツでは、モノを日常のなかで使っていたり、生活になじんでいる風景が写っていることが多く、しかもフォローしているユーザーのものは「わたしも使ってみたい」と思わせたり、より「じぶんごと」に感じる傾向があります。

SNSだけに限らず、写真に写った風景を通して物語が感じられると、「これを買ったらこんな生活ができる」かなとか、「こんなシーンでは、子どもと楽しめそう」「ここに行って同じ経験をしてみたい」など、写っているものに愛着を感じたり、モノを買いたくなるものです。たしかに、「盛らない」写真のほうがよりリアルで、じぶんごととして想像がしやすいと言えるかもしれません。

写真の内容にこだわって、どう撮るか、どんなシーンで撮るかのアイデアに知恵を絞ってみましょう。

見ていると思わず「欲しくなる」写真の事例

ここで、写真をうまく活かしたサイトづくりをしている事例を紹介していきましょう。プロが撮っている写真もあれば、スマホで撮っているブログ写真と手間のかけ方は様々ですが、どれもポイントは「じぶんごと」と「ストーリー(物語)」です。

同じコーディネートで着たくなるスタイリング写真

公式サイト内のCMSを利用して、ショップスタッフがコンテンツを更新。「スタイリングを参考したい」を超えて、「同じものが着たい」と思わせるファンを作る仕組みになっています。

ビームスのサイト

質感が伝わるコーディネート

インスタグラムで海外こども服を紹介しているショップ。着用したコーディネート写真のトーンも全体に落ち着いていて可愛い雰囲気。背景や素材の質感にこだわった商品写真の組み合わせが魅力を引き立てています。

Little Rainbowのサイト

商品のエピソードで使い勝手もよくわかる

文具・小物から家電など幅広い商品を扱うセレクトショップですが、扱う商品ごとの、写真の多さに驚く人も多いでしょう。縦にスクロールしているうちに、自然とうん蓄が叩き込まれます。商品のよいところや使い勝手を、まるで作り手に説明されるようなカット割りがポイントです。

アシストオンのサイト

自信を持って買える安心感の提供

高額商品の場合は、強く「納得」していないとなかなか購入に踏み切れないことが多いものです。ネット上では情報足りずに「○○だったらどうしよう」といった不安を抱えがちですが、イメージの良さはもちろんのこと、細部まで不安を取り除く提案がされています。普段使うものなので、盛らないけれど美しい写真もポイントです。

土屋鞄のランドセルのサイト

食べ物は、開けて、盛りつける

美味しそうだなと思っても、パッケージのままではいまひとつ分からないのが食べ物です。試食できなくとも、レシピや盛り付け例が良いと、つい、食べたくなってしまいます。

KALDIのサイト

人がいる風景は、いつも目をひく

商品を使っているモデルをお願いするにしても、どう撮ればいいか悩むときもあるかもしれません。スナップマートのブログでは、アンバサダーキャンペーンで写真の事例を多く紹介しており、どんなセッティングで撮っているのかとても参考になります。

Snapmartブログ

魅力的な見せ方の参考にしてみよう

手作り雑貨の個人間売買サイトですが、とにかくおしゃれなものが多く人気。出品者も、自分の作ったものを上手く見せるコツを工夫しています。小物の組み合わせなど、どうやって撮るといいのかの参考になります。

Creemaのサイト

撮影機材と被写体ごとの工夫

写真のよいサイトを紹介してきましたが、プロの写真家を使っている場合は、一眼レフのカメラで、スタジオや照明機材を使って撮影されているでしょう。しかし、スマートフォンでも良い写真は撮れますし、むしろ「自分と同じiPhoneで撮られた写真」に親近感を覚えるユーザーは多いはずです。

一眼レフではズームレンズや単焦点レンズなど、レンズを用途に合わせて選びますが、スマホでは自動的に切り替わっていくイメージです。高機能スマホは、3つ、4つとレンズがあるものがありますから、望遠ズームを使えば標準レンズや望遠レンズに近いイメージ、縮小して広角レンズ、超広角レンズのように使えます。広角は風景や建物にはよいですが、人物やモノは周辺が極端に歪んで見えるので、安易に使わず撮影者が撮影距離を工夫するといいでしょう。

またスマホで撮影すると、加工するアプリも豊富なので便利です。

独学で画像をレタッチ!SNSで映える写真の加工アプリと使い方
独学で画像をレタッチ!SNSで映える写真の加工アプリと使い方
見栄えの良い写真はホームページやSNSアカウントのクオリティを左右する大事な要素です。プロのカメラマンに撮ってもらった写真でなくても、ワンタッチで綺麗にレタッチできる無料のおすすめスマホアプリをご紹介します。

サイトに掲載するときのポイント

ホームページにアップする写真の解像度は、スマートフォンで撮ったままだと、今や大きすぎる場合が増えています。長辺が1200ピクセル程度が目安です。今後は、ネットワーク速度の進化に合わせてさらに高解像度が求められるかもしれませんが、いまのところは重すぎるとサイトの表示が遅くなる、小さすぎるとSEOの評価が下がるため、注意しましょう。

写真を加工する際は、元画像を残しておき、Web用に解像度を変更します。BiNDupのようにホームページ作成サービスによっては高解像度画像をアップロードすると自動的にWebに適した画質に修正して公開できる場合もあります。

BiNDupが画像を自動で縮小するルール

BiNDupでは、取り込んだ画像が大きすぎる場合に、Web用に適した解像度へ自動で縮小します。上限は次のとおりです。

ページ内画像 横幅1,440pxを上限に縮小
背景画像
SHiFT
横幅2,560pxを上限に縮小

上限の値は、さまざまなデバイスの画面サイズや利用率を調べて決めたものです。あわせて、画質を保ったまま容量を圧縮する機能や、WebP形式への変換にも対応しています。

一例として、iPhone Xで撮影した画像をBiNDupに取り込んだときに、どのくらい軽くなるかを調べた結果が次のとおりです。

元画像 縮小後
ページ内画像 画像形式:jpg
サイズ:4,032 x 3,024
容量:7.8MB
画像形式:WebP
サイズ:1,440 x 1,080
容量:1.6MB(20.5%)
背景画像 画像形式:jpg
サイズ:4,032 x 3,024
容量:7.8MB
画像形式:WebP
サイズ:2,560 x 1,920
容量:4.6MB(58.9%)

スマートフォンで撮った写真も、容量を気にせずそのまま取り込めます。
なお、縮小は画像を取り込むときに処理されるため、取り込み済みの画像には適用されません。

また、「盛らない」なかでも写真のトーンや明るさを調整する、写真の修整加工は行ったほうがいいケースが多いです。トーンに関しては自身で調整する方法、アプリのフィルターを控えめに利用する方法などあります。

SiGNで写真やバナーを整える便利な機能

BiNDupに搭載されている画像編集ツール「SiGN」には、写真の調整やバナー作りの作業を助ける機能がそろっています。

グリッド線の表示と吸着

SiGNのグリッド線の表示と吸着
グリッド線を表示できます。グリッド線はピクセル単位でサイズを変えられ、オブジェクトも吸着します。
斜めに撮った写真を水平に直したり、要素同士の縦横の並びをひと目で確かめたりするのに便利です。

レイヤーの表示/非表示の切り替え

SiGNのレイヤーの表示/非表示の切り替え
重なり合ったレイヤーの下にある要素を編集したいときや、要素のあり・なしを見比べたいときに使えます。

フォント一覧でのプレビュー

SiGNのフォント一覧でのプレビュー
フォントを選ぶときに、一覧の段階でデザインを確かめられます。適用してから見比べる手間がなく、写真に合うフォントをじっくり選べます。

画像の自動縮小とSiGNの機能は、動画でも解説しています。

※画像は機能の公開当時(2021年)のものです。現在の画面とは異なる場合があります。

まとめ

いかがでしたか? 良い写真を撮るには、コンテを描いてみたり、試し撮りして見栄えを確認してみたり、またいい光が出ているときに撮影するなど、時間も手間も必要です。何より自分で用意した写真はライセンス契約もなく、長期的に利用でき、Webサイト、SNS、広告などで利用できるため貴重な素材になります。
たとえば購入した写真は1カットだけでバリエーションがなかったりその度購入になりますが、自分で撮ればアザーカットも豊富に準備できますよね。サイトのデザインや内容をアップデートさせたいと考えているなら、ぜひ、チャレンジしてみましょう。

BiNDupを無料で使ってみるBiNDの制作事例を見る