キーワード1─「上品」 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

WEB design samples for image クール、かわいい、信頼、和風、レトロ…… 印象どおりのWEBをつくるデザイン見本帖


keyword
上品

[類義語]洗練、気品、スマート


point

必要な要素を見極めた欲張らないデザイン
主張しすぎない程度のテクスチャを使う


上品

上品さをキーワードとするサイトには老舗の店舗やブランド品、あるいはホテルなどが挙げられるだろう。それ以外にもエステや美容を扱う施設なども上品さを求められることが多い。上品さを出すポイントは欲張らないということだ。色も画像も装飾も本当に見せたい、必要なものをセレクトして前面に押し出すと効果的だ。あれもこれもと取り入れてしまうと、上品さが失われてしまう。また、主張しすぎない程度のテクスチャを用いて細かいディテールにこだわるといい。

制作・文=島根未央




■Design Parts/デザインパーツ


デザインパーツ1 デザインパーツ2 デザインパーツ3

過度な装飾は上品さには禁物だが、さりげないアレンジは必要だ。タイトル画像なども、ただの塗りつぶしだと素っ気なくなってしまうので、簡単な模様を施してみる。湾曲や波のようなしなやかな線は上品に見える要素なので、lllustratorかPhotoshopでタイトル画像のベースをつくり、その上に湾曲したオブジェクトを乗せたのち不要な個所を削除する。必要に応じ、重なり合った模様の透明度や描画モードを調整するといいだろう。


[その他のデザイン]

その他のデザイン1 その他のデザイン2
彩度はある程度保ちつつ落ち着きのある色味に、曲線を取り入れよう




■Layout/レイアウト


上品なレイアウト

上品さを出したい場合、それぞれの要素のマージンが重要になってくる。配置する要素がシンプルなものであれば少しのマージンでも十分上品なイメージになる。逆にマージンを取りすぎると上品というよりも殺風景になってしまうので注意が必要だ。





■Texture/テクスチャ


上品なテクスチャ

ページの細部には簡単なパターンを使うといい。小さな場所でもこれがあるのとないのとでは仕上がりが随分違ってくる。上のサンプルサイトではナビゲーションの上部に細かい斜線のパターン、ボタンにはレース調のテクスチャを施した。さらにレイヤーメニュー→“レイヤーマスク”や[描画モード]で調整すると、ボタンにレースがなじんだようになる。


[その他のデザイン]

上品なその他のデザイン 上品なその他のデザイン2
すっきりと洗練された印象を与えるため、ストライプやテクスチャの目は細かく、色はなじみのよい色を使用するとよい




■Example/実例


上品の実例

Kahala Hotel
kahalaresort.com/
必要なものだけを配置し、装飾はグラデーションと陰影程度となっている。




■Application/応用


上品の応用

「上品」と「和」をミックスしたサンプルサイト。たいていの場合、和のサイトは高級感や上品さを求められる。テクスチャやナビゲーションなどのディテールは「上品」のものをそのままを使いながら、落ち着いた日本の伝統色をパーツに施したり、メインビジュアルを和風にするだけで、上品な和のサイトができあがる。




■Color map/配色

高明度の紫系や青系を中心に使い、あまりコントラストをつけない

#cc99cc #999999 #ccccff abc #ccccff #cc99cc #6699cc abc #66cc99 #003399 #99ffff
#CC99CC #999999 #CCCCFF #CCCCFF #CC99CC #6699CC #66CC99 #003399 #99FFFF


キーワード1 「上品」
キーワード2 「健康」
キーワード3 「ナチュラル」
キーワード4 「インダストリアル」



twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在