高級感って？作り込みって？WEBデザインの流行から見るポイント
2017.08.17
弊社でよくいただくご要望の中に、お客様の既存サイトを「よく見えるようにしてください」「作り込んでください」「高級感を出してください」といったものがあります。サイトリニューアルまでしないけれど、ちょっとどうにかして欲しいといったご要望です。
そこで、昨今のWEBサイトの流行から検証し、「作り込むとは？高級感とは？」についてポイントをまとめてみました。
「作り込み」と「高級感」は全く別。しかし背景は…
まず、「作り込み」と「高級感」は全く別です。 「高級感」は時には「リッチ」であったり「上品」と言った言葉にも置き換えられます。 全く別なのですが、ご要望をいただく背景は同じではないかと考えています。
“雰囲気いい感じ”サイトの量産
その要因の1つは、昨今の、フラットデザインや、ミニマルデザインといったWEBデザインの傾向があると思います。
今やwordpressでも莫大な数の”雰囲気いい感じ”なフリーテーマがあり、けっこう簡単に”雰囲気いい感じ”なサイトが量産されていると感じています。
WEBサイトの種類と目的
もちろんWEBサイトには目的によって種類があります。
- 他社と差別化を図ったり、ブランドのイメージを向上させるためのブランディングサイト
- 会社の事業内容や概要、サービス内容を紹介するためのコーポレートサイト
- 情報やノウハウなどをコンテンツとしてまとめ上位化を図るためのオウンドメディア
など、他にも多数。
それぞれに目的があり、あくまでデザインというのは目的を達成させる為の手段です。 加えて予算や納期などもありますし、前途した雰囲気いい感じサイトにバッチリはまるものも、もちろんあります。
しかし「作り込んでください」といったような要望が出てくるのは”テンプレートでは物足りない”と感じるクライアント様が多いからではないかと思います。
前置きが長くなりましたが、実際に「作り込んでいる」サイトや「高級感のある」サイトをピックアップしながら、デザインのポイントを紹介していきます！
「作り込む」とは？
1.オリジナルのイラストが入っている
https://www.heco.ac.jp/
http://www.dosuika.com/
フリー素材ではなく、クライアントに合わせたオリジナルのイラストが入ると一気に作り込み度が高くなりますね！
2.オリジナルの画像である
https://www.para-sports.tokyo/
人物の背景にメインカラーの3色をあしらうという本当に少しの手間で、ぐっと統一性が増し、作り込んでいる感が出ます。
3.フラットのようでフラットではない”一手間”
http://talking-ultrasuede.jp/category/exhibition/
http://www.kuronekoyamato.co.jp/ytc/customer/
これはフラットデザインの後のトレンドでもありますが、“フラットのようでフラットではない”というのもポイントです さりげなくテクスチャが入っている。シャドーが落ちている。少しだけ立体であるといった一手間が大事ですね。
4.CSS3のアニメーション使い
http://www.kirala.jp/
最終的な見た目はフラットデザインでベーシックなものであっても、ページ読み込み時やマウスオーバー時にアニメーションが施されているとワンランク上の作り込みサイトになります。
作り込み＝メイクアップ
まだまだポイントはありますが、ざっと4点ご紹介しました。
作り込みは本当にちょっとした何か一手間だと思います。
女性でいうメイクアップに似ているかもしれません。
メイクアップと一緒で、どこまで施すか、すなわち作り込むかに、センスが出ますね！
「高級感」とは？
高級感のポイントは、あまり流行に関係ない普遍的で鉄板のものが多いです。是非チェックしてみてください！
1.フリー素材なんてNG！写真が全て
http://gina.tokyo/
http://www.jiyujin.co.jp/#satoyama-jujo
http://gina.tokyo/は切り抜きと角版が大胆にレイアウトされており、割と静のレイアウトの方が上品さはだせる中、一段とセンスが光っています。
またhttp://www.jiyujin.co.jp/#satoyama-jujoのように、文字の大きさのジャンプ率を低くするのもポイントです。文字は読ませる為でなく、あくまで写真を引き立たせる為の要素ぐらいが高級感が出ます。
2.背景にさりけなくテクスチャを入れている
http://www.matsusakaushi-yoshida.jp/
質感やシズル感を感じる要素を入れるとフラットな状態より上質に見えます。がっつり入れるのではなく、さりげないぐらいがポイントです。
3.鉄板のゴールド使い
http://www.mitsuoka-motor.com/
https://www.l-s.jp/
モノトーン×ゴールドは言うまでもなく鉄板ですが、上記のサイトのようにネイビーにグラデーションを入れたり、また全体的にヌーディーな色彩でまとめても高級感が出ます。
4.ゴシックより明朝。太いより細いを
http://www.itohkyuemon.co.jp/
http://glenroyal.jp/
本文まで明朝系書体を使用しているサイトもありますが、http://www.itohkyuemon.co.jp/のようにだいたいh2タグまでの明朝率が高いです。
また、ライン使いも細いというよりは淡い・目立たない・さりげないといった方が高級感の出る傾向にあると思います。
5.彩度は低め
http://www.hukla.co.jp/
多色であっても彩度の低い色で配色をとる事でカジュアルになりすぎず、落ち着きのあるデザインになっている例です。
高級感＝普遍的
冒頭でも述べたように、ポイントだけ見るとWEBに限らずデザインするにあたって普遍的なポイントだと思います。
しかし、WEBデザインの流行から見ると、「さりげなく、控えめに」が傾向としてあるなと感じました。
まとめ
いかがでしたか。
タイトルが「WEBデザインの流行から見るポイント」でしたので、いくつか参考になるデザインをピックアップしまとめました。
「作り込む」と「高級感」を別々にまとめてもと思ったのですが、昨今のデザインのテンプレート化に少し物申したかった事と、流行から見た傾向が似ていたので、同じコラムにまとめました。
ポイントは“さりげなさ”すなわち、ちょっとした手間です。
WEBデザイナーのみなさんの参考になれば良いなと思います！
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
Webサイト制作Webデザイン
