イラレで簡単！デジタルっぽいデザインに最適なグリッチノイズの作り方

この記事を書いた人

• 歴19年のグラフィックデザイナー
• 9年間Web制作会社に勤務 → 独立
• フリーランス10年目
• 一児のワーママ
• SNS総フォロワー1.7万人

グリッチノイズとは、映像の乱れやデジタルデータがバグのような不具合が発生した状態のことで、それを意図的に表現してインパクトのあるデザインを作ることができます。

イラストレーターを使って簡単におしゃれなグリッチノイズ文字が作成できますのでぜひ試してみてください。

STEP1. 加工したい文字を用意

 好きなフォントで文字を打ち込みアウトラインを作成します。
（作例はAdobe FontsのFatFrank Heavy使用しています。）

STEP2. ペンツールで文字上に横線を引く

STEP3. 線と文字を選択→分割をする

分割はパスファインダーのパネルから使用可能です。

STEP4. いらないオブジェクトを消した後、グループ解除する

いらないオブジェクトは、透明のオブジェクトを一つ選択した後
選択＞共通＞カラー（塗り）で全て選択できる

STEP5. ランダムに文字をずらす

オブジェクト＞変形＞個別に変形でパネルを出す。
パネルのランダムにチェックをして、
移動→水平方向でずらす位置を調節しながら文字をランダムにずらします。

STEP6. 微調整

文字間が詰まって見えたので文字間を空けました。
また、作成した文字を合成してパスをきれいな状態にします。
合成はパスファインダーのパネルから使用可能です。

STEP7. 背面にバグっぽくピンクとブルーの文字をのせます

文字を選択して、背面にコピー＆ペーストして右にずらしてピンクの文字を作り、同様にコピペをして、左にずらしてブルーの文字を作ります。

完成

完成です！
作例ではさらにイラストレーターでシアー加工をして、Figmaでノイズ加工もしてみました。

おわりに

いかがでしたでしょうか？
工数は多いように見えますが意外と簡単に作ることができます。
デジタル調のデザインを作る時には有用な加工法だと思います。
よろしければぜひお試し下さい。
ご覧いただきありがとうございました！

るり

グラフィックデザイナー

デザイン歴19年のグラフィックデザイナー。書籍や紙媒体、Webなど幅広い制作を行う会社で約9年勤務後、フリーランスに転向。現在は女性・ママ・子育て世代向けなど、信頼感のあるデザインを中心に活動中。一児の母で、自身の子育て経験を活かし保育・育児関連の案件にも携わっています。