このブログは配色やデザインについて個人的に気付いたことを書くことが多いですが、そういえば高級感に関するまとめってしてないかも？と思って今回はこのテーマで記事を書いてみようと思います。高級感を打ち出したサイトは、業種に限らず使われることが多い演出のひとつです。ど初心者の頃は、何を作っても安っぽく見えてしまう…といった悩みもありました。どうすれば高級感を出すことができるのか、複数のサイトを通して感じたことをまとめてみました。
高級感にも色々ある
高級感を出す、といっても何の業種か、誰に対してか、ということによっても表現の仕方に違いが出てきます。女性向け・男性向け、値段の高さを表現したいのか、あまり高いものではないが上品さを表現したいか、などなど状況に応じて違った表現をする必要が出てきます。今回は様々な業種で、参考になるものを見てみたいと思います。
美容
hacci
はちみつコスメティクス HACCI
印象に残った配色
白の背景をベースに、ロゴにも使われているベージュ色を使った配色で清潔感と高級感を出しています。余白に余裕があって、なおかつイメージ写真＋最低限必要なテキストで優雅な雰囲気を崩さないようにしています。
クレ・ド・ポー ボーテ
クレ・ド・ポー ボーテ
印象に残った配色
こちらは高級化粧品ブランドのサイトです。黒をメインに使った配色なので、大人のイメージを強く打ち出しています。大人の雰囲気を出すために、他に使っている色も商品と同じ明度の低いパープルを使ったりと、統一性も考えた配色がされています。こちらも上で紹介したサイトと同じく、必要最低限の情報のみに抑えることで上質な雰囲気が出ているように思えました。
ファッションブランド
ティファニー
Tiffany
印象に残った配色
ターコイズブルーの色で有名なティファニーのサイトです。企業カラーをメインに使ったシンプルなレイアウトです。赤いリボンを写真内に使うことで、クリスマスの季節感を出し、さらに色の対比がうまれ見た目のアクセントになっています。
バーバリー
burberry
印象に残った配色
チェック柄で有名なバーバリーのサイト。高級ブランドは特徴になるロゴや柄がある企業が多いので、その部分を打ち出したサイトが多いですね。使用する写真で高級感と商品をアピールしています。
車
メルセデスベンツ
メルセデス・ベンツ
印象に残った配色
高級車でパッと思いついたので、参考に取り上げてみました。背景は黒～グレーのグラデーションがかかっています。高級感を出すには、黒は定番カラーですね。ただ下にある細かいメニューは、テキストベースで構成されています。黒い色が背景のサイトは、白の背景のサイトよりも見た時のインパクトが大きい印象を受けました。
LEXUS
LEXUS
印象に残った配色
トヨタの高級ブランド、レクサスのサイトです。こちらのサイトは割と新しいサイトなのかなーと思わせる、幅も広めで動きやレイアウトもこだわりのある印象です。斜めのラインを入れることで広がりを感じますね。LEXUSも同じく黒やグレーをメインに使った配色になっています。トップページ下のカーモデルの写真も、車種によって撮る角度や雰囲気を変えていてメリハリを感じます。
宿泊施設
加賀屋
加賀屋
印象に残った配色
和倉温泉旅館 加賀屋のサイト。メインに使っているスライドイメージの部分には黒を使って全体を引き締め、サイト内には部分的に縦書きテキストを使って和のイメージを出しています。メインイメージ下のメニューも縦書きのメニューになってますね。
ホテル ラ・スイート神戸
ホテル ラ・スイート神戸
印象に残った配色
全体の薄いグレーに、アクセントとしてロゴにも使われている色の２色を基本に構成されています。レイアウトもすっきりしていて、洗練された印象があります。エステやウエディングとしても利用可能なので、清潔感のある配色になっていると思われます。
飲食店
横浜モノリス
横浜モノリス
印象に残った配色
白の背景と写真の相性がよく、品の良さが引き立っています。メニュー部分には実写のアイコンがデザインされているのもおもしろいなと思いました。余計な目立つ色も使っていないので、全体に統一感もあります。
赤坂美料あけち
赤坂美料あけち
印象に残った配色
写真を画面いっぱいに表示されていてインパクトがあります。写真の料理そのものがお店の高級感を物語っていますね。高級感を出すサイトは、写真を多く使ったりしているケースが非常に多いなと思いました。パララックス（視差効果）を使っているので、オリジナル性もあります。黒が多い配色の中で、料理の赤と緑が映えて目立っています。
というわけで、色々なサイトを見てみると気付くこともいくつかありました。
1.ゴシック体よりも明朝体を使う
ゴシック体よりも明朝体を使う
ケースバイケースかもしれませんが、高級感や品の良さをアピールする場合、明朝体が使われていることが多いです。ゴシック体に比べて明朝体のほうが文字に動きがあり、大人っぽい印象を受けます。メイン画像に使うキャッチコピーなどに使うと効果的です。ゴシック体を使う時は太さや文字の色に気をつけないと、安っぽい雰囲気になります。
2.文字を詰め過ぎない
文字を詰め過ぎない
字間が詰まり過ぎると、窮屈で余裕がない印象になるので意識すると雰囲気が変わると思います。広くし過ぎても子供っぽくなるので注意が必要です。
3.行間やグループ間の余白に気をつける
行間やグループ間の余白に気をつける
ちょっと大げさなぐらいに余裕をもたせたほうが、優雅な雰囲気が出やすいです。余裕をもたせるためにも、掲載するテキストの量が多くならないように最低限に抑えるなど情報整理も必要になってきます。あまり文章が多いと、情報サイトのようになってしまい違ったイメージを与えてしまいます。
4.グラデーションを使う
グラデーションを使う
グラデーションを出すことで色の濃淡が出来るので、サイトの中に奥行きを感じることができます。わずかに色に差をもたせるぐらいの、ほのかなグラデーションが良いです。ベタなグラデーションだと、イメージが逆になってしまうので注意しましょう。
5.派手な色をむやみに使わず、彩度や明度を調整する
派手な色は極力使わず、彩度や明度を抑える
色の調整参考例
高級感を出す時に、派手な色を使ってしまうとその色だけが目立ってしまい雰囲気が壊れやすいです。目立たせたいところがあっても、色以外の方法を考えたほうが無難です。彩度の低いパステルカラー、特に薄いベージュは品良く見えるので良く使われています。もし印象の強い赤などを使いたい場合は、ポイントをしぼって使わないと、その色の印象が強く出てしまいます。
6.グリッドレイアウトを意識する
グリッドレイアウトを意識する
高級感＝品格がある、というイメージのせいか縦横が綺麗にそろっているレイアウトを多く見かけました。個性的、というよりは定番パターンの配置といった感じですね。グリッドレイアウトを意識して、縦横のラインに気を使うことで情報が整理され、きちんとした印象を与えることができます。
7.黒は色の印象が強い
黒は色の印象が強い
色々サイトを見ていて気付きましたが、黒が背景に使われていると白い背景よりも印象が強い感じがしました。白の背景だと、ただの背景といった認識でそこに使う色との組み合わせで白が際立ったりしますが、黒の背景の場合は黒だけが際立って見えました。なので黒を背景にすると配色の組み合わせが難しくなると思います（目的に合致すれば黒を使うべきですが）。
というわけで、考えたことをまとめてみました。高級感についてはもっと色々と突き詰めていけそうなので、言葉にしてアウトプットできるようにしていきたいと思います。それではー！