paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

20200204140738

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

プログラミング動画学習 paizaラーニング

【2020年版】無料&商用利用可能なイラスト画像を提供するWebサービス8選を大公開!

f:id:paiza:20200415100545j:plain
どうも、まさとらん(@0310lan)です!

今回は、Webサイトやブログなどで有効活用できる無料のイラスト画像を提供するサービスを厳選してご紹介します。

いずれも個人利用はもちろん、商用利用もOKなイラスト画像ばかりなうえ、ユーザー登録も不要なので手軽にダウンロードして使うことができます。

Webサイトに効果的なアクセントを追加したい人も含めて、ぜひ参考にしてみてください!

Open Doodles

f:id:paiza:20200415100839j:plain

印象的なデザインのイラスト画像を無料で提供しているのが「Open Doodles」です。

PNG / SVG形式の画像ファイルをダウンロード可能で、さまざまな用途のWebサイトやブログなどで有効活用できるものばかりです。


たとえば、Webサイトの単純なテキストであっても、以下のように画像を配置するだけで効果的なアクセントになるわけです。

f:id:paiza:20200415100854j:plain


また、ジェネレーター機能も提供されており、自分の好きなカラー配色に変更できるのも特徴です。

f:id:paiza:20200415100908j:plain

Webサイトのカラーテーマに合わせたり、イラストが目立つように濃い配色に変えるなどさまざまな活用方法が考えられますね。


<備考>

※2020年4月時点


<参考リンク>

Free Illustrations

f:id:paiza:20200415101127j:plain

フリーのWebデザイナー兼イラストレーターの「Lukaz Adam」氏が無料のイラスト画像を提供しているのが「Free Illustrations」です。


驚くのはその品質の高さと多彩なジャンルをカバーするイラストです。

f:id:paiza:20200415101212j:plain

いずれもクリック1つですぐにダウンロード可能で、基本的にはSVG形式の画像ですが種類によってはPNGやGIFなども含まれています。

特にWebサイトの構築などに便利なアイコンセットは、どれも素敵なデザインばかりで種類も多いのでオススメです。プレゼン資料などに使えるアイコンやイラストもいくつか用意されています。


<備考>

  • SVG形式(種類に応じてPNG / GIFもあり)
  • 個人、商用利用可能
  • ライセンス:MIT

※2020年4月時点


<参考リンク>

Illustration Gallery

f:id:paiza:20200415101408j:plain

シンガポールを拠点にして多彩なデザインを手がける「ManyPixels」が無料のイラスト画像を提供しているのが「Illustration Gallery」です。

Webページに貼り付けるだけでとても優しい印象を与えてくれるイラストばかりで、公開されているパターンも非常に多いのが特徴です。もちろん、カラーの変更やキーワードからの検索にも対応しています。


また、特定のジャンルでよく使う言葉をタグ付けしているので、任意のタグをクリックするだけで目的のイラストを探しやすくする工夫もされています。(複数タグもOK)

f:id:paiza:20200415101455j:plain

どんなWebページとも親和性が高いイラストなのが魅力です。


<備考>

※2020年4月時点


<参考リンク>

Feather

f:id:paiza:20200415101840j:plain

シンプルで統一性に優れたオープンソースのアイコンセットを無料で提供しているのが「Feather」です。

「12px × 12px」〜「100px × 100px」のサイズに変更可能で、ストロークの太さやカラーも自由にカスタマイズできます。好きなアイコンをクリックすればSVG形式の画像をダウンロードできるようになっています。


また、JavaScriptライブラリとしても提供されているので画像をダウンロードしなくても利用できるのが特徴です。

たとえば、以下のようなHTMLタグを配置します。

<i data-feather="camera"></i>

「data-feather」属性値にはサイトに掲載されているアイコンの名称を指定します。上記の場合はカメラアイコンになります。


あとはJavaScriptからreplace()を実行するだけでWebサイトに表示されます。

feather.replace();


replace()の引数にはスタイルを以下のように指定することも可能です。

feather.replace({
    'color': '#f00',  // アイコンのカラー
    'width': 48,  // アイコンの幅
    'height':48,  // アイコンの高さ
    'stroke-width': 1  // 線の太さ
});

好みに合わせて調整できるのは便利ですね。

ちなみに「feather.icons.circle.toSvg()」を実行するとSVGタグを動的に生成できる機能も提供されているので活用範囲は広いでしょう。

なお、paizaラーニングでは、「HTML/CSS入門編」や「JavaScript入門編」の学習講座を公開していますので合わせてチェックしてみてください。


<備考>

※2020年4月時点


<参考リンク>

unDraw

f:id:paiza:20200415102244j:plain

主にWebサービスやスタートアップなどに活用できるイラスト画像が無料で提供されているのが「unDraw」です。

ネットショップ・飲食・ビジネス・動画・プログラミング・音楽・フィットネス…など、さまざまなジャンルに向けたWebサービスを始めるなら、最適なイラストが見つけやすくなっているのが特徴でしょう。


Google検索のようにキーワードを入力すると素早く候補が一覧表示されるのは便利です。

f:id:paiza:20200415102342j:plain

Webサイトやアプリのデザイン作成ソフトとして知られる「Adobe XD」向けに、専用の拡張機能も提供されています。

これによりAdobe製品を利用したより高度な使い方も手軽にできるようになるわけです。


<備考>

※2020年4月時点


<参考リンク>

MakeEmoji

f:id:paiza:20200415102618j:plain

画像をアップロードするとSlackなどのチャットで利用できるアイコン画像を無料で作れるのが「MakeEmoji」です。もちろんWebサイトのアイコンとしても活用できます。

複数のアニメーション付きアイコンが自動生成されるのが特徴的で、カラーエフェクトや回転・スライドなどを含めて20パターンのGIFアイコンをダウンロードできます。


Slackのチャットで使いたい場合は、投稿画面で絵文字ウィンドウを表示して【絵文字絵を追加する】ボタンをクリックします。

f:id:paiza:20200415102731j:plain


取得したGIFアイコンをアップロードして好きな名称を決めます。

f:id:paiza:20200415102741j:plain


すると、チャット入力ボックスで指定したGIFアイコンが選択できるようになります!

f:id:paiza:20200415102752j:plain

このようにチャットからWeb開発まで幅広く楽しめるアイコン画像を作れるのがおもしろいところでしょう。


<備考>

※2020年4月時点


<参考リンク>

Flow Lines

f:id:paiza:20200415102950j:plain

いくつかの関数とパラメータを調整することで幾何学的なラインパターンを作り、SVG画像としてダウンロードできるのが「Flow Lines」です。


パラメータ調整が面倒だな…という人は「ランダムボタン」をクリックすることで、多種多様なパターンを自動生成する機能も提供されています。

f:id:paiza:20200415103009j:plain

1クリックでSVG画像としてダウンロードできますが、URLをシェアするだけで不特定多数の人に画像を共有することもできるので便利です。

ちょっと変わったデザインを取り入れたり、アクセントを効果的に使いたい場合には便利なサイトになるでしょう。


<備考>

※2020年4月時点


<参考リンク>

Codeimg

f:id:paiza:20200415103139j:plain

ソースコードを画像に変換して無料ダウンロードできるのが「Codeimg」です。

プログラム関連のWebコンテンツとして利用したり、ライブラリやフレームワークのマニュアルに挿入する用途にも使えるでしょう。

ユニークなのはエディタのカスタマイズが細かく調整できる点で、行番号の有無やフォントサイズはもちろんのことエディタをMac風にするかWindows風にするかも選ぶことができます。


また、70種以上のプログラミング言語を自動認識してシンタックスハイライトを適用してくれるうえ、50種類以上あるエディタのテーマカラーも指定できます。

f:id:paiza:20200415103211j:plain

ソースコードはコピペで貼り付けるだけなので簡単ですが、近いうちにGitHubから読み込める機能も予定されているようです。


<備考>

※2020年4月時点


<参考リンク>

動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


まとめ

今回は、Webサイトなどで使える無料イラスト画像を提供するサービスをご紹介しました。

なお、基本的に無料で使うことができますが、実際に利用する際は、必ず利用前にライセンス情報や利用規約を確認するようにしてください。

Webページにこれらのイラストを効果的に配置して、ぜひ楽しいWebサイトの構築を試してみてください。




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング Copyright Paiza, Inc, All rights reserved.