Webデザインで魅力的なビジュアルを作りだすパステルカラーの効果的な使い方

Post on:2014年12月24日

パステルの写真

パステル調の写真やパステルをオーバーレイさせた写真をWebページに使うと、繊細で素晴らしいキャンバスになります。写真のトーンを少し控えめにすることで、要素を配置してもしっくりきます。ロゴやボタンなどの要素とコントラストを使って配置するのもよいでしょう。

「Solasie」のロゴはパステルトーンの写真とうまくフィットしています。このやり方はソリッドなラインでデザインされたゴーストボタンにも使えます。

パステルの背景

Dear Mum

パステルの背景は見た目を圧倒させないで、多くのカラーを使うことができる素晴らしい方法です。パステルの優しいトーンでページ全体を包み込むことで、全体の印象を和らげます。

最近の使い方としてパステルを背景に使う時は、モノクロのカラースキームに一つのバリエーションとして使います。一つのカラーは強い印象を与え、ホワイトのテキスト要素と美しいコントラストを生み出しています。このテクニックはタイポグラフィを効果的に使うことで、モダンなデザインに仕上げることができます。

パステルで目立たせる

Marie Catribs

パステルと「目立つ」は関係ないように思うかもしれません。しかし、パステルを使って大胆なデザインを作りだすことができます。パステルは控えめな印象があるため、目立たせるためにパステルってどうやって？と思うでしょう。

「Marie Catribs」は素晴らしい仕事をしています。ここで使用しているパステルの色合いはかなり大胆で、女性がカラーのレイヤーからのぞき見している面白いレイアウトです。パステルの大胆さはあなたが実際にイメージを見て、フォーカスを合わせる助けになります。ここで使われているパステルの背景はより少ないインパクトを作りだしています。

パステルで印象をつくる

Sweez

あなたはビジターがWebサイトでどのような印象を受けることを望みますか？パステルは落ち着き、リラックス、安心といった印象を与えます。もしこれらの印象をWebサイトで与えたいのであれば、パステルのカラーパレットは正しい選択になります。

「Sweez」ではカラーとこのエモーションを繋ぐ素晴らしい仕事をしています。イメージについての全てが落ち着いたパステル調の色合いでデザインされています。まるで静かな場所に座り、暖かいカプチーノをゆっくりと楽しむ、そんなイメージです。ここで使用されているカラーがどれくらい効果があるように見えますか？

イラストにおけるパステル

Make Your Money Matter

パステルカラーはイラストにも大きな影響を与えます。このカラーコンセプトは、ビジターに何かしらの印象を与えたい時に効果があります。

「Make Your Money Matter」では、パステルを使ったイラストにより控えめな落ち着きで描かれたアイデアを一緒に引き出しています。パステルのイラストではあなたが今までにしたことのない描き方を許します。

パステルを使ったコントラスト

Kinderfotografie

パステルカラーは何もないところに使う必要はありません。他のデザイン要素とコントラストを作るために使います。

「Kinderfotografie」ではパステルに、鮮やかな写真とテキストを組み合わせた優れた仕事をしています。パステルの部分に多くの細かいディテールがありますが、最初に目につくのは子供たちの写真と「smiles」という単語でしょう。その後で、洗練されたディテールたちに気づき始めます。

パステルをナビゲーションに使う

Wonderfull Wild

パステルはナビゲーションにも役立ちます。通常ナビゲーションは、ブラックかホワイトのボーダーかバーでWebページの枠にはめるでしょう。しかしパステルのカラーも同様にこのスペースで機能します。

パステルがナビゲーションとして機能する理由は、デザインの他の要素と切り分けることができるからです。「Wonderfull Wild」ではメインの写真はビジターが最初に見て、反応する要素でしょう。ナビゲーション要素はメインのコンテンツエリアとうまくバランスが取れています。ナビゲーションに使うカラーを選択する時は重要なビジュアル要素の邪魔にならないようにします。

フラットデザインにおけるパステル

Every Last Drop

これらのパステルカラーのトレンドは、その多くがフラットデザインから派生したものです。フラットデザインの最初の頃は多くのデザイナーが明るいパステルを好みました。

フラットデザインのプロジェクトでパステルがよく使わているのは、全体的な見た目と印象をまとめることができるからです。しかし同じ方法でビジターに目立たせるようデザインしないでください。パステルとフラットカラーはビジターをページ上の特定の場所に導いたり、重要なテキスト要素を強調するために使うことを少しだけ簡単にします。