綺麗なグラデーションを作るコツと実例
これを読むとグラデーションを作るコツがわかる!実例もご紹介しています。
最近、再注目されているグラデーション。でも、2色からなるグラデーションを自分で作ってみると、中間色が濁っていたり、思っていたのと違うことも。実はキレイなグラデーションを作るにはちょっとしたコツがあります。この記事では、グラデーションの作り方が理論的に分かるので、今後のデザイン作成にも生かすことができます。
1. 綺麗なグラデーションの配色を作るコツ
グラデーションは、色によっては中間色が暗い色になってしまいます。グラデーションは色の遷移があるので、綺麗なグラデーションを作るためには少しコツがいりますが、分かっちゃえばセンスなしでもOKです。
色相環を使おう!
色(色相)を色が近い順番にして円状に並べたものを色相環といいます。デザインの世界ではよく目にしますが、この色相環を使うとグラデーションの配色がカンタンになります。「普段の生活に役立つ!色の3属性と色相環」という記事では、これから出てくる明度や色相環などを詳しくご紹介しているので、参考にしてください。
明度を変えた同じ色のグラデーション
同じ赤でも「明るい赤」と「暗い赤」があります。これは赤の明度(明るさ)が違うためですが、このような「同じ色で明るさが違う2色」は、基本的に調和して見えるため、グラデーションでも無難な配色です。
色相環で隣の色を使ったグラデーション
色相環で両隣の色を使うグラデーションもよく使われています。色は人間の目に波長として捉えられますが、近い色はこの波長が似ているので人間は違和感なくこの2色を受け入れることができる、つまり相性が良い配色になります。
色相環で2つ隣の色を使うグラデーション
隣の色を使うよりも少し大胆なグラデーションにしたい場合は、色相環で2つ隣の色を使うグラデーションがオススメです。2つ隣の色も類似色に数えられることもあるため、グラデーションにしたときにきれいな色の遷移になります。
補色のグラデーションは避ける!
色相環で、向かい合う色を補色といいます。この補色を使ったグラデーションは、中間の色が汚い色になりやすく、見ている人に不快感を与えることがあるためあまりオススメしません。個人的には、色相環で使いたい色を決めたら、その色から90度以内にある色を使うと綺麗なグラデーションになるのではないかと思っています。
色は多くなるほど難しくなる!
色は1色決めるのも大変ですが、それが2色になるともっと難しくなります(体感では1色の4倍くらい)。3色になると体感では8倍くらい難しくなるイメージです。なのでグラデーションを使う時は2色程度までにした方がデザインがはかどると思います。
2. グラデーションの参考カラー配色をご紹介!
グラデーションにそのまま使える配色の組み合わせをご紹介します。カラーコードもご紹介しているので、コピペしてAirPriでも使用できます。カラーコードってなに?という方には「印刷知識!RGB、CMYKとは?」という記事がオススメです。
緑〜青系のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・00ff87 ・60efff
青系のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・0061ff ・60efff
赤〜橙のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・ff0f34 ・f89b29
橙〜黄のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・ff930f ・fff95b
水色〜紫のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・40c9ff ・e81cff
青系のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・9bafd9 ・103783
赤系のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・ef367a ・fa7456
黄〜緑系のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・f4f269 ・5cb270
緑〜紺系のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・95f9c3 ・0b3866
黄〜黄緑系のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・f3f520 ・59d102
黄緑〜青系のグラデーションの配色デザイン
このグラデーションに使用されている色は以下の2色です。
・00ee6e ・0c75e6
3. グラデーションにも役立つ他の記事
色について少しでも知っているほうが、綺麗なグラデーションを作れます。ここでは色に関する記事をまとめましたので、もっと知りたい!という方は下のリンクからどうぞ!
単色の色について知る
色の一つひとつには、人間が持っている色のイメージがあります。代表的な色のイメージをまとめたので、色に迷っている方にはオススメです。
複数の色を扱うとき
色は組み合わせて使うことも多いですが、組み合わせるとだんだん複雑になります。そんなときは配色を体系的にまとめた以下の記事がオススメです。グラデーションの色を考える足がかりにもなります。
AirPriのグッズの色との相性を知る
AirPriでTシャツ、パーカー、トートバッグ、ポリ袋を作成するときは、グッズそのものの色との相性も大切です。AirPriで一番多く色を取り揃えているTシャツを例に、Tシャツの色と合う色についてご紹介しています。
AirPriでのグラデーションの使い方
AirPriにももちろんグラデーションはありますが、他のグッズ作成アプリと違うのは、「グラデーションの色を自由に変えられる」ということです。AirPriでのグラデーションの使い方や、グラデーションの色を変える方法については「AirPriのアプリでのグラデーションの使い方」という記事で手順なども一緒にご紹介しています。
4. まとめ(AirPriのアプリでのグラデーションの使い方)
今回はAirPriのアプリでグラデーションを使う方法や、綺麗なグラデーションを作るコツ、実際にグラデーションに使える2色の例、グラデーションにも役立つ記事などをご紹介してきました。グラデーションは、プロはあまり使わない傾向にありましたが、近年ではインスタグラムのアイコンのようにグラデーションが見直され、よく使われるようになってきています。
この記事が、グラデーションを使うときの皆さんの参考になれば幸いです。最後までお読みいただきましてありがとうございました。