1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Day 15

今年のこまごまアウトプット Advent Calendar 2024

@katorikoinQiita株式会社

写真の構図から考える📷 アイキャッチ・FVのレイアウト

1
Posted at

はじめに

バナーデザインやFVの参考になりそうな、写真の構図についてメモします:pencil:
参考になればうれしいです。

こんな人におすすめ🐕

  • デザイン本業ではないけど、画像制作もしなくちゃいけない...！が何もわからん
  • 訴求に効果的なレイアウトがわからない！
  • とりあえず参考探しだぜ

写真の構図とデザインの参考:pencil:

今回は以下のAdobeさんの写真の構図についての記事を参考に、抜粋しております🙏

安定感がほしい時〜！

構図が静的なものだと、安定感が生まれやすそうです👀
三角形構図は、目立たせたいものを三角形で囲むと視線が集まりやすいと先輩から学びました:pencil:

構図名 イメージ
三分割 三分割構図の参考になるカメラに関するバナー画像。横長で4列×3行にレイアウトされている。枠一つひとつにカメラや人物の写真がおさまっている。カラフルな背景に、CanonのポケットサイズVlogカメラ「PowerShot V10」を使う様々なシーンが描かれた画像。中央には「動画を、かるがるキレイに。きっと毎日撮りたくなる。」というキャッチコピー。カメラの特徴やサイズ、ブラックとシルバーのバリエーションが紹介されている。下部に「365日、Vlogしよう。」というメッセージ。
二分割 二分割構図の参考になるバナー画像。画面中央で背景色が濃い緑と薄い緑に分かれている。右上にタイトル「食と農業の未来を、いま考える」が配置されている。左下に、机と椅子に座った4人が挙手をして、話し合っている様子のイラストがある。
三角形 三角形構図の参考になるバナー画像。車、バイクなどに関する記事のバナー。3枚の乗り物に乗った人の画像が丸く切り抜かれて、三角形のように配置されている。中央にタイトル「バイクもクルマも自転車も。乗るならフレッシュ or ヴィンテージ？」が書かれている。

主役を目立たせたい時〜！

日の丸構図は正方形の画像の時、特に使われているイメージです👀
目立たせたいものは囲むか、日の丸構図のように周りの余白を多めにするとよし👍

構図名 イメージ
日の丸 日の丸構図の参考になるバナー画像。ドラえもんと湖池屋とSUNTORYのコラボキャンペーンのバナー。白背景に中央に青い丸が配置されている。丸の上に「オリジナルBOXプレゼントキャンペーン」のテキストとポテトチップスの画像が配置されている。湖池屋プライドポテトやサントリードリンクが並び、ドラえもんがどこでもドアを使っているイラストが描かれている。キャンペーンでは8袋のポテトと8本の飲み物が含まれ、5名に当たる。締切は12月7日（月）まで。
トンネル トンネル構図の参考になるバナー画像。ベンチのある公園の画像が楕円形で配置されていて、周りを黄緑の背景が囲んでいる。下にタイトル「外チルについてあれこれ考えてみた。」がある。
額縁 額縁構図の参考になるバナー画像。キリン「キリンレモンは知ってるモン」キャンペーンの画像。中四国の地図に地域の名所や特産品のイラストが配置されている。キリンレモンのボトルが右側に描かれ、キャンペーンでは抽選で330名に当たると記載。応募締切は2020年9月11日。下部には「のんだあとはリサイクル。」とのメッセージ。タイトルの周りを水色の背景が囲んでいる。中国・四国圏に関するイラストと白い雲が水色の背景の上に散らばっている。
サンドイッチ サンドイッチ構図の参考になるバナー画像。中央にタイトル「MERRY GOOD JOB!SANTA's GIFTS」があり、その左右をサンタや雪だるまなどクリスマスに関するイラストで挟んでいる。「2020年をがんばったあなたに、サンタクロースからギフトが届く。」というメッセージが中心にあり、日付の「12/11-12/25」が記載されている。

バナーに奥行きを感じさせたい時〜！

構図名 イメージ
アルファベット（C） C構図の参考になるバナー画像。左上に丸く切り取られた飲料の画像が見切れていてCを反転したような形になっている。左下にタイトル「CHILL OUT 250mL 6缶 BOXを、抽選で500名様にプレゼント！」が二行で配置されている。]
アルファベット（S） S構図の参考になるバナー画像。資生堂の150周年を祝う広告。中央に赤い服を着て微笑む女性を中心に、多様な人々の笑顔の写真が配置されている。「私は、いちばん好きな私をめざす。」というメッセージと、左上に「150 YEARS SHISEIDO」のロゴ、さらに「新しいこといろいろ。150周年の資生堂から。」のテキストが書かれている。赤いうねうねとしたオブジェクトが白背景の上に配置されている。そのラインに沿って人物の画像が配置されている。
対角線 対角線構図の参考になるバナー画像。青空の背景に、ピンクのジェットコースターが対角線を描くようにあり、黄色の乗り物が走っている。乗り物には水筒、メイク用品、ギフトボックスなどが乗せられている。白い雲とカモメも飛んでいる。「LoFT」「むちゃをするなら、夏がいい。」というテキストが含まれている。
放射線 放射線構図の参考になるバナー画像。放射状の装飾がある黄色の背景に「メルカリでいまなら」「dポイントもコーヒーも!?」「売上金も実質3倍!?」と書かれた広告。中央に大きな「得」の文字があり、左右に赤い「m」のシャツを着た黄色いキャラクター。「mercari」と「d POINT」のロゴ、コーヒーカップと箱のイラストも描かれている。下部にキャンペーンの期間「2020年10月1日から10月31日」と記載。

奥行き系の構図は、フード系のバナーで使われてるのをよくみます👀 立体物と相性が良さそうです👍

対角線に沿っておいしそうなドーナツ S字っぽいおいしいチョコ背景
対角線構図の参考になるバナー画像。黄色と赤の背景にミスタードーナツとBAKE INC.のコラボ商品が並ぶ画像。2種類のスイーツが上部に、2種類のドーナツが下部に配置されている。「misdo meets BAKE INC. 第1弾」との文字が書かれている。左上には「Mister Donut」、右上には「BAKE CHEESE TART」のロゴ、左下には「RINGO」のロゴがある。 S構図の参考になるバナー画像。FAMIMA CAFEの商品画像。濃厚チョコづくしの「ゴディバ監修チョコレートフラッペ」が中心に描かれ、背景にはチョコレートの破片が散りばめられている。左側に「ザク、パリ、とろっ、濃厚チョコづくし。」というキャッチコピーと「GODIVA」ロゴが入っている。価格は税込430円。

まとめ

今回はアイキャッチ等の参考になるように、横長の画像を集めました！
写真の構図を参考に、ラインを意識するとメインビジュアルとして良くなりそうです👀
１枚で魅せる画像（FV）や情報多いバナーの目線誘導の参考にしてみてはいかがでしょうか？
最後までお読みいただきありがとうございました！

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?