高級感のあるデザインはどうやったら作れるんだろう、と思ったことはありませんか?実際に自分自身もよく悩んできたこの問題。

なんとか感、という抽象的な言葉から、具体的にビジュアルとして作るのって結構難しいんですよね。そこで今回は高級感というのはどういうものか?というのを、かみくだいてどんな配色やデザインをすれば高級感を感じることができるのかについてまとめました。色々なWebサイトのデザインも参考にしながら、具体的に説明したいと思います。

高級感のあるデザインや配色を作れるようになりたい!と思っている方の参考になればと幸いです。

※2017年10月に加筆修正し、内容を一新しました

「高級感」からさらに想像を広げてみる

「高級感」からさらに想像を広げてみる

高級感、という言葉だけではなかなか考えるのも大変なところがあるので、他に派生してどんなキーワードが思い浮かぶか、ざっとあげてみるとこんな言葉を思いつきました。

値段が高い・シック・ハイセンス・洗練された・お金持ち・落ち着きがある・ブランド・エレガント・上品・輝きがある・敷居が高い・モダン・セレブ・宝石・ゴージャス・優雅な・余裕のある

ざっとあげただけでも色々出てきますね。やっぱり高級感というと、値段が高い・品がある・落ち着きがあるという意味合いのキーワードをはじめに連想しました。

高級感を出すといっても何の業種か、誰に対してか、ということによっても表現の仕方に違いが出てきますよね。女性向け・男性向け、値段の高さを表現したいのか、あまり高いものではないが上品さを表現したいか、など状況によって違った表現をする必要が出てきます。

ですが、まずは自分が作りたい高級感を他の言葉で言い換えるとどんな言葉だろう?と考えてみるのは次のヒントが生まれやすいのでおすすめです。

連想するキーワードが出たところで、色々な視点からどんな風に高級感を表現できるかを考えていきます。

配色で表現する高級感

色はビジュアルに訴える重要な要素なので、とても大事ですよね。どんな配色や色の選び方に気をつければ高級感を感じるのか、3つのポイントをあげたいと思います。

色(有彩色)の彩度を抑えめにする

これ!とても重要です。色々なサイトを参考に見てみると色使いで彩度は抑えめにしているものが多いです。有彩色、と限定したのは、白・灰・黒の無彩色は例外ということですね。

彩度は色の鮮やかさを表すものですが、彩度を抑えめにすることによって「落ち着いて、品のある印象」を感じることから、高級感を表現できます。

色(有彩色)の彩度は抑えめにする

比較できるように、2つの色を彩度を変えて並べました。

左側の色は彩度100%なので、鮮やかで明るく派手な印象から高級感というよりも元気な感じがします。右側にある彩度を50%にしたほうが、彩度を弱めることによって鮮やかさは軽減されましたがその分見た目の印象がやわらかくなり、落ち着いた印象を受けます。高級感を出す時は、彩度を抑えて落ち着いた印象を多く取り入れるといいですね。

もし彩度の高い色を使う場合は、1色だけ彩度を高くするなど他の色とのメリハリにも注意するとバランスがとりやすくなります。

高級感を出すには、色の彩度を調整することが大切です。

色の明度で華やかさ・重厚感を表現する

彩度を調整して落ち着きを表現するとともに、次は明度にも注目してみましょう。

彩度は色の鮮やかさの度合いでしたが、明度は色の明るさの度合いです。明度を高くすると華やかに、逆に低くすると重厚感のある格式高い印象を表現しやすくなります。

色の明度で華やかさ・重厚感を表現する

例として明度を10%ずつ調整したものを並べましたが、明度が高くなるにつれて色味が際立ち華やかに、逆に明度を低くすると暗さが際立って重厚感が出ます。

明度を低くする時の注意としては、彩度もあまり低くすると黒に近い色になってしまうので、彩度は少し高め(60%〜70%ぐらい)が良いです。そうすると色味を残しつつ重たい色になります。その辺りは実際に色をみながら調整してください。

テーマに合わせて色の明度も調整すると、雰囲気をうまく操作できますよ。

使用する色の数を限定する

彩度・明度の調整をしても、色の使い方によってはごちゃごちゃした印象になってしまい、高級感がなくなってしまいます。

なので最後に使う色の数にも注意しましょう。

色(有彩色)の彩度は抑えめにする

色を多く使うと、カラフルで子供っぽい印象になりやすいです。逆に色を限定させて、見た目全体のまとまり感を出すことで大人っぽい雰囲気を作ることができます。高級感を出すには、色の数を限定させることも必要です。

またどんな色を選ぶかについては、ベースカラー・メインカラー・アクセントカラーの3つに絞るところから始めるのもおすすめ。

ベースカラー・メインカラー・アクセントカラーについて

ベースカラーは背景など大部分を占める色なので、無彩色(白・灰・黒)を選ぶことが多いです。もちろん他の色を選んでも大丈夫です。

メインカラーではデザインの中心となる色を選びます。具体的には企業の色であるコーポレートカラーだったり、女性向けに赤系の色を使ったり、とテーマに応じて選びます。

最後のアクセントカラーで、メインカラーとの組み合わせを考えて色を選んでいきます。アクセントカラーなので、メインカラーの補色になる色を選んでアクセントをつけたり、逆にメインカラーの同系色を選んでまとまりを出したりします。

たった3色でも組み合わせ次第で色々なバリエーションができるので、ぜひ試してみてください!

余白が参考になるサイト

ラ・スイート神戸ハーバーランド

ラ・スイート神戸ハーバーランド
https://www.l-s.jp/

彩度の低い(5%程度)薄いベージュを占める割合の高い背景に使って全体を落ち着いた雰囲気に。彩度が高めの黄土色をアクセントとして使っていますが、明度は抑えているのでバランスもとれています。ゴールド調のベージュや黄土色は高級感を表すデザインでも多く取り入れられています。写真の配色とも合っていますね。

京都 宇治 伊藤久右衛門

京都 宇治 伊藤久右衛門
https://www.itohkyuemon.co.jp/

お茶屋さんのサイトですが、お茶を連想させるグリーンは彩度を低めに抑えることで格式の高さも表しています。黒と組み合わせることで、より大人向けの品ある雰囲気になっていますね。

余白で表現する高級感

余白で高級感を表現したい場合はどのような工夫ができるかも考えてみます。

高級感はキーワードであげたように、品が良い、落ち着いた感じ、余裕のある、といったワードが出てきましたのでその点を余白で表現したいと思います。

ゆったりと大きく余白を入れる

余白をなるべく大きく入れることで空間が大きく見え、落ち着きや品の良さ、優雅さを表現しやすくなります。

逆に余白が少ないと窮屈で余裕がない印象に見えます。

ゆったりと大きく余白を入れる

この余白を作る方法は単純に大きなエリアに小さな要素を置く、という単純なものではなく上の例のように色々な方法があります。なかなかデザインで配置する要素をほとんど削る、ということが難しいケースも多いのでこういった工夫が必要になってきます。

行間を空ける

行間を空ける、というのは文章が入るとどうしても文字が連なる印象から窮屈になりがちです。なので行間を空けることによって文章も読みやすくなるとともに、ゆったりとした空間ができます。

要素を離す

要素を離す、というのは文章以外の写真やアイコンなどを配置する時の余白部分です。高級感を必要とするデザインの場合は、他の要素との距離感を意識的に大きくとることで優雅な雰囲気が出ます。

写真を工夫する

最後の写真を工夫するというのは、使用する写真自体に空間を感じる写真を使ったりすることでも余白を感じることができます。例ではコーヒーカップの写真を載せていますが、被写体のコーヒーカップよりも他の部分の面積が広いので、空間が生まれ落ち着いて品のある印象を感じます。

余白で高級感を出すには、意識的に大きく余白を作ると雰囲気を作りやすいですね。

余白が参考になるサイト

白鶴

白鶴
http://www.hakutsuru.co.jp/tenku/

商品写真を大きく配置して目立たせていますが、その分周りには何も配置せず大きく余白をとって品の良い印象を出していることがわかります。

Craftsman Park

Craftsman Park
http://craftsmanpark.com/

ヘッダーのメニューなど情報量は多めですが、見出しの周りやNewsの各要素の間など、余白を大きめにとることでうまくバランスをとって高級感を表現しています。

また余白をいれると白やグレーなどのモノクロの配色自体が落ち着きや高級感を表現できるので、モノクロを意識するのも高級感につながると思います。

モノクロの配色でクラシックな印象のWebサイトまとめ

フォントで表現する高級感

高級感を感じるフォントはどんなものがあるでしょうか。

明朝体とセリフ体がおすすめ

日本語フォントの場合は「明朝体」、英字フォントの場合は「セリフ体」が大人っぽく高級感が出ると思います。

明朝体とセリフ体

どちらも「うろこ」や「飾り(セリフ)」と呼ばれる文字を装飾するものがついているので見た目も映えますし、文字の太さに強弱があるので動きがあってデザイン性があります。

実際にデザインでも高級感を表すデザインでは、明朝体とセリフ体をうまく使っているものが多いです。線の太さに強弱があると流れが生まれて、そこから優雅さも感じるのも一因だと思いました。

文字の字間でも雰囲気が変えられます

行間や書体だけでなく、文字の字間が狭いか広いかによっても見た目の印象が変わります。

文字の字間にも配慮する

字間が狭いと少し窮屈には見えますが大人っぽい印象に、字間が広いと余白がうまれる分子供っぽい印象になりやすくなります。

使用する書体の持つ雰囲気とデザインのテーマに合わせて調整したほうがいいですね。

ゴシック体とサンセリフ体(飾りのない書体)を使う時の注意

明朝体とセリフ体以外によく使う、ゴシック体やサンセリフ体(飾りがない書体)を使ったらいけないかというと、そうではです。ただし線の細いものを使う・フォントの大きさに気をつけるといった工夫をすると使いやすくなります。

フォントの太さや大きさを工夫する

文字が太いとカジュアルな印象になりやすいですし、文字が大きいと落ち着いた印象が損なわれます。必ずこうしないといけないわけではないですが、太さを細めにして、あまり大きくしないほうが高級感のあるデザインには合います。

ゴシック体と明朝体の使い分けにも別の記事で書いているので、興味がある方はご覧ください

ゴシック体と明朝体の使い分けについて。それぞれの違いを比べてみました。

女性向けなら筆記体(カリグラフィー)の書体もおすすめ

他にも英字書体だと筆記体はウェディングや女性向きのデザインによく使われています。文字のつながりに流れがあるので、優雅な見た目にしたい時にぴったりです。

フォントが参考になるサイト

美容皮膚科タカミクリニック

美容皮膚科タカミクリニック

http://www.takamiclinic.com/

見出しと小見出しは明朝体を使って、文字を目立たせつつ真面目で品のある印象を与えています。その下にある説明文はゴシック体ですが、文字を小さく表示させることで印象が崩れないように配慮されてますね。配色もグレーベースの配色で落ち着いています。

Dewitt Watches

dewitt watches

http://www.dewitt.ch/

セリフ体を使うことで品格あるブランドのイメージによくマッチしています。字間もあけることで、ゆったりと余裕のある印象に。あまり文章量も多くない点も高級感を出している要因だと思います。

レイアウトで表現する高級感

情報が整理された雰囲気を作る

レイアウトで高級感を表現する場合、綺麗に整理整頓された見た目にすることで真面目さや実直さを感じ、そこから品質の高さ・高級感を表現できます。

Webデザインでいうとグリッドレイアウトなどはよく使われている手法だと思います。縦と横をそろえて、整理整頓された雰囲気を意識するのがおすすめです。

また整理整頓するためには、デザインを構成する要素の中で重複したコンテンツや表現がないかも確認して、無駄のない構成が必要にもなってきますね。

規則性のある動きを作る

デザインの配置に動きのあるレイアウトを作る場合もあると思いますが、その時も品の良さ・落ち着きを意地するために規則性をもたせたレイアウトにしたほうが高級感が出ます。

あまり自由な配置にすると、元気でポップな印象、また子供っぽい印象になりやすいです。

レイアウトが参考になるサイト

takedayoshifumi

takedayoshifumi

http://www.takedayoshifumi.com/

イラストが縦横綺麗に整列されていて、洗練された品のある印象を感じます。余白も大きくあけていて、色使いもモノクロメインなので高級感を感じる要素を組み合わせていますね。

リリーシェハーブ便秘薬

リリーシェハーブ

http://www.suishodo.jp/releache/index.html

レイアウトに動きがありますが、左・右・左の規則性がある動きなので落ち着いた雰囲気を保っています。落ち着き感よりも優雅さを強調したい時にはこのような動きのあるレイアウトがおすすめです。彩度の低い配色を使って高級感をより引き出していますね。

ヨーロピアンなどの素材を使う

飾り素材をできるだけつけないことで落ち着いた高級感を演出することもありますが、逆に豪華さや優雅さを強調したい時には飾り素材を活用するのもおすすめです。

特にダマスク模様や曲線が強調されたヨーロピアンの素材は、実際にWebやグラフィックのデザインでよく使われています。エレガントな雰囲気にしたい場合は、フリー素材も含めて沢山素材があるのでぜひ活用してみてはいかがでしょうか。

高級感を演出する、ビンテージ風オーナメントの無料ベクター素材セット

オシャレな質感、継ぎ目の無い「ダマスク柄」無料パターン、テクスチャ素材20個まとめ

女性向けのサイトだと優雅な雰囲気のサイトが多いので参考になります。こちらの記事では女性向けのサイトに関するデザインや配色についてまとめています。

“カワイイ”は作れる!女性が好むサイトを作る時のポイント。

高級感を出すコツまとめ

というわけで、主に配色・余白・フォント・レイアウトの4つの視点から高級感を出すコツについて説明しました。

一番重要なのが、最初のキーワード出しの部分だと思います。冒頭でも書いたように高級感といっても色々なパターンがあるので、どういう高級感を出したいのか、他の言葉に置き換えて具体的に軸を決めていくことが大切です。またキーワードを元に画像検索をしてイメージをふくらませるのも良いですね。

また実際に自分の目で色々なサイトを参考にしていくと、新しいヒントがどんどん出てくると思います。ギャラリーサイト一覧についてはこちらの記事でまとめています。

【2017年度版】Webデザインのギャラリーサイトまとめ

ここが決まればデザインがブレにくくなるので、そのキーワードを元に配色や余白、フォント選びをしていくと手探りで作るより断然に理想に近いものができてくると思います。

一言で語れない奥の深いテーマですが、高級感を作り出すヒントになれば幸いです!