owned mediaウェブ制作に役立つコンテンツを発信中!

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

最終更新日: Update!!
今回はデザインの中にグラデーションを取り入れたケースについてまとめてみたいと思います。グラデーションとは、ある色から連続して別の色まで変化する状態のことを指します。グラデーションには線形や放射状などいろいろな形、また配色がありますが、ここではその形の種類に注目するのではなく、実際にデザインの中にグラデーション取り入れるケースについて挙げていきたいと思います。  
【ハイライト】
グラデーションの始点から終点にかけて、徐々に色を明るく(明度を上げていく)していきます。そうすることにより、上から光が当たったような印象になります。   グラデーションを使ったデザイン表現方法  
【ローライト】
グラデーションの始点から終点にかけて、徐々に色を暗く(明度を下げていく)していきます。そうすることにより、平面的なデザインに立体感が生まれます。   グラデーションを使ったデザイン表現方法  
【ハイライト+ローライト】
ハイライトとローライトのグラデーションを組み合わせることで、よりリアルな質感が生まれます。光の当たり方と影のつき方を計算しながら設定することが重要になります。   グラデーションを使ったデザイン表現方法  
【多色使いのグラデーション】
特定の色からもう一方の色への単調なグラデーションと異なり、微妙な色調の変化を表現することが可能になります。また使用する色によってはインパクトも大 きくなるので広告のコピー等でも良く見られます。リアルな質感を与えることが可能で、金属色などの表現にも適しています。   グラデーションを使ったデザイン表現方法  
【セパレート】
グラデーションの範囲を極端に狭めることにより、色との間の境界線が目立つようになります。グラデーションの印象は薄くなり、それぞれの色が独立したデザインに近くなります。通常のグラデーションに比べてインパクトが強くなります。   グラデーションを使ったデザイン表現方法  
【セパレート+ハイライト・ローライト】
境目が目立ったグラデーションに明度差を加えることによって、より複雑な質感を表現することが可能になります。立体感も生まれ、バナーやボタンに適用すると効果的です。   グラデーションを使ったデザイン表現方法  
【写真に透過のグラデーションを重ねる】
写真の上に透過のグラデーションを重ねることにより、雰囲気を変えることや、味が出たり、深みのあるデザインを表現できます。レトロ感を出したり、メインの対象物に焦点を合わせたりすることも可能です。   グラデーションを使ったデザイン表現方法  
【グラデーションオーバーレイ】
写真自体にグラデーションの色調を適用させると、独特な雰囲気を表現することが出来ます。自然界にはあまり無いイメージなので、リアリティを表現するのでははく、非現実的でアート性の強い印象になります。   グラデーションを使ったデザイン表現方法   このように、グラデーションをデザインに取り入れることよって様々な雰囲気を表現したり、印象を与えることが可能になります。以上よりグラデーションには下記の効果があると言えます。  
  • ・明度をコントロールすることにより、立体的に見せることができる
  • ・微妙な色の変化を付けることで、リアリティを表現することができる
  • ・色数をたくさん使用することで、カラフルなデザインにすることができる
  グラデーションを使いこなすことでデザイン表現の幅は広がりますが、特性や効果を把握した上で適用することが大切だと言えます。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram