昨今、ノイズ入りグラデーションを使ったデザインをよく見かける気がします。

参考：株式会社KKI様 採用サイト

参考：【栃木県宇都宮市】職員採用情報サイト

ざらっとしたノイズを入れることで、ただのべた塗り・グラデーションにはない質感が生まれ、どこかレトロでありながら新鮮な印象を受けます。
業務でも取り入れる機会がありましたので、備忘録としてまとめておこうと思います。

※説明には Adobe Illustrator（バージョン29.3.1）を使用しています。

また、ノイズグラデーションにはアピアランスパネルでの操作を用います。アピアランスについて詳しくは前回の記事をご覧ください。
【Illustrator】イラレのグラデーション機能、基礎を覚えよう！

STEP1. オブジェクトを作成

ノイズグラデーションを適用させたい図形（＝オブジェクト）を作成します。今回は線なし・塗りのみの正円にします。

この時の塗りの色は、正円オブジェクトにノイズグラデーションがかかった時の下地の色になります。

STEP2. アピアランスパネルで「新規塗り」を追加

正円オブジェクトを選択した状態で、「アピアランスパネル」から「新規塗り」を追加します。
下記画像のように、パネル内に「塗り」が2つある状態になればOKです。
（アピアランスパネルは、上部メニューから「ウィンドウ」⇒「アピアランス」で表示されます）

STEP3. 「新規塗り」にグラデーションを適用

上にある方の「塗り」にノイズグラデーションを適用します。
カラーの窓をクリックし、左から3つ目のグラデーションアイコンをクリックします。

今回は左側を白（#ffffff）の不透明度「0%」、右側を任意の色にし、不透明度「100%」に設定します。
（※注意！不透明度を「0%」にする側の色を白（#ffffff）にしないと、うまくノイズになりません。）

STEP4.グラデーション部分にノイズテクスチャを適用

グラデーションが適用できたら、アピアランスパネル下部の「fx（エフェクト）」のアイコンをクリックし、「テクスチャ」⇒「粒状」へと進みます。

ノイズの詳細設定パネルが開くので、ここで細かな数値や粒子の種類を決めます。

今回は「密度：23」「コントラスト：40」「粒子の種類：標準」に設定しましたが、数値を変えると様々な表情のノイズが表現できるので、ひとまず触ってみてください。設定できたら「OK」をクリックします。

STEP5. 塗りの描画モードを調整して完成

さいごに、作成したノイズグラデーションの描画モード（下のレイヤーとの合成方法）を設定します。

アピアランスパネルにてノイズグラデーションを適用した「塗り」下層の『不透明度』と書いてある部分をクリックすると、下記のようなパネルが開きますので、描画モードのプルダウンから最適なものを選択します。

『通常』のままですと、最初に設定した地の色が活かせないため、今回は『乗算』に設定しました。

こちらも、描画モード次第でいろんな表現ができます。

これでノイズグラデーションの完成です。

こちらの方法ですと、図形だけではなく、テキストやベクター状態のイラストにも、ノイズグラデーションをかけることができます。
テキストはアウトライン化していないので、打ち換えることも可能です。

また、別のオブジェクトに同じノイズグラデーションを適用させたい場合は、スポイトツールを使うと、アピアランスごとコピーしてくれるため便利です。グラフィックスタイルに登録しておくのも良いですね。

さいごに

いかがでしたでしょうか？

ノイズと一口に言っても、様々な種類があり、色や効果の組み合わせで多様な表現ができそうです。「単純なべた塗りやグラデーションだとなにか足りない…」となったときに、大活躍しそうですね！

この記事を書いた人

わたなべソリューション事業部 エディター 兼 webディレクター

関西の芸術大学で染織・画像編集ソフトを学ぶ。卒業後、県内の織物会社で織物 の製造開発・生産管理・営業を経験する。その後、web制作未経験ながらアーティスへ入社し、webエディターとしてホームページのコンテンツ制作・ディレクションに携わっている。仕事は素早く・丁寧にを心掛けています！

この執筆者の最新記事

この執筆者の記事一覧

• 2025年3月19日WEB【Illustrator】イラレのグラデーションにノイズを加えてみよう！
• 2025年3月19日WEB【Illustrator】イラレのグラデーション機能、基礎を覚えよう！
• 2024年12月23日WEB【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【後編・書き出しまで】
• 2024年12月4日WEB【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【中編】