こんにちは、はるぴです。
Webデザインを作っていて、ビジュアル的に表現したい時に写真を使う方も多いのではないでしょうか。
写真でももちろん表現することは可能ですが、イラストを使用することでいつもよりもちょっと親しみやすいデザインに仕上げることができると思います。
また、イラストはあしらいなどにも使用しやすいので、デザインのワインポイントにすることも可能です。
そこで、ユーザー登録不要・クレジット表記不要・商用利用可能で使いやすく、親しみやすさがでる手書きイラストのサイトを５つ集めましたので紹介していきたいと思います。
目次
１：Loose Drawing
Loose Drawing | 無料で商用利用可なフリーイラスト
シンプルで柔らかい印象のイラストをダウンロードできるイラストサイト。
さまざまなシーンの人物イラストや物のイラスト・アイコンを数多く掲載されているので、内容に合わせたデザインを探すことができます。線画データとは別に、赤・緑・青・黄・黒の5色のカラーが事前に入っているデータがあるので、サイトのテーマカラーに合わせた配色でダウンロードすることができます。
詳細
- 商用利用：可能
- ユーザー登録：不要
- リンクやクレジット表記：不要
- 利用規約範囲内での編集や加工：可能
- ダウンロード形式：png
２：ビジネス素材フリーイラスト
会社(ビジネス)専門 無料イラスト/無料ダウンロード | WEB素材(ウェブ素材)
ビジネスシーン専門のイラストサイトです。
ビジネスマン向けのWebサイトだけど、より親しみやすいデザインに仕上げたい時に大活躍します。
会議・受付・営業などよくあるビジネスシーンを表現するイラストが数多くあるので、ビジネスシーンに関する情報が多いサイトなどに向いていると思います。
詳細
- 商用利用：可能
- ユーザー登録：不要
- リンクやクレジット表記：不要（YouTubeでの利用の際は概要欄への記載）
- 利用規約範囲内での編集や加工：可能
- ダウンロード形式：png、ai（イラストレーターデータ）
３：ソコスト
柔らかく可愛らしいイラストが特徴的なサイトです。
一つのイラストで、線画・線ありカラー・線なしカラー・カラーコード指定ありの4パターンのデータをダウンロードすることができます。さまざまなシーンに合わせたイラストがたくさんあるので、使いたい内容のイラストを見つけることができます。
詳細
- 商用利用：可能
- ユーザー登録：不要
- リンクやクレジット表記：不要
- 利用規約範囲内での編集や加工：可能
- ダウンロード形式：png、svg、eps
４：Linustock
シンプルな線画イラスト素材は「Linustock」- 無料ダウンロード
線が細くシンプルなイラストがおしゃれで特徴的なサイトです。
一つのイラストで、線画データと線なしカラーデータをダウンロードすることができます。
よくあるシーンのイラストから、ちょっと笑えるシーンのイラストがあり、他サイトではなかなか見つからないシーンのイラストがあるのもこのサイトの特徴です。
また、サイト内にてイラストレーターでのイラスト加工方法を紹介しているので、それを参考にしながらデザインにあったイラストに加工するとよりデザインに馴染むと思います。
詳細
- 商用利用：可能
- ユーザー登録：不要
- リンクやクレジット表記：不要
- 利用規約範囲内での編集や加工：可能（サイト内にて加工テクニック紹介）
- ダウンロード形式：png、eps
５：shigureni
shigureni free illust │ 素朴で可愛い、女の子のイラスト素材サイト
素朴な女の子のイラスト専門サイトです。
ビジネスシーンよりも生活シーンのイラストが多いため、そのような内容のデザインを作る時にぴったりです。また、カラフルなイラストがたくさんあるので、シンプルなデザインのアクセントとして使えるイラストになっています。
詳細
- 商用利用：可能
- ユーザー登録：不要
- リンクやクレジット表記：不要
- 利用規約範囲内での編集や加工：可能
- ダウンロード形式：png、svg（svgデータのみ有料）
【おまけ】Photoshopでイラストのカラーを変更する方法
イラストは線画ではなく色をついたものを使いたいけど、ダウンロードできる配色だとデザインに合わないということもあるのではないでしょうか。
そんな時は、Photoshopを使用して色味を変更しましょう。
手順としては下記5つの手順となります。
１：イラストサイトからカラー付のpngデータをダウンロード
２：ダウンロードしたpngデータをPhotoshopで開く
３：上部メニューから、イメージ→色調補正→色の置き換えを選択
４：置き換えたい箇所の現在のカラーと変更後のカラーをそれぞれ指定
この画面を開くとマウスカーソルがスポイトになるので、変更したい色をクリックすると対象カラーが抽出されます。変更後の色はカラーコードで指定ができます。
５：OKをクリックし一括変更。
最後に
Webデザインに使用できるイラスト素材サイト５つと配色をPhotoshopで変更する方法をお伝えしましたが、いかがでしたでしょうか。
写真だけを使うのではなく、イラスト素材を使えるといつもよりちょっと親やすいデザインを作ることができ、デザインの幅が広がると思うのでぜひ素材を探してみてください。
他にも良さそうな素材サイトがあれば改めて記事でまとめたいとおもいます。
皆さんがデザイン制作する時の参考情報になると嬉しいです！
最後まで読んでいただきありがとうございました。
