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

Webデザインでパステルカラーを使うのは最近のトレンド、またはそれ以上といってもよいでしょう。魅力的なビジュアルを作るために、デザイナーがマスターしておきたいパステルカラーの効果的な使い方を紹介します。

「パステル」と聞くと、淡いピンクやイエローを思い浮かべる人が多いかもしれません。ここで紹介するパステルにはもっと多くのカラーがあります。

サイトのキャプチャ

How to Use Pastel Colors in Web Design Projects

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

パステルの写真

サイトのキャプチャ

Solasie

パステル調の写真やパステルをオーバーレイさせた写真を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

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

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

パステルを使ったタイポグラフィ

サイトのキャプチャ

Putzengel

多くのデザイナーは、画像や背景に単独でパステルを使うことに限定されていません。このカラースタイルは同様に、タイポグラフィにも適用できます(簡単ではないけれど)。

飾り気のない背景に対してたくさんのコントラストをつくるために、大きくて大胆なタイポグラフィにパステルを使うことは良い使用例です。文字をより大きいサイズで使用することで、その控えめなカラーがスクリーンに映えます。このテクニックは少ない文字数に限られたもので、文章などの長い文字数には適しません。

UIエレメントにおけるパステル

サイトのキャプチャ

Duy Tran

パステルをUIエレメントのスキームの一部として使用することは面白いコンセプトです。フラットデザインから派生した一つのコンセプトで、ボタンや他の要素にパステルカラーを使います。

「Duy Tran」では、パステルのボックス全てが特大のボタンです。「パステルカラー」イコール「ボックス」、イコール「クリック可能」であることをユーザーに伝えます。また、ミニマルにデザインされたメインとのコントラストも効果的です。

まとめ:パステルをWebデザインで使う大切なポイント

カラーパレットでパステルカラーを使う時に大切なのは、フレッシュに見える何かを作ることです。使い古した感じではありません。
鮮やかな画像やコントラストの強い要素などの高い彩度と対にすることで、パステルは落ち着いたカラーパレットを作成するのに役立ちます。

パステルカラーは本来、まわりを落ち着かせる、リラックスさせる役割を持っています。このタイプのカラースキームをWebデザインに使う時は、この利点を有効に使ってください。カラーがどのように全体的なデザインの他の部分と相互に影響を与えるかを忘れずに!

sponsors

top of page

©2018 coliss