![見出し画像](https://assets.st-note.com/production/uploads/images/101390628/rectangle_large_type_2_08fbca3dec70e9314fc236a7b0027eaf.jpeg?width=800)
Webデザイン2023_粒状感のあるイラスト
最近、ざらざらとした粒状感のあるイラストやそれをもちいたWebサイト、増えてきました。
これまでは、フラットなものが主流だったりでしたが、だんだんと、ガラスだったり、透明だったり、つるっとしてたり、ざらざらとしていたり"質感”を感じられるようなデザインが増えてきています!✨
粒状感のあるイラスト
![](https://assets.st-note.com/img/1679997252246-0MEEwAJ2C9.jpg?width=800)
上記のように、ざらっとした質感と、べた塗りのフラットな色面を組み合わせる事によってさまざまな質感をかんじられるデザイン。まるで、さまざまなメディウムを混ぜて色々な質感を楽しむアートのようです。
粒状感のあるWebサイト
![](https://assets.st-note.com/img/1679997508478-H1hqCp1oY5.jpg?width=800)
WEBメディア、WEBなどを運営している会社のコーポレイトサイトです。
IT関連のツールなど開発を行っている会社ですが、すっきりとしたシンプルで知的な世界観の中にふわっとうまれるアイデアのようなコンセプトを感じます。粒状感のある円形のイラストが効果的に配置されています。
![](https://assets.st-note.com/img/1679998223935-eMtD8vmGQY.jpg?width=800)
メディア事業やクリエイティブ事業を行う会社のコーポレイトサイトです。
ポイント的に粒状感のあるイラストやデザインが散りばめられているだけでなく、抽象的なアブストラクトデザインも取り入れられており、非常にトレンド感のあるWebサイトになっています。
![](https://assets.st-note.com/img/1679998616693-szbtcAx8Ml.jpg?width=800)
こちらは、スキンケアの ブランドサイトです。
ファーストビューに粒状感のあるデザインが全面に押し出されています。
やわらかい色合いにゆっくりとした動きがつけられているので、優しい印象を受けます。また、水滴の様なまるいデザインは、スキンケアの水分をイメージさせます。すっきりとした清潔感のあるサイトになっています。
![](https://assets.st-note.com/img/1679999648127-2xvmBGvqel.jpg?width=800)
こちらは、本と美容室のサイトです。
粒状感のあるイラストが前面に使用されており、レトロで懐かしい雰囲気を感じさせるサイトになっています。
粒状感の作り方
粒状感のあるイラストはIllustratorで簡単に作成することができます。
アドビヘルプセンターからIllustratorのチュートリアルとして動画と、段階を分けて解説してくれているページが公開されています。
![](https://assets.st-note.com/img/1679999612237-xCy8zyZdDy.jpg?width=800)
■まとめ
最近は、コーポレイトサイトにも”個性”と感じられるものが増えてきたなあと思います。よりクリエイティブ(創造的)なイメージを持たせたかったり、印象的で不思議な世界観を作り上げたいサイトにはとても適しています。粒状感のあるデザインは、レトロな雰囲気を感じられるものや、逆にモダンな雰囲気を感じさせる事ができます。
それぞれのサイトのイメージに合わせて、効果的に取り入れる事によって、トレンド感のある魅力的なサイトが作れそうですね!
この記事が気に入ったらサポートをしてみませんか?