0%

Designデザインワークショップ

Posted:2015.02.10

グラデーションを使ったデザイン表現方法

今回はデザインの中にグラデーションを取り入れたケースについてまとめてみたいと思います。グラデーションとは、ある色から連続して別の色まで変化する状態のことを指します。グラデーションには線形や放射状などいろいろな形、また配色がありますが、ここではその形の種類に注目するのではなく、実際にデザインの中にグラデーション取り入れるケースについて挙げていきたいと思います。

 

【ハイライト】

グラデーションの始点から終点にかけて、徐々に色を明るく(明度を上げていく)していきます。そうすることにより、上から光が当たったような印象になります。

 

グラデーションを使ったデザイン表現方法

 

【ローライト】

グラデーションの始点から終点にかけて、徐々に色を暗く(明度を下げていく)していきます。そうすることにより、平面的なデザインに立体感が生まれます。

 

グラデーションを使ったデザイン表現方法

 

【ハイライト+ローライト】

ハイライトとローライトのグラデーションを組み合わせることで、よりリアルな質感が生まれます。光の当たり方と影のつき方を計算しながら設定することが重要になります。

 

グラデーションを使ったデザイン表現方法

 

【多色使いのグラデーション】

特定の色からもう一方の色への単調なグラデーションと異なり、微妙な色調の変化を表現することが可能になります。また使用する色によってはインパクトも大 きくなるので広告のコピー等でも良く見られます。リアルな質感を与えることが可能で、金属色などの表現にも適しています。

 

グラデーションを使ったデザイン表現方法

 

【セパレート】

グラデーションの範囲を極端に狭めることにより、色との間の境界線が目立つようになります。グラデーションの印象は薄くなり、それぞれの色が独立したデザインに近くなります。通常のグラデーションに比べてインパクトが強くなります。

 

グラデーションを使ったデザイン表現方法

 

【セパレート+ハイライト・ローライト】

境目が目立ったグラデーションに明度差を加えることによって、より複雑な質感を表現することが可能になります。立体感も生まれ、バナーやボタンに適用すると効果的です。

 

グラデーションを使ったデザイン表現方法

 

【写真に透過のグラデーションを重ねる】

写真の上に透過のグラデーションを重ねることにより、雰囲気を変えることや、味が出たり、深みのあるデザインを表現できます。レトロ感を出したり、メインの対象物に焦点を合わせたりすることも可能です。

 

グラデーションを使ったデザイン表現方法

 

【グラデーションオーバーレイ】

写真自体にグラデーションの色調を適用させると、独特な雰囲気を表現することが出来ます。自然界にはあまり無いイメージなので、リアリティを表現するのでははく、非現実的でアート性の強い印象になります。

 

グラデーションを使ったデザイン表現方法

 

このように、グラデーションをデザインに取り入れることよって様々な雰囲気を表現したり、印象を与えることが可能になります。以上よりグラデーションには下記の効果があると言えます。

 

  • ・明度をコントロールすることにより、立体的に見せることができる
  • ・微妙な色の変化を付けることで、リアリティを表現することができる
  • ・色数をたくさん使用することで、カラフルなデザインにすることができる

 

グラデーションを使いこなすことでデザイン表現の幅は広がりますが、特性や効果を把握した上で適用することが大切だと言えます。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】