designsupply.llc
  • aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. デザインの記事
  4. 【実践テクニック#2】料理の写真を使ったデザインで気をつけるポイント

【実践テクニック#2】料理の写真を使ったデザインで気をつけるポイント

  • 2020.10.07
  • デザイン
  • デザイン
デザインの制作時には料理や食べ物の写真を使う場面が多々あり、写真の中の被写体をいかに美味しそうに見せるかが問われます。そんな時にトリミングやレタッチなどの少しの工夫で一段と見栄えが良くなるテクニックをまとめてみたいと思います。   そのほか実践で使えるテクニックでは下記の記事も紹介していますので、こちらもぜひご覧ください。 【実践テクニック#1】複数の人物写真を並べるデザインで気をつけるポイント  
料理写真の基本は「明るく・鮮やかに・ハイコントラストで」
大前提として料理の写真は「明るく」「鮮やかに」「ハイコントラストで」とするのが基本となります。被写体のツヤや素材が持つ色味をより引き立たせることで、視覚から味覚に働きかけるようなビジュアルを目指すことが重要です。   ただし、どれもやり過ぎには注意しましょう。彩度とコントラストを上げすぎると人工的な色味に見えてしまい不自然になってしまいます。また、高級感を表現したいなどデザインの方向性によっては、全体を明るくしすぎると雰囲気や世界観が損なわれてしまいますので、そういった場合にはレベル補正などで、ハイライトや中間色部分だけ明るくするなどの調整が必要となります。それではこのルールをベースに、次にあげる実践で使えるテクニックを見ていきましょう。  
料理の味や温度に合わせた写真の色温度調整
料理には温かいものもあれば冷たいものもあり、さらには甘いものや辛いもの、酸っぱいものなどいろんな味がありますね。写真ではこのような温度や味を直接伝えることはできませんが、色温度を調整することで、実際の料理の温度や味をイメージさせることはできます。   例えば、焼き料理、炒め物、煮物・スープなど温かい料理の場合には、色温度を暖色系に近づくように調整することで出来たて熱々の雰囲気を表現でき食欲を刺激するような印象になります。今回はサンプルとしてこちらのピザの写真を使って色温度を調整してみましょう。   Beforeの写真は少し冷めたような印象を受けますね。心なしかピザも固そうに見えます、、そこで色温度を暖色系にして、赤みも少し足してみるとこのような感じに仕上がりました。   どうでしょうか、先ほどの写真のピザと比較すると熱々でふんわりとした生地で、トマトやチーズも美味しそうに見えますね。このように温かい食べ物の場合、色温度を暖色系に寄せることで食欲に訴えかけることができます。   冷たい食べ物や飲み物の場合はどうでしょうか、鮮度が良い魚介類や野菜、果物、また清涼感のあるドリンクなどが挙げられますが、先ほどのように暖色系に寄ってしまっている場合、どうしてもぬるい印象を与えてしまいます。   ですので、逆に色温度を寒色系に寄せることで、冷たさや清涼感、新鮮さや瑞々しさを表現することができます。料理や食べ物の場合、あまりに青みが強い場合は不自然になるので、緑みを加えることで調整します。どうでしょうか、よりクリアな見た目になり、温度も下がったように感じますよね。   このように色温度を調整することで、見た時の印象や感じるイメージを調整することができるので、料理に合わせて色味を使い分けることが重要です。それ以外にも、Photoshopなどで料理写真のレタッチに関する記事も上げていますのでご参考まで。 (参考記事) ・【デザインワークショップ】vol.13 料理写真のシズル感を表現してみる(色調補正編) ・【デザインワークショップ】vol.14 料理写真のシズル感を表現してみる(ラップフィルター編) ・【デザインワークショップ】vol.15 料理写真のシズル感を表現してみる(エフェクト編・熱さ) ・【デザインワークショップ】vol.16 料理写真のシズル感を表現してみる(エフェクト編・清涼感)  
寄りのトリミングでボリュームやシズル感を表現
バナー内の素材など限られた小さいスペースに使う場合にはどうしても訴求が弱くなってしまいます。飲食店のメニューに使われている写真などでもよく見かけますが、料理の全体写真を使うとどうしてもボリュームが少なく見えてしまいがちになります。また細部の質感などもわかりにくいため、料理の魅力的な部分が伝わりにくいのではないでしょうか。   そんな場合にはこのようにトリミングでボリュームを大きく見せることが効果的です。いかがでしょうか、先ほどの写真にある同じパンケーキに見えないくらいボリュームを感じるようになっていますね。また寄りのトリミングをすることで、細かい質感などもはっきりと見えますので、脂のツヤ感や素材の色味なども感じやすくなるためシズル感を前面に出すことができます。   実はこのテクニックは、私がこの業界に入って先輩からいただいた最初のアドバイスでした。今でもとても役に立っているので、当時の先輩には本当に感謝ですね。  
素材を切り取って抜け感をデザインにプラス
デザイン制作においては、写真の中にテキストが入る場合もあります。その際に写真に写っている背景だったり被写体の並びによっては、文字が見にくくなったり、狭く感じることもあると思います。また、写真の構図や被写体の並びがデザインに制約を与えてしまうこともあります。   そんな時には思い切って被写体を切り抜くことも有効です。背景はパターンにしても単色のベタ塗り、またはグラデーションにするなどバリエーションも豊富でデザイン表現の幅も広がります。特に「抜け感」を表現したい時にはとても良い手法です。実際にこのように切り抜いてみると余白も生まれ、テキストが入ったデザインにも耐えれそうですね。また、被写体も大きくリサイズできるのもメリットですね。   写真を切り抜く時のポイントですが、切り抜いた写真をそのまま使うとツギハギ感がどうしても出てしまうので、薄く柔らかめのドロップシャドウを入れると自然に馴染むようになります。また被写体は真上から撮影されていて輪郭がはっきりしたものがいいですね。  
  今回は料理の写真を使うデザイン制作の時に気をつけたいポイントをまとめてみました。料理に限らず食べ物や飲み物などの写真では、視覚から食欲に訴求することが求められます。そんな時に対応できるデザイン手法のテクニックを知っておくと、メインビジュアルやバナー、また紙媒体の印刷物などいろんな場面で活用することができますので、ぜひ覚えておきたいですね。   (こちらの記事もどうぞ) 【実践テクニック#1】複数の人物写真を並べるデザインで気をつけるポイント

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

categories

  • デザイン(30)
  • Photoshop(26)
  • ワークショップ(24)
  • コーディング(18)
  • Sketch(16)
  • Illustrator(12)
  • カラースキーム(10)
  • タイポグラフィ(8)
  • Adobe その他(8)
  • フォトグラフィ(7)
  • Lightroom(4)
  • WordPress(4)
  • ナレッジ(4)
  • サイト運営(3)
  • Figma(2)
  • AfterEffects(2)
  • InVision(1)
  • Premiere(1)
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト
  • クリエイティブ支援
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact