はじめてWEBエキスパート(専門家)コラム 業種別ホームページカラーガイド(全12回)

ホテル・旅館のホームページのおすすめ配色の見本(第3回)

第3回はホテル・旅館のホームページの配色です。
※「はじめてWEB」は2020年10月13日をもってサービスを終了しました。

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

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

第3回目はホテル・旅館のホームページの配色です。

ホテル・旅館でよく使われている色

ホテル・旅館は、施設の価格帯や地域・施設のコンセプトによって、実に様々な色が使われていますが、大雑把にまとめると以下の3つの系統の色が使われています。

  1. 建物に使われている暖色系の色
  2. 地域を表す海や山・花などの色
  3. 写真を見せるための黒・灰色・白

ホテル・旅館で多く見られる色

これらに順位はなく、そのうちの1つを選んで色を選ぶということではなく、組み合わせて1つのデザインが作られています。

宿泊施設を探すのに、各施設のホームページを順番に巡る機会はそれほど多くありません。まずは行き先を決め、楽天トラベルやじゃらんなどである程度絞り込み、残った候補を吟味するためにそれぞれのホームページに行くということが多いのではないでしょうか?

その流れを利用するためには、まずこの1と2を使ってホテル・旅館の強みを一目で理解できるようにし、その宿に泊まることで得られるものを写真やイラストで表現しなければなりません。

大きな写真でその施設を利用することで得られる体験を表現する

3はその写真をよりよく見せるための色の配置です。写真の周囲にあざやかな色を配置すると、写真がくすんで見えたり、背景の方が目立ってしまい、肝心の写真に視線が向かいにくくなります。そうならないように、周囲には無彩色と呼ばれる黒・灰色・白を配置するのが基本です。

ホテル・旅館のホームページで、すでにロゴマークとその色が決まっている場合には、その色(1~2色)+写真で色を使うのが基本です。四季折々の自然や建物の内装の写真には、元々様々な色が入っています。それを活かすためにも、不要な色を使わないという判断を行うことも重要です。

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

建物に使われている暖色系の色

ページ全体のイメージですが、どんな写真が使われるかによって大きく左右されます。

色でこんなことをアピールしたいというよりも、そのホテル・旅館の建物やロビー・客室・料理などがどのようなものであるのかを優先しなければなりません。紙のパンフレットや旅行誌などに掲載するプロが撮影したもの があればベストです。もし適切な写真がないのであれば、自分で撮影するのではなく、プロのカメラマンに撮影してもらいましょう。

内装や料理の写真をよく見せたい場合には、照明は白い蛍光灯ではなく、オレンジの白熱灯(LED照明や蛍光灯だと電球色)の色が多く使われます。外光が多く取り入れられる明るいロビーでは白っぽい色も多いかもしれませんが、調度品などの木と合わせて、室内はオレンジや茶色が入ってくることが多くなるはずです。また和風の建物の場合、木・墨などの和を感じさせる色が多く使われています。

このような内装のイメージをアピールしたいのであれば、写真の暖かいイメージに、落ち着いた赤・オレンジ・茶色などの暖色を加えて、全体を暖かいイメージに統一することで、暖かいもてなしのイメージを作ることができます。

また木のイメージがあまりなく、清潔感をアピールしたい場合には、白や灰色を足していくことになります。ビジネスホテルなどの場合は、このタイプが多くなるはずです。色が少なめだと少しさみしく感じられるかもしれませんが、実は大きな問題にはなりません。

内装の色に合わせた配色の例

その地域を表す海や山・花などの色

次にその地域の自然ですが、これはホテルそのものの質とは関係はありません。リゾートホテルやペンションなど「海」「山」といった自然を楽しむための宿であれば、その中から代表的な自然の色(例えば海辺なら青、山なら緑)を1色選び、それに自然と施設の写真を組み合わせます。またわかりやすいランドマークがあれば(例えば沖縄であれば首里城)その色を使うのもよいでしょう。

ただし、そのためには写真の質が重要になります。写真がぼやけていたり、構図が悪くて何が写っているのかわかりにくくなります。またいろいろなものを見せようとして、小さな写真をたくさん詰め込もうとすると、何のホームページであるのかがわからなくなってしまうため、欲張らずに1枚の写真を大きく使い、複数の写真を見せたい場合にはスライドショーを利用するなどの工夫も必要です。

1枚の写真と複数の写真から受けるイメージの違い

最も良くないのは、「写真の質が低く、色数が多いこと」ですが、無理に実物よりもよく見せようと大幅に加工したりするのは避けます。実際に訪れた人ががっかりしてしまい、口コミサイトで「写真は嘘」のように書かれてしまうことがあります。多少の補正は必要ですが、あまりに実態とかけ離れた写真を掲載しない方がよいでしょう。

写真を見せるための黒・灰色・白

これは主ではなく、写真を補うための色の使い方となります。写真を見せるための黒・灰色・白などは、写真そのものの色ではなく、その周囲や画面全体の背景色・ナビゲーションなどの色の使い方の工夫です。

基本的にはそのランクや価格帯などによって、使われる色に傾向があり、一般的には1泊の価格が上がると、全体的な色合いは暗くなっていきます。

価格帯で変わるイメージ。暗い方が高級なイメージになる

こちらも実際の価格と色のイメージにずれが生じないようにします。暗い色を多く使うことで高級に見えるかもしれませんが、「気軽に泊まれそう」というイメージではなくなってしまいます。また高級ホテルのようなサービスを得たい人が、実際に訪れた時に庶民的な接客であったならばがっかりさせてしまいます。気さくで優しい感じや接客の優しさなど人の対応をアピールしたい場合には、白・灰色の代わりに薄いベージュを使うだけで柔らかい印象になります。

ベージュと灰色によるイメージの差

旅館・ホテルは口コミの大変発達している業種です。実態と大きくかけ離れたイメージにならないように、十分気を付けなければなりません。

まとめ

  1. 基本は建物・施設の写真や周囲の自然の色で構成する
  2. 写真の周りにあざやかな色を置かず、できるだけ写真の色を活かすようにする
  3. 写真はプロのカメラマンに依頼して質の高いものを選ぶ
  4. 価格帯の高いホテルほど暗い色が使われる傾向がある
  5. 実態とかけ離れた写真や色を選ばない
  6. 接客の優しさを出したい場合には、白・灰色ではなくベージュを使う

このコーナーのコンテンツは、KDDI提供の情報サイト「はじめてWEB」掲載の「エキスパート(専門家)コラム」の情報を、許諾を得てWeb担の読者向けにお届けしているものです。

※「はじめてWEB」のオリジナル版は掲載を終了しました

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]