食べチョク開発者ブログ

食べチョクエンジニアによるプロダクト開発ブログ

おいしそうが伝わる写真を選ぶ原則をチームで共有した

こんにちは、松久です。

「食べチョク」では、キャンペーンなどで使うバナー・キービジュアルを自社で作成しています。作成する時に使う写真は、素材サイトで配布・販売されている写真や、生産者さんが撮影された写真を使います。これらの写真から使用する写真を選ぶのは、時間がかかります。また、選んだとしても、デザインレビューで「もう少しシズル感のある写真がいい」という指摘をもらうこともあります。そこで、写真を選ぶ基準をデザインチームで認識を揃えることにしました。

企画によって写真選びの基準は違う

【濃厚派?さわやか派?】あなた好みの「いちじく」集めました!」という企画を公開しました。品目・品種の違いを味わってもらいたい、という「今が旬」という企画です。この企画での写真選びの基準を用意することにしました。

何を伝える目的の写真なのかを決める

一番最初に決めたのは「何を伝える役割の写真」なのかを決めました。 決めたことは以下のとおりです。

  • おいしくみえる
    • シズル感がある
      • 果汁が見える
      • 果物であれば切り口が見える
    • 思わず食べたくなる写真
    • きれいに食べている
  • 届く商品を勘違いさせない

逆の項目も決めました。

  • 調理後の写真は原則ダメ
    • 美味しそうだけれど、知ってほしいこと(品目・品種の違い)ではない
    • 企画が「料理」である必要があるときのみ
  • 収穫前の状態
    • 今回の企画で知ってほしいこと(品目・品種の違い)ではない
    • 産直であること、鮮度、生産者さんといった別の連想がされやすい

いくつか試作をしながら、写真の役割を言葉にして項目案を出しました。一度、言葉に出てくると、役割とは逆の項目も出てきやすくなりました。

写真の役割が決まったので、写真を並べて、他に検討することがないかデザインチームで話し合いました。
実際に出来た原則が以下の図です。

Figma で原則を作り、バナーを作成するファイルに入れるようにしました

話し合いをする中で、食器があるときや、フォークが刺さった状態の時なども含めて話し合いました。写真での食材の写りだけではなく、食材の周囲の事も合わせて、どんなイメージを持たれそうか検討して、写真選びの原則の認識を揃えることができました。

まだ出来ていないこと

あくまでもバナーに使う写真なので、これでクリック数・クリック率の変化は、まだ未集計です。写真だけでクリック数・クリック率が決まるわけではないですが、いくつか試しながら調整していく必要がありそうです。

おわりに

写真選びの基準を持つことで、写真選びのノウハウがデザインチームに貯めることが出来ました。小さなことも少しづつためて「食べチョク」の改善に活かしていきます。