スマートフォンサイトを表示する

  1. TOP
  2. 業種別ホームページカラーガイド : 第5回 飲食店のホームページの配色

エキスパートコラム

業種別ホームページカラーガイド(全12回)

第5回:飲食店のホームページの配色

執筆:坂本 邦夫(フォルトゥナ)

2016年8月22日更新

  • このエントリーをはてなブックマークに追加

閲覧数3,093views

このコラムをPDF形式でダウンロードする

このコラムでは、業種ごとに「合う色と合わない色」「注意すべきこと」をまとめています。

毎回、異なる業種を取り上げて解説しますが、それらの業種でよく使われる色やたびたび見られる失敗があり、それにはきちんとした理由があります。それに加え、ホームページの色は、看板や紙のパンフレットと同じ色の場合であっても、画面の構成や使い方のポイントも異なります。

第5回目は飲食店のホームページの配色です。

飲食店でよく使われている色

飲食店のホームページでは、もっとも重要なのは料理の写真ですが、それを支えるための背景色をどのように選ぶかがもっとも大きなテーマとなります。

多くの場合は、店舗のイメージが伝わる色を大きく使い、ページ全体を使って店舗を再現することになります。それを実現させるために使われる色は、だいたい3つのパターンに分類できます。

  1. 店舗のイメージを表す色
  2. 店舗のイメージを補う暖かい色
  3. 食べ物・飲み物・素材の色

上記の3つのうち1つではなく、3つともを組み合わせて作っているデザインがほとんどですが、3つに共通する傾向として、青などの冷たさを感じさせる寒色ではなく、暖かみや店舗の照明などをイメージさせる赤・オレンジ・黄のような暖色が使われることが多くなっています。

飲食店で多く見られる色

単一の商品を扱うお店と異なり、料理には様々な色合いがあります。例えばステーキ専門店だとお肉の色であったり、ハンバーガー専門店だとパンとハンバーグのように主となる素材の色を使うことができますが、例えば定食屋さんなどはメニューも多く、ご飯・魚・肉など様々なものが使われます。

そのためいろいろな食べ物の色を合わせてイメージを作るのではなく、「食事をする場」のイメージをホームページに反映させることになります。よほど特別な食べ物や立地でない限り、暖色を中心に配色を組み立てていくのが無難でしょう。

どの色が食欲に訴求するかという研究データを紹介しておきます。やはり赤・黄・オレンジなどの暖色が美味しそうに見える色となっており、黄緑や紫はあまり食欲に訴求しない色となっています。実際のホームページの色でも同じような配色の傾向がありますが、例えば新鮮な野菜が売りのお店であれば、もちろん黄緑はおすすめの色となります。

食べ物が美味しく見える色。野村順一著「カラーマーケティング論」(1983年、千倉書房)より

色の使い方と配色のポイント

店舗のイメージを表す色

店舗のイメージは内装・外装で使われている素材や看板の色から作られるものです。その中でも特に重視されるのは、そこで食事をし時間を使う内装の色で、その色を背景としたホームページの色を考えることもできます。

多くの場合は、黒か茶色の暗い色か白・ベージュを基調とした明るい色のどちらかが選ばれ、明るくも暗くもない中途半端に薄暗いイメージはほとんど使われません。これらの色は内装の木材・壁材・テーブルクロスなどの内装の色をアレンジしたものです。

その中から明るい色を使うか暗い色を使うかは、昼夜のどちらを中心に営業しているのかや、お酒を提供しているかどうかなどでも変わってきます。一般的には夜を中心に営業しているお店やお酒を重視しているお店は暗い色が使われる傾向があります。

明るい色と暗い色を使った同じページ。どちらがよいかはお店のイメージに合う方で。

店舗のイメージを補う暖かい色

多くの飲食店では照明が蛍光灯の白い光ではなく、電球のようなオレンジ色の光が使われているのも、食べ物を美味しそうに見せるからです。

白い蛍光灯のオフィスとオレンジの店舗照明。飲食店はオレンジが基本となる。

飲食店の写真は照明の光に照らされて、全体的にオレンジがかって見えています。ホームページの色をこれと同じように、全体を暖かい色に統一することで、美味しそうなイメージが出来上がります。

ただしギラギラして見えるような強いオレンジや赤を単体で使うと、その部分だけが目立ってしまい、視線が大事料理以外の部分に向かってしまうかもしれません。料理そのものに強い色が入っている場合は仕方ありませんが、背景に料理の邪魔をする強い色を入れるのは、できるだけ避けた方がよいでしょう。

食べ物・飲み物・素材の色

飲食店にとっての商品の色は様々で、例えばスムージーと限定しても、材料によってまったくイメージは変わります。またメインの大きな画像には店舗の写真だけではなく、その時々のおすすめメニューなども入ってくるでしょう。すなわちどんな色が写真で使われるかは、しょっちゅう変わることがあります。

そのような場合には写真が主になるため、ホームページの見映えのよさは、いかによい写真を使うかということが最重要になります。いかにお店の雰囲気がよくても、肝心の食事の写真が暗くて美味しそうに見えないものであれば、全てが台無しになってしまいます。それを避けるためにも、プロのカメラマンに撮影してもらうのがベストです。

写真がいまいちだとホームページのそのものの価値が下がる

また美味しそうに見える器の選択も重要です。真っ白いお皿などはその上の料理や素材が映えます。器はテーブルの柄やごちゃごちゃしている部分と料理を切り離し、料理に視線を向かわせる道具でもあるのです。

暗い背景に映える明るい色の食器。視線が食べ物に向かう。

料理写真で全てを表現することはできませんが、お店の魅力を伝えるのに料理の写真を超えるものはありません。日々の料理はFacebookやInstagramなどを利用して紹介し、ホームページには全力投球した数枚を載せるようにしましょう。

またボタンなどの色でアクセントになる色が必要な場合にも、無理に青や紫を入れて、目立たせようとはせずに、暖色や写真に写っている素材の色から選ぶようにします。

訪問者は既にお店に強い興味を持っていることを意識する

お店を探すような場合には、まずはぐるなびや食べログなどのポータルサイトで検索し、そこからオリジナルのホームページに訪問する人が多いです。

スマホなどを使って位置情報で近くのお店を探すような場合も同様ですが、訪問者はお店に対して強い興味を持っていることが多いため、価格やアクセス情報ページに進むためのボタンが見つかりにくい、読みにくいということがないようにしましょう。

読みやすい色の選び方については、こちらの記事も参考にしてください。

 

まとめ

  1. 飲食店のホームページでは赤・オレンジ・黄の暖色が基本
  2. 昼に営業、お酒を出さないお店は明るめ、夜に営業、お酒を出すお店は暗めの傾向
  3. 美味しそうに見えない色の代表は黄緑と紫
  4. 電球のオレンジ色を使うことで美味しそうに見える。写真に利用する
  5. 写真1つでホームページが台無しになるのが飲食店のホームページ。できるだけプロの撮影した写真を使う
  6. 無理なアクセント色を増やそうとせず、写真に含まれる色を使う
  7. メニューやアクセスなどのボタンがすぐわかるようにしておく
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

坂本 邦夫(さかもと・くにお)

坂本 邦夫(さかもと・くにお)

カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/

1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、Web制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色彩環境の向上を使命として活動。日本色彩学会正会員。

主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート ホームページ配色入門』(ワークスコーポレーション)、『ウェブ配色 コーディネートカタログ』(技術評論社)など。

ウェブデザイン&配色の見本帳

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/7/30~2017/8/5]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!