商用無料！UIデザインに最適なSVGアイコンが1,130個、小さいスペースにも配置できる極小サイズ対応の優れもの
個人でも商用プロジェクトでも無料で利用できる、小さいスペースにも配置できる極小サイズ対応のSVGアイコンを紹介します。SVGアイコンなので、もちろん通常のサイズ、大きいサイズでも美しく表示されます。 UIデザイン用のアイコンはアウトライン・ソリッドの2種類計1,130アイテムが揃っています。しかもオープンソースなのは、嬉しいですね。 Teenyicons Teenyicons -GitHub Teenyiconsの特徴 Teenyiconsのダウンロード Teenyiconsの使い方 Teenyiconsの特徴 Teenyiconsは非常に小さいスペースにも配置できるようデザインされたSVGアイコンで、極小サイズ（15x15）でも鮮明に見えるよう設計されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
【2020年版】無料＆商用利用可能なイラスト画像を提供するWebサービス8選を大公開！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサイトやブログなどで有効活用できる無料のイラスト画像を提供するサービスを厳選してご紹介します。 いずれも個人利用はもちろん、商用利用もOKなイラスト画像ばかりなうえ、ユーザー登録も不要なので手軽にダウンロードして使うことができます。 Webサイトに効果的なアクセントを追加したい人も含めて、ぜひ参考にしてみてください！ 【 Open Doodles 】 印象的なデザインのイラスト画像を無料で提供しているのが「Open Doodles」です。 PNG / SVG形式の画像ファイルをダウンロード可能で、さまざまな用途のWebサイトやブログなどで有効活用できるものばかりです。 たとえば、Webサイトの単純なテキストであっても、以下のように画像を配置するだけで効果的なアクセントになるわけです。 また、ジェネレーター機能も提供されており、自分
無料で使いやすい！極上の最新フリーアイコン素材40選
この記事では、無料ダウンロードができて高品質なフリーアイコン素材を厳選してご紹介します。デザインコレクションに加えておくと、ウェブサイトやアプリの制作はもちろん、プレゼン資料やスライド作成、ブログ運営など何かと重宝するものばかりです。 無料で使いやすい！極上の最新フリーアイコン素材まとめ Motion Icons SVGアイコンにアニメーションを加えたデジアン素材で、無料版では12種類のモーションアイコンが実際のHTMLサンプルと一緒に同梱されています。 8000+ Essential Icon Pack 一度アプリをインストールしてしまえば、8000を超える商用ライセンス付きのアイコン素材から探すことができ、PhotoshopやIllustrator、Sketchといったデザインアプリに、ドラッグ＆ドロップでアイコンを追加できます。WindowsとMacどちらにも対応。 Pure Sug
高クオリティ！すぐに使える最新フリーアイコン素材40個まとめ 2019年5月度
この記事では、無料ですぐに利用できるハイクオリティな最新アイコン素材をまとめてご紹介します。これらの素材を利用すれば、ウェブサイトのUIデザインやプレゼン用の資料やスライド作成などを、手軽に仕上げることができます。 紹介しているアイコン素材は、シンプルで使い勝手の良いものから、デザイン性に優れたユニークなもの、IllustratorやPhotoshopはもちろん、SketchやFigmaなどのツールでも利用でき、何かと重宝するアイテムが揃っています。 イチからアイコンを作成する時間がないときや、オリジナルアイコンを作成したいときの参考にもなります。 高クオリティ！すぐに使える最新フリーアイコン素材まとめ Material Icons Library Googleのマテリアルデザインを基準としたアイコンデザイン1000種類以上画揃った素材セットで、SketchやPhotoshop、Adobe
ウェブデザイン制作が加速中！便利な最新オンラインツール53個まとめ
この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインツール 2. モックアップツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. アイコン素材パック 6. コラボレーション、共同作業ツール 7. 面白ツール 8. デザインコレクション ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ デザインツール SVG Colorizer 用意されたアイコンやキャラクターなどのSVG素材の配色をカスタマイズできる
ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ
ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる3,000種類のシンプルなアイコン素材
商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision
SVGの最適な書き出しのためにやった方が良いこと、やらない方が良いこと
SVGは、Illustratorで制作する図形のようなベクトルグラフィック形式の一種です。そのためベクトルグラフィックを制作する際に一般的に気をつけなければいけないことは、SVGにも当てはまります。 この記事では、Illustrator CCを使用してSVGを書き出す際にやった方が良いこと、やらない方が良いことについてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 03の内容を一部抜粋し、この記事用にリライトしたものです。 やったほうがよいこと 曲線のアンカーポイントを減らす ブラシツールで描いた曲線などは、そのままではアンカーポイントがかなり多くなってしまうことがあります。アンカーポイントが多すぎるとファイルサイズも大きくなるのて
もうアイコン素材に困らない！CC0でSVG完備、420種類のシンプルにデザインされたアイコン素材 -Evericons | コリス
シンプルなアイコン素材は、重宝しますよね。 Webサイトやブログ、スマホアプリなどにぴったりな、シンプルにデザインされた無料で利用できるSVG完備のアイコン素材を紹介します。 CC0なので、商用利用時のクレジット表記は不要、複製、改変、配布などもOKで、使い勝手がかなりよいと思います。
無料アイコン素材｜ICON BOX｜商用フリーアイコンがダウンロードできます
商用利用OKのフリーアイコンダウンロードサイト。テイストを揃えているので様々な案件で使いやすい！パスデータが生きているから簡単にカスタマイズもOK!
外部SVGスプライトのsvgxuse.jsによるIE11対応 - Qiita
背景 インラインSVGの<use>による外部SVGファイルの参照は、SVGファイルの一元化やコード軽量化などに一役買っている。 しかし、そのままではIE11では表示されない。IE11では<use>タグの外部参照は対応していないのだ。 そのため、泣く泣く<img>タグに変更したり、インラインSVGの<defs>に書き換えた方も多くいらっしゃるのではないだろうか。 しかし、インラインSVGの<defs>に書き換えると、そもそも外部SVGファイルとして一元管理ができなくなる上、html内のコード量も増える。 その他の手法として<img>に置き換える手法もあるが、この場合はスプライトできなくなってしまう。しかも、CSSによるfillの調整もできないので、「ロゴをスクロール時に白抜き・デフォルトカラーに切り替えたい」等には対応できない。 そこで今回、IcoMoonでのファイルであればIE11でも正常
実は簡単！3分で分かるSVGアイコンの作り方 | WebNAUT by Beeworks
※この記事は2017年3月30日に執筆された記事です。現在は仕様が異なる可能性があります。 スマートフォン、Retinaディスプレイ、など高解像度ディスプレイへの対応にSVGが注目されるなか、WebNAUTでもリニューアルに伴いアイコン類を全てSVGにしました。この記事では、サイトのリニューアルや立ち上げなど、沢山のアイコンをSVG形式で作るときに役立つ方法を紹介します。 SVGとは？ “Scalable Vector Graphics”の略称であり、簡単に言うとweb上で使える拡縮可能なベクター画像です。主に下記のようなメリットがあります。 スマホ対応・Retina対応も1つのファイルでOK 同じデザインなら、スマホ用、hover用、色違い…、などいくつもpng画像を用意する必要はありません。また、結果的に画像が減るのでHTTPリクエスト数の削減にも繋がります。 後からサイズや色の調整が
スゴイのが登場！アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーション ライブラリ -React Spring | コリス
最近のWebサイトやスマホアプリのUIにアニメーションを実装する際、CSSだとeasingやdurationなどが欠かせません。しかし現状CSSだとそこが限界です。 アニメーションの原則に基づき、パフォーマンスにも優れたアニメーションをシンプルなコードで実装できるReactのアニメーション ライブラリを紹介します。 React Spring -GitHub React Springはanimatedのフォークで、物理シミュレーションベースのanimatedやReact-Motionとは異なり、アニメーションの原則に基づいて構築されています。フレーム単位でコンポーネントをレンダリングするのではなく、DOMに直接コミットしアニメーションさせるので、一見複雑そうな動きでも非常にシンプルなコードで実装でき、パフォーマンスにも非常に優れています。 WebサイトやスマホアプリのUIにぴったりなReac
WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画
皆さん、師走をいかがお過ごしですか？ 今回は前々から試してみたかったSVGについての記事です。 基本予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました！「これからSVG試してみようかな？」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー！！ SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思
[JS]SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できるスクリプト -ProgressBar.js
Custom Shaped Path: 最後はパスを設定して描きます。 ProgressBar.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... <script src="js/progressbar.js"></script> </body> Step 2: HTML 一つ目のデモ「Line」を例に。 プログレスバーを配置する要素をdivなどで用意します。 <div class="example-container" id="example-line-container"></div> Step 3: JavaScript 「Line」を描くには下記のように指定します。 var element = document.getElementById('example-line-container'); var line = new
![[JS]SVGを使った滑らかで美しいアニメーションのプログレスバーを簡単に実装できるスクリプト -ProgressBar.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf1acaeed0e4459fde1bd723379666670b18a628/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102006.gif)
今年こそついにSVG元年？まだ間に合う！SVGの学習に役立つサイト紹介 - 聴く耳を持たない(片方しか)
先日AdobeからこのようなJavaScriptライブラリが公開されました Snap.svg http://plus.adobe-adc.jp/post-4817/ 以前から人気の高かった、IE6でもSVGを表示できるJavaScriptライブラリRaphaelの作者 Dmitry Baranovskiy氏による新たなライブラリで、Raphaelとの違いはSnap.svgではIEなら9以上対応とモダンブラウザを対象にしたこと。さらに自由度と表現力の高いことができるようになっているのが大きな特徴です。 こうしたJavaScriptライブラリがオープンソースで、そしてAdobeから公開されたのは大きなことでこれからSVGもどんどん普及していくのではないでしょうか。 まさに2013年こそついにSVG元年と言えるかもしれません*1。 ……とは言え、そもそもSVGってなに？という人もまだまだ少なくな
PGBET Lucky Neko - Demo, Pola Gacor, RTP Live Hari Ini
PGBET Memperkenalkan Lucky Neko, Slot PG Soft yang Menyenangkan di Indonesia PGBET sebagai mitra resmi dari PG Soft untuk game slot Lucky Neko, menawarkan game yang tengah banyak diminati di Indonesia. Jika Anda mencari informasi tentang Lucky Neko, data RTP Live hari ini, atau ingin mencoba bermain Demo, Anda telah berada di tempat yang tepat. Mari segera bergabung dengan PGBET dan nikmati seruny
レスポンシブデザイン・マルチカラー化対応で汎用性の高いSVG形式アイコン「Iconic」
「モダンなウェブのためのインタラクティブアイコンを」ということで作られたのが「Iconic」です。アイコンはSVG形式でも提供されているのでウェブ上でも簡単に利用でき、なおかつ、CSSを使ってアイコンの一部分だけに色をつけたり、マルチカラーで統一したり、変形させたり、レスポンシブにサイズ変更したりということも可能です。 Iconic https://useiconic.com/ Finally, Iconic is available! — In the kitchen at Iconic http://blog.useiconic.com/finally-iconic-is-available/ Iconicはもともとは2013年9月から10月にかけてKickstarterで出資を募っていたプロジェクトで、1万5000ドル(約153万円)の出資募集に対してなんと9万2000ドル(約937
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Free Line Icons for Designers and Developers - Lineicons
