コラムColumn

高級感のあるサイトデザインを制作するためのポイント

こんにちは、WEBデザイナーの「のへ」です。

WEBデザイナーとしてまだまだ勉強中の身である私ですが、担当させて貰えるお仕事で好きなジャンルのデザインがいくつかあります。「女性向け」や「可愛い系」も好きですが、特に好きなのは「高級感のあるデザイン」です。作るのはもちろん見てるだけでわくわくドキドキしちゃいます。化粧品や結婚式場、食品、飲食店、アクセサリー、服飾関係などなど…。

今日はそんな「高級感のあるWEBサイトデザインを制作するためのポイント」についてお話しようと思います。

 

 

1.高級感のあるWEBサイトデザインの例

では、どんなWEBサイトが「高級感」を醸し出しているのでしょうか?

今回は色別に分けて、お手本のサイトデザインをいくつかピックアップしてみました。

【白系】

 

ワイズ スキンケア クリニック

http://ys-skincare.com/

Y's Skin Care Clinic ワイズ スキンケア クリニック(仙台の皮膚科・美容皮膚科)

 

皮膚科・美容皮膚科のコーポレートサイトです。

ファーストビューで綺麗な写真が大きく表示されます。

使用されているフォントは明朝体、筆記体のアルファベット。花の画像素材がポイントで使われており、すっきりしたカラーリングと相まって清潔感があります。

 

 

ハワイのホテル | ワイキキ | ハレクラニ

http://www.halekulani.com/jp/

ハワイのホテル ワイキキ ハレクラニ 【公式】

 

ハワイの最高級ホテルのブランディングサイトです。

キャッチコピーの「天国にふさわしい館」にあるように、天国を彷彿とさせる美しい風景の写真が次々に現れます。背景は白一色で、フォントはやや小さめな印象を受けますが、全体的に余白を取っているので決して見辛いことはありません。

 

 

福岡県宗像市の菓子処 さかした製菓

http://wagasi-sakasita.jp/

福岡県宗像市の菓子処 さかした製菓

和菓子屋さんのコーポレート・ブランディングサイトです。

真っ白ではない、ややグレーがかったスノーホワイト色が目に優しいデザイン。綺麗に並べられたお菓子の写真を見ているだけで幸せになれちゃいそうですね。お菓子の感触や匂いがモニターを通して伝わってきそうなくらい繊細な映りの写真が沢山掲載されています。

和菓子ということもあり、見出し等のテキストが縦書きに表記されている部分もあります。余白が大きく取られていて、ゆったりとした雰囲気のあるデザインです。

 

 

日本橋 和紙 榛原(はいばら)

http://www.haibara.co.jp/

日本橋 和紙 榛原(はいばら)

 

和紙店のブランディングサイトです。

サイトの背景はべた塗りの白色ですが、アクセントに濃い目の赤色が使用されています。

区切りとなるラインは、ほぼ1pxの細いラインとなっていて繊細な印象を受けます。

 

 

【黒系】

 

FIVE ENTERTAINMENT Inc

http://www.5magic.co.jp/

ファイブエンターテイメント株式会社(FIVE ENTERTAINMENT Inc)

 

芸能プロダクションのコーポレートサイトです。

黒色がメインカラーの、スタイリッシュなデザインです。男性的な高級感がありますね。アクセントに黄色が使われていて、高級感の中にポップで楽しげなイメージが見え隠れしています。

 

 

 

CA4LA(カシラ) CA4LA(カシラ)は帽子文化を世界に発信します

http://www.ca4la.com/

CA4LA(カシラ) CA4LA(カシラ)は帽子文化を世界に発信します

 

帽子メーカーのコーポレート・ブランディングサイトです。

スクロールしていくと写真が飛び出してくるパララックスデザインになっています。切り抜かれた写真にそれぞれ動きがあって面白い!

黒い背景に、金色のフォントを使用しています。黒×金という色合いだけでリッチな印象を受けます。

 

 

【茶系】

オーガニック食材を厳選したドイツ産まれの贅沢ドッグフード Plaiaden[プレイアーデン]

http://www.plaiaden.com/

オーガニック食材を厳選したドイツ産まれの贅沢ドッグフード Plaïaden[プレイアーデン]

ドッグフードのブランディングサイトです。

ドッグフードですが、人間が食べても美味しそうに見える写真が沢山掲載されています。

全体的に余白が取られていますが、文字間にもゆとりがあり、可読性の高いデザインです。

ヨーロピアン調のパターン、イラストが随所使われている点も高級感を感じさせるのではないでしょうか。

 

【赤系】

東京會舘のクリスマス2014|レストラン・クリスマスケーキ・ディナーショー

http://www.kaikan.co.jp/special/xmas/

東京會舘のクリスマス2014|レストラン・クリスマスケーキ・ディナーショー

レストランのクリスマス用特設サイトです。

ぱっと目に飛び込んでくるケーキの苺の赤色がとても鮮やかで美味しそうですね!クリスマスカラーの赤が強調されたデザインです。写真を大きく配置して、マウスを動かすことで表示される画像のサイズも変動する、動きが面白いサイトでもあります。

 

 

2.「高級感」の共通点

 

今回ピックアップしたサイトデザインは以上です。

共通している点はどんなところだったでしょう?

 

まず「写真」ですね。

サイズが大きく、なおかつとても解像度の高い写真を掲載しているサイトが大多数でした。

 

次に「余白」です。

文字間を大きめに空けているサイトもありましたが、行間や画像同士の間など、余白を大きく取っています。

ゆったり、すっきりとした印象は、高級感に繋がるようですね。

 

3つ目は「フォント」です。

使用するフォントは明朝体のものが多かったです。また、サイズは小さめにしています。

テキストの見た目はシンプルで、繊細な印象があります。

 

4つ目に「色合い」です。

今回ピックアップしたサイトは「白」「黒」「茶」「赤」の色系統でしたが、どれも落ち着いた色合いで彩度の低いデザインでした。

 

5つ目に「境界線」です。

境界線を使用していない、もしくは1px程度の細い境界線を使用しているパターンが主のようです。

 

 

■まとめ■

 

いかがでしたでしょうか。今回ピックアップしたサイトは8点のみでしたが、もっと沢山の「高級感のあるデザイン」がWEB上に点在しています。

今回取り上げた8サイトに共通する点は上記の通りでしたが、よりじっくり観察することで他の共通点を発見出来るかもしれませんね。そのときは私に教えて下さい。

では今回はこの辺で。

 

デザイン / 配色 / WEBデザイン / デザイナー / カラーリング / ゴージャス / リッチ / レイアウト / 解像度 / 高級感

執筆者:ブログ担当

お問い合わせフォーム