Advertisement

50food-tip-top

 

海外デザインブログCanva Design Schoolで公開された「Food. Love it? You’ve never seen it look like this. We can promise you that.」より許可をもらい、日本語抄訳しています。

 

食べものに関するデザインは、商品の写真を通してどんな味なのか試したり、購入したりさせ、ユニークな方法で見た人の注目を集めます。

 

 

レストランのメニューや商品パッケージや、広告デザインなど食べものを使ったイメージでは、色と質感、見た目をできるだけ魅力的に見せる必要があります。今回は、食べ物をより美味しそうに魅せる、50個のデザインアイデアやテクニックをまとめて紹介しています。

 

 

 

詳細は以下から。

 

 

 

01. 食材でコラージュしよう。

 

110

 

どんな食べものが食材に使われているのか、分かりやすくしてみましょう。上記サンプルでは、瓶のなかに入っている新鮮な食材を使い、ユニークなコラージュでまとめています。

 

 

 

02. 文字テキストと重ねよう。

 

210

 

文字と食材を立体的に組み合わせることで、ダイナミックな構図を演出しているサンプル例です。

 

 

 

03. ごちゃごちゃしたレイアウトを、共通カラーでまとめよう。

 

312

 

上記の雑誌サンプルでは、ディテールの細かい写真から、手書き文字、色付きテキストなどさまざまな要素が利用されています。ごちゃごちゃになりやすいデザインですが、鮮やかな黄色をアクセントカラーに利用することで、全体のつながりをうまく表しています。

 

 

 

04. カラフルにしよう。

 

47

 

上記サンプルでは、食材をバランスよく並べることで、エネルギッシュな見た目を表現しています。すでに鮮やかな食材に加えて、インパクトのある色使いの背景を利用することで、補色効果が生まれます。

 

 

 

05. 既存ロゴに組み合わせよう。

 

51

 

上記サンプルでは、クライアントのロゴデザインに合わせて、2種類のチップス用フレーバーを表現しています。こうすることで統一感に加え、豊富なバラエティーにも対応できます。

 

 

 

06. ナチュラルな見た目を表現しよう。

 

62

 

上記サンプルは、あまり整理されておらず、グリッドもきちんと揃っていないレイアウトですが、このスタイルにはうまくはまっています。まるで触れることができそうなナチュラルで自然な見た目に、温かみのある手書きフォントがうまくマッチしています。

 

 

 

07. ネガティブスペースを使おう。

 

71

 

上記サンプルでは、うまくネガティブスペースを利用することで、本のタイトルを表示した賢いアイデアのひとつです。イメージ写真と釣り合いのとれた文字が、よりこのスタイルを魅力的に仕上げています。

 

 

 

08. 奥行き感を表現しよう。

 

82

 

被写界深度(英: Depth of Filed)は、被写体の一部にのみ焦点を集め、ぼかしを加える写真撮影で利用される基本テクニックです。上記サンプルでは、中心に表示された商品に注目を集めるテクニックを採用しています。

 

 

 

09. 質感を強調しよう。

 

92

 

新鮮な果物にクローズアップした背景に、文字テキストを組み合わせたデザインで、ラベル全体を覆う商品のナチュラルな質感と色がポイントです。

 

 

 

10. 質感を強調しよう。パート2

 

103

 

上記サンプルでは、特長のあるケールの質感にフォーカル・ポイントを当てた、スーパーフードに関するランディングページです。他のデザインをミニマルにすることで、色と質感はより目立っています。

 

 

 

11. シーン別にアレンジしよう。

 

113

 

箱に入った生鮮野菜や牛乳パック、傘など、カンバスに描かれた手書き文字テキストと組み合わせ、魅力的な構図を実現しています。

 

 

 

12. 写真とイラストを組み合わせよう。

 

12

 

上記サンプルでは、手描きスケッチと水彩ペイント風エフェクトを組み合わせることで、うまくフルーツのイメージに合わせデザインを加えることで、調和のとれた雰囲気を演出しています。

 

 

 

13. 大きさでコントラストを表現しよう。

 

132

 

雑誌の見開きで利用されるフォーカル・ポイントの、大小サイズによるコントラストにより、ユニークな見た目だけでなく、バランスの良いレイアウトに仕上げています。

 

 

 

14. 雰囲気を伝えよう。

 

143

 

楽しくて手作り感のある雰囲気と商品イメージをマッチさせ、「おばあちゃんのアップルパイ」を連想させる、素敵なデザインテクニック。

 

 

 

15. テーマに着目しよう。

 

153

 

上記サンプルでは、フォークに刺さったステーキ肉にズームアップすることで、皿全体を撮影するよりも面白く見せるだけでなく、「ステーキ」という雑誌のテーマにも当てはまった、クリエイティブなデザインアイデア。

 

 

 

16. フォーカル・ポイントを枠で囲もう。

 

162

 

ビンテージ風の手書き文字とデコレーションで、パンケーキのまわりを囲むことで、フォーカル・ポイントに目が誘導され、文字色もイメージ写真から抽出されています。

 

 

 

17. 文字テキストを囲もう。

 

173

 

こちらでは、ひとつ前のテクニックの反対のアプローチが取られており、文字テキストのまわりを食べものの写真が取り囲んでいます。雑誌タイトルが、うまく食材にかぶるように配置されている点もポイントです。

 

 

 

18. 食べものでアートしよう。

 

182

 

鉛筆やペンキなどと同じように、食べもの自身でアート性を表現することもできます。上記サンプルでは、丘の上にあるワイン畑を見事にイラスト化しています。

 

 

 

19. 食べものでアートしよう。パート2

 

193

 

上記サンプルでは、色ごとに異なる食材を利用することで、ビンテージ感を演出したポスターに仕上げています。

 

 

 

20. 動きを演出しよう。

 

203

 

上記サンプルではシンプルな写真を通して、動きを見事に表現しています。すこしだけイメージに動きを加えることで、魅力的に見せるシンプルなデザインテクニック。

 

 

 

21. 動きを演出しよう。パート2

 

213

 

よりドラマチックなサンプル例として、フレイバーが爆発しているような広告デザイン。写真撮影は汚れてしまうので、大変かもしれません。

 

 

 

22. メッセージをサポートしよう。

 

223

 

学校給食のヘルシーさを訴える上記サンプルでは、手書きスケッチされたジャンクフードと、栄養のある野菜のコントラストを描いており、メッセージ(”Fake Food vs. Real Food”)をサポートしたビジュアルが特長です。

 

 

 

23. ミックス&マッチ。

 

231

 

食べもの写真の一部を、他の異なる色や質感と組み合わせることで、大きなインパクトを与えることができます。上記サンプルは、商品の豊富さを伝えるために、このテクニックを利用しています。

 

 

 

24. ミックス&マッチ。パート2

 

243

 

隣同士に食べものの写真を並べ、フォント書体を合わせることで、視覚的につながりがあることを分かりやすく伝えます。

 

 

 

25. 予期できないデザインを。

 

253

 

「メイン州の朝食がおいしい店」という雑誌見出しに合わせて、メイン州の形をかたどった目玉焼きが特長のサンプル例。トピックに関連していることで、とても印象に残るデザインテクニックのひとつ。

 

 

 

26. 予期できないデザインを。パート2

 

262

 

上記サンプルでは、原料となるフルーツの美味しさを強調した、ゼリーブランドの広告デザインで、うまくイメージ写真を目立たせることができています。

 

 

 

27. インフォグラフィクスを活用しよう。

 

272

 

上記サンプルでは、背景に食べものイメージを利用し、料理の新鮮な食材をシンプルなデータと一緒にレイアウトした、インフォグラフィックス・スタイル。

 

 

 

28. 色を組み合わせよう。

 

281

 

色を合わせて食材を並べることで、形からもソースの主原料が何なのか、ビジュアル的に分かりやすく伝えることができます。

 

 

 

29. 三分割してみよう。

 

292

 

グループを三分割して、グリッドに分けることで、フォーカル・ポイントになるだけでなく、全体レイアウトの基本にもなります。

 

 

 

30. 食材を分解してみよう。

 

302

 

イタリアンレストランのメニューでは、食材を分解して並べることで、料理前と後をうまく比較しています。また食材をきれいに並べることで、自然の不揃いな食べものとのコントラストが生まれています。

 

 

 

31. 遠近感を意識しよう。

 

313

 

上記ウェブサイトでは、一般的なヘッダーイメージの他に、美味しそうな料理をレイアウトの上に配置することで、遠近感をうまく表現でき、一般的な四角い写真に比べ、すこしだけ魅力的に仕上げてくれます。

 

 

 

32. 食材の個性を引き出そう。

 

322

 

商品を試してもらうことを目的に作成された、効果的なデザインテクニックのひとつで、どんな食材が入っているのか、ひと目で分かるコラージュが素敵な作品。

 

 

 

33. グラフィックデザインで補おう。

 

332

 

上記パッケージデザインには、食べもの写真と一緒に、台所に関連するグラフィックデザインを加えています。より楽しく、新鮮な印象をうまく表現でき、それぞれのパッケージの色使いも食材そのものの補色となり、美味しさを引き立てます。

 

 

 

34. 形をつかってコントラストを描こう。

 

342

 

以下のレシピアプリでは、テーブルの上に並べられた白い皿を背景に、アウトライン型アイコンのメニューボタンとして利用しています。

 

 

 

35. コンセプトを伝えよう。

 

352

 

「食べもの再発明(Re-Invent Food)」というイベント用デザインでは、うまくイベント名をビジュアル的に補強しています。食べものと、「新しいアイデア」を連想させる電球を組み合わせることで、直感的にコンセプトを伝えることができます。

 

 

 

36. グリッドを利用しよう。

 

362

 

グリッドレイアウトを利用して配置をアレンジすることで、異なる要素をうまく分別、整理することができます。上記サンプルでは、グリッドレイアウトを利用することで、色分けされたパッケージデザインがうまく映えています。

 

 

 

37. 邪魔しない背景を利用しよう。

 

37

 

食べものの写真は、文字が読みにくいことから背景デザインには向いていません。上記サンプルでは、半透明カラーのレイヤーを写真に重ねることで、この問題をうまく解決しています。

 

 

 

38. 邪魔しない背景を利用しよう。パート2

 

382

 

上記サンプルでは、モノクロ・カラーレイヤーを写真の上に見事に重ねています。イメージのコンセプトを伝えながら、文字の読みやすさにも気を配っています。

 

 

 

39. パターンを選ぼう。

 

392

 

上記サンプルでは、果物を利用してパターンを作ることで、食材だけが記載されたパッケージに比べ、より魅力的な見た目に仕上げています。

 

 

 

40. マテリアルデザインのテクニックを利用しよう。

 

401

 

Google のマテリアルデザインでは、カード式レイアウトや鮮やかな配色で、特長をうまく強調することができます。上記レストランのウェブサイトでは、発色の良いカラーリングとグリッドメニューを利用して、フードメニューを掲載しています。

 

 

 

41. 百聞は一見にしかず。

 

412

 

上記ウェブサイトのメニューページでは、それぞれの料理を写真付きで掲載することで、言葉で伝えるよりもより魅力的な見た目となっています。

 

 

 

42. 写真と色を合わせよう。

 

42

 

食べ物に関するデザインをするときは、イメージ写真の中から色を抽出することで、よりうまくデザインをまとめることができ、上記サンプルではそのテクニックを上手に利用しています。

 

 

 

43. メッセージで引き込もう。

 

432

 

食べものの配置やアングルを検討することで、スクリーン画面の中心にある、もっとも重要なコンセプト部分、リーディング・ライン(英: Leading Lines)に注目を集めることができます。

 

 

 

44. 分かりやすくしよう。

 

441

 

健康的な食事をつくることを目的にデザインされた、フレッシュでフレンドリーなデザイン。ポップで鮮やかな色使いに、手描きイラストがより分かりやすく、アプローチしやすくしています。

 

 

 

45. ポップな配色を利用しよう。

 

451

 

上記サンプルでは、食べものを全体デザインのアクセントとして、鮮やかな色使いによって、フォーカル・ポイントとして仕上げています。

 

 

 

46. 平凡なデザインは捨てよう。

 

461

 

上記ブランドのように、市場マーケットとは全く異なるデザインを採用してみても良いでしょう。冷凍野菜の商品にはあまり見えないので、リスクのある選択ですが、このブランドでは見事に反映されており、商品棚でも目立つことでしょう。

 

 

 

47. ミニマルにしよう。

 

471

 

その反対に、単純に野菜を撮影したシンプルで、ミニマルなデザインテクニックも良いでしょう。シンプル・イズ・ベストなデザイン解決方法のひとつと言えるでしょう。

 

 

 

48. 重要な食材は、繰り返し使おう。

 

481

 

魚介類をコンセプトにしたウェブデザインでは、メインコンセプトとなる鮭を、何度も異なるサイズやデザインで取り入れることで、より印象に残るように仕上げています。

 

 

 

49. 文字テキストを分割しよう。

 

49

 

どんなタイプのデザインプロジェクトでも、イメージ写真は文字テキストをうまく分割し、視覚的な面白さを加えることができます。上記サンプルでは、ユニークな形や色使いの写真を利用することで、コンテンツをより強調しています。

 

 

 

50. 人間らしさを表現しよう。

 

50

 

もし自分が商品を試している様子を連想することができれば、購買欲をうまく刺激していると言っても良いでしょう。上記サンプルでは、手書きイラストを加えることでより手作り感をアップしています。

 

 

 

さいごに。

 

今回紹介したデザインアイデアやテクニックを利用し、今後のインスピレーションの参考にしてみましょう。ではデザインを楽しんで!

 

 

参照元リンク : Food. Love it? You’ve never seen it look like this. We can promise you that. – Canva Design School